@font-face{
  font-family:"Vazir";
  src:url("/static/fonts/vazir/Vazir.woff2") format("woff2"),
      url("/static/fonts/vazir/Vazir.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Vazir";
  src:url("/static/fonts/vazir/Vazir-Bold.woff2") format("woff2"),
      url("/static/fonts/vazir/Vazir-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#0b0f21; --bg2:#0e1536; --glass:rgba(255,255,255,.06); --glass-b:rgba(255,255,255,.12);
  --line:#25306b; --text:#eef2ff; --muted:#aab4d6;
  --brand:#7aa2ff; --accent:#84fab0; --cyan:#22c1c3;
  --radius:18px; --rsm:12px; --shadow:0 12px 45px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.2);
  --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2) 45%,#0b112d);color:var(--text);font:15px/1.85 "Vazir",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0 0 0 1rem}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 18px}

.btn{display:inline-block;padding:12px 18px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:var(--shadow);color:#081326;font-weight:800;letter-spacing:.2px}
.btn.ghost{background:transparent;border:1px solid #3550a6;color:#cfe1ff}

.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid #22306c;border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.pad{padding:22px}
.grid{display:grid;gap:18px}
.muted{color:var(--muted)}
.center{text-align:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(122,162,255,.08);border:1px solid #2b3e86;color:#cfe1ff;font-size:12px}

.section{padding:74px 0}
.section h2{font-size:30px;margin:0 0 10px;letter-spacing:.2px}
.lead{font-size:16px;color:#c9d4f2;margin:0 0 26px}

/* Header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(12,17,44,.55);backdrop-filter:blur(10px);border-bottom:1px solid #1c2757}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;filter:drop-shadow(0 4px 20px rgba(122,162,255,.35))}
.logo.sm{width:30px;height:30px}
.menu{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.menu a{padding:10px 12px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.05)}
.menu-btn{display:none;padding:10px 12px;border:1px solid #22306c;border-radius:12px;background:#10173a;color:#cfe1ff}
.mobile{display:none;position:absolute;right:18px;left:18px;top:62px;background:#0f1634;border:1px solid #1f2b64;border-radius:16px;padding:10px}
.mobile a{display:block;padding:12px;border-radius:10px}
.mobile a:hover{background:#151c3f}

/* Hero */
#stars{position:fixed;inset:0;pointer-events:none;opacity:.28}
.hero{position:relative;padding:92px 0 58px;overflow:hidden}
.glow{position:absolute;inset:-10%;background:
  radial-gradient(800px 380px at 80% 10%,rgba(120,190,255,.28),transparent 60%),
  radial-gradient(520px 300px at 10% 90%,rgba(34,193,195,.22),transparent 60%);filter:blur(16px);pointer-events:none}
.hero-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}
.title{font-size:38px;line-height:1.2;margin:0 0 10px}
.grad{background:linear-gradient(90deg,var(--brand),var(--cyan),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:#b7c6ef;margin:0 0 18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.point{padding:10px;border:1px dashed #2d4186;border-radius:12px;text-align:center;font-size:13px;color:#cfe1ff}
.hero-art .panel{position:relative;aspect-ratio:4/3;border-radius:22px;border:1px solid #2a3b7c;background:
  linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden}
#heroParticles{position:absolute;inset:0;pointer-events:none;opacity:.22}

/* Domains */
.domain-grid{grid-template-columns:repeat(3,1fr)}
.domain{position:relative;padding:18px;border:1px solid #22306c;border-radius:18px;background:linear-gradient(180deg,#151c3f,#0f1636 85%);transition:transform .25s ease, box-shadow .25s ease}
.domain:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.icon{width:48px;height:48px;margin-bottom:10px}
.domain h3{margin:0 0 6px;font-size:19px}
.domain p{margin:0;color:#c7d2ef}
.img-box{position:relative;border-radius:12px;overflow:hidden;border:1px solid #26377b;background:#0f1636;margin-top:12px}
.img-box img{width:100%;height:auto;display:block}
.caption{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:10px;font-size:12px}

/* About */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center}
.mini-cards{grid-template-columns:1fr 1fr;gap:10px}

/* Steps */
.steps{grid-template-columns:repeat(3,1fr)}
.step{padding:18px;border:1px solid #22306c;border-radius:18px;background:linear-gradient(180deg,#151c3f,#10183b)}
.num{display:inline-block;background:#192250;border:1px solid #2b3f87;border-radius:999px;padding:4px 12px;font-weight:800;margin-bottom:8px}

/* Features */
.features{grid-template-columns:repeat(3,1fr)}
.feat{padding:18px;border:1px solid #22306c;border-radius:18px;background:linear-gradient(180deg,#151c3f,#10183b)}
.feat h3{margin:6px 0 8px;font-size:18px}

/* Projects */
.projects{grid-template-columns:repeat(3,1fr)}
.proj{overflow:hidden}
.thumb{border-radius:14px;border:1px solid #23306e;aspect-ratio:16/10;background:linear-gradient(180deg,#172048,#0f1637);position:relative;overflow:hidden}
.thumb .overlay{position:absolute;inset:0;background:
  radial-gradient(100% 80% at 70% 10%,rgba(122,162,255,.2),transparent 60%),
  radial-gradient(90% 70% at 10% 90%,rgba(132,250,176,.16),transparent 60%)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:12px;padding:4px 8px;border:1px solid #2b3f87;border-radius:999px;background:#10173a;color:#bcd0ff}

/* FAQ */
.faq .q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid #243370;border-radius:12px;background:linear-gradient(180deg,#131a3a,#10163a);cursor:pointer}
.faq .a{padding:10px 14px 18px;color:#c6d4f4;display:none}
.faq .q.open + .a{display:block}

/* Contact */
.form{display:grid;gap:12px}
.form input,.form textarea,.form select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a3a7c;background:#0f1636;color:#dfe8ff
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-grid{grid-template-columns:1fr .9fr;gap:18px}
.tips{margin-top:10px}

/* Footer */
.ftr{background:#0a0f24;border-top:1px solid #1d295a;padding:30px 0;margin-top:46px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.foot h4{margin:0 0 10px}
.list{padding:0;list-style:none}
.social{display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid #243370;background:#12193a}
.copy{margin-top:16px}

/* Icons (placeholders) */
.icon-li,.icon-x,.icon-tg{display:inline-block;width:18px;height:18px;background:#bcd0ff;border-radius:3px}

/* Interactions */
.tilt{transition:transform .35s ease}
.tilt:hover{transform:perspective(800px) rotateY(-4deg) rotateX(3deg)}
.no-link{pointer-events:none}

/* Responsive */
@media (max-width:1080px){
  .domain-grid,.features,.projects{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .menu{display:none}
  .menu-btn{display:inline-block}
  .about-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hero{padding-top:70px}
  .hero-wrap{grid-template-columns:1fr}
  .title{font-size:30px}
  .form .row{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}