/* ── فونت‌ها ─────────────────────────────────── */
@font-face{font-family:Estedad;src:url(fonts/Estedad-Regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Estedad;src:url(fonts/Estedad-Medium.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Estedad;src:url(fonts/Estedad-Bold.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Estedad;src:url(fonts/Estedad-Black.woff2)format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:JBMono;src:url(fonts/JetBrainsMono-Regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:JBMono;src:url(fonts/JetBrainsMono-Bold.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Grotesk;src:url(fonts/SpaceGrotesk-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Grotesk;src:url(fonts/SpaceGrotesk-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Grotesk;src:url(fonts/SpaceGrotesk-700.woff2)format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#04060a; --bg2:#070b11; --panel:#080d14;
  --grn:#00ff9c; --grn2:#00c97c; --grn-dim:rgba(0,255,156,.14);
  --vio:#8b7cff; --red:#ff3b47; --amb:#ffb020;
  --tx:#d9e6e2; --tx2:#7d938c; --tx3:#455a52;
  --line:rgba(0,255,156,.13); --line2:rgba(255,255,255,.06);
  --mono:JBMono,ui-monospace,Menlo,Consolas,monospace;
  --fa:Estedad,system-ui,Tahoma,sans-serif;
  --en:Grotesk,system-ui,sans-serif;
  --ui:var(--en);
}
html[lang=fa]{--ui:var(--fa)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx);font-family:var(--ui);
  font-size:16px;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.boot{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.25;font-weight:700}
html[lang=fa] h1,html[lang=fa] h2,html[lang=fa] h3{font-weight:900}
html[lang=en] h1,html[lang=en] .h2,html[lang=en] .final h2{text-transform:lowercase;letter-spacing:-.04em}
p{margin:0}
canvas{display:block}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.mono{font-family:var(--mono)}

/* ── لایه‌های محیطی ───────────────────────────── */
#rain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.30}
.vign{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 50% 42%,transparent 30%,rgba(0,0,0,.82) 100%)}
.scan{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.32) 2px 4px)}
.scan::after{content:'';position:absolute;inset-inline:0;height:180px;
  background:linear-gradient(180deg,transparent,rgba(0,255,156,.045),transparent);
  animation:sweep 7s linear infinite}
@keyframes sweep{0%{top:-180px}100%{top:100%}}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-4%)}}
.flicker{position:fixed;inset:0;z-index:2;pointer-events:none;background:rgba(0,255,156,.02);
  opacity:0;animation:flick 9s steps(1) infinite}
@keyframes flick{0%,96%{opacity:0}96.5%{opacity:.5}97%{opacity:0}97.6%{opacity:.7}98%{opacity:0}}
header,main,footer{position:relative;z-index:3}

/* ── بوت ──────────────────────────────────────── */
#boot{position:fixed;inset:0;z-index:99;background:var(--bg);
  display:flex;align-items:center;justify-content:center;transition:opacity .5s}
#boot.gone{opacity:0;pointer-events:none}
#bootlog{font-family:var(--mono);font-size:13px;line-height:2.1;color:var(--grn2);
  width:min(560px,88vw);text-shadow:0 0 12px rgba(0,255,156,.4)}
#bootlog b{color:var(--grn);font-weight:400}
#bootwrap{width:min(560px,88vw)}
#bootbar{height:2px;background:rgba(0,255,156,.13);margin-top:20px;overflow:hidden}
#bootbar i{display:block;height:100%;width:0;background:var(--grn);
  box-shadow:0 0 14px var(--grn);transition:width .3s linear}
#bootlog .w{color:var(--amb)}

/* ── هدر ──────────────────────────────────────── */
header{position:sticky;top:0;backdrop-filter:blur(12px);
  background:rgba(4,6,10,.8);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-.02em}
.logo .mark{width:34px;height:34px;border:1px solid var(--grn);border-radius:8px;
  display:grid;place-items:center;color:var(--grn);box-shadow:0 0 18px rgba(0,255,156,.25);flex-shrink:0}
.nav .sp{flex:1}
.ic-btn{width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;
  background:transparent;border:1px solid var(--line2);color:var(--tx2);font-family:var(--mono);
  font-size:11.5px;font-weight:700;transition:.2s;padding:0}
.ic-btn:hover{color:var(--grn);border-color:var(--grn);box-shadow:0 0 16px rgba(0,255,156,.22)}
.ic-btn .wave{opacity:0}
.ic-btn.on{color:var(--grn);border-color:var(--line)}
.ic-btn.on .wave{opacity:1}
.ic-btn.on .mute{opacity:0}
.ic-btn.lang{width:auto;padding:0 10px}
.nav a.lnk{font-family:var(--mono);color:var(--tx2);font-size:13px;transition:.2s}
.nav a.lnk::before{content:'/ ';color:var(--tx3)}
.nav a.lnk:hover{color:var(--grn);text-shadow:0 0 10px rgba(0,255,156,.5)}
@media(max-width:820px){.nav a.lnk{display:none}}

/* ── دکمه ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;
  font-family:var(--mono);font-size:13.5px;font-weight:700;cursor:pointer;
  border:1px solid var(--grn);color:var(--grn);background:rgba(0,255,156,.05);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:.2s;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:var(--grn);
  transform:translateX(-101%);transition:transform .32s cubic-bezier(.2,.8,.3,1);z-index:-1}
.btn:hover{color:#001a10;box-shadow:0 0 30px rgba(0,255,156,.45)}
.btn:hover::before{transform:translateX(0)}
.btn-g{border-color:var(--line2);color:var(--tx2);background:transparent}
.btn-g::before{background:var(--tx2)}
.btn-g:hover{color:var(--bg);border-color:var(--tx2);box-shadow:none}

/* ── هیرو ─────────────────────────────────────── */
.hero{padding:clamp(60px,10vw,120px) 0 70px;text-align:center}
.tag{display:inline-flex;align-items:center;gap:10px;padding:6px 15px;
  border:1px solid var(--line);color:var(--grn);font-family:var(--mono);font-size:12px;
  margin-bottom:28px;background:rgba(0,255,156,.04)}
.tag .dot{width:6px;height:6px;background:var(--grn);border-radius:50%;
  box-shadow:0 0 10px var(--grn);animation:blip 1.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.hero h1{font-size:clamp(38px,7.4vw,86px);letter-spacing:-.035em;margin-bottom:22px;
  text-shadow:0 0 60px rgba(0,255,156,.16)}
.hero h1 .g{color:var(--grn);text-shadow:0 0 26px rgba(0,255,156,.55)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;
  clip-path:inset(0 0 0 0);opacity:0}
.glitch.on::before{color:var(--red);transform:translate(3px,-2px);opacity:.85;
  animation:gl1 .3s steps(2) 2}
.glitch.on::after{color:var(--vio);transform:translate(-3px,2px);opacity:.85;
  animation:gl2 .3s steps(2) 2}
@keyframes gl1{0%{clip-path:inset(12% 0 62% 0)}50%{clip-path:inset(70% 0 8% 0)}100%{clip-path:inset(30% 0 44% 0)}}
@keyframes gl2{0%{clip-path:inset(58% 0 18% 0)}50%{clip-path:inset(14% 0 70% 0)}100%{clip-path:inset(42% 0 32% 0)}}

.hero .sub{font-size:clamp(15px,2vw,18.5px);color:var(--tx2);max-width:600px;margin:0 auto 36px}
.hero .sub b{color:var(--tx);font-weight:500}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── آمار ─────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:66px}
.stat{position:relative;padding:20px 18px 18px;text-align:start;
  background:linear-gradient(160deg,rgba(0,255,156,.045),rgba(7,11,17,.9) 45%);
  border:1px solid var(--line);overflow:hidden;transition:.28s}
.stat::before{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;
  width:100%;height:1px;background:linear-gradient(90deg,var(--grn),transparent 65%)}
.stat::after{content:'';position:absolute;inset-block-end:-1px;inset-inline-end:-1px;
  width:14px;height:14px;border:1px solid var(--grn);border-width:0 1px 1px 0;opacity:.55}
.stat:hover{border-color:rgba(0,255,156,.4);background:linear-gradient(160deg,rgba(0,255,156,.09),rgba(7,11,17,.9) 45%)}
.stat .k{font-family:var(--mono);font-size:10.5px;color:var(--tx3);letter-spacing:.06em;margin-bottom:10px}
.stat .n{font-family:var(--mono);font-size:clamp(26px,3.6vw,38px);font-weight:700;color:var(--grn);
  line-height:1.05;text-shadow:0 0 26px rgba(0,255,156,.45);display:flex;align-items:baseline;gap:1px;direction:ltr}
.stat .n i{font-style:normal;font-size:.46em;color:var(--tx2);text-shadow:none}
.stat .n em{font-style:normal;font-size:.55em;color:var(--tx3)}
.stat .bars{display:flex;gap:3px;height:16px;align-items:flex-end;margin:12px 0 10px}
.stat .bars b{flex:1;background:var(--grn);opacity:.22;height:20%;transition:height .5s,opacity .5s}
.stat .bars b.hot{opacity:.9;box-shadow:0 0 8px rgba(0,255,156,.6)}
.stat .l{font-size:12px;color:var(--tx3);line-height:1.5}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ── بخش‌ها ───────────────────────────────────── */
section{padding:clamp(60px,9vw,110px) 0}
.eyebrow{font-family:var(--mono);font-size:12.5px;color:var(--grn);margin-bottom:14px;
  display:flex;align-items:center;gap:10px}
.eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.h2{font-size:clamp(27px,4.6vw,50px);letter-spacing:-.03em;margin-bottom:14px}
.lede{color:var(--tx2);max-width:560px;font-size:15.5px}
.head{margin-bottom:46px}

/* ── کارت‌ها ──────────────────────────────────── */
.card{background:linear-gradient(180deg,rgba(8,13,20,.94),rgba(4,6,10,.94));
  border:1px solid var(--line);position:relative}
.card::before,.card::after{content:'';position:absolute;width:10px;height:10px;border:1px solid var(--grn)}
.card::before{top:-1px;inset-inline-start:-1px;border-width:1px 0 0 1px}
.card::after{bottom:-1px;inset-inline-end:-1px;border-width:0 1px 1px 0}
.card-h{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;color:var(--tx2)}
.card-h .led{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn)}
.card-b{padding:20px}

.demo{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:960px){.demo{grid-template-columns:1fr}}

/* مسیرها */
.route{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line2)}
.route:last-child{border-bottom:0}
.route .cc{width:38px;height:32px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--grn2)}
.route .meta{flex:1;min-width:0}
.route .nm{font-size:14.5px;font-weight:500}
.route .ip{font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
.route .lat{font-family:var(--mono);font-size:14px;color:var(--grn);min-width:66px;text-align:end}
.route .st{width:8px;height:8px;border-radius:50%;background:var(--grn);
  box-shadow:0 0 12px var(--grn);flex-shrink:0;transition:.3s}
.route.down{opacity:.5}
.route.down .st{background:var(--red);box-shadow:0 0 14px var(--red);animation:blip .7s infinite}
.route.down .lat{color:var(--red)}
.route.act{background:linear-gradient(90deg,rgba(0,255,156,.09),transparent);
  margin-inline:-20px;padding-inline:20px;box-shadow:inset 2px 0 0 var(--grn)}

/* ترمینال */
.term{font-family:var(--mono);font-size:12.5px;line-height:2.05;min-height:290px;color:#8fa89f}
.term .p{color:var(--grn)}
.term .ok{color:var(--grn)}
.term .wr{color:var(--amb)}
.term .er{color:var(--red)}
.term .d{color:var(--tx3)}
.term b{color:#fff;font-weight:400}

/* ── ویژگی‌ها ─────────────────────────────────── */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:900px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feats{grid-template-columns:1fr}}
.feat{background:var(--bg2);padding:30px 26px;transition:.25s;position:relative}
.feat:hover{background:rgba(0,255,156,.035)}
.feat .no{font-family:var(--mono);font-size:11.5px;color:var(--tx3);margin-bottom:14px}
.feat .ic{color:var(--grn);margin-bottom:14px;filter:drop-shadow(0 0 10px rgba(0,255,156,.4))}
.feat h3{font-size:17.5px;font-weight:700;margin-bottom:9px}
.feat p{color:var(--tx2);font-size:14.5px;line-height:1.9}

/* ── نوار لوکیشن ──────────────────────────────── */
.strip{border-block:1px solid var(--line);padding:22px 0;overflow:hidden;background:rgba(7,11,17,.7)}
.track{display:flex;gap:44px;width:max-content;animation:slide 32s linear infinite}
.track:hover{animation-play-state:paused}
@keyframes slide{to{transform:translateX(50%)}}
.track span{display:flex;align-items:center;gap:10px;color:var(--tx3);
  font-family:var(--mono);font-size:13px;white-space:nowrap}
.track em{font-style:normal;color:var(--grn);border:1px solid var(--line);padding:2px 7px;font-size:11.5px}
.track b{color:var(--tx2);font-weight:400;font-family:var(--fa)}

/* ── پایان ────────────────────────────────────── */
.final{text-align:center;padding:clamp(70px,10vw,120px) 0}
.final h2{font-size:clamp(30px,5.4vw,58px);margin-bottom:16px;letter-spacing:-.03em}
.final p{color:var(--tx2);max-width:480px;margin:0 auto 34px}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--tx3);
  font-family:var(--mono);font-size:12.5px}
.fbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fbar .sp{flex:1}
.fbar a:hover{color:var(--grn)}

/* ── ورود تدریجی ──────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s,transform .65s}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .scan::after,.grain,.track,.tag .dot,.route.down .st{animation:none}
  #rain{display:none}
}