/* ==========================================================================
   VOLTEDGE — Design System
   Dark industrial-tech. Tokens → Base → Layout → Components → Sections → Utils
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#05070a; --bg-2:#080b11; --surface:#0b0f16; --surface-2:#111721; --surface-3:#17202c;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);

  --accent:#00d9ff; --accent-dim:#0a94ad; --accent-glow:rgba(0,217,255,.35);
  --accent-2:#ffb020; --accent-3:#7c5cff; --success:#2fd97a; --danger:#ff4d5e;

  --text:#e9eef5; --text-2:#a3b0c0; --text-3:#6b7889;

  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:clamp(.69rem,.66rem + .13vw,.75rem);
  --fs-sm:clamp(.81rem,.78rem + .16vw,.88rem);
  --fs-base:clamp(.94rem,.90rem + .19vw,1.02rem);
  --fs-md:clamp(1.06rem,1.00rem + .30vw,1.25rem);
  --fs-lg:clamp(1.31rem,1.16rem + .75vw,1.75rem);
  --fs-xl:clamp(1.75rem,1.42rem + 1.63vw,2.75rem);
  --fs-2xl:clamp(2.25rem,1.60rem + 3.25vw,4.25rem);
  --fs-3xl:clamp(2.6rem,1.55rem + 5.4vw,6.2rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --maxw:1360px; --gutter:clamp(1.25rem,4vw,4rem); --nav-h:76px;

  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,.05,.36,1);

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 8px 30px rgba(0,0,0,.5);
  --shadow-3:0 24px 80px rgba(0,0,0,.65);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

img,svg,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--accent); color:#00181d; }

h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:600; line-height:1.06;
  letter-spacing:-.02em; text-wrap:balance; }
p{ text-wrap:pretty; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:10px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }

/* ---------- 3. LAYOUT ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4rem,9vw,9rem); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }
.grid{ display:grid; gap:var(--sp-5); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.flex{ display:flex; } .between{ justify-content:space-between; }
.center{ align-items:center; } .wrap{ flex-wrap:wrap; }
.gap-3{ gap:var(--sp-3); } .gap-4{ gap:var(--sp-4); } .gap-5{ gap:var(--sp-5); }
.mt-4{ margin-top:var(--sp-4); } .mt-5{ margin-top:var(--sp-5); } .mt-6{ margin-top:var(--sp-6); }
.mt-7{ margin-top:var(--sp-7); } .mb-4{ margin-bottom:var(--sp-4); } .mb-5{ margin-bottom:var(--sp-5); }
.mb-6{ margin-bottom:var(--sp-6); } .tac{ text-align:center; }

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
}
.bg-orb{ position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(120px); opacity:.16; }
.bg-orb--1{ width:640px; height:640px; background:var(--accent); top:-260px; right:-180px; }
.bg-orb--2{ width:520px; height:520px; background:var(--accent-3); bottom:-200px; left:-200px; opacity:.12; }
.page{ position:relative; z-index:1; }

body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- 4. PRELOADER ---------- */
#preloader{ position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s; }
#preloader.done{ opacity:0; visibility:hidden; }
.pre-inner{ width:min(320px,62vw); text-align:center; }
.pre-mark{ font-family:var(--font-display); font-size:var(--fs-lg); letter-spacing:.32em; margin-bottom:var(--sp-4); }
.pre-bar{ height:2px; background:var(--line-strong); border-radius:2px; overflow:hidden; }
.pre-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-3)); transition:width .25s linear; }
.pre-pct{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-3); margin-top:var(--sp-3); }

/* ---------- 5. NAV ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), backdrop-filter .35s, border-color .35s, height .35s var(--ease); }
.nav.scrolled{ height:64px; background:rgba(5,7,10,.72);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line); }
.nav__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); }

.logo{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display);
  font-weight:700; font-size:1.06rem; letter-spacing:.14em; }
.logo svg{ width:30px; height:30px; flex:none; }
.logo b{ color:var(--accent); }

.nav__links{ display:flex; align-items:center; gap:.25rem; }
.nav__link{ position:relative; padding:.5rem .85rem; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-2); transition:color .25s, background .25s; }
.nav__link:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav__link.active{ color:var(--text); }
.nav__link.active::after{ content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.nav__actions{ display:flex; align-items:center; gap:var(--sp-3); }

.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono);
  font-size:var(--fs-xs); color:var(--text-2); padding:.45rem .7rem;
  border:1px solid var(--line); border-radius:var(--r-pill); transition:.25s; }
.lang__btn:hover{ border-color:var(--line-strong); color:var(--text); }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:160px; padding:.35rem;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-3); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.22s var(--ease); z-index:10; }
.lang.open .lang__menu{ opacity:1; visibility:visible; transform:none; }
.lang__menu button{ display:block; width:100%; text-align:left; padding:.5rem .7rem;
  font-size:var(--fs-sm); color:var(--text-2); border-radius:var(--r-sm); transition:.18s; }
.lang__menu button:hover{ background:var(--surface-3); color:var(--text); }

.burger{ display:none; width:44px; height:44px; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); }
.burger i{ display:block; width:18px; height:1.5px; background:var(--text); position:relative; transition:.3s var(--ease); }
.burger i::before,.burger i::after{ content:''; position:absolute; left:0; width:18px; height:1.5px;
  background:var(--text); transition:.3s var(--ease); }
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
body.nav-open .burger i{ background:transparent; }
body.nav-open .burger i::before{ top:0; transform:rotate(45deg); }
body.nav-open .burger i::after{ top:0; transform:rotate(-45deg); }

.mobile-menu{ position:fixed; inset:0; z-index:890; background:var(--bg-2);
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 3rem; display:flex; flex-direction:column; gap:.25rem;
  clip-path:circle(0% at calc(100% - 46px) 38px); transition:clip-path .6s var(--ease); pointer-events:none; }
body.nav-open .mobile-menu{ clip-path:circle(150% at calc(100% - 46px) 38px); pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-size:var(--fs-xl); padding:.35rem 0;
  border-bottom:1px solid var(--line); color:var(--text-2); transition:.25s; }
.mobile-menu a:hover,.mobile-menu a.active{ color:var(--accent); padding-left:.6rem; }
.mobile-menu .btn{ margin-top:auto; }

/* ---------- 6. BUTTONS ---------- */
.btn{ --btn-bg:var(--accent); --btn-fg:#00171d;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.82rem 1.5rem; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s, color .28s, border-color .28s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 34px -10px var(--accent-glow); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); border:1px solid var(--line-strong); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--accent); color:var(--accent); box-shadow:none; }
.btn--dark{ --btn-bg:var(--surface-2); --btn-fg:var(--text); border:1px solid var(--line); }
.btn--dark:hover{ background:var(--surface-3); box-shadow:none; }
.btn--lg{ padding:1.02rem 1.9rem; font-size:var(--fs-base); }
.btn--sm{ padding:.55rem 1.05rem; font-size:var(--fs-xs); }
.btn--block{ width:100%; }

/* ---------- 7. TYPO HELPERS ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-mono);
  font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--accent); }
.h1{ font-size:var(--fs-3xl); } .h2{ font-size:var(--fs-2xl); }
.h3{ font-size:var(--fs-xl); } .h4{ font-size:var(--fs-lg); }
.lead{ font-size:var(--fs-md); color:var(--text-2); max-width:64ch; }
.muted{ color:var(--text-2); } .dim{ color:var(--text-3); }
.mono{ font-family:var(--font-mono); } .accent{ color:var(--accent); }
.gradient-text{ background:linear-gradient(100deg,#fff 8%,var(--accent) 52%,var(--accent-3) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-head{ max-width:780px; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.section-head .h2{ margin:var(--sp-4) 0; }

/* ---------- 8. CARDS ---------- */
.card{ position:relative; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6);
  transition:border-color .35s var(--ease), transform .35s var(--ease); overflow:hidden; }
.card::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,217,255,.10), transparent 62%); }
.card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }
.card__icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-md);
  background:rgba(0,217,255,.09); border:1px solid rgba(0,217,255,.22); color:var(--accent);
  margin-bottom:var(--sp-4); }
.card__icon svg{ width:22px; height:22px; }
.card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-3); }
.card p{ color:var(--text-2); font-size:var(--fs-sm); }

.tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.24rem .62rem;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--r-pill); border:1px solid var(--line-strong); color:var(--text-2);
  background:rgba(255,255,255,.03); }
.tag--accent{ color:var(--accent); border-color:rgba(0,217,255,.35); background:rgba(0,217,255,.07); }
.tag--amber{ color:var(--accent-2); border-color:rgba(255,176,32,.35); background:rgba(255,176,32,.07); }
.tag--live{ color:var(--success); border-color:rgba(47,217,122,.35); background:rgba(47,217,122,.07); }
.tag--live::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

/* ---------- 9. HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 3rem); padding-bottom:4rem; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__title{ font-size:var(--fs-3xl); letter-spacing:-.035em; margin:var(--sp-5) 0; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__cta{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }
.hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.stat__num{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; letter-spacing:-.03em; }
.stat__num .suffix{ color:var(--accent); }
.stat__label{ font-size:var(--fs-xs); color:var(--text-3); margin-top:.15rem; }

.viewer{ position:relative; aspect-ratio:1/1; width:100%; border-radius:var(--r-xl);
  background:radial-gradient(circle at 50% 45%, rgba(0,217,255,.09), transparent 62%);
  border:1px solid var(--line); overflow:hidden; }
.viewer canvas{ width:100% !important; height:100% !important; cursor:grab; touch-action:none; }
.viewer canvas:active{ cursor:grabbing; }
.viewer__hud{ position:absolute; left:14px; bottom:14px; right:14px; display:flex;
  justify-content:space-between; align-items:flex-end; gap:var(--sp-3); pointer-events:none; }
.viewer__hint{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); background:rgba(5,7,10,.6); border:1px solid var(--line);
  padding:.35rem .65rem; border-radius:var(--r-pill); backdrop-filter:blur(8px); }
.viewer__corner{ position:absolute; width:22px; height:22px; border:1px solid var(--accent); opacity:.5; }
.viewer__corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.viewer__corner.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.viewer__corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.viewer__corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.viewer__badge{ position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); background:rgba(0,217,255,.08); border:1px solid rgba(0,217,255,.28);
  padding:.3rem .8rem; border-radius:var(--r-pill); }
.viewer__ctrl{ display:flex; gap:.4rem; pointer-events:auto; }
.viewer__ctrl button{ width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:rgba(5,7,10,.6); border:1px solid var(--line); color:var(--text-2);
  backdrop-filter:blur(8px); transition:.2s; }
.viewer__ctrl button:hover,.viewer__ctrl button.on{ color:var(--accent); border-color:var(--accent); }
.viewer__ctrl svg{ width:15px; height:15px; }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--text-3); }
.scroll-cue span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; }
.scroll-cue i{ width:1px; height:44px; background:linear-gradient(var(--accent),transparent); }

/* ---------- 10. MARQUEE ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:var(--sp-5);
  background:var(--bg-2); position:relative; }
.marquee::before,.marquee::after{ content:''; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--bg-2),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--bg-2),transparent); }
.marquee__track{ display:flex; gap:clamp(2.5rem,6vw,5rem); width:max-content; animation:scrollX 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }
.marquee__item{ display:flex; align-items:center; gap:.7rem; color:var(--text-3);
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:500; white-space:nowrap; transition:color .3s; }
.marquee__item:hover{ color:var(--text); }
.marquee__item svg{ width:20px; height:20px; color:var(--accent); flex:none; }

/* ---------- 11. BENTO / STATS ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-4); }
.bento > *{ grid-column:span 2; }
.bento .span-3{ grid-column:span 3; }
.bento .span-4{ grid-column:span 4; }
.bento .span-6{ grid-column:span 6; }
.stat-card .big{ font-family:var(--font-display); font-size:var(--fs-2xl); line-height:1;
  letter-spacing:-.04em; margin-bottom:var(--sp-2); }

.steps{ counter-reset:s; display:grid; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); align-items:start;
  padding:var(--sp-5) 0; border-top:1px solid var(--line); }
.step__n{ counter-increment:s; font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--accent); min-width:3rem; }
.step__n::before{ content:'0' counter(s); }
.step h3{ font-size:var(--fs-md); margin-bottom:.4rem; }
.step p{ color:var(--text-2); font-size:var(--fs-sm); max-width:62ch; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev .split__media{ order:-1; }
.split__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/3; background:var(--surface); }
.split__media svg{ width:100%; height:100%; }

/* ---------- 12. CATALOG ---------- */
.catalog{ display:grid; grid-template-columns:264px 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
.filters{ position:sticky; top:calc(var(--nav-h) + 1.25rem); }
.filters__group{ border-bottom:1px solid var(--line); padding-block:var(--sp-4); }
.filters__group:first-child{ padding-top:0; }
.filters__title{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-3); }
.check{ display:flex; align-items:center; gap:.6rem; padding:.34rem 0; cursor:pointer;
  font-size:var(--fs-sm); color:var(--text-2); transition:color .2s; }
.check:hover{ color:var(--text); }
.check input{ appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none;
  border:1px solid var(--line-strong); border-radius:4px; display:grid; place-items:center; transition:.2s; }
.check input:checked{ background:var(--accent); border-color:var(--accent); }
.check input:checked::after{ content:''; width:9px; height:5px; border-left:2px solid #00171d;
  border-bottom:2px solid #00171d; transform:rotate(-45deg) translateY(-1px); }
.check .n{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }

.range{ width:100%; appearance:none; -webkit-appearance:none; height:3px; background:var(--surface-3);
  border-radius:3px; margin-top:.6rem; }
.range::-webkit-slider-thumb{ appearance:none; -webkit-appearance:none; width:15px; height:15px;
  border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 0 4px rgba(0,217,255,.16); }
.range::-moz-range-thumb{ width:15px; height:15px; border:0; border-radius:50%; background:var(--accent); cursor:pointer; }

.toolbar{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.search{ position:relative; flex:1; min-width:220px; }
.search input{ width:100%; padding:.78rem 1rem .78rem 2.7rem; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--fs-sm); transition:.25s; }
.search input::placeholder{ color:var(--text-3); }
.search input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,217,255,.12); }
.search svg{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text-3); }

.input{ width:100%; padding:.78rem 1rem; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--fs-sm); transition:.25s; }
select.input{ appearance:none; -webkit-appearance:none; padding-right:2.4rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7889' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; }
.input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,217,255,.12); }
textarea.input{ resize:vertical; min-height:130px; line-height:1.6; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:var(--fs-xs); color:var(--text-2); }
.field label .req{ color:var(--accent); }
.field .err{ font-size:var(--fs-xs); color:var(--danger); display:none; }
.field.invalid .input{ border-color:var(--danger); }
.field.invalid .err{ display:block; }

.chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ padding:.42rem .95rem; border-radius:var(--r-pill); border:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--text-2); background:var(--surface); transition:.22s; }
.chip:hover{ border-color:var(--line-strong); color:var(--text); }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#00171d; font-weight:600; }

.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:var(--sp-4); }
.p-card{ position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.p-card:hover{ border-color:rgba(0,217,255,.4); transform:translateY(-5px); box-shadow:var(--shadow-2); }
.p-card__media{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 50% 55%, rgba(0,217,255,.10), transparent 65%), var(--bg-2); }
.p-card__media svg{ width:64%; height:64%; transition:transform .5s var(--ease); }
.p-card:hover .p-card__media svg{ transform:scale(1.07) rotate(-2deg); }
.p-card__badge{ position:absolute; top:10px; left:10px; }
.p-card__body{ padding:var(--sp-4) var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.p-card__sku{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--text-3); }
.p-card__name{ font-family:var(--font-display); font-size:var(--fs-md); line-height:1.2; }
.p-card__desc{ font-size:var(--fs-sm); color:var(--text-2); flex:1; }
.p-card__specs{ display:flex; gap:1rem; flex-wrap:wrap; padding-top:.6rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.p-card__specs b{ color:var(--text-2); font-weight:500; }
.p-card__actions{ display:flex; gap:.5rem; margin-top:.4rem; }
.p-card__actions .btn{ flex:1; }

.results-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin-bottom:var(--sp-4); font-size:var(--fs-sm); color:var(--text-3); flex-wrap:wrap; }
.empty{ text-align:center; padding:var(--sp-9) var(--sp-4); border:1px dashed var(--line); border-radius:var(--r-lg); }
.empty svg{ width:44px; height:44px; margin:0 auto var(--sp-4); color:var(--text-3); }

/* ---------- 13. MODAL ---------- */
.modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:var(--gutter);
  opacity:0; visibility:hidden; transition:.3s var(--ease); }
.modal.open{ opacity:1; visibility:visible; }
.modal__bd{ position:absolute; inset:0; background:rgba(3,5,8,.82); backdrop-filter:blur(10px); }
.modal__panel{ position:relative; width:min(980px,100%); max-height:86vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3); transform:translateY(20px) scale(.98); transition:.4s var(--ease); }
.modal.open .modal__panel{ transform:none; }
.modal__close{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; background:rgba(5,7,10,.7);
  border:1px solid var(--line); color:var(--text-2); transition:.22s; }
.modal__close:hover{ color:var(--danger); border-color:var(--danger); transform:rotate(90deg); }
.modal__grid{ display:grid; grid-template-columns:1fr 1fr; }
.modal__media{ display:grid; place-items:center; padding:var(--sp-7); border-right:1px solid var(--line);
  background:radial-gradient(circle at 50% 50%, rgba(0,217,255,.12), transparent 65%), var(--bg-2); }
.modal__body{ padding:clamp(1.5rem,3vw,2.5rem); }
.spec-table{ width:100%; border-collapse:collapse; margin-top:var(--sp-4); font-size:var(--fs-sm); }
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table td{ padding:.62rem 0; }
.spec-table td:first-child{ color:var(--text-3); width:46%; }
.spec-table td:last-child{ font-family:var(--font-mono); font-size:var(--fs-xs); text-align:right; }

/* ---------- 14. RFQ TRAY ---------- */
.tray{ position:fixed; right:var(--gutter); bottom:24px; z-index:850;
  display:flex; align-items:center; gap:.7rem; padding:.7rem .75rem .7rem 1.1rem;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-pill);
  box-shadow:var(--shadow-3); transform:translateY(160%); transition:transform .45s var(--ease); }
.tray.show{ transform:none; }
.tray__n{ display:grid; place-items:center; min-width:26px; height:26px; padding-inline:.35rem;
  border-radius:var(--r-pill); background:var(--accent); color:#00171d;
  font-family:var(--font-mono); font-size:12px; font-weight:700; }
.tray__txt{ font-size:var(--fs-sm); color:var(--text-2); }

/* ---------- 15. WORLD MAP ---------- */
.map-wrap{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-2); padding:clamp(1rem,3vw,2rem); overflow:hidden; }
.map-dot{ fill:var(--text-3); opacity:.3; }
.map-pin{ cursor:pointer; }
.map-pin circle.core{ fill:var(--accent); }
.map-pin circle.ring{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.7;
  animation:ping 2.8s ease-out infinite; }
@keyframes ping{ 0%{ r:3; opacity:.9; } 100%{ r:15; opacity:0; } }
.map-pin text{ font-family:var(--font-mono); font-size:7px; fill:var(--text-2); letter-spacing:.05em; }
.map-arc{ fill:none; stroke:var(--accent); stroke-width:.7; opacity:.35;
  stroke-dasharray:4 6; animation:dash 3s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-20; } }

/* ---------- 16. ACCORDION ---------- */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:1.25rem 0; text-align:left; font-family:var(--font-display); font-size:var(--fs-md);
  color:var(--text); transition:color .25s; }
.acc__head:hover{ color:var(--accent); }
.acc__head i{ position:relative; width:14px; height:14px; flex:none; }
.acc__head i::before,.acc__head i::after{ content:''; position:absolute; background:currentColor; transition:transform .3s var(--ease); }
.acc__head i::before{ top:6px; left:0; width:14px; height:1.5px; }
.acc__head i::after{ left:6px; top:0; width:1.5px; height:14px; }
.acc__item.open .acc__head i::after{ transform:scaleY(0); }
.acc__item.open .acc__head{ color:var(--accent); }
.acc__body{ overflow:hidden; height:0; transition:height .38s var(--ease); }
.acc__body p{ color:var(--text-2); font-size:var(--fs-sm); padding-bottom:1.3rem; max-width:74ch; }

/* ---------- 17. FOOTER ---------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:clamp(3rem,7vw,6rem); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-6); }
.footer h4{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-4); }
.footer nav a{ display:block; padding:.28rem 0; font-size:var(--fs-sm); color:var(--text-2); transition:.2s; }
.footer nav a:hover{ color:var(--accent); transform:translateX(3px); }
.footer__bottom{ margin-top:clamp(2.5rem,5vw,4rem); padding-block:var(--sp-5);
  border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:var(--sp-4);
  flex-wrap:wrap; font-size:var(--fs-xs); color:var(--text-3); }
.socials{ display:flex; gap:.5rem; margin-top:var(--sp-4); }
.socials a{ width:36px; height:36px; display:grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:var(--r-md); color:var(--text-2); transition:.25s; }
.socials a:hover{ transform:translateY(-2px); border-color:var(--accent); color:var(--accent); }
.socials svg{ width:16px; height:16px; }
.newsletter{ display:flex; gap:.5rem; margin-top:var(--sp-4); max-width:340px; }
.newsletter input{ flex:1; padding:.68rem .9rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--text); }
.newsletter input:focus{ outline:0; border-color:var(--accent); }

/* ---------- 18. CTA BAND ---------- */
.cta-band{ position:relative; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  padding:clamp(2.5rem,6vw,5rem); text-align:center;
  background:radial-gradient(700px circle at 50% 0%, rgba(0,217,255,.14), transparent 62%),
             linear-gradient(180deg,var(--surface),var(--bg-2)); }
.cta-band::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000, transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 50%, #000, transparent 72%); }
.cta-band > *{ position:relative; z-index:1; }

/* ---------- 19. PAGE HEADER ---------- */
.page-head{ padding-top:calc(var(--nav-h) + clamp(3rem,7vw,6rem)); padding-bottom:clamp(2rem,5vw,4rem);
  border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.crumbs{ display:flex; gap:.5rem; align-items:center; font-family:var(--font-mono);
  font-size:var(--fs-xs); color:var(--text-3); margin-bottom:var(--sp-4); }
.crumbs a:hover{ color:var(--accent); }

/* ---------- 20. TIMELINE ---------- */
.tl{ position:relative; padding-left:2.2rem; }
.tl::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--accent),var(--accent-3),transparent); }
.tl__item{ position:relative; padding-bottom:var(--sp-7); }
.tl__item::before{ content:''; position:absolute; left:-2.2rem; top:6px; width:13px; height:13px;
  border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
.tl__yr{ font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--accent); }
.tl__item h3{ font-size:var(--fs-md); margin:.3rem 0 .4rem; }
.tl__item p{ color:var(--text-2); font-size:var(--fs-sm); max-width:62ch; }

/* ---------- 21. ANIMATION UTILS ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="zoom"]{ transform:scale(.94); }
[data-stagger] > *{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger].is-in > *{ opacity:1; transform:none; }
.parallax{ will-change:transform; }

.progress-bar{ position:fixed; top:0; left:0; height:2px; width:0; z-index:950;
  background:linear-gradient(90deg,var(--accent),var(--accent-3)); box-shadow:0 0 12px var(--accent-glow); }

.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:8px; height:8px;
  border-radius:50%; background:var(--accent); mix-blend-mode:difference; transform:translate(-50%,-50%); }
.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:34px; height:34px;
  border-radius:50%; border:1px solid rgba(0,217,255,.5); transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s, border-color .3s; }
body.hovering .cursor-ring{ width:56px; height:56px; border-color:var(--accent); }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{ display:none !important; } }

.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,180%); z-index:1100;
  display:flex; align-items:center; gap:.6rem; padding:.8rem 1.2rem;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-pill);
  box-shadow:var(--shadow-3); font-size:var(--fs-sm); transition:transform .45s var(--ease); }
.toast.show{ transform:translate(-50%,0); }
.toast svg{ width:17px; height:17px; color:var(--success); flex:none; }

/* ---------- 22. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; }
  .viewer{ max-width:520px; margin-inline:auto; }
  .catalog{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .bento > *{ grid-column:span 3; }
  .bento .span-4,.bento .span-6{ grid-column:span 6; }
}
@media (max-width:860px){
  .nav__links,.nav .lang{ display:none; }
  .burger{ display:grid; }
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .modal__grid{ grid-template-columns:1fr; }
  .modal__media{ border-right:0; border-bottom:1px solid var(--line); }
  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
}
@media (max-width:600px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .bento > *{ grid-column:span 6 !important; }
  .footer__grid{ grid-template-columns:1fr; }
  .products{ grid-template-columns:1fr; }
  .tray{ left:var(--gutter); right:var(--gutter); justify-content:center; }
  .step{ grid-template-columns:1fr; gap:var(--sp-2); }
}

/* ---------- 23. RFQ FORM (contact page) ---------- */
.rfq-layout{ display:grid; grid-template-columns:1fr 340px; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.rfq-aside{ position:sticky; top:calc(var(--nav-h) + 1.5rem); }

.stepper{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:var(--sp-6); }
.stepper__dot{
  display:flex; align-items:center; gap:.55rem; padding:.5rem 1rem;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
  font-size:var(--fs-xs); color:var(--text-3); transition:.25s var(--ease);
}
.stepper__dot span{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--surface-3); font-family:var(--font-mono); font-size:11px; color:var(--text-2);
}
.stepper__dot:hover{ border-color:var(--line-strong); color:var(--text-2); }
.stepper__dot.active{ border-color:var(--accent); color:var(--text); background:rgba(0,217,255,.07); }
.stepper__dot.active span{ background:var(--accent); color:#00171d; font-weight:700; }
.stepper__dot.done span{ background:var(--success); color:#00200f; }

.step-panel[hidden]{ display:none; }
.step-panel{ animation:panelIn .4s var(--ease); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }

.rfq-lines{ display:grid; gap:.5rem; }
.rfq-line{
  display:grid; grid-template-columns:1fr auto auto; gap:var(--sp-4); align-items:center;
  padding:.75rem .9rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
}
.rfq-line__qty{ display:flex; align-items:center; gap:.5rem; }
.rfq-line__qty .input{ width:92px; padding:.42rem .6rem; text-align:right; }
.rfq-line__rm{ width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid var(--line); color:var(--text-3); transition:.2s; }
.rfq-line__rm:hover{ color:var(--danger); border-color:var(--danger); }

input[type=file].input{ padding:.6rem .8rem; cursor:pointer; }
input[type=file].input::file-selector-button{
  margin-right:.8rem; padding:.35rem .8rem; border:1px solid var(--line-strong);
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-xs); cursor:pointer;
}

@media (max-width:1080px){
  .rfq-layout{ grid-template-columns:1fr; }
  .rfq-aside{ position:static; }
}
@media (max-width:600px){
  .rfq-line{ grid-template-columns:1fr auto; }
  .rfq-line__qty{ grid-column:1; }
}

/* ---------- 24. A11Y ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal],[data-stagger] > *{ opacity:1 !important; transform:none !important; }
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:10001; padding:.8rem 1.2rem;
  background:var(--accent); color:#00171d; border-radius:0 0 var(--r-md) 0; }
.skip:focus{ left:0; }