/* ============================================================
   MERIDIAN COMPUTE — production styles
   Dark graphite · volt accent · mono labels · hairline grid
   ============================================================ */

/* ---------- fonts ---------- */
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
/* cyrillic: IBM Plex Mono has native cyrillic; Space Grotesk / Inter do not,
   so RU pages switch --font-d/--font-b to Manrope (variable 200-800) below */
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2'); font-weight:500; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope-200-800-cyrillic.woff2') format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; src:url('../fonts/manrope-200-800-latin.woff2') format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- tokens ---------- */
:root{
  --bg:#191D20; --bg-deep:#101315; --ink:#0B0D0E;
  --card:#1E2328; --card-2:#22282D;
  --text:#F2F5F6; --muted:#97A1A8; --dim:#5F6970;
  --line:#31383D; --line-soft:#262C30;
  --volt:#B5E51D; --volt-dim:rgba(181,229,29,.14);
  --font-d:'Space Grotesk',sans-serif;
  --font-b:'Inter',sans-serif;
  --font-m:'IBM Plex Mono',monospace;
  --pad:40px; --header-h:80px; --max:1600px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
/* RU: Space Grotesk / Inter carry no cyrillic — one consistent face instead of system fallback */
html[lang="ru"]{ --font-d:'Manrope',sans-serif; --font-b:'Manrope',sans-serif; }

/* ---------- base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:16px; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-b); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--volt); color:var(--ink); }
img{ max-width:100%; display:block; }
video{ display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); position:relative; }

/* grain overlay */
body::after{
  content:''; position:fixed; inset:-100%; z-index:200; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,3%)} 50%{transform:translate(3%,-2%)} 75%{transform:translate(-3%,-3%)} 100%{transform:translate(2%,2%)} }

/* ---------- type ---------- */
.h-display{ font-family:var(--font-d); font-weight:700; font-size:clamp(52px,7.4vw,110px); line-height:.98; letter-spacing:-.03em; }
.h1{ font-family:var(--font-d); font-weight:700; font-size:clamp(38px,4.6vw,64px); line-height:1.04; letter-spacing:-.02em; }
.h2{ font-family:var(--font-d); font-weight:700; font-size:clamp(30px,3.4vw,46px); line-height:1.08; letter-spacing:-.02em; }
.h3{ font-family:var(--font-d); font-weight:500; font-size:clamp(21px,2vw,26px); line-height:1.2; letter-spacing:-.01em; }
.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--muted); line-height:1.6; }
.volt{ color:var(--volt); }
.label{ font-family:var(--font-m); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.label--volt{ color:var(--volt); }
.label--light{ color:var(--muted); }

/* split-text masking */
.js .st-lines .st-line{ display:block; overflow:hidden; }
.js .st-lines .st-line>div{ display:block; }

/* reveal primitives: hidden only when JS present */
.js [data-reveal]{ opacity:0; transform:translateY(26px); }
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="left"]{ transform:translateX(-30px); }
.js [data-reveal="right"]{ transform:translateX(30px); }
.js [data-reveal="scale"]{ transform:scale(.94); }
html.static [data-reveal], html.reduced [data-reveal]{ opacity:1 !important; transform:none !important; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; height:52px; padding:0 28px;
  font-family:var(--font-m); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--text); background:transparent; cursor:pointer;
  position:relative; overflow:hidden; transition:border-color .3s, color .3s;
  will-change:transform;
}
.btn .btn-fill{ position:absolute; inset:0; background:var(--volt); transform:scaleY(0); transform-origin:bottom; transition:transform .38s var(--ease-out); z-index:0; }
.btn>span{ position:relative; z-index:1; transition:color .3s; }
.btn:hover .btn-fill{ transform:scaleY(1); }
.btn:hover>span{ color:var(--ink); }
.btn:hover{ border-color:var(--volt); }
.btn--solid{ background:var(--volt); border-color:var(--volt); color:var(--ink); }
.btn--solid .btn-fill{ background:var(--ink); }
.btn--solid:hover>span{ color:var(--volt); }
.btn--sm{ height:42px; padding:0 20px; font-size:11px; }

/* ---------- badges / stock ---------- */
.badge{ display:inline-block; padding:5px 9px 4px; font-family:var(--font-m); font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.02); }
.badge--allocation{ border-color:rgba(181,229,29,.45); color:var(--volt); background:var(--volt-dim); }
.badge--rare{ background:var(--volt); border-color:var(--volt); color:var(--ink); }
.badge--refurb{ color:var(--muted); }
.badge--new{ border-color:rgba(242,245,246,.4); color:var(--text); }
.stock{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.06em; color:var(--muted); }
.stock i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--volt); margin-right:7px; }
.stock--lead i{ background:var(--dim); }

/* ---------- curtain ---------- */
.curtain{ position:fixed; inset:0; z-index:120; display:flex; pointer-events:none; }
.curtain__col{ flex:1; background:var(--ink); transform-origin:top; }
html.static .curtain, html.reduced .curtain{ display:none; }

/* ---------- custom cursor ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:150; width:10px; height:10px; border-radius:50%;
  background:var(--volt); pointer-events:none; transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .25s; opacity:0; mix-blend-mode:difference; }
.cursor.on{ opacity:1; }
.cursor.grow{ width:56px; height:56px; }
@media (hover:none){ .cursor{ display:none; } }
html.static .cursor, html.reduced .cursor{ display:none; }

/* ---------- header ---------- */
.header{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); transition:transform .45s var(--ease-out); }
.header.hide{ transform:translateY(-100%); }
.header__in{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); height:100%; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:baseline; gap:10px; }
.logo b{ font-family:var(--font-d); font-weight:700; font-size:17px; letter-spacing:.02em; }
.logo span{ font-family:var(--font-m); font-size:10px; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; }
.logo i{ width:8px; height:8px; background:var(--volt); display:inline-block; transform:translateY(-1px); }
.nav{ display:flex; gap:36px; }
.nav a{ font-size:14px; font-weight:500; color:var(--muted); transition:color .2s; position:relative; }
.nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--volt); transition:right .3s var(--ease-out); }
.nav a:hover{ color:var(--text); }
.nav a:hover::after,.nav a.on::after{ right:0; }
.nav a.on{ color:var(--text); }
.header__right{ display:flex; align-items:center; gap:22px; }
.lang{ font-family:var(--font-m); font-size:11px; letter-spacing:.1em; color:var(--dim); }
.lang b{ color:var(--text); font-weight:500; }
.lang a{ color:var(--dim); } .lang a:hover{ color:var(--volt); }
.lang span{ margin:0 6px; color:var(--line); }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; cursor:pointer; }
.burger i{ width:18px; height:1.5px; background:var(--text); display:block; transition:transform .3s, opacity .3s; }

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:55; background:var(--ink); display:flex; flex-direction:column; justify-content:center; padding:var(--pad); transform:translateY(-100%); transition:transform .55s var(--ease-out); }
.mmenu.open{ transform:none; }
.mmenu a{ font-family:var(--font-d); font-weight:700; font-size:clamp(34px,9vw,52px); letter-spacing:-.02em; padding-block:10px; color:var(--text); border-bottom:1px solid var(--line-soft); }
.mmenu a:active{ color:var(--volt); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.hero__media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__shade{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,13,14,.42) 0%, rgba(11,13,14,.08) 42%, rgba(25,29,32,.97) 96%); }
.hero__in{ position:relative; z-index:2; margin-top:auto; padding-bottom:clamp(48px,7vh,90px); width:100%; }
.hero__kicker{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.hero__kicker .tick{ width:0; height:1px; background:var(--volt); }
.hero__sub{ max-width:560px; margin-top:30px; }
.hero__cta{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }
.hero__meta{ position:absolute; right:var(--pad); bottom:clamp(48px,7vh,90px); text-align:right; display:flex; flex-direction:column; gap:10px; z-index:2; }
.scrollcue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; font-family:var(--font-m); font-size:9px; letter-spacing:.3em; color:var(--dim); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scrollcue::after{ content:''; width:1px; height:26px; background:linear-gradient(var(--volt),transparent); animation:cue 1.8s var(--ease-out) infinite; }
@keyframes cue{ 0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }
html.static .scrollcue::after{ animation:none; }

/* ---------- sections ---------- */
.section{ padding-block:clamp(72px,9vw,140px); }
.section--deep{ background:var(--bg-deep); }
.section--hair{ border-top:1px solid var(--line-soft); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(36px,4.5vw,64px); }
.sec-head .label{ margin-bottom:14px; display:block; }

/* editorial intro */
.intro{ display:grid; grid-template-columns:220px 1fr; gap:48px; }
.intro p{ font-family:var(--font-d); font-weight:500; font-size:clamp(24px,2.6vw,38px); line-height:1.3; letter-spacing:-.015em; }
.intro p b{ color:var(--volt); font-weight:500; }

/* ---------- marquee ---------- */
.marquee{ border-block:1px solid var(--line-soft); padding-block:26px; overflow:hidden; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__set{ display:flex; align-items:center; white-space:nowrap; }
.marquee__set span{ font-family:var(--font-d); font-weight:500; font-size:19px; letter-spacing:.06em; color:var(--dim); margin-right:64px; transition:color .3s; }
.marquee__set span:hover{ color:var(--text); }
.marquee__set i{ color:var(--volt); font-style:normal; margin-right:64px; font-size:10px; }

/* ---------- horizontal scroll section ---------- */
.hwrap{ position:relative; background:var(--bg-deep); border-top:1px solid var(--line-soft); }
.hs{ overflow:hidden; }
.hs__head{ padding-top:clamp(72px,9vw,140px); }
.hs__track{ display:flex; gap:18px; padding:clamp(36px,4.5vw,64px) var(--pad) clamp(72px,9vw,120px); width:max-content; will-change:transform; }
.hs__progress{ position:absolute; left:var(--pad); right:var(--pad); bottom:44px; height:1px; background:var(--line-soft); }
.hs__progress i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--volt); }
.hs__count{ position:absolute; right:var(--pad); bottom:56px; font-family:var(--font-m); font-size:11px; letter-spacing:.2em; color:var(--dim); }
.hs__count b{ color:var(--volt); font-weight:500; }
.cat{ flex:0 0 clamp(300px,26vw,400px); height:clamp(400px,36vw,500px); position:relative; border:1px solid var(--line-soft); display:flex; overflow:hidden; }
.cat__img{ position:absolute; inset:0; }
.cat__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .8s var(--ease-out); filter:saturate(.9) brightness(.85); }
.cat:hover .cat__img img{ transform:scale(1.0); }
.cat__body{ position:relative; z-index:2; margin-top:auto; padding:26px; width:100%; background:linear-gradient(180deg, transparent, rgba(11,13,14,.9) 60%); }
.cat__num{ font-family:var(--font-m); font-size:11px; color:var(--volt); letter-spacing:.2em; }
.cat__name{ font-family:var(--font-d); font-weight:500; font-size:24px; margin-top:10px; letter-spacing:-.01em; }
.cat__count{ font-family:var(--font-m); font-size:10.5px; color:var(--dim); letter-spacing:.12em; margin-top:8px; text-transform:uppercase; }
.cat__arr{ position:absolute; top:20px; right:20px; z-index:2; font-size:20px; color:var(--dim); transition:color .3s, transform .3s; }
.cat:hover .cat__arr{ color:var(--volt); transform:translate(3px,-3px); }

/* ---------- metrics ---------- */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line-soft); }
.metric{ padding:44px 32px; border-left:1px solid var(--line-soft); }
.metric:first-child{ border-left:none; }
.metric b{ font-family:var(--font-d); font-weight:700; font-size:clamp(38px,3.6vw,58px); letter-spacing:-.02em; display:block; line-height:1; font-variant-numeric:tabular-nums; }
.metric b em{ font-style:normal; color:var(--volt); }
.metric .label{ margin-top:12px; display:block; }

/* ---------- product cards ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pgrid--4{ grid-template-columns:repeat(4,1fr); }
.pcard{ background:var(--card); border:1px solid var(--line-soft); display:flex; flex-direction:column; position:relative; transition:transform .4s var(--ease-out), border-color .4s; }
.pcard__media{ aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--bg-deep); }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__badges{ position:absolute; top:14px; left:14px; display:flex; gap:6px; z-index:4; }
.pcard__body{ padding:20px 20px 0; }
.pcard__title{ font-family:var(--font-d); font-weight:500; font-size:17px; line-height:1.25; letter-spacing:-.01em; min-height:2.5em; }
.pcard__specs{ margin-top:10px; font-family:var(--font-m); font-size:10.5px; letter-spacing:.04em; color:var(--dim); line-height:1.8; }
.pcard__foot{ margin-top:16px; padding:14px 20px; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; }
.price{ font-family:var(--font-m); font-weight:500; font-size:16px; letter-spacing:.02em; color:var(--volt); }
.price small{ font-size:10px; color:var(--dim); display:block; letter-spacing:.1em; margin-top:2px; }
.pcard:hover{ transform:translateY(-5px); border-color:rgba(181,229,29,.4); }
.pcard__quote{ position:absolute; inset:auto 0 58px 0; z-index:5; height:44px; background:var(--volt); color:var(--ink); font-family:var(--font-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; display:flex; align-items:center; justify-content:center; gap:8px; transform:translateY(8px); opacity:0; pointer-events:none; transition:transform .3s var(--ease-out), opacity .3s; border:none; cursor:pointer; }
.pcard:hover .pcard__quote{ transform:none; opacity:1; pointer-events:auto; }

/* ---------- ticker ---------- */
.ticker{ border-block:1px solid var(--line-soft); padding-block:14px; overflow:hidden; }
.ticker__track{ display:flex; width:max-content; will-change:transform; }
.ticker__set{ display:flex; white-space:nowrap; font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ticker__set b{ color:var(--volt); font-weight:500; margin-right:14px; }
.ticker__set span{ margin-right:44px; }

/* ---------- sourcing desk ---------- */
.desk__in{ display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:center; }
.desk__panel{ border:1px solid var(--line); padding:34px; background:rgba(255,255,255,.015); position:relative; overflow:hidden; }
.desk__scan{ position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--volt),transparent); top:0; opacity:.6; }
.desk__row{ display:flex; justify-content:space-between; padding-block:13px; border-bottom:1px solid var(--line-soft); font-family:var(--font-m); font-size:11.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.desk__row:last-child{ border-bottom:none; }
.desk__row b{ color:var(--volt); font-weight:500; }

/* ---------- parallax media band ---------- */
.band{ position:relative; height:clamp(340px,44vw,560px); overflow:hidden; }
.band img{ position:absolute; inset:-14% 0; width:100%; height:128%; object-fit:cover; will-change:transform; }
.band__cap{ position:absolute; left:var(--pad); bottom:28px; z-index:2; }

/* ---------- footer ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line-soft); position:relative; overflow:hidden; }
.footer__bg{ position:absolute; inset:0; opacity:.35; }
.footer__bg video,.footer__bg img{ width:100%; height:100%; object-fit:cover; }
.footer__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,14,.75), rgba(11,13,14,.95)); }
.footer>.container{ position:relative; z-index:2; }
.footer__cta{ padding-block:clamp(64px,8vw,110px); border-bottom:1px solid var(--line-soft); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:48px; padding-block:64px; }
.footer h5{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:18px; font-weight:500; }
.footer li{ margin-bottom:10px; }
.footer li a{ font-size:14px; color:var(--muted); transition:color .2s; } .footer li a:hover{ color:var(--volt); }
.addr{ font-family:var(--font-m); font-size:11.5px; line-height:2; color:var(--muted); letter-spacing:.03em; }
.footer__legal{ display:flex; justify-content:space-between; padding-block:22px; border-top:1px solid var(--line-soft); font-family:var(--font-m); font-size:10px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.footer__legal a{ color:var(--muted); transition:color .25s; }
.footer__legal a:hover{ color:var(--volt); }

/* ---------- RFQ mini-cart ---------- */
.rfq-fab{ position:fixed; right:26px; bottom:26px; z-index:70; display:flex; align-items:center; gap:10px; height:48px; padding:0 20px; background:var(--volt); color:var(--ink); font-family:var(--font-m); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border:none; cursor:pointer; transform:translateY(90px); transition:transform .4s var(--ease-out); }
.rfq-fab.on{ transform:none; }
.rfq-fab b{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; background:var(--ink); color:var(--volt); border-radius:50%; font-size:10px; }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{ --pad:24px; }
  .nav,.header .lang{ display:none; }
  .burger{ display:flex; }
  .pgrid,.pgrid--4{ grid-template-columns:repeat(2,1fr); }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .metric{ border-top:1px solid var(--line-soft); }
  .intro{ grid-template-columns:1fr; gap:20px; }
  .desk__in{ grid-template-columns:1fr; gap:36px; }
  .hero__meta{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  :root{ --pad:16px; }
  .h-display{ font-size:clamp(38px,11vw,52px); }
  .pgrid,.pgrid--4{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
}

/* ---------- catalog: category hero ---------- */
.page{ padding-top:var(--header-h); }
.crumbs{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.crumbs a:hover{ color:var(--volt); }
.crumbs span{ margin:0 10px; color:var(--line); }
.crumb-bar{ padding-block:22px; border-bottom:1px solid var(--line-soft); }

.cat-hero{ position:relative; padding-block:clamp(44px,6vw,84px) clamp(30px,4vw,52px); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.cat-hero__bg{ position:absolute; inset:0; opacity:.22; pointer-events:none; }
.cat-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.cat-hero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 12%, rgba(25,29,32,.55) 55%, var(--bg) 100%); }
.cat-hero>.container{ position:relative; z-index:2; }
.cat-hero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-top:26px; }
.cat-hero__row .lead{ max-width:62ch; margin-top:20px; }
.cat-meta{ text-align:right; display:flex; flex-direction:column; gap:8px; white-space:nowrap; }

/* toolbar */
.toolbar{ border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); z-index:30; }
.toolbar__in{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:18px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:all .2s; background:none; }
.chip:hover{ color:var(--text); border-color:var(--dim); }
.chip.on{ color:var(--volt); border-color:rgba(181,229,29,.5); background:var(--volt-dim); }
.sortbtn{ font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:none; border:none; cursor:pointer; white-space:nowrap; }
.sortbtn b{ color:var(--volt); font-weight:500; }
.sortbtn:hover{ color:var(--text); }

.listing{ padding-block:clamp(36px,4vw,56px); }
.pcard.is-hidden{ display:none; }

/* seo block */
.seo__in{ display:grid; grid-template-columns:220px 1fr; gap:48px; }
.seo__in p{ color:var(--muted); font-size:14.5px; max-width:75ch; margin-bottom:16px; line-height:1.7; }
.seo__in h2,.seo__in h3{ color:var(--text); }
.faq{ max-width:860px; }

/* hub grid */
.hubgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hubcat{ position:relative; height:clamp(280px,24vw,360px); border:1px solid var(--line-soft); overflow:hidden; display:flex; }
.hubcat__img{ position:absolute; inset:0; }
.hubcat__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .8s var(--ease-out); filter:saturate(.9) brightness(.8); }
.hubcat:hover .hubcat__img img{ transform:scale(1); }
.hubcat__body{ position:relative; z-index:2; margin-top:auto; padding:24px; width:100%; background:linear-gradient(180deg, transparent, rgba(11,13,14,.9) 60%); }
.hubcat .cat__arr{ position:absolute; top:18px; right:18px; z-index:2; font-size:20px; color:var(--dim); transition:color .3s, transform .3s; }
.hubcat:hover .cat__arr{ color:var(--volt); transform:translate(3px,-3px); }

/* ---------- product page ---------- */
.product{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,4vw,72px); padding-block:clamp(36px,4.5vw,64px); }
.gal{ position:sticky; top:calc(var(--header-h) + 24px); }
.gal__main{ aspect-ratio:4/3; border:1px solid var(--line-soft); overflow:hidden; background:var(--bg-deep); }
.gal__main img{ width:100%; height:100%; object-fit:cover; }
.gal__cap{ display:flex; justify-content:space-between; padding-top:14px; }
@media (max-width:1024px){ .gal{ position:static; } }

.buy .sku{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; display:block; margin-bottom:14px; }
.buy h1{ font-family:var(--font-d); font-weight:700; font-size:clamp(30px,3vw,42px); line-height:1.06; letter-spacing:-.02em; }
.buy__lead{ font-size:15px; margin-top:16px; }
.pricebox{ margin-top:28px; border:1px solid var(--line); background:rgba(255,255,255,.015); padding:26px; }
.pricebox__row{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.bigprice{ font-family:var(--font-m); font-weight:500; font-size:clamp(30px,2.6vw,38px); color:var(--volt); }
.pricebox__terms{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; text-align:right; line-height:1.9; }
.vol{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); font-family:var(--font-m); font-size:11px; letter-spacing:.06em; color:var(--muted); display:flex; justify-content:space-between; }
.vol b{ color:var(--volt); font-weight:500; }
.stockrows{ margin-top:18px; border:1px solid var(--line-soft); }
.stockrow{ display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line-soft); }
.stockrow:last-child{ border-bottom:none; }
.buy__cta{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.buy__cta .btn{ flex:1; min-width:200px; }
.keyspecs{ margin-top:30px; }
.keyspecs .label{ display:block; margin-bottom:12px; }
.keyspec{ display:flex; gap:16px; padding-block:11px; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.keyspec span:first-child{ font-family:var(--font-m); font-size:11px; color:var(--volt); padding-top:2px; }

.lower{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,4vw,72px); padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--line-soft); }
.spec{ width:100%; border-collapse:collapse; }
.spec tr{ border-bottom:1px solid var(--line-soft); }
.spec td{ padding:15px 4px; vertical-align:top; }
.spec td:first-child{ font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); width:38%; }
.spec td:last-child{ font-size:14.5px; }
.prose p{ color:var(--muted); font-size:15px; max-width:60ch; margin-bottom:14px; line-height:1.7; }
.related{ padding-block:clamp(40px,5vw,72px); }

/* accordion */
.acc__item{ border-bottom:1px solid var(--line-soft); }
.acc__item:first-child{ border-top:1px solid var(--line-soft); }
.acc__head{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:20px 4px; cursor:pointer; background:none; border:none; color:var(--text); text-align:left; }
.acc__head h3,.acc__head h4{ font-family:var(--font-d); font-weight:500; font-size:16.5px; letter-spacing:-.01em; }
.acc__head .x{ font-family:var(--font-m); color:var(--volt); font-size:18px; flex:0 0 auto; margin-left:16px; }
.acc__body{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease-out); }
.acc__item.open .acc__body{ max-height:400px; }
.acc__body p{ padding:0 4px 22px; color:var(--muted); font-size:14.5px; max-width:70ch; line-height:1.7; }

@media (max-width:1024px){
  .product,.lower{ grid-template-columns:1fr; }
  .cat-hero__row{ flex-direction:column; align-items:flex-start; }
  .cat-meta{ text-align:left; }
  .seo__in{ grid-template-columns:1fr; gap:20px; }
  .toolbar__in{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hubgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .hubgrid{ grid-template-columns:1fr; }
}

/* ---------- corporate pages ---------- */
.c-hero{ position:relative; padding-block:clamp(90px,12vw,170px) clamp(70px,9vw,130px); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.c-hero__bg{ position:absolute; inset:0; opacity:.35; }
.c-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.c-hero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,29,32,.5), var(--bg) 92%); }
.c-hero__in{ position:relative; z-index:2; }
.c-hero__in h1{ max-width:14ch; margin-top:24px; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.step{ background:var(--bg); padding:34px 28px 40px; min-height:250px; }
.section--deep .step{ background:var(--bg-deep); }
.step b{ font-family:var(--font-m); font-size:11px; letter-spacing:.2em; color:var(--volt); font-weight:500; }
.step h3{ font-family:var(--font-d); font-weight:500; font-size:21px; margin-top:52px; letter-spacing:-.01em; }
.step p{ font-size:13.5px; color:var(--dim); margin-top:12px; line-height:1.6; }

.offices{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.office{ border:1px solid var(--line-soft); position:relative; min-height:420px; display:flex; overflow:hidden; }
.office__img{ position:absolute; inset:0; }
.office__img img{ width:100%; height:100%; object-fit:cover; filter:brightness(.75); }
.office__body{ position:relative; z-index:2; margin-top:auto; width:100%; padding:30px; background:linear-gradient(180deg, transparent, rgba(8,10,11,.94) 60%); }
.office__city{ font-family:var(--font-d); font-weight:700; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.02em; }
.office__role{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.16em; color:var(--volt); text-transform:uppercase; display:block; margin-bottom:10px; }
.office--sm{ min-height:260px; }

.sol{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.sol--flip{ direction:rtl; } .sol--flip>*{ direction:ltr; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.cform{ display:grid; grid-template-columns:1fr 1fr; gap:22px; position:relative; }
.cfield{ display:flex; flex-direction:column; gap:10px; }
.cfield--full{ grid-column:1 / -1; }
.cform input,.cform select,.cform textarea{
  background:rgba(255,255,255,.02); border:1px solid var(--line); color:var(--text);
  font-family:var(--font-b); font-size:15px; padding:14px 16px; outline:none; width:100%;
  transition:border-color .25s; border-radius:0; -webkit-appearance:none; appearance:none;
}
.cform select{ background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.cform input:focus,.cform select:focus,.cform textarea:focus{ border-color:var(--volt); }
.cform textarea{ resize:vertical; min-height:140px; }
.contact-side{ display:flex; flex-direction:column; gap:20px; }
.contact-grid .cform textarea{ min-height:360px; } /* balance the form column against the office cards */
.form-note{ color:var(--volt) !important; }

/* parallax bleed wrapper */
[data-parallax-wrap]{ overflow:hidden; }
[data-parallax-wrap] img{ position:absolute; left:0; width:100%; top:-12%; height:124%; object-fit:cover; }

/* scrub-text: words light up on scroll */
.js [data-scrub-text] .w{ opacity:.16; transition:none; }
html.static [data-scrub-text] .w, html.reduced [data-scrub-text] .w{ opacity:1 !important; }

/* draw line (mission rail) */
.intro--line .intro__rail{ display:flex; flex-direction:column; gap:18px; }
.draw-line{ display:block; width:1px; flex:1; min-height:180px; background:var(--line-soft); position:relative; overflow:hidden; }
.draw-line::after{ content:''; position:absolute; inset:0; background:var(--volt); transform:scaleY(0); transform-origin:top; }
html.static .draw-line::after, html.reduced .draw-line::after{ transform:none; }
@media (max-width:1024px){ .draw-line{ display:none; } }

/* warehouse ambient band (autoplay loop, no pin) */
.wband{ position:relative; height:min(72vh,780px); min-height:480px; background:var(--ink); overflow:hidden; border-block:1px solid var(--line-soft); }
.wband__media{ position:absolute; inset:0; overflow:hidden; }
.wband__media video{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; will-change:transform; }
.wband__shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,13,14,.58) 0%, rgba(11,13,14,.1) 44%, rgba(11,13,14,.8) 100%); }
.wband__cap{ position:absolute; left:0; right:0; bottom:clamp(32px,5vh,60px); z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.wband__lead .label{ display:block; margin-bottom:14px; }
.wband__title{ font-family:var(--font-d); font-weight:700; font-size:clamp(28px,3.2vw,44px); line-height:1.06; letter-spacing:-.02em; max-width:17ch; }
.wband__geo{ color:var(--muted); white-space:nowrap; padding-bottom:7px; }
html.capture .wband{ height:640px; min-height:0; }
@media (max-width:600px){
  .wband{ min-height:420px; }
  .wband__geo{ display:none; }
  .wband__media video{ object-position:38% 50%; } /* keep the pulled-out shelf in frame on narrow crops */
}

/* meridian timeline (zigzag, draw-line scrub) */
.tl{ --tl-gap:clamp(44px,6vw,96px); --tl-dot:clamp(38px,3.4vw,54px); position:relative; padding-block:clamp(8px,1.6vw,20px) clamp(20px,3vw,44px); }
.tl__line{ position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; background:var(--line-soft); overflow:hidden; }
.tl__line::after{ content:''; position:absolute; inset:0; background:var(--volt); transform:scaleY(0); transform-origin:top; }
html.static .tl__line::after, html.reduced .tl__line::after{ transform:none; }
.tl__node{
  position:relative; width:calc(50% - var(--tl-gap));
  padding:clamp(26px,2.6vw,40px) clamp(24px,2.4vw,38px) clamp(30px,3vw,44px);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.015);
  transition:border-color .3s, background .3s;
}
.tl__node + .tl__node{ margin-top:clamp(36px,4.5vw,72px); }
.tl__node:nth-of-type(even){ margin-left:auto; }
.tl__node::before{ content:''; position:absolute; top:var(--tl-dot); width:var(--tl-gap); height:1px; background:var(--line-soft); }
.tl__node::after{
  content:''; position:absolute; top:var(--tl-dot); width:9px; height:9px; margin-top:-4px;
  border-radius:50%; background:var(--volt); box-shadow:0 0 0 6px var(--volt-dim);
}
.tl__node:nth-of-type(odd)::before{ left:100%; }
.tl__node:nth-of-type(odd)::after{ left:calc(100% + var(--tl-gap)); margin-left:-4.5px; }
.tl__node:nth-of-type(even)::before{ right:100%; }
.tl__node:nth-of-type(even)::after{ right:calc(100% + var(--tl-gap)); margin-right:-4.5px; }
.tl__num{ display:block; font-family:var(--font-m); font-weight:500; font-size:clamp(26px,2.6vw,38px); line-height:1; letter-spacing:-.02em; color:var(--dim); transition:color .3s; }
.tl__title{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,2vw,26px); letter-spacing:-.01em; margin-top:18px; }
.tl__text{ color:var(--muted); font-size:14.5px; line-height:1.7; margin-top:12px; }
.tl__node:hover{ border-color:var(--line); background:rgba(255,255,255,.03); }
.tl__node:hover .tl__num{ color:var(--volt); }
@media (max-width:900px){
  .tl{ --tl-gap:26px; --tl-dot:34px; }
  .tl__line{ left:6px; margin-left:0; }
  .tl__node, .tl__node:nth-of-type(even){ width:auto; margin-left:calc(var(--tl-gap) + 7px); }
  .tl__node + .tl__node{ margin-top:28px; }
  .tl__node:nth-of-type(odd)::before, .tl__node:nth-of-type(even)::before{ left:auto; right:100%; width:var(--tl-gap); }
  .tl__node:nth-of-type(odd)::after, .tl__node:nth-of-type(even)::after{ left:auto; right:calc(100% + var(--tl-gap)); margin-left:0; margin-right:-4.5px; }
}

/* contact side: volt CTA card */
.side-cta{
  display:block; border:1px solid rgba(181,229,29,.4); background:var(--volt-dim);
  padding:26px 28px 24px; transition:border-color .3s, background .3s;
}
.side-cta b{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--font-d); font-weight:700; font-size:clamp(21px,1.9vw,27px); letter-spacing:-.015em;
  margin-top:10px; color:var(--text);
}
.side-cta b i{ font-style:normal; color:var(--volt); transition:transform .3s; }
.side-cta:hover{ border-color:var(--volt); background:rgba(181,229,29,.22); }
.side-cta:hover b i{ transform:translateX(6px); }
.side-cta__meta{
  display:block; font-family:var(--font-m); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.side-cta b + .side-cta__meta{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(181,229,29,.25); }
.side-cta__meta + .side-cta__meta{ margin-top:8px; }
.mail{
  display:inline-flex; align-items:baseline; gap:10px; margin-top:16px;
  font-family:var(--font-m); font-weight:500; font-size:14.5px; letter-spacing:.02em; color:var(--text);
  border-bottom:1px solid var(--line); padding-bottom:6px; transition:color .25s, border-color .25s;
}
.mail span{ color:var(--dim); transition:transform .25s, color .25s; }
.mail:hover{ color:var(--volt); border-color:var(--volt); }
.mail:hover span{ color:var(--volt); transform:translateX(4px); }

/* custom select */
.csel{ position:relative; }
.csel select{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.csel__btn{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:rgba(255,255,255,.02); border:1px solid var(--line); color:var(--text);
  font-family:var(--font-b); font-size:15px; padding:14px 16px; cursor:pointer; text-align:left;
  transition:border-color .25s;
}
.csel__btn i{ font-style:normal; color:var(--dim); font-size:11px; margin-left:12px; transition:transform .25s; }
.csel.open .csel__btn,.csel__btn:focus{ border-color:var(--volt); }
.csel.open .csel__btn i{ transform:rotate(180deg); color:var(--volt); }
.csel__list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--ink); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .22s, transform .22s var(--ease-out);
}
.csel.open .csel__list{ opacity:1; transform:none; pointer-events:auto; }
.csel__opt{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:var(--font-b); font-size:14.5px; padding:13px 16px;
  border-bottom:1px solid var(--line-soft); transition:color .15s, background .15s;
}
.csel__opt:last-child{ border-bottom:none; }
.csel__opt:hover{ color:var(--text); background:rgba(255,255,255,.03); }
.csel__opt.on{ color:var(--volt); }
.csel__opt.on::after{ content:' ●'; font-size:9px; vertical-align:middle; }

/* editorial index rows */
.idx{ border-top:1px solid var(--line-soft); }
.idx__row{
  display:grid; grid-template-columns:140px 1fr 1.6fr; gap:clamp(20px,4vw,64px); align-items:start;
  padding-block:clamp(28px,3.4vw,44px); border-bottom:1px solid var(--line-soft);
  transition:background .3s;
}
.idx__row:hover{ background:rgba(255,255,255,.012); }
.idx__num{
  font-family:var(--font-m); font-weight:500; font-size:clamp(28px,3vw,44px); line-height:1;
  color:var(--dim); transition:color .3s; letter-spacing:-.02em;
}
.idx__row:hover .idx__num{ color:var(--volt); }
.idx__title{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,2vw,26px); letter-spacing:-.01em; }
.idx__text{ color:var(--muted); font-size:14.5px; line-height:1.7; max-width:60ch; }
@media (max-width:1024px){
  .idx__row{ grid-template-columns:70px 1fr; }
  .idx__text{ grid-column:2; }
}
@media (max-width:600px){
  .idx__row{ grid-template-columns:1fr; gap:10px; }
  .idx__text{ grid-column:1; }
}

@media (max-width:1024px){
  .steps{ grid-template-columns:1fr 1fr; }
  .offices{ grid-template-columns:1fr; }
  .sol,.sol--flip{ grid-template-columns:1fr; direction:ltr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .steps{ grid-template-columns:1fr; } .step{ min-height:auto; } .step h3{ margin-top:20px; }
  .cform{ grid-template-columns:1fr; }
}

/* capture mode: cap viewport-height sections for full-page screenshots */
html.capture .hero{ min-height:820px !important; }
@media (max-width:600px){ html.capture .hero{ min-height:700px !important; } }

/* ---------- legal pages ---------- */
.legal{ max-width:860px; }
.legal h2{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--font-d); font-weight:500; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:-.01em; margin:46px 0 14px;
}
.legal h2:first-child{ margin-top:0; }
.legal h2 span{ font-family:var(--font-m); font-weight:500; font-size:12px; letter-spacing:.14em; color:var(--volt); }
.legal p, .legal li{ color:var(--muted); font-size:15px; line-height:1.75; }
.legal p + p{ margin-top:12px; }
.legal ul{ margin-top:12px; }
.legal li{ padding-left:18px; position:relative; margin-top:8px; }
.legal li::before{ content:''; position:absolute; left:0; top:.78em; width:6px; height:1px; background:var(--volt); }
.legal a{ color:var(--text); border-bottom:1px solid var(--line); transition:color .25s, border-color .25s; }
.legal a:hover{ color:var(--volt); border-color:var(--volt); }
.legal-meta{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:22px; }

/* ---------- 404 ---------- */
.e404 .h-display{ max-width:none; }
.e404__code{
  font-family:var(--font-m); font-weight:500; font-size:clamp(15px,1.4vw,18px);
  letter-spacing:.2em; color:var(--volt); display:block; margin-bottom:18px;
}
.e404 .hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }

/* ---------- static / reduced-motion ---------- */
html.static *, html.static *::before, html.static *::after{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
  body::after{ animation:none; }
}