@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --bg:#0b1020;
  --panel:#0f1428;
  --muted:#9aa3b2;
  --text:#e8ecf3;
  --brand:#5b8cff;
  --brand-2:#18c3ff;
  --green:#22c55e;
  --border:#1c2340;
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#070b18,#0a0f22 40%,#0b1126);
  color:var(--text);
  line-height:1.65;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(8,12,24,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;color:var(--text);text-decoration:none}
nav a{color:var(--muted);margin-left:18px;text-decoration:none}
nav a:hover{color:var(--text)}
.btn{display:inline-block;border:1px solid var(--border);padding:.6rem 1rem;border-radius:10px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.02)}
.btn--sm{padding:.45rem .8rem}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;color:#fff;box-shadow:var(--shadow)}
.btn--ghost{background:transparent;border-color:#2a335a}

/* Hero */
.hero{padding:64px 0;border-bottom:1px solid var(--border)}
.hero__wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch}
.hero__text h1{font-size:2.2rem;line-height:1.2;margin-bottom:.6rem}
.lead{color:#cfd6e6;max-width:55ch}
.hero__cta{margin:20px 0}
.hero__cta .btn{margin-right:10px}

.hero__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;list-style:none;padding:0}
.kpi__label{color:var(--muted);font-size:.8rem}
.kpi__value{font-weight:800;font-size:1.2rem}
.kpi__note{color:#aab3c6;font-size:.8rem}
.text-green{color:var(--green)}

.card{background:linear-gradient(180deg,#101735,#0e1531);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.3rem}
.muted{color:var(--muted)}
.links a{color:#9ec5ff;margin-right:14px;font-size:.9rem}

/* Sections */
.section{padding:56px 0}
.section--alt{background:linear-gradient(180deg,#0b1126,#0b142e);border-top:1px solid var(--border)}
.section--accent{background:linear-gradient(180deg,#0c1738,#0b1633);border-top:1px solid var(--border)}

.grid-2{display:grid;gap:28px;grid-template-columns:repeat(2,1fr)}
.center{text-align:center}
.checklist li,.bullets li{margin:10px 0}
.checklist li::marker{content:"✔ "}
.bullets li::marker{content:"• "}
.kpi-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px;text-align:center}
.kpi__title{color:var(--muted);font-size:.9rem}
.kpi__big{font-size:1.6rem;font-weight:800;margin:4px 0}
.kpi__sub{color:#a4afc8;font-size:.85rem}

.cta{margin:18px 0}
.cta .btn{margin:0 10px 10px 0}

.footer{border-top:1px solid var(--border);background:#090e1a}
.footer__wrap{display:flex;justify-content:space-between;align-items:center;min-height:80px}
.footer .muted{font-size:.9rem}

/* Responsive */
@media(max-width:980px){
  .hero__wrap{grid-template-columns:1fr}
  .hero__kpis{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .kpi-cards{grid-template-columns:1fr 1fr}
  .footer__wrap{flex-direction:column;gap:8px;padding:18px 0}
}
@media(max-width:560px){
  .hero__kpis{grid-template-columns:1fr}
  .kpi-cards{grid-template-columns:1fr}
}


/* Fix chart stretching */
.hero__card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card canvas {
  width: 100% !important;
  height: 220px !important; /* می‌تونی کمتر یا بیشترش کنی (مثلاً 180px) */
  max-height: 240px;
}