@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jbmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jbmono-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{
  --logo:url("logo-mask.png");
  --bg:#070B24; --bg2:#0C1336; --surface:rgba(22,34,92,.42); --surface2:rgba(14,22,64,.72);
  --line:rgba(143,180,255,.14); --line2:rgba(143,180,255,.28);
  --text:#E8ECFA; --mute:#98A2CA; --brand:#3561BF; --ice:#8FB4FF;
  --accent:#E6C47A; --accent2:#F8E6B6; --logo-hi:#FFFFFF;
  --led:#5CF2A6; --amber:#FFB547; --danger:#FF7A8A;
  --glow:1;
  --display:"Vazirmatn",Tahoma,sans-serif;
  --body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.site{position:relative;isolation:isolate}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono);letter-spacing:.02em}
.ltr{direction:ltr;unicode-bidi:isolate}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.35}

/* ambient page glow */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(60vmax 40vmax at 85% -10%, color-mix(in oklab,var(--brand) calc(55% * var(--glow)),transparent),transparent 70%),
   radial-gradient(50vmax 36vmax at 0% 30%, color-mix(in oklab,var(--accent) calc(12% * var(--glow)),transparent),transparent 70%),
   radial-gradient(70vmax 50vmax at 50% 120%, color-mix(in oklab,var(--brand) calc(35% * var(--glow)),transparent),transparent 70%),
   var(--bg)}
.dots{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(color-mix(in oklab,var(--ice) 40%,transparent) 1px,transparent 1.4px);background-size:26px 26px;
  mask-image:radial-gradient(80% 60% at 70% 0%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(80% 60% at 70% 0%,#000 0%,transparent 70%)}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:color-mix(in oklab,var(--bg) 72%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:block;aspect-ratio:720/271;height:auto;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
  background:linear-gradient(105deg,var(--ice) 0%,var(--ice) 38%,var(--logo-hi) 47%,var(--accent) 52%,var(--ice) 62%,var(--ice) 100%);background-size:300% 100%;animation:sheen 7s ease-in-out infinite}
.nav .logo{width:92px}
@keyframes sheen{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.nav-links{display:flex;gap:4px;margin-inline-start:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{display:block;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--mute);font-size:15px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.menu-btn{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line2);border-radius:10px;width:42px;height:42px;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--text);margin:4px auto;border-radius:2px}

/* buttons */
.btn{--b:var(--accent);position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:14px;border:1px solid transparent;cursor:pointer;
  font-weight:700;font-size:15px;text-decoration:none;overflow:hidden;transition:transform .25s,box-shadow .25s;white-space:nowrap}
.btn-gold{color:#1A1405;background:linear-gradient(135deg,var(--accent2),var(--accent) 55%,color-mix(in oklab,var(--accent) 70%,#6b4a10));
  box-shadow:0 8px 30px -8px color-mix(in oklab,var(--accent) calc(70% * var(--glow)),transparent),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-ghost{color:var(--text);background:var(--surface);border-color:var(--line2)}
.btn::after{content:"";position:absolute;inset:-2px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(-120%)}
.nav .btn{padding:9px 16px;font-size:14px}
.badge{min-width:22px;height:22px;padding-inline:6px;border-radius:99px;background:#1A1405;color:var(--accent2);font-size:12px;display:inline-grid;place-items:center;font-family:var(--mono)}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(40px,7vw,96px) clamp(48px,6vw,80px);overflow:hidden}
#traces{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:calc(.9 * var(--glow))}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--accent);letter-spacing:.04em}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.hero h1{font-size:clamp(34px,5.4vw,66px);font-weight:900;margin-block:18px 20px;line-height:1.4}
.shine{background:linear-gradient(100deg,var(--accent2) 0%,var(--accent) 30%,var(--ice) 55%,var(--accent2) 80%,var(--accent) 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;filter:drop-shadow(0 0 calc(18px * var(--glow)) color-mix(in oklab,var(--accent) 35%,transparent))}
@keyframes shine{to{background-position:-220% 0}}
.lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--mute);max-width:56ch;margin:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);list-style:none;padding-inline:0;margin-bottom:0}
.facts li{display:flex;align-items:baseline;gap:8px;color:var(--mute);font-size:14px}
.facts b{font-family:var(--display);font-size:26px;color:var(--text);font-weight:800}
.load-rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}
@keyframes rise{from{transform:translateY(22px);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}

/* switch device */
.device{position:relative;border-radius:22px;padding:18px;background:linear-gradient(160deg,var(--surface2),color-mix(in oklab,var(--bg2) 80%,transparent));
  border:1px solid var(--line2);box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 calc(80px * var(--glow)) -20px color-mix(in oklab,var(--brand) 70%,transparent);transform:perspective(1200px) rotateY(-7deg) rotateX(3deg);transition:transform .6s}
.device:hover{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg)}
.device::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--accent) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;opacity:var(--glow)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.face{direction:ltr;border-radius:12px;padding:12px 14px;background:linear-gradient(180deg,#1B2350,#10163A);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.face-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-family:var(--mono);font-size:10px;color:#8C97C9;letter-spacing:.08em}
.face-top .logo{width:54px;--logo-hi:#fff}
.pw{display:flex;align-items:center;gap:6px}
.pw i{width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.ports{display:grid;grid-template-columns:repeat(12,1fr) 10px repeat(2,1.3fr);gap:5px}
.port{position:relative;aspect-ratio:1/1.05;border-radius:3px;background:#05081C;border:1px solid #2A3570;box-shadow:inset 0 3px 4px rgba(0,0,0,.7)}
.port::after{content:"";position:absolute;inset:auto 22% 12% 22%;height:28%;border-radius:1px;background:#1A2150}
.port .l{position:absolute;top:-6px;width:4px;height:3px;border-radius:1px;background:#1E2750}
.port .l.a{left:1px}.port .l.b{right:1px}
.port .l.a.on{background:var(--led);box-shadow:0 0 6px var(--led)}
.port .l.b.on{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.ports .gap{grid-row:span 2}
.port.sfp{aspect-ratio:1.3/1.05;background:#0A0E24}
.port.sfp::after{inset:30% 14%;height:auto;background:#262E5E}
.port-nums{display:grid;grid-template-columns:repeat(12,1fr) 10px repeat(2,1.3fr);gap:5px;margin-top:6px;font-family:var(--mono);font-size:8px;color:#5D6AA6;text-align:center}
.ports-wrap{padding-top:6px}
.term{direction:ltr;margin-top:14px;border-radius:12px;background:#03061A;border:1px solid rgba(255,255,255,.07);padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#B8C3F2;min-height:210px;overflow:hidden}
.term .p{color:var(--accent)}
.term .ok{color:var(--led)}
.term .dim{color:#5D6AA6}
.caret{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- marquee ---------- */
.brands{border-block:1px solid var(--line);background:color-mix(in oklab,var(--bg2) 60%,transparent);overflow:hidden;position:relative}
.brands::before,.brands::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.brands::before{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.brands::after{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.track{direction:ltr;display:flex;width:max-content;animation:marq 48s linear infinite}
.brands:hover .track{animation-play-state:paused}
.track span{font-family:var(--mono);font-weight:600;font-size:clamp(16px,2vw,22px);color:var(--mute);padding:22px 30px;letter-spacing:.04em;transition:color .3s,text-shadow .3s;white-space:nowrap}
.track span:hover{color:var(--accent2);text-shadow:0 0 18px var(--accent)}
.track span::after{content:"◆";font-size:8px;color:var(--accent);opacity:.6;margin-left:60px;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section.block{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;gap:10px;margin-bottom:clamp(32px,5vw,56px);max-width:760px}
.sec-head .en{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);display:flex;align-items:center;gap:12px}
.sec-head .en::before{content:"";width:8px;height:8px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.sec-head h2{font-size:clamp(28px,3.8vw,46px);font-weight:900}
.sec-head p{margin:0;color:var(--mute);max-width:62ch}

/* departments bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{--mx:50%;--my:50%;position:relative;grid-column:span 2;border-radius:22px;padding:28px;background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s;display:flex;flex-direction:column;gap:12px}
.card.wide{grid-column:span 4}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in oklab,var(--accent) calc(16% * var(--glow)),transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:var(--line2)}
.card:hover::before{opacity:1}
.card .tag{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.08em}
.card .tag .st{display:inline-flex;align-items:center;gap:6px;color:var(--led)}
.card .tag .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in oklab,var(--brand) 55%,transparent),transparent);border:1px solid var(--line2);color:var(--accent2)}
.ico svg{width:26px;height:26px}
.card h3{font-size:clamp(19px,1.8vw,23px);font-weight:800}
.card .sub{font-family:var(--mono);font-size:11.5px;color:var(--ice);direction:ltr;text-align:right;margin-top:-6px}
.card p{margin:0;color:var(--mute);font-size:15px}
.card ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--text);background:color-mix(in oklab,var(--bg) 40%,transparent)}
.card.wide .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:auto;padding-top:10px}
.flow div{border-top:1px solid var(--line2);padding-top:10px;font-size:13.5px;color:var(--mute)}
.flow b{display:block;color:var(--text);font-weight:700;font-size:14.5px}

/* products */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line);width:fit-content;max-width:100%}
.tab{border:0;background:none;padding:10px 18px;border-radius:13px;cursor:pointer;color:var(--mute);font-weight:600;font-size:14.5px;display:flex;gap:8px;align-items:center;transition:all .25s}
.tab small{font-family:var(--mono);font-size:10.5px;opacity:.7}
.tab[aria-selected="true"]{color:var(--text);background:linear-gradient(145deg,color-mix(in oklab,var(--brand) 70%,transparent),color-mix(in oklab,var(--brand) 25%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px -10px var(--brand)}
.panel-intro{color:var(--mute);margin:0 0 18px;max-width:70ch;font-size:15px}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s,background .25s;animation:rise .5s both}
.item:hover{border-color:var(--line2);background:color-mix(in oklab,var(--surface) 70%,var(--brand) 12%)}
.item .n{font-family:var(--mono);font-size:11px;color:var(--mute);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line2)}
.item h4{margin:0;font-size:15.5px;font-weight:700;line-height:1.6}
.item .brandline{direction:ltr;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--ice);margin-top:2px}
.add{border:1px solid var(--line2);background:transparent;border-radius:11px;padding:7px 12px;cursor:pointer;font-size:13px;color:var(--accent2);display:flex;align-items:center;gap:6px;transition:all .2s;white-space:nowrap}
.add:hover{background:color-mix(in oklab,var(--accent) 15%,transparent);border-color:var(--accent)}
.add.in{background:var(--accent);color:#1A1405;border-color:var(--accent)}
.license-note{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* security */
.sec-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.radar{position:relative;width:min(100%,440px);aspect-ratio:1;margin-inline:auto;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 calc(12.5% - 1px),var(--line2) calc(12.5% - 1px) 12.5%),radial-gradient(circle,color-mix(in oklab,var(--brand) 30%,transparent),transparent 70%);
  border:1px solid var(--line2);overflow:hidden;box-shadow:0 0 calc(90px * var(--glow)) -20px color-mix(in oklab,var(--brand) 80%,transparent)}
.radar::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--line2),var(--line2)) center/1px 100% no-repeat,linear-gradient(var(--line2),var(--line2)) center/100% 1px no-repeat}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 300deg,color-mix(in oklab,var(--accent) 10%,transparent) 330deg,color-mix(in oklab,var(--accent) 55%,transparent) 360deg);animation:rot 4s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.blip{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px var(--accent);animation:blip 4s linear infinite;opacity:.15}
.blip.bad{background:var(--danger);box-shadow:0 0 14px var(--danger)}
@keyframes blip{0%{opacity:1;transform:scale(1.4)}40%{opacity:.25;transform:scale(1)}100%{opacity:.15}}
.shield{position:absolute;inset:36%;display:grid;place-items:center;border-radius:50%;background:var(--surface2);border:1px solid var(--line2);color:var(--accent2)}
.shield svg{width:46%;height:46%}
.caps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.caps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.caps li::before{content:"";width:10px;height:10px;margin-top:9px;border:2px solid var(--accent);transform:rotate(45deg)}
.caps b{display:block;font-weight:700}
.caps span{color:var(--mute);font-size:14.5px}

/* training tickets */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trk{border-radius:22px;border:1px solid var(--line);background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:14px}
.trk h3{font-size:19px;font-weight:800}
.trk .v{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);direction:ltr;text-align:right}
.tickets{display:grid;gap:10px}
.ticket{direction:ltr;position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(120deg,color-mix(in oklab,var(--brand) 45%,transparent),color-mix(in oklab,var(--bg2) 60%,transparent));border:1px solid var(--line2);overflow:hidden;transition:transform .3s}
.ticket::before,.ticket::after{content:"";position:absolute;right:62px;width:14px;height:14px;border-radius:50%;background:var(--bg)}
.ticket::before{top:-8px}.ticket::after{bottom:-8px}
.ticket:hover{transform:translateX(-4px)}
.ticket b{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text)}
.ticket i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--accent2);border-left:1px dashed var(--line2);padding-left:14px;width:62px;text-align:center}
.cert-note{margin-top:18px;display:flex;align-items:center;gap:10px;color:var(--mute);font-size:14.5px}
.cert-note svg{width:22px;height:22px;color:var(--accent)}

/* support */
.support{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ecg{border-radius:22px;border:1px solid var(--line);background:var(--surface2);padding:22px;position:relative;overflow:hidden}
.ecg .top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--mute);direction:ltr}
.ecg .top .ok{color:var(--led)}
.ecg svg{width:100%;height:auto;display:block;margin-block:12px}
.ecg path.beat{fill:none;stroke:var(--led);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:ecg 3.2s linear infinite;filter:drop-shadow(0 0 6px var(--led))}
@keyframes ecg{to{stroke-dashoffset:0}}
.ecg .grid{fill:none;stroke:var(--line);stroke-width:1}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;direction:rtl}
.svc div{border-radius:12px;border:1px solid var(--line);padding:12px;font-size:14px;color:var(--mute)}
.svc b{display:block;color:var(--text);font-size:15px}
.support p{color:var(--mute);margin:0 0 14px;max-width:60ch}

/* about */
.about{position:relative;border-radius:28px;border:1px solid var(--line2);padding:clamp(28px,5vw,64px);overflow:hidden;
  background:linear-gradient(135deg,color-mix(in oklab,var(--brand) 38%,transparent),color-mix(in oklab,var(--bg2) 70%,transparent) 60%)}
.about::after{content:"";position:absolute;inset-inline-start:-80px;bottom:-60px;width:420px;aspect-ratio:720/271;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;background:var(--ice);opacity:.07;transform:rotate(-8deg);pointer-events:none}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,56px);position:relative;z-index:1}
.about blockquote{margin:0;font-family:var(--display);font-size:clamp(22px,2.8vw,34px);font-weight:800;line-height:1.6}
.about blockquote small{display:block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ice);font-weight:400}
.about p{margin:0 0 14px;color:var(--mute)}
.about p strong{color:var(--text)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:16px}
.cinfo,.cform{border-radius:22px;border:1px solid var(--line);background:var(--surface);padding:clamp(22px,3vw,32px)}
.crow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding-block:14px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow .k{font-size:13px;color:var(--mute)}
.crow .val{font-weight:700;font-size:16px}
.crow .val.num{font-family:var(--display);font-size:20px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.crow .val.mail{direction:ltr;text-align:right;font-family:var(--mono);font-size:14.5px;font-weight:400}
.crow .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--accent2)}
.crow .ic svg{width:19px;height:19px}
.copy{border:1px solid var(--line2);background:none;border-radius:10px;padding:6px 10px;font-size:12.5px;cursor:pointer;color:var(--mute)}
.copy:hover{color:var(--accent2);border-color:var(--accent)}
.addr{font-weight:500;font-size:15px;line-height:1.9}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:grid;gap:6px;font-size:13.5px;color:var(--mute);margin-bottom:12px}
input,textarea,select{width:100%;border-radius:12px;border:1px solid var(--line2);background:color-mix(in oklab,var(--bg) 55%,transparent);padding:11px 14px;font-size:15px;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
textarea{min-height:110px;resize:vertical}
.note{font-size:13px;color:var(--mute);margin-top:10px}
.formok{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--led) 50%,transparent);color:var(--text);background:color-mix(in oklab,var(--led) 10%,transparent);font-size:14px}

footer{border-top:1px solid var(--line);padding-block:36px;margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;color:var(--mute);font-size:14px}
footer .logo{width:84px}

/* reveal (transform only: content stays readable at rest) */
.rv{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.pre{transform:translateY(28px)}

/* ---------- drawers ---------- */
.fab{position:fixed;z-index:60;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;border-radius:99px;cursor:pointer;font-weight:700;font-size:14px;padding:12px 18px;border:1px solid var(--line2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fab-basket{right:20px}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(3,5,18,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:80;top:0;bottom:0;width:min(420px,100%);background:var(--bg2);border-inline:1px solid var(--line2);display:flex;flex-direction:column;
  padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 80px rgba(0,0,0,.5)}
.drawer.left{left:0;transform:translateX(-105%)}
.drawer.right{right:0;transform:translateX(105%)}
.drawer.open{transform:none}
.dh{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.dh h3{font-size:18px;font-weight:800}
.x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:none;cursor:pointer;font-size:18px;line-height:1}
.db{padding:18px 20px;overflow-y:auto;flex:1}
.df{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
.grp{margin-bottom:22px}
.grp>span{display:block;font-size:12px;letter-spacing:.06em;color:var(--mute);margin-bottom:10px}
.bitem{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.bitem small{display:block;color:var(--mute);font-family:var(--mono);font-size:11px;direction:ltr;text-align:right}
.qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.qty button{border:0;background:none;width:28px;height:30px;cursor:pointer}
.qty output{min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.rm{border:0;background:none;color:var(--mute);cursor:pointer;font-size:18px}
.empty{color:var(--mute);text-align:center;padding:40px 10px;font-size:14.5px}
.toast{position:fixed;z-index:90;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:all .3s;
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:12px;font-size:14px;font-weight:700}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* motion levels */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv.pre{transform:none}.ecg path.beat{stroke-dashoffset:0}html{scroll-behavior:auto}
}

/* responsive */
@media (max-width:1000px){
  .hero .wrap,.sec-grid,.support,.about-grid,.contact{grid-template-columns:1fr}
  .device{transform:none;max-width:560px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card,.card.wide{grid-column:span 1}
  .card.wide{grid-column:1/-1}
  .tracks{grid-template-columns:1fr 1fr}
  .tracks .trk:last-child{grid-column:1/-1}
}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;top:68px;inset-inline:0;flex-direction:column;padding:10px 16px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .menu-btn{display:block}
  .nav .btn{display:none}
  .items{grid-template-columns:1fr}
}
@media (max-width:620px){
  .bento,.tracks{grid-template-columns:1fr}
  .card.wide .flow{grid-template-columns:1fr 1fr}
  .svc,form .row{grid-template-columns:1fr}
    .fab{padding:11px 14px;font-size:13px}
    .port-nums{display:none}
  .ports{gap:3px}
  .term{font-size:11px;padding:12px}
  .crow{grid-template-columns:auto 1fr}
  .crow .copy{grid-column:2;justify-self:start}
  .brands::before,.brands::after{width:40px}
}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.crow a.val{text-decoration:none}
.crow a.val:hover{color:var(--accent2)}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.site{overflow-x:clip}
.formerr{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--danger) 55%,transparent);background:color-mix(in oklab,var(--danger) 10%,transparent);font-size:14px}
button[disabled]{opacity:.6;cursor:progress}
.term div{white-space:pre}
.brands{direction:ltr}