:root{
  --bg:#060b14; --fg:#e7eefc; --muted:#a9b6d3;
  --primary:#0ea5e9; --accent:#8b5cf6;
  --card:rgba(255,255,255,0.06); --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.12); --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Vazirmatn",system-ui,Arial;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(139,92,246,.18), transparent 55%),
    var(--bg);
  color:var(--fg); line-height:1.75;
}
a{color:inherit}
.container{width:min(100%,1120px); margin-inline:auto; padding:0 16px}
.grad{background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(12px);
  background: linear-gradient(180deg,rgba(6,11,20,.85),rgba(6,11,20,.55)); border-bottom:1px solid var(--border)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; font-weight:800}
.brand-mark{display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:var(--shadow)}
.brand-text{letter-spacing:.2px}
.site-nav{display:none; gap:14px}
.site-nav a{padding:10px 14px; text-decoration:none; border-radius:12px; border:1px solid transparent}
.site-nav a:hover{border-color:var(--border); background-color:rgba(255,255,255,.04)}
.cta-link{background:linear-gradient(90deg,var(--primary),var(--accent)); border:none}
.nav-toggle{width:44px;height:44px; background:transparent; border:1px solid var(--border); border-radius:12px; display:grid;place-items:center; cursor:pointer; color:var(--fg)}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--fg); margin:3px 0; transition:.25s ease}

/* Hero */
.hero{padding:92px 0 48px}
.hero-grid{display:grid; gap:28px}
.hero-text .badge{width:max-content; background:rgba(14,165,233,.15); color:#bfe8ff; padding:6px 12px; border:1px solid rgba(14,165,233,.35); border-radius:999px; font-size:.86rem;}
.hero h1{margin:.6em 0 .3em; line-height:1.25; font-size:2rem}
.lead{color:var(--muted)}
.hero-actions{display:flex; gap:12px; margin:18px 0}
.hero-art svg{width:100%; height:auto; color:var(--primary)}

/* Sections */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.section-head{margin-bottom:24px}
.section-head h2{margin:0 0 8px}
.section-lead{color:var(--muted); margin:0}

/* Cards & Pricing */
.cards{display:grid; gap:16px}
.cards.two{grid-template-columns:1fr}
.cards.three{grid-template-columns:1fr}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.25)}
.card.highlight{outline:2px dashed rgba(255,255,255,.15)}

.pricing{display:grid; gap:16px}
.tier{position:relative}
.tier-badge{position:absolute; top:-12px; right:16px; background:rgba(255,255,255,.1); border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:.8rem}
.tier-badge.hot{background:linear-gradient(90deg,var(--primary),var(--accent)); border:none}

/* Note */
.note{margin-top:18px; padding:16px; border-radius:14px; border:1px solid var(--border)}

/* Accordion */
.accordion details{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:10px}
.accordion summary{cursor:pointer; font-weight:600}

/* CTA */
.cta-inner{border-radius:calc(var(--radius) + 6px); padding:24px; border:1px solid var(--border)}
.cta .cta-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.contact-info a{text-decoration:none; color:#bfe8ff}

/* Footer */
.site-footer{padding:40px 0; border-top:1px solid var(--border)}
.foot-grid{display:grid; gap:16px}
.foot-links{display:flex; gap:14px; list-style:none; padding:0; margin:0}
.foot-links a{text-decoration:none}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid var(--border); text-decoration:none; transition: transform .14s ease, background .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.small{padding:10px 14px; font-size:.95rem}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent)); border-color:transparent}
.btn-ghost{background:rgba(255,255,255,.04)}

/* WhatsApp FAB */
.whatsapp-fab{position:fixed; bottom:18px; left:18px; width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(135deg,#25D366,#128C7E); color:white; text-decoration:none; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.35); z-index:60}
.whatsapp-fab:hover{transform:translateY(-2px)}

/* Responsive */
@media (min-width:720px){
  .site-nav{display:flex}
  .nav-toggle{display:none}
  .hero{padding:110px 0 64px}
  .hero-grid{grid-template-columns:1.06fr .94fr; align-items:center}
  .hero h1{font-size:2.6rem}
  .cards.two{grid-template-columns:1fr 1fr}
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .pricing{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:auto 1fr auto; align-items:center}
}