/* ==========================================================================
   METAL-X DOO — Design System & Stylesheet
   Dark industrial / minimal / mobile-first
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* surfaces — nudged ~2% warmer than the original cool greys so the brand red
     does not read muddy against them (blue channel pulled toward the red hue) */
  --ink-1000:#060508;
  --ink-900:#08070B;
  --ink-850:#0B0A0F;
  --ink-800:#0E0D12;
  --ink-700:#131218;
  --ink-600:#191820;
  --ink-500:#211F29;

  /* text */
  --fg:#EEEFF2;
  --fg-soft:#B9BCC5;
  --fg-mute:#8A8E9A;
  --fg-dim:#5F636E;

  /* brand — measured from assets/img/metal-x-turija-logo.png
     (python _build/extract_palette.py). Brand red as measured is #EE2024;
     --accent is that red darkened 8% so a #FFF button label clears AA
     (5.06:1). Red on the dark surface is 3.97:1 => large text / icons only,
     so all small text uses --accent-2 gold (13.35:1). */
  --accent:#D91D21;
  --accent-2:#E5D54C;
  --accent-3:#E2E2A0;
  --accent-dark:#901915;
  --accent-ink:#FFFFFF;
  --accent-glow:rgba(217,29,33,.30);

  /* lines & glass */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);

  /* status */
  --ok:#3ECF8E;
  --warn:#E5D54C;
  --err:#FF5C5C;

  /* type */
  --font-display:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --fs-display:clamp(2.6rem,1.2rem + 6.2vw,7rem);
  --fs-h1:clamp(2.1rem,1.15rem + 4.1vw,4.5rem);
  --fs-h2:clamp(1.7rem,1.05rem + 2.6vw,3.2rem);
  --fs-h3:clamp(1.25rem,1rem + 1.1vw,1.9rem);
  --fs-h4:clamp(1.05rem,.95rem + .5vw,1.3rem);
  --fs-body:clamp(.95rem,.9rem + .25vw,1.06rem);
  --fs-sm:.875rem;
  --fs-xs:.76rem;

  /* space */
  --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;
  --section:clamp(4rem,2.2rem + 8vw,9rem);
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.5rem);
  --maxw:1320px;

  /* radii */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* elevation */
  --sh-1:0 2px 8px rgba(0,0,0,.4);
  --sh-2:0 12px 40px rgba(0,0,0,.5);
  --sh-3:0 30px 90px rgba(0,0,0,.65);
  --sh-accent:0 18px 60px -18px var(--accent-glow);

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.22s; --t-mid:.45s; --t-slow:.9s;

  --header-h:76px;
  --app-h:100vh;
  scroll-behavior:smooth;
}
@supports (height:100svh){ :root{ --app-h:100svh } }

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--fg-soft);
  background:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100%;
}
body.is-locked{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--fg);line-height:1.06;font-weight:700;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4);line-height:1.25}
p{max-width:72ch}
strong{color:var(--fg);font-weight:600}

/* scrollbar */
@media (min-width:1024px){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--ink-1000)}
  ::-webkit-scrollbar-thumb{background:var(--ink-500);border-radius:99px;border:2px solid var(--ink-1000)}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent)}
}

/* ---------- 3. LAYOUT UTILITIES ------------------------------------------ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1600px}
.container--narrow{max-width:880px}
.section{padding-block:var(--section);position:relative}
.section--tight{padding-block:calc(var(--section) * .6)}
.section--alt{background:linear-gradient(180deg,var(--ink-900),var(--ink-850) 50%,var(--ink-900))}
.grid{display:grid;gap:var(--sp-5)}
.flow > * + *{margin-top:var(--sp-4)}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}
.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}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.eyebrow--center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.7}

.lead{font-size:clamp(1.02rem,.95rem + .5vw,1.28rem);color:var(--fg-soft);line-height:1.6}
.muted{color:var(--fg-mute)}
.accent{color:var(--accent)}
.hairline{height:1px;background:var(--line);border:0;margin-block:var(--sp-6)}

.section-head{max-width:820px;margin-bottom:clamp(2rem,1rem + 3vw,4rem)}
.section-head.center{text-align:center}
.section-head h2 + p{margin-top:var(--sp-4)}

/* decorative grid backdrop */
.bg-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(0deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,8vw,110px) clamp(60px,8vw,110px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%)}
.bg-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.5;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%)}

/* ---------- 4. BUTTONS --------------------------------------------------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:.95rem 1.6rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  color:var(--btn-fg);background:var(--btn-bg);
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid) var(--e-out),color var(--t-fast);
  box-shadow:var(--sh-accent);
}
/* Hover slides the logo's gold under the label. White would sit at ~1.5:1 on
   gold, so the label flips to near-black (12.8:1) for the hover state. */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--accent-2),var(--accent-3));
  transform:translateY(101%);transition:transform var(--t-mid) var(--e-out)}
.btn:hover{transform:translateY(-2px);--btn-fg:#14120A}
.btn:hover svg{color:#14120A}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--t-mid) var(--e-out)}
.btn:hover svg{transform:translateX(4px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);box-shadow:none;border:1px solid var(--line-2)}
.btn--ghost::after{background:var(--fg)}
.btn--ghost:hover{color:var(--ink-900);border-color:transparent}
.btn--ghost:hover svg{transform:translateX(4px)}

.btn--glass{--btn-bg:var(--glass-2);--btn-fg:var(--fg);box-shadow:none;
  border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn--glass::after{background:var(--accent)}
.btn--glass:hover{color:#fff;border-color:transparent}

.btn--sm{padding:.65rem 1.15rem;font-size:.85rem}
.btn--lg{padding:1.15rem 2rem;font-size:1.02rem}
.btn--block{display:flex;width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--fg);font-weight:600;
  font-family:var(--font-display);position:relative;padding-block:.2rem}
.link-arrow::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-2);
  transform-origin:right;transform:scaleX(1);transition:transform .4s var(--e-out)}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0);transition:transform .4s var(--e-out) .08s}
.link-arrow:hover::before{transform:scaleX(0)}
.link-arrow:hover::after{transform:scaleX(1)}
.link-arrow svg{width:16px;height:16px;transition:transform .4s var(--e-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- 5. PRELOADER ------------------------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--ink-1000);
  transition:opacity .6s var(--e-out),visibility .6s;
}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem;width:min(320px,72vw);text-align:center}
.preloader__mark{height:56px;position:relative;display:grid;place-items:center}
.preloader__mark svg{width:100%;height:100%;animation:pl-pulse 1.6s var(--e-in-out) infinite}
/* transparent PNG on the dark curtain — keep the pulse, it is not a light plate */
.preloader__mark img{height:56px;width:auto;display:block;animation:pl-pulse 1.6s var(--e-in-out) infinite}
@keyframes pl-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.55}}
.preloader__name{font-family:var(--font-display);font-weight:700;letter-spacing:.34em;
  font-size:.78rem;text-transform:uppercase;color:var(--fg-mute)}
.preloader__bar{width:100%;height:2px;background:var(--ink-600);border-radius:2px;overflow:hidden}
.preloader__fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-3));
  transition:width .18s linear}
.preloader__pct{font-family:var(--font-mono);font-size:.75rem;color:var(--fg-dim);letter-spacing:.1em}
.preloader__curtains{position:absolute;inset:0;display:flex;pointer-events:none}
.preloader__curtains span{flex:1;background:var(--ink-1000);transform-origin:top;
  transform:scaleY(1);transition:transform .85s var(--e-out)}
.preloader.is-done .preloader__inner{opacity:0;transform:translateY(-14px);transition:.4s var(--e-out)}
.preloader.is-done .preloader__curtains span{transform:scaleY(0)}
.preloader.is-hidden{opacity:0;visibility:hidden}

/* page-transition curtain */
.curtain{position:fixed;inset:0;z-index:9998;pointer-events:none;display:flex}
.curtain span{flex:1;background:var(--ink-1000);transform:scaleY(0);transform-origin:bottom}
.curtain.is-active span{transform:scaleY(1);transform-origin:bottom;transition:transform .5s var(--e-out)}
.curtain.is-active span:nth-child(2){transition-delay:.05s}
.curtain.is-active span:nth-child(3){transition-delay:.1s}
.curtain.is-active span:nth-child(4){transition-delay:.15s}
.curtain.is-active span:nth-child(5){transition-delay:.2s}

/* ---------- 6. SCROLL PROGRESS + CURSOR ---------------------------------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1200;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent-3))}
.cursor{position:fixed;top:0;left:0;z-index:9990;pointer-events:none;mix-blend-mode:difference;
  width:9px;height:9px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s}
.cursor-ring{position:fixed;top:0;left:0;z-index:9989;pointer-events:none;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.4);border-radius:50%;transform:translate(-50%,-50%);opacity:0;
  transition:width .3s var(--e-out),height .3s var(--e-out),opacity .3s,border-color .3s,background .3s}
body.cursor-ready .cursor,body.cursor-ready .cursor-ring{opacity:1}
body.cursor-hover .cursor-ring{width:64px;height:64px;border-color:var(--accent);background:rgba(217,29,33,.10)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none!important}}

/* ---------- 7. HEADER ---------------------------------------------------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  transition:transform .45s var(--e-out),background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
/* Own scrim: the photographs behind the transparent header are now bright, so
   the nav needs local protection. Darkening the image instead would defeat the
   whole point of Fix 1. Fades out below the bar; hidden once .is-stuck glass
   takes over. */
.header::after{content:"";position:absolute;inset:0 0 auto;height:158px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,9,.95) 0%,rgba(5,6,9,.60) 42%,rgba(5,6,9,0) 100%);
  transition:opacity .35s}
.header.is-stuck::after{opacity:0}
.header__bar{
  display:flex;align-items:center;gap:var(--sp-4);
  height:var(--header-h);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.header.is-stuck{
  background:rgba(7,8,12,.78);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.header.is-hidden{transform:translateY(-102%)}

.brand{display:flex;align-items:center;gap:.7rem;color:var(--fg);flex:none;z-index:2}
/* Real logo lockup. Width is always auto so the mark can never be squashed;
   the sizes below are heights only. */
.brand img{height:32px;width:auto;display:block}
@media (min-width:600px){.brand img{height:42px}}
/* the glass .is-stuck header must not rescale or soften the mark */
.header.is-stuck .brand img{height:32px}
@media (min-width:600px){.header.is-stuck .brand img{height:38px}}
.footer .brand img{height:48px}
.brand__txt{display:none;line-height:1}
@media (min-width:420px){.brand__txt{display:block}}
.brand__name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:.02em;line-height:1}
.brand__sub{display:block;margin-top:.28rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap}

/* desktop nav */
.nav{display:none;margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:.15rem}
.nav__link{
  position:relative;display:flex;align-items:center;gap:.35rem;
  padding:.6rem .8rem;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:500;color:var(--fg-soft);white-space:nowrap;
  transition:color var(--t-fast);
}
.nav__link:hover,.nav__item.is-open > .nav__link{color:var(--fg)}
.nav__link[aria-current="page"]{color:var(--fg)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;background:var(--accent);border-radius:2px}
.nav__link .chev{width:11px;height:11px;transition:transform var(--t-fast) var(--e-out);opacity:.6}
.nav__item.is-open .chev{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:calc(100% - 8px);left:50%;transform:translate(-50%,10px);
  min-width:min(560px,90vw);padding:.6rem;
  background:rgba(13,15,20,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transition:opacity .3s var(--e-out),transform .3s var(--e-out),visibility .3s;
}
.nav__item.is-open .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__panel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
.nav__sub{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .8rem;border-radius:var(--r-md);
  transition:background var(--t-fast)}
.nav__sub:hover{background:var(--glass-2)}
.nav__sub-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--line);color:var(--accent)}
.nav__sub-ico svg{width:16px;height:16px}
.nav__sub b{display:block;color:var(--fg);font-size:.88rem;font-weight:600;font-family:var(--font-display)}
.nav__sub span{display:block;color:var(--fg-dim);font-size:.76rem;line-height:1.45}

.header__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none;z-index:2}

/* language toggle */
.lang{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--glass);position:relative}
/* position:relative keeps the labels above .lang__thumb — the thumb is the only
   positioned child otherwise, so it painted over whichever label was active. */
.lang button{position:relative;z-index:1;padding:.32rem .62rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;
  font-family:var(--font-mono);letter-spacing:.08em;color:var(--fg-dim);transition:color var(--t-fast)}
.lang button.is-active{color:var(--ink-900)}
.lang__thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--r-pill);
  background:var(--fg);transition:transform .35s var(--e-out)}
.lang[data-lang="en"] .lang__thumb{transform:translateX(100%)}

@media (min-width:1140px){
  .nav{display:block}
  .burger{display:none}
}

/* burger */
.burger{position:relative;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--glass);display:grid;place-items:center;z-index:2}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg);border-radius:2px;
  transition:transform .4s var(--e-out),opacity .3s}
.burger span + span{margin-top:5px}
.burger.is-active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-active span:nth-child(2){opacity:0}
.burger.is-active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:1090;
  background:var(--ink-950,#06070B);
  background:linear-gradient(180deg,#07080C,#0A0B10);
  display:flex;flex-direction:column;
  clip-path:circle(0% at calc(100% - 42px) 38px);
  transition:clip-path .75s var(--e-out);
  visibility:hidden;
}
.drawer.is-open{clip-path:circle(150% at calc(100% - 42px) 38px);visibility:visible}
.drawer__scroll{flex:1;overflow-y:auto;padding:calc(var(--header-h) + .9rem) var(--gutter) 2rem;
  overscroll-behavior:contain}
.drawer__list{display:flex;flex-direction:column}
.drawer__row{border-bottom:1px solid var(--line)}
/* Eleven rows at ~74px each overflowed an 800px-tall viewport. Tighter padding
   and a smaller clamp ceiling bring a full row down to ~48px. */
.drawer__link{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,.95rem + .45vw,1.2rem);color:var(--fg);width:100%;text-align:left}
.drawer__link .chev{width:16px;height:16px;color:var(--fg-dim);transition:transform .35s var(--e-out)}
.drawer__row.is-open .chev{transform:rotate(180deg);color:var(--accent)}
.drawer__panel{overflow:hidden;height:0;transition:height .45s var(--e-out)}
.drawer__panel ul{padding-bottom:.9rem;display:flex;flex-direction:column;gap:.1rem}
.drawer__panel a{display:block;padding:.42rem 0 .42rem 1rem;color:var(--fg-mute);font-size:.9rem;
  border-left:1px solid var(--line);transition:color var(--t-fast),border-color var(--t-fast),padding-left var(--t-fast)}
.drawer__panel a:hover{color:var(--accent-2);border-color:var(--accent-2);padding-left:1.3rem}
.drawer__foot{padding:1.1rem 0 0;display:grid;gap:.9rem}
.drawer__contact{display:grid;gap:.5rem;font-size:.92rem}
.drawer__contact a{display:flex;align-items:center;gap:.6rem;color:var(--fg-soft)}
.drawer__contact svg{width:16px;height:16px;color:var(--accent)}
.drawer .stagger{opacity:0;transform:translateY(22px)}
.drawer.is-open .stagger{opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
/* short viewports (e.g. 1280x720 laptop): shave the rows further */
@media (max-height:760px){
  .drawer__link{padding:.55rem 0;font-size:1rem}
  .drawer__contact{font-size:.85rem;gap:.35rem}
}
/* From 900px the drawer has masses of unused width while overflowing
   vertically: menu left, contact + CTA right, both vertically centred.
   overflow-y:auto stays as the fallback. */
@media (min-width:900px){
  .drawer__scroll{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(2rem,1rem + 3vw,5rem);
    align-content:center;
    max-width:var(--maxw);
    margin-inline:auto;
  }
  .drawer__foot{align-self:center;border-top:0;padding-top:0}
}

/* ---------- 8. HERO SLIDER ----------------------------------------------- */
.hero{position:relative;height:var(--app-h);min-height:520px;overflow:hidden;background:var(--ink-1000)}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--e-in-out),visibility 1.1s}
.hero__slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);
  transition:transform 8s linear}
.hero__slide.is-active .hero__media img{transform:scale(1)}
/* Scrim is LOCALISED to the text block instead of covering the whole frame.
   The old pair of full-bleed gradients (vertical + horizontal) multiplied where
   they overlapped — bottom-left, exactly under the headline — and crushed the
   photograph to ~0.014 mean luminance. */
.hero__media::after{content:"";position:absolute;inset:0;
  background:
    /* localised scrim behind the headline, bottom-left */
    radial-gradient(58% 46% at 32% 54%, rgba(5,6,9,.93) 0%, rgba(5,6,9,.66) 44%, rgba(5,6,9,0) 100%),
    /* edge falloff only — the middle band is left completely clear so the
       photograph reads at close to its own luminance */
    linear-gradient(180deg, rgba(5,6,9,.30) 0, rgba(5,6,9,0) 22%, rgba(5,6,9,0) 78%, rgba(7,8,12,.88) 100%)}
/* The exported files carry a baked-in 0.94 brightness grade; this lifts the
   photograph back up without re-encoding anything. brightness/saturate are
   GPU-cheap — unlike blur(), which is never used on hero imagery. */
.hero__media img{filter:brightness(1.50) saturate(1.08)}
.hero__media::before{content:"";position:absolute;inset:0;z-index:2;opacity:.16;
  background-image:linear-gradient(0deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:100% 4px}
/* mobile: the text block is wider and sits lower, so widen + recentre the radial */
@media (max-width:760px){
  .hero__media::after{
    background:
      radial-gradient(95% 42% at 50% 52%, rgba(5,6,9,.90) 0%, rgba(5,6,9,.60) 46%, rgba(5,6,9,0) 100%),
      linear-gradient(180deg, rgba(5,6,9,.30) 0, rgba(5,6,9,0) 20%, rgba(5,6,9,0) 70%, rgba(7,8,12,.94) 100%)}
}

.hero__inner{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(5.5rem,4rem + 8vw,8rem);padding-top:calc(var(--header-h) + 1rem)}
.hero__content{max-width:940px}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.7rem;padding:.42rem .9rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(5,6,9,.78);backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
  margin-bottom:var(--sp-5)}
.hero__eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative}
.hero__eyebrow i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);
  animation:ping 2s var(--e-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* Text shadow buys ~15-20% of scrim back for free: same measured legibility,
   much brighter photograph behind it. */
.hero h1,.hero h2,.hero__sub{text-shadow:0 2px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
.pagehero h1,.pagehero p{text-shadow:0 2px 22px rgba(0,0,0,.5)}
.hero h1,.hero h2{font-size:var(--fs-display);line-height:.94;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.hero h1 .split-line,.hero h2 .split-line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .split-line > span,.hero h2 .split-line > span{display:inline-block;transform:translateY(110%);
  transition:transform 1.05s var(--e-out)}
.hero__slide.is-active h1 .split-line > span{transform:none}
.hero h1 .split-line:nth-child(2) > span,.hero h2 .split-line:nth-child(2) > span{transition-delay:.1s}
.hero h1 em,.hero h2 em{font-style:normal;color:var(--accent);position:relative}
.hero__sub{margin-top:var(--sp-5);max-width:60ch;font-size:clamp(1rem,.94rem + .5vw,1.22rem);color:#DCDEE4}
.hero__actions{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:.8rem}

.hero__meta{margin-top:clamp(2rem,1rem + 3vw,3.2rem);display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:760px){.hero__meta{grid-template-columns:repeat(4,1fr)}}
.hero__meta div{background:rgba(7,8,12,.55);backdrop-filter:blur(6px);padding:1rem .3rem 1rem 1rem}
.hero__meta b{display:block;font-family:var(--font-display);font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);color:#fff;line-height:1}
.hero__meta span{display:block;margin-top:.35rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}

/* slider controls */
/* raised so it never collides with the assistant launcher (bottom-left) */
.hero__ui{position:absolute;left:0;right:0;bottom:calc(clamp(1rem,.6rem + 1vw,1.6rem) + 64px);z-index:6}
.hero__ui-inner{display:flex;align-items:center;gap:1rem;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hero__dots{display:flex;gap:.55rem;align-items:center}
.hero__dot{position:relative;width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.hero__dot i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.hero__dot.is-active i{animation:dotfill var(--slide-dur,6500ms) linear forwards}
.hero.is-paused .hero__dot.is-active i{animation-play-state:paused}
@keyframes dotfill{to{transform:scaleX(1)}}
.hero__count{font-family:var(--font-mono);font-size:.76rem;color:var(--fg-mute);letter-spacing:.1em}
.hero__count b{color:#fff}
.hero__count i{font-style:normal}
.hero__arrows{display:none;gap:.5rem;margin-left:auto}
@media (min-width:760px){.hero__arrows{display:flex}}
.hero__arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.hero__arrow:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.hero__arrow svg{width:16px;height:16px}

.hero__scroll{position:absolute;right:var(--gutter);bottom:calc(clamp(1rem,.6rem + 1vw,1.6rem) + 128px);
  z-index:6;display:none;align-items:center;gap:.6rem;writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute)}
@media (min-width:1024px){.hero__scroll{display:flex}}
.hero__scroll::after{content:"";width:1px;height:56px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:scrollline 2.4s var(--e-in-out) infinite}
@keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 9. PAGE HERO (inner pages) ----------------------------------- */
.pagehero{position:relative;padding-top:calc(var(--header-h) + clamp(3rem,2rem + 5vw,6rem));
  padding-bottom:clamp(2.5rem,1.5rem + 4vw,5rem);overflow:hidden;background:var(--ink-850);
  border-bottom:1px solid var(--line)}
/* was opacity:.5 PLUS a heavy full-bleed gradient — the two multiplied and the
   photo all but vanished (~0.011). Opacity now near-full; the darkening is done
   only by a localised scrim anchored to the text. */
.pagehero__bg{position:absolute;inset:0;opacity:1}
.pagehero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.78) saturate(1.10)}
.pagehero__bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 58% at 30% 56%, rgba(7,8,12,.93) 0%, rgba(7,8,12,.78) 46%, rgba(7,8,12,0) 100%),
    linear-gradient(180deg, rgba(7,8,12,.24) 0, rgba(7,8,12,0) 24%, rgba(7,8,12,0) 86%, rgba(7,8,12,.50) 100%)}
.pagehero .container{position:relative;z-index:2}
.pagehero h1{max-width:20ch;text-wrap:balance}
.pagehero p{margin-top:var(--sp-4);max-width:62ch}
.pagehero p.lead{color:#DCDEE4}
.pagehero .crumbs{text-shadow:0 2px 14px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.6)}
.pagehero .crumbs a{color:#E4E6EB}
.pagehero .crumbs i{color:#AEB2BC}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:var(--sp-5);
  font-size:.8rem;color:var(--fg-dim);font-family:var(--font-mono)}
.crumbs a{color:var(--fg-mute);transition:color var(--t-fast)}
.crumbs a:hover{color:var(--accent-2)}
.crumbs span[aria-current]{color:var(--accent-2)}
.crumbs i{opacity:.4}

/* ---------- 10. CARDS ---------------------------------------------------- */
.cards{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.6rem)}
.cards--2{grid-template-columns:1fr}
.cards--3{grid-template-columns:1fr}
.cards--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.cards--2{grid-template-columns:repeat(2,1fr)}.cards--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards--3{grid-template-columns:repeat(3,1fr)}.cards--4{grid-template-columns:repeat(4,1fr)}}

.card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t-mid),transform var(--t-mid) var(--e-out),background var(--t-mid)}
.card::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(217,29,33,.14),transparent 60%);
  transition:opacity var(--t-mid)}
.card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-700)}
.card__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.04);
  transition:transform .9s var(--e-out)}
.card:hover .card__media img{transform:scale(1.07)}
.card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,11,16,.9))}
.card__badge{position:absolute;top:.85rem;left:.85rem;z-index:2;padding:.3rem .65rem;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(7,8,12,.7);border:1px solid var(--line-2);color:var(--fg);backdrop-filter:blur(8px)}
.card__body{position:relative;padding:clamp(1.1rem,.8rem + 1vw,1.6rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.card__body h2,.card__body h3{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem)}
.card__body p{font-size:.92rem;color:var(--fg-mute);flex:1}
.card__foot{display:flex;align-items:center;gap:.5rem;color:var(--accent-2);font-weight:600;font-size:.86rem;
  font-family:var(--font-display)}
.card__foot svg{width:15px;height:15px;transition:transform .4s var(--e-out)}
.card:hover .card__foot svg{transform:translateX(5px)}
.card__link{position:absolute;inset:0;z-index:3}

/* feature (icon) card */
.fcard{position:relative;padding:clamp(1.3rem,1rem + 1.2vw,2rem);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--ink-850);overflow:hidden;
  transition:border-color var(--t-mid),transform var(--t-mid) var(--e-out)}
.fcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.fcard__ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(140deg,rgba(217,29,33,.18),rgba(217,29,33,.04));
  border:1px solid rgba(217,29,33,.28);color:var(--accent)}
.fcard__ico svg{width:21px;height:21px}
.fcard h2,.fcard h3{font-size:1.06rem;margin-bottom:.5rem}
.fcard p{font-size:.9rem;color:var(--fg-mute)}
.fcard__num{position:absolute;top:.6rem;right:1.1rem;font-family:var(--font-display);font-weight:700;
  font-size:3.4rem;line-height:1;color:var(--fg);opacity:.05}

/* ---------- 11. STATS / MARQUEE ------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink-850);padding:clamp(1.2rem,1rem + 1vw,2rem);text-align:center}
.stat b{display:block;font-family:var(--font-display);font-weight:700;color:#fff;line-height:1;
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3.4rem);letter-spacing:-.03em}
.stat b .suffix{color:var(--accent)}
.stat span{display:block;margin-top:.55rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}

.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:3rem;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee__item{display:flex;align-items:center;gap:1rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,.9rem + .6vw,1.4rem);color:var(--fg-dim);white-space:nowrap;letter-spacing:-.01em}
.marquee__item i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- 12. SPLIT / MEDIA SECTIONS ----------------------------------- */
.split{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split--wide-l{grid-template-columns:1.15fr .85fr}}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.04)}
.split__media--tall{aspect-ratio:3/4}
.media-frame{position:relative}
.media-frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);pointer-events:none;z-index:2}
.media-badge{position:absolute;z-index:3;bottom:1.1rem;left:1.1rem;right:1.1rem;
  padding:.9rem 1.1rem;border-radius:var(--r-md);background:rgba(7,8,12,.7);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);display:flex;align-items:center;gap:.85rem}
.media-badge b{font-family:var(--font-display);color:#fff;font-size:1.5rem;line-height:1}
.media-badge span{font-size:.8rem;color:var(--fg-mute)}

.checklist{display:grid;gap:.75rem;margin-top:var(--sp-5)}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem}
.checklist svg{flex:none;width:19px;height:19px;color:var(--accent);margin-top:.18rem}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-4)}
.tag{padding:.38rem .8rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--glass);font-size:.78rem;color:var(--fg-mute);font-family:var(--font-mono);letter-spacing:.03em}
.tag--accent{border-color:rgba(217,29,33,.35);color:var(--accent-2);background:rgba(217,29,33,.07)}

/* ---------- 13. PROSE / TECH CONTENT ------------------------------------- */
.prose{max-width:none}
.prose > * + *{margin-top:1.15rem}
.prose h2{margin-top:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);font-size:var(--fs-h3)}
.prose h3{margin-top:2rem;font-size:var(--fs-h4);color:var(--fg)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{color:var(--fg-soft)}
.prose ul{display:grid;gap:.6rem}
.prose ul li{position:relative;padding-left:1.5rem;color:var(--fg-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;
  border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.prose ol{counter-reset:c;display:grid;gap:.7rem}
.prose ol li{position:relative;padding-left:2.2rem;counter-increment:c}
.prose ol li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--font-mono);font-size:.8rem;color:var(--accent-2)}
.prose a:not(.btn){color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(217,29,33,.4);transition:text-decoration-color var(--t-fast)}
.prose a:not(.btn):hover{text-decoration-color:var(--accent-2)}
.prose blockquote{padding:1.2rem 1.4rem;border-left:2px solid var(--accent);background:var(--ink-850);
  border-radius:0 var(--r-md) var(--r-md) 0;color:var(--fg)}

.note{display:flex;gap:.85rem;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:rgba(217,29,33,.06);border:1px solid rgba(217,29,33,.22);font-size:.9rem;color:var(--fg-soft)}
.note svg{flex:none;width:19px;height:19px;color:var(--accent);margin-top:.15rem}

/* tech tables */
.table-wrap{position:relative;margin-block:1.4rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-850)}
.table-scroll{overflow-x:auto;border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:640px;font-size:.86rem}
.table-wrap caption{caption-side:top;text-align:left;padding:.9rem 1.1rem;color:var(--fg);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;border-bottom:1px solid var(--line)}
.table-wrap th,.table-wrap td{padding:.72rem .9rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.table-wrap thead th{background:var(--ink-700);color:var(--fg);font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;white-space:nowrap;
  position:sticky;top:0;z-index:2}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover td{background:rgba(255,255,255,.022)}
.table-wrap td:first-child{color:var(--fg);font-weight:500;white-space:nowrap}
.table-wrap td.num,.table-wrap th.num{font-family:var(--font-mono);white-space:nowrap}
.table-hint{display:flex;align-items:center;gap:.45rem;padding:.55rem 1.1rem;font-size:.74rem;
  color:var(--fg-dim);font-family:var(--font-mono);border-top:1px solid var(--line)}
@media (min-width:900px){.table-hint{display:none}}
.table-hint svg{width:14px;height:14px}
.dot-yes{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* spec list */
.specs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.specs div{display:flex;justify-content:space-between;gap:1rem;background:var(--ink-850);padding:.85rem 1.1rem;font-size:.9rem}
.specs dt,.specs .k{color:var(--fg-mute)}
.specs dd,.specs .v{color:var(--fg);font-family:var(--font-mono);text-align:right}

/* toc / side nav */
.layout-side{display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem)}
@media (min-width:1024px){.layout-side{grid-template-columns:260px 1fr}}
.sidenav{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-850);padding:1rem;display:none}
@media (min-width:1024px){.sidenav{display:block}}
.sidenav h2{font-size:.72rem;line-height:1.25;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
  font-family:var(--font-mono);margin-bottom:.8rem;padding-inline:.6rem}
.sidenav a{display:block;padding:.55rem .6rem;border-radius:var(--r-sm);font-size:.88rem;color:var(--fg-mute);
  transition:background var(--t-fast),color var(--t-fast)}
.sidenav a:hover{background:var(--glass-2);color:var(--fg)}
.sidenav a[aria-current="page"]{background:rgba(217,29,33,.1);color:var(--accent-2);font-weight:600}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:760px){.gallery{grid-template-columns:repeat(3,1fr);gap:1rem}}
.gallery figure{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);
  aspect-ratio:4/3;cursor:pointer}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-out)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;font-size:.78rem;
  color:var(--fg);background:linear-gradient(180deg,transparent,rgba(5,6,9,.9))}

/* logo wall */
.logowall{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.logowall{grid-template-columns:repeat(4,1fr)}}
.logowall div{background:var(--ink-850);aspect-ratio:16/9;display:grid;place-items:center;padding:1rem;
  font-family:var(--font-display);font-weight:700;letter-spacing:.02em;color:var(--fg-dim);
  font-size:clamp(.85rem,.75rem + .5vw,1.1rem);text-align:center;
  transition:background var(--t-mid),color var(--t-mid)}
.logowall div:hover{background:var(--ink-700);color:var(--fg)}

/* ---------- 14. ACCORDION / TIMELINE ------------------------------------- */
.acc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-850)}
.acc__item + .acc__item{border-top:1px solid var(--line)}
.acc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem clamp(1rem,.8rem + 1vw,1.6rem);text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--fg);
  transition:color var(--t-fast),background var(--t-fast)}
.acc__btn:hover{background:var(--glass)}
.acc__ico{flex:none;width:24px;height:24px;position:relative}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transform:translate(-50%,-50%);transition:transform .35s var(--e-out)}
.acc__ico::before{width:13px;height:1.5px}
.acc__ico::after{width:1.5px;height:13px}
.acc__item.is-open .acc__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__panel{height:0;overflow:hidden;transition:height .45s var(--e-out)}
.acc__panel-in{padding:0 clamp(1rem,.8rem + 1vw,1.6rem) 1.3rem;color:var(--fg-mute);font-size:.94rem}

.timeline{position:relative;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:6px;top:.6rem;bottom:.6rem;width:1px;
  background:linear-gradient(180deg,var(--accent),var(--line))}
.timeline li{position:relative;padding-bottom:2rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-2rem;top:.42rem;width:13px;height:13px;border-radius:50%;
  background:var(--ink-900);border:2px solid var(--accent)}
.timeline time{display:block;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;color:var(--accent-2);margin-bottom:.3rem}
.timeline h3{font-size:var(--fs-h4);line-height:1.25;margin-bottom:.35rem}
.timeline p{font-size:.92rem;color:var(--fg-mute)}

/* ---------- 15. NEWS ----------------------------------------------------- */
.post{display:grid;gap:1.4rem;padding:clamp(1.2rem,1rem + 1vw,1.8rem);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--ink-850);position:relative;
  transition:border-color var(--t-mid),transform var(--t-mid) var(--e-out)}
@media (min-width:760px){.post{grid-template-columns:170px 1fr;align-items:center}}
.post:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post__date{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-display);color:var(--fg)}
.post__date b{font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);line-height:1;letter-spacing:-.03em}
.post__date span{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.post h2,.post h3{font-size:clamp(1.1rem,1rem + .7vw,1.5rem);margin-bottom:.5rem}
.post p{font-size:.93rem;color:var(--fg-mute)}

/* ---------- 16. FORMS ---------------------------------------------------- */
.form{display:grid;gap:1.15rem}
.form__grid{display:grid;gap:1.15rem}
@media (min-width:640px){.form__grid--2{grid-template-columns:repeat(2,1fr)}
  .form__grid--3{grid-template-columns:repeat(3,1fr)}}
.field{display:grid;gap:.45rem;position:relative}
.field > label,.field .lbl{font-size:.82rem;color:var(--fg-mute);font-weight:500}
.field .req{color:var(--accent-2)}
.input,.select,.textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-md);
  background:var(--ink-800);border:1px solid var(--line);color:var(--fg);font-size:.95rem;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast)}
.textarea{min-height:130px;resize:vertical}
.select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8E9A' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;padding-right:2.6rem}
.input::placeholder,.textarea::placeholder{color:var(--fg-dim)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);background:var(--ink-700);
  box-shadow:0 0 0 3px rgba(217,29,33,.14)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--err)}
.field__err{font-size:.76rem;color:var(--err);display:none}
.field.has-err .field__err{display:block}

.fieldset{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.1rem,.9rem + 1vw,1.7rem);
  background:var(--ink-850);display:grid;gap:1.15rem}
.fieldset > legend{padding:0 .6rem;margin-left:-.6rem;font-family:var(--font-display);font-weight:600;
  color:var(--fg);font-size:1rem}
.fieldset__hint{font-size:.82rem;color:var(--fg-dim);margin-top:-.4rem}

.radios{display:flex;flex-wrap:wrap;gap:.55rem}
.radios label{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-800);font-size:.88rem;
  cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.radios input{position:absolute;opacity:0;inset:0;cursor:pointer}
.radios label:hover{border-color:var(--line-2)}
.radios input:checked + span{color:#fff}
.radios label:has(input:checked){border-color:var(--accent);background:rgba(217,29,33,.12);color:#fff}
.radios label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.form__note{font-size:.8rem;color:var(--fg-dim);max-width:46ch}
.form__status{display:none;padding:.9rem 1.1rem;border-radius:var(--r-md);font-size:.9rem}
.form__status.is-ok{display:block;background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.3);color:#9ff0c9}
.form__status.is-err{display:block;background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.3);color:#ffb4b4}

.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--fg-mute);cursor:pointer}
.checkbox input{appearance:none;flex:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--ink-800);margin-top:.1rem;position:relative;transition:.2s}
.checkbox input:checked{background:var(--accent);border-color:var(--accent)}
.checkbox input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}

/* ---------- 17. CONTACT -------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem)}
@media (min-width:960px){.contact-grid{grid-template-columns:.9fr 1.1fr}}
.ccard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-850);
  padding:clamp(1.2rem,1rem + 1vw,1.8rem);display:grid;gap:1rem}
.ccard h2,.ccard h3{font-size:1.05rem}
.ccard__rows{display:grid;gap:.7rem}
.ccard__row{display:flex;gap:.8rem;align-items:flex-start;font-size:.93rem}
.ccard__row svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:.22rem}
.ccard__row a:hover{color:var(--accent-2)}
.ccard__row b{display:block;color:var(--fg);font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:.15rem}
.map{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);
  aspect-ratio:16/10;position:relative}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg)}

/* ---------- 18. CTA BAND ------------------------------------------------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(140deg,var(--ink-700),var(--ink-850) 60%);
  padding:clamp(2rem,1.4rem + 3.4vw,4.5rem);text-align:center}
.cta::before{content:"";position:absolute;width:640px;height:640px;left:50%;top:-60%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(217,29,33,.30),transparent 65%);filter:blur(60px)}
.cta > *{position:relative}
.cta h2{max-width:22ch;margin-inline:auto;text-wrap:balance}
.cta p{margin:1rem auto 0;max-width:56ch}
.cta__actions{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ---------- 19. FOOTER --------------------------------------------------- */
.footer{position:relative;border-top:1px solid var(--line);background:var(--ink-1000);padding-top:clamp(3rem,2rem + 4vw,5rem)}
.footer__top{display:grid;gap:2.4rem}
@media (min-width:760px){.footer__top{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1100px){.footer__top{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}
.footer h2{font-size:.74rem;line-height:1.25;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);
  font-family:var(--font-mono);margin-bottom:1.1rem}
.footer__links{display:grid;gap:.6rem}
.footer__links a{font-size:.92rem;color:var(--fg-mute);transition:color var(--t-fast),transform var(--t-fast);
  display:inline-block}
.footer__links a:hover{color:var(--accent-2);transform:translateX(3px)}
.footer__about p{font-size:.92rem;color:var(--fg-mute);margin-top:1rem;max-width:38ch}
.footer__social{display:flex;gap:.5rem;margin-top:1.2rem}
.footer__social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--fg-mute);transition:.25s var(--e-out)}
.footer__social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)}
.footer__social svg{width:17px;height:17px}
.footer__bottom{margin-top:clamp(2.5rem,2rem + 2vw,4rem);border-top:1px solid var(--line);
  padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--fg-dim)}
.footer__bottom a:hover{color:var(--accent-2)}
.footer__wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:.8;
  font-size:clamp(3.4rem,2rem + 13vw,11rem);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);
  text-align:center;margin-top:clamp(1.5rem,1rem + 2vw,3rem);user-select:none;pointer-events:none}

/* ---------- 20. BACK TO TOP ---------------------------------------------- */
.to-top{
  position:fixed;right:clamp(1rem,.6rem + 1vw,1.6rem);bottom:clamp(1rem,.6rem + 1vw,1.6rem);z-index:1050;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(13,15,20,.82);border:1px solid var(--line-2);color:var(--fg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--e-out),transform .35s var(--e-out),visibility .35s,background .25s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.to-top svg.arrow{width:17px;height:17px;position:relative;z-index:2}
.to-top .ring{position:absolute;inset:-1px;transform:rotate(-90deg)}
.to-top .ring circle{fill:none;stroke-width:2}
.to-top .ring .bg{stroke:rgba(255,255,255,.1)}
.to-top .ring .fg{stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:var(--circ,157);stroke-dashoffset:var(--circ,157);transition:stroke-dashoffset .1s linear}
@media (min-width:768px){.to-top{width:56px;height:56px}}

/* ---------- 21. AI ASSISTANT --------------------------------------------- */
.assistant{position:fixed;left:clamp(1rem,.6rem + 1vw,1.6rem);bottom:clamp(1rem,.6rem + 1vw,1.6rem);z-index:1060;
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.assist-fab{
  position:relative;display:flex;align-items:center;gap:.65rem;height:52px;padding:0 1.1rem 0 .55rem;
  border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--fg);
  background:rgba(13,15,20,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-2);transition:transform .3s var(--e-out),background .3s,border-color .3s}
.assist-fab:hover{transform:translateY(-2px);border-color:var(--accent)}
.assist-fab__ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-dark));color:#fff;position:relative}
.assist-fab__ico svg{width:20px;height:20px}
.assist-fab__ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);
  animation:ping 2.6s var(--e-out) infinite}
.assist-fab__txt{font-family:var(--font-display);font-weight:600;font-size:.88rem;white-space:nowrap;display:none}
@media (min-width:520px){.assist-fab__txt{display:block}}
.assist-fab__dot{position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--ok);
  border:2px solid var(--ink-800)}
.assistant.is-open .assist-fab{opacity:0;visibility:hidden;transform:scale(.8)}

.assist-panel{
  position:fixed;left:clamp(1rem,.6rem + 1vw,1.6rem);bottom:clamp(1rem,.6rem + 1vw,1.6rem);
  width:min(392px,calc(100vw - 2rem));height:min(600px,calc(100svh - 2rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(10,11,16,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(20px) scale(.96);transform-origin:bottom left;
  transition:opacity .4s var(--e-out),transform .4s var(--e-out),visibility .4s;
}
.assistant.is-open .assist-panel{opacity:1;visibility:visible;transform:none}
.assist-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(217,29,33,.10),transparent)}
.assist-head__ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-dark));color:#fff}
.assist-head__ico svg{width:19px;height:19px}
.assist-head b{display:block;font-family:var(--font-display);color:var(--fg);font-size:.95rem;line-height:1.2}
.assist-head span{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--fg-dim)}
.assist-head span i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.assist-close{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--fg-mute);transition:background .2s,color .2s}
.assist-close:hover{background:var(--glass-2);color:var(--fg)}
.assist-close svg{width:16px;height:16px}

.assist-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem;
  overscroll-behavior:contain;scrollbar-width:thin}
.msg{display:flex;gap:.6rem;max-width:88%;animation:msgin .4s var(--e-out) both}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}}
.msg__bubble{padding:.7rem .95rem;border-radius:14px;font-size:.89rem;line-height:1.55}
.msg--bot{align-self:flex-start}
.msg--bot .msg__bubble{background:var(--ink-700);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--fg-soft)}
.msg--user{align-self:flex-end;flex-direction:row-reverse}
.msg--user .msg__bubble{background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.msg__bubble a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.msg--user .msg__bubble a{color:#fff}
.msg__bubble ul{margin-top:.45rem;display:grid;gap:.25rem}
.msg__bubble li{padding-left:.9rem;position:relative}
.msg__bubble li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.typing{display:flex;gap:4px;padding:.85rem .95rem}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--fg-dim);animation:tdot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.assist-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1rem .7rem}
.assist-chip{padding:.42rem .8rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--glass);font-size:.78rem;color:var(--fg-soft);transition:.2s}
.assist-chip:hover{border-color:var(--accent-2);color:var(--accent-2);background:rgba(217,29,33,.08)}

.assist-foot{border-top:1px solid var(--line);padding:.7rem;display:flex;gap:.5rem;align-items:flex-end}
.assist-input{flex:1;max-height:110px;min-height:42px;padding:.65rem .9rem;border-radius:var(--r-md);
  background:var(--ink-800);border:1px solid var(--line);font-size:.9rem;resize:none;line-height:1.4}
.assist-input:focus{border-color:var(--accent)}
.assist-send{width:42px;height:42px;flex:none;border-radius:var(--r-md);background:var(--accent);color:#fff;
  display:grid;place-items:center;transition:.2s}
.assist-send:hover{background:var(--accent-2)}
.assist-send svg{width:17px;height:17px}
.assist-disclaimer{padding:0 1rem .7rem;font-size:.68rem;color:var(--fg-dim);text-align:center}

/* toast */
.toast-wrap{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:1200;display:grid;gap:.5rem;
  width:max-content;max-width:calc(100vw - 2rem)}
.toast{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border-radius:var(--r-pill);
  background:rgba(13,15,20,.94);border:1px solid var(--line-2);color:var(--fg);font-size:.86rem;
  box-shadow:var(--sh-2);backdrop-filter:blur(14px);animation:toastin .4s var(--e-out) both}
.toast svg{width:17px;height:17px;color:var(--accent);flex:none}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}}
.toast.is-out{opacity:0;transform:translateY(10px);transition:.35s var(--e-out)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1300;background:rgba(4,5,9,.94);display:grid;place-items:center;
  padding:2rem;opacity:0;visibility:hidden;transition:.35s var(--e-out);backdrop-filter:blur(6px)}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r-md);border:1px solid var(--line-2)}
.lightbox__close{position:absolute;top:1.2rem;right:1.2rem;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--fg)}
.lightbox__close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.lightbox__cap{margin-top:1rem;text-align:center;font-size:.85rem;color:var(--fg-mute)}

/* ---------- 22. REVEAL ANIMATIONS --------------------------------------- */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(34px)}
[data-reveal="down"]{transform:translateY(-26px)}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal="clip"]{opacity:1;clip-path:inset(0 0 100% 0)}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .9s var(--e-out),transform 1s var(--e-out),clip-path 1.1s var(--e-out)}
[data-reveal-delay="1"].is-in{transition-delay:.08s}
[data-reveal-delay="2"].is-in{transition-delay:.16s}
[data-reveal-delay="3"].is-in{transition-delay:.24s}
[data-reveal-delay="4"].is-in{transition-delay:.32s}
[data-reveal-delay="5"].is-in{transition-delay:.4s}
[data-reveal-delay="6"].is-in{transition-delay:.48s}

/* word-level split (generated by JS on [data-split]) */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w > span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--e-out)}
.is-in .w > span,[data-split].is-in .w > span{transform:none}

.split-line{display:block;overflow:hidden}
.split-line > span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--e-out)}
.is-in .split-line > span,.split-line.is-in > span{transform:none}
[data-split] .split-line:nth-child(2) > span{transition-delay:.09s}
[data-split] .split-line:nth-child(3) > span{transition-delay:.18s}
[data-split] .split-line:nth-child(4) > span{transition-delay:.27s}

.parallax{will-change:transform}

/* ---------- 23. MISC ----------------------------------------------------- */
.badge-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--glass);font-size:.78rem;color:var(--fg-soft)}
.badge svg{width:15px;height:15px;color:var(--accent)}

.pdf-list{display:grid;gap:.7rem}
.pdf-item{display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--ink-850);transition:border-color var(--t-fast),transform var(--t-fast) var(--e-out)}
.pdf-item:hover{border-color:var(--accent);transform:translateX(3px)}
.pdf-item svg.doc{width:22px;height:22px;color:var(--accent);flex:none}
.pdf-item b{display:block;color:var(--fg);font-size:.94rem;font-weight:600}
.pdf-item span{font-size:.78rem;color:var(--fg-dim)}
.pdf-item svg.dl{width:17px;height:17px;margin-left:auto;color:var(--fg-mute)}

.quick-contact{position:relative;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;grid-template-columns:1fr}
@media (min-width:640px){.quick-contact{grid-template-columns:repeat(3,1fr)}}
.quick-contact a{background:var(--ink-850);padding:1.3rem;display:flex;gap:.9rem;align-items:center;
  transition:background var(--t-fast)}
.quick-contact a:hover{background:var(--ink-700)}
.quick-contact svg{width:22px;height:22px;color:var(--accent);flex:none}
.quick-contact b{display:block;color:var(--fg);font-size:.92rem}
.quick-contact span{font-size:.78rem;color:var(--fg-dim)}

/* 404 */
.err-page{min-height:calc(var(--app-h) - 0px);display:grid;place-items:center;text-align:center;padding:6rem 0}
.err-code{font-family:var(--font-display);font-weight:700;font-size:clamp(5rem,3rem + 16vw,14rem);
  line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--accent)}

/* ---------- 24. MOTION PREFERENCES / PRINT ------------------------------- */
@media (prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .split-line > span{transform:none!important}
  .hero__media img{transform:none!important}
  .marquee__track{animation:none}
}
@media print{
  .header,.footer,.assistant,.assist-panel,.to-top,.preloader,.curtain,.hero__ui,.cursor,.cursor-ring{display:none!important}
  body{background:#fff;color:#000}
  .hero{height:auto}
}