:root{
  --bg:#0e1126;
  --fg:#f3f6ff;
  --muted:#b4bdd3;
  --brand:#7c5cff;
  --brand-2:#3be6cb;
  --card:#ffffff1a;
  --border:#ffffff26;
  --glass:#14183680;
  --shadow: 0 40px 80px -30px #000a;
  --radius: 22px;
    --text: #ffffff !important;

}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1150px 700px at 80% -10%, #2a2f59 0%, transparent 60%), var(--bg);
  color:var(--fg); font-family:'Vazirmatn',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; line-height:1.9;
}

/* bg */
.bg-blob{position:fixed; inset:auto; width:720px; height:720px; filter: blur(90px); opacity:.35; z-index:0; pointer-events:none}
.blob-1{top:-140px; left:-160px; background: radial-gradient(closest-side at 40% 40%, #7c5cff, transparent)}
.blob-2{bottom:-180px; right:-140px; background: radial-gradient(closest-side at 60% 60%, #3be6cb, transparent)}
.blob-3{top:38%; left:50%; transform:translateX(-50%); width:900px; height:900px; background: radial-gradient(circle at 50% 50%, #ff7ce8, transparent)}

.container{max-width:1440px; margin:0 auto; padding:0 28px}

.glass{
  position:relative; background:linear-gradient(180deg, #ffffff22, #ffffff12);
  border:1px solid var(--border); border-radius:var(--radius); backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

/* header */
.site-header{position:sticky; top:0; z-index:10; margin:16px 0; }
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:12px 16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; font-size:1.12rem}
.logo-dot{display:inline-flex; width:16px; height:16px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.brand-title{letter-spacing:.2px}
.nav a{color:var(--fg); text-decoration:none; margin:0 10px; opacity:.9}
.nav a:hover{opacity:1}
.cta .btn{margin-inline-start:10px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; border-radius:14px; padding:12px 18px; border:1px solid var(--border);
     text-decoration:none; color:var(--fg); transition:.2s ease; backdrop-filter: blur(6px); font-weight:700}
.btn:hover{transform: translateY(-2px)}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:0; color:#0a0d1a}
.btn-ghost{background:transparent}
.btn-sm{padding:8px 12px; font-size:.92rem}
.btn-xl{padding:16px 24px; font-size:1.08rem}

/* hero */
.hero{padding:56px 0 24px; position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:stretch}
.hero-copy{padding:34px}
.hero-copy h1{line-height:1.45; margin:0 0 14px; font-size:2.1rem}
.hero-copy p{color:var(--muted); margin:0 0 18px; font-size:1.05rem}
.hero-actions{display:flex; gap:12px; margin:16px 0 10px}
.hero-highlights{display:grid; grid-template-columns: 1fr 1fr; gap:8px 16px; list-style:none; padding:0; margin:14px 0 0}
.hero-highlights li{color:#d6dcf0; font-size:1rem}

.hero-visual{overflow:hidden}
.mock-toolbar{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); background:#00000020}
.mock-toolbar .dot{width:11px; height:11px; border-radius:999px; display:inline-block}
.mock-toolbar .red{background:#ff6b6b}
.mock-toolbar .yellow{background:#ffd166}
.mock-toolbar .green{background:#06d6a0}
.mock-toolbar .mock-title{margin-inline-start:auto; font-size:1rem; color:#dfe4f5}
.mock-content{padding:14px}
.mock-stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom:14px}
.stat{background:#ffffff14; border:1px solid var(--border); border-radius:14px; padding:12px}
.stat-title{color:#cdd3e5; font-size:.95rem}
.stat-value{font-size:1.32rem; font-weight:900}
.stat-value.positive{color:#3be6cb}
.mock-table{border:1px solid var(--border); border-radius:14px; overflow:hidden; font-size:1rem}
.t-head,.t-row{display:grid; grid-template-columns: 1.2fr 1fr 1fr .8fr; gap:10px; padding:12px 14px}
.t-head{background:#ffffff12; color:#e8ecfd; font-weight:800}
.t-row{border-top:1px solid var(--border); background:#ffffff08}
.t-row .pos{color:#3be6cb; font-weight:800}
.t-row .neg{color:#ff8f8f; font-weight:800}

/* sections */
.section{padding:64px 0}
.section-title{text-align:center; margin:0 0 8px; font-size:1.8rem}
.section-subtitle{text-align:center; color:var(--muted); margin:0 0 26px}

/* features */
.features-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{padding:20px; min-height:170px; font-size:1.02rem}
.card-icon{width:50px; height:50px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, #ffffff28, #ffffff12); margin-bottom:10px; font-size:1.2rem}

/* previews */
.preview-grid{display:grid; grid-template-columns: 1fr 1fr; gap:22px}
.preview .mock-title{font-weight:700}
.filters-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#ffffff10}
.muted{color:#d0d6ea; opacity:.9}
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}

/* integrations */
.integrations{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; padding:18px}
.int-item{background:#ffffff10; border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; align-items:center; gap:10px; font-weight:700}

/* automation */
.steps{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; padding:18px}
.big-steps .step{font-size:1.02rem}
.step{background:#ffffff12; border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px}
.badge{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0a0d1a; font-weight:900}

/* security */
.security{display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; padding:20px}
.sec-copy .ticks{list-style:none; padding:0; margin:16px 0 0}
.sec-copy .ticks li{color:#e5e9fb; font-size:1.02rem}
.sec-visual{display:grid; place-items:center}
.shield{width:160px; height:160px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(135deg, #ffffff22, #ffffff07); border:1px solid var(--border); font-size:56px; color:#b9bef0}

/* CTA banner */
.cta-banner{display:flex; align-items:center; justify-content:space-between; padding:22px 24px}
.cta-copy h3{margin:0 0 6px}

/* FAQ */
.faq-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
.faq-grid details{padding:16px; font-size:1.02rem}
.faq-grid summary{cursor:pointer; font-weight:800}
.faq-grid p{color:#e0e6fb}

/* footer */
.site-footer{padding:30px 0 40px; color:#cfd6ea}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; align-items:center}
.foot-note{text-align:center; opacity:.85}
.foot-cta{text-align:end}

/* responsive */
@media (max-width: 1200px){
  .hero-grid{grid-template-columns: 1fr}
  .preview-grid{grid-template-columns: 1fr}
  .integrations{grid-template-columns: repeat(2, 1fr)}
  .steps{grid-template-columns: repeat(2, 1fr)}
  .security{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .features-grid, .faq-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr; gap:12px}
  .nav{display:none}
  .container{padding:0 18px}
}