/* Self-hosted Vazirmatn — Google Fonts is unreliable from Iran. */
@font-face{font-family:"Vazirmatn";src:url("/site/fonts/vazirmatn_regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("/site/fonts/vazirmatn_medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("/site/fonts/vazirmatn_semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("/site/fonts/vazirmatn_bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --ink:#0E1016; --ink-2:#1B1E27; --muted:#6B7080; --line:#E6E7EE;
  --bg:#FFFFFF; --bg-alt:#F6F7FB;
  --brand:#2F5FEA; --brand-2:#7C4DFF; --accent:#00C2A8;
  --radius:20px; --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Vazirmatn","IRANSans",Tahoma,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
h1,h2,h3{line-height:1.35;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.5rem,3vw,2.4rem);margin-bottom:2rem}
h3{font-size:1.1rem;margin-bottom:.5rem}
p{color:#3A3F4C}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:50;transition:.25s}
.nav.solid{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem;white-space:nowrap}
.brand-mark{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 14px rgba(47,95,234,.4)}
.nav-links{display:flex;gap:22px;margin-inline-start:auto;font-size:.94rem;color:var(--muted)}
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--brand)}
.nav-cta{display:flex;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.6rem 1.15rem;font-size:.92rem;font-weight:500;transition:.2s;border:1px solid transparent;white-space:nowrap}
.btn-lg{padding:.85rem 1.7rem;font-size:1rem}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(47,95,234,.28)}
.btn-primary:hover{background:#2450d8;transform:translateY(-1px)}
.btn-outline{border-color:var(--line);background:#fff}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:#F0F1F6}

/* --------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;padding:clamp(3rem,8vw,6.5rem) 0 clamp(3rem,7vw,5rem);text-align:center}
.mesh{position:absolute;inset:-30% -10% auto;height:120%;z-index:-1;
  background:
    radial-gradient(38% 42% at 22% 18%,rgba(47,95,234,.20),transparent 62%),
    radial-gradient(34% 38% at 80% 12%,rgba(124,77,255,.18),transparent 60%),
    radial-gradient(30% 34% at 60% 62%,rgba(0,194,168,.14),transparent 62%);
  filter:blur(28px)}
.eyebrow{display:inline-block;font-size:.82rem;color:var(--brand);background:rgba(47,95,234,.09);
  border:1px solid rgba(47,95,234,.18);padding:.3rem .85rem;border-radius:999px;margin-bottom:1.4rem}
.grad{background:linear-gradient(120deg,var(--brand),var(--brand-2) 55%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);color:#4A5061;max-width:44rem;margin:1.4rem auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:3.6rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem .8rem;
  box-shadow:0 1px 2px rgba(16,20,40,.03)}
.stat b{display:block;font-size:1.55rem;background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.84rem;color:var(--muted)}

/* ------------------------------------------------------------ section */
.section{padding:clamp(3.5rem,7vw,5.5rem) 0}
.section.alt{background:var(--bg-alt)}
.tag{display:inline-block;font-size:.78rem;letter-spacing:.04em;color:var(--brand);
  background:rgba(47,95,234,.08);padding:.28rem .8rem;border-radius:999px;margin-bottom:1rem}
.tag.light{color:#9FB6FF;background:rgba(159,182,255,.12)}

.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.card p{font-size:.94rem;color:#4A5061}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;transition:.25s}
.feature:hover{border-color:rgba(47,95,234,.35);box-shadow:0 12px 34px rgba(16,20,40,.07);transform:translateY(-3px)}
.feature p{font-size:.94rem}
.ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));margin-bottom:1rem}

/* ---------------------------------------------------------------- ai */
.dark{background:linear-gradient(160deg,#0E1016,#161A26 60%,#101828);color:#EDEFF5}
.dark h2{color:#fff}
.dark .lede{color:#AFB6C7;margin-inline:0}
.ai-in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.ticks{list-style:none;margin-top:1.6rem;display:grid;gap:.75rem}
.ticks li{position:relative;padding-inline-start:1.8rem;color:#C6CCDA;font-size:.96rem}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--accent);font-weight:700}
.chat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:1.3rem;display:grid;gap:.7rem;backdrop-filter:blur(8px)}
.bubble{padding:.8rem 1rem;border-radius:16px;font-size:.92rem;max-width:86%;line-height:1.75}
.bubble.user{background:var(--brand);color:#fff;margin-inline-start:auto;border-bottom-left-radius:5px}
.bubble.bot{background:rgba(255,255,255,.09);color:#E4E8F2;border-bottom-right-radius:5px}

/* -------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;inset-block-start:1rem;inset-inline-end:1.2rem;
  font-size:2.4rem;font-weight:700;color:rgba(47,95,234,.10);line-height:1}
.step b{display:block;font-size:1.05rem;margin-bottom:.4rem}
.step p{font-size:.92rem;color:#4A5061}

/* ---------------------------------------------------------------- cta */
.cta{padding:clamp(3.5rem,7vw,5.5rem) 0;background:var(--bg-alt)}
.cta-in{text-align:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(2rem,5vw,3.4rem)}
.cta-in h2{margin-bottom:.6rem}
.cta-in p{color:var(--muted);margin-bottom:.4rem}

.foot{border-top:1px solid var(--line);padding:1.8rem 0}
.foot-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.88rem}
.muted{color:var(--muted)}

/* ------------------------------------------------------------ motion */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* No JS? Never leave the page blank. */
.no-js .reveal{opacity:1;transform:none}

@media (max-width:1000px){
  .nav-links{display:none}
  .ai-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:520px){
  .nav-cta .btn-ghost{display:none}
}