/* ==========================================================================
   Sahler naslovna — hi-tech × Grand Turismo
   Tokens: void (page), carbon (raised), ink, steel (muted), line, glass,
   tail (GT taillight red — the one hot hue), chrome (wordmark gradient).
   ========================================================================== */
/* Fonts (self-hosted, so the page also works from disk): Codec Pro for
   the hero title and section headings, Lexend Exa for display/labels,
   Inter for running text. latin + latin-ext (č ć š ž đ). */
@font-face { font-family: "Codec Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/codec-pro-regular.woff2) format("woff2"); }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/lexend-exa-latin-wght-normal.woff2) format("woff2");
  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; }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/lexend-exa-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
  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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --void: #050506;
  --carbon: #0d0e11;
  --carbon-2: #15171b;
  --ink: #f2f3f5;
  --ink-2: #c9ccd2;
  --steel: #8b9098;
  --steel-2: #5d626b;
  --line: rgba(242, 243, 245, 0.12);
  --line-2: rgba(242, 243, 245, 0.22);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.08);
  --tail: #ff2d2d;
  --tail-deep: #b3111b;
  --tail-glow: rgba(255, 45, 45, 0.55);
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9dce2 22%, #8d929b 46%, #f7f8fa 52%, #6c7179 70%, #c7cbd2 100%);

  --font: "Inter", system-ui, sans-serif;
  --font-display: "Lexend Exa", "Inter", system-ui, sans-serif;
  --font-head: "Codec Pro", "Lexend Exa", system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 44px);
  --max: 1520px;
  --header-h: 84px;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Type scale (perfect fourth, 16px) */
  --fs-micro: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.777rem;
  --fs-xl: 2.369rem;
  --fs-2xl: 3.157rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tail); outline-offset: 3px; }
::selection { background: var(--tail); color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--tail); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* ---------- Text engine (Brewns) ---------- */
.te { position: relative; display: flex; flex-wrap: wrap; column-gap: 0.24em; }
.te > [aria-hidden] { display: contents; }
.line-word { display: inline-block; padding-bottom: .12em; margin-bottom: -.12em; }
.te[data-overflow] .line-word { overflow: hidden; }
.line-word > .line, .line-word .w { display: inline-block; will-change: transform; }
/* Digit roll (Brewns, verbatim) */
.droll { position: relative; display: inline-block; }
.droll-ghost { opacity: 0; }
.droll-overlay { position: absolute; left: 0; right: 0; top: -0.35em; bottom: -0.35em; display: flex; }
.droll-char { flex: none; align-self: center; white-space: pre; }
.droll-col { position: relative; flex: none; clip-path: inset(0); }
.droll-stack { display: block; height: 1000%; }
.droll-cell { display: flex; height: 10%; align-items: center; justify-content: center; }

/* ---------- Display face ---------- */
.micro, .header-tag, .cart-count, .spec-list, .stat-glass b,
.card-index, .card-title, .card-price, .explode-meter, .d-no, .d-text h3, .d-hint, .pellet-hint,
.gauge-read b, .g-label, .spec-tiles b, .faq-item summary h3, .about-year, .f-title, .footer-mark span, 
/* Heading face (also buttons and the menu): Codec Pro. Only the Regular cut is licensed
   here, so a hairline stroke in the text colour gives it a slightly heavier weight. */
.hero-title, .h2, .h3 { font-family: var(--font-head); -webkit-text-stroke: .018em currentColor; }
.pill, .main-nav a { font-family: var(--font-head); -webkit-text-stroke: .03em currentColor; }

/* ---------- Micro labels (reference style) ---------- */
.micro {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--steel);
}
.micro--right { text-align: right; justify-items: end; margin-left: auto; }

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.6rem); font-weight: 400;
  line-height: 1.04; letter-spacing: -.02em; max-width: 17ch; text-wrap: balance;
}
.h3 { font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }

/* ---------- Pills & CTA ---------- */
.pill {
  --pad: 0 20px; display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: var(--pad);
  border-radius: 999px; border: 1px solid transparent; font-size: .9rem; font-weight: 400; letter-spacing: 0; cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s, border-color .3s, box-shadow .4s;
  will-change: transform;
}
.pill--lg { min-height: 54px; --pad: 0 26px; font-size: 1rem; }
/* Glow pill: deep taillight glass with a lit edge and a sheen that sweeps on hover. */
.pill--glow, .pill--light { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, #6a1216 0%, #3a080b 55%, #24050700 140%), #2a0608;
  border-color: rgba(255, 72, 72, .85);
  box-shadow: 0 0 0 1px rgba(255,45,45,.18), 0 10px 34px -10px rgba(255,45,45,.75), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -12px 24px -14px rgba(255,45,45,.6); }
.pill--glow::before, .pill--light::before { content: ""; position: absolute; z-index: -1; inset: -1px; background: linear-gradient(100deg, transparent 30%, rgba(255,200,200,.28) 48%, transparent 66%); transform: translateX(-120%); transition: transform .9s var(--ease-out); }
.pill--glow:hover, .pill--light:hover { border-color: #ff6a6a; box-shadow: 0 0 0 1px rgba(255,45,45,.35), 0 14px 46px -8px rgba(255,45,45,.95), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -12px 24px -12px rgba(255,60,60,.8); }
.pill--glow:hover::before, .pill--light:hover::before { transform: translateX(120%); }
.pill--glow::after, .pill--light::after { content: ""; position: absolute; z-index: -2; inset: -1px; background: var(--tail); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease-out); }
.pill--glow:hover::after, .pill--light:hover::after, .pill--glow:focus-visible::after, .pill--light:focus-visible::after { transform: scaleX(1); }
.pill--ghost { color: var(--ink); background: rgba(8,8,10,.45); border-color: rgba(255,45,45,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 18px -10px rgba(255,45,45,.6); }
.pill--ghost:hover { border-color: #ff4a4a; box-shadow: 0 0 26px -8px rgba(255,45,45,.7), inset 0 0 22px -8px rgba(255,45,45,.7); }
.pill--red { background: var(--tail); color: #fff; box-shadow: 0 10px 40px -10px var(--tail-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.pill--red:hover { background: #ff4545; box-shadow: 0 14px 50px -8px var(--tail-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.pill--red:disabled { background: var(--carbon-2); color: var(--steel-2); box-shadow: none; cursor: not-allowed; }
.pill-arrow { display: inline-grid; place-items: center; width: 1.1em; transition: transform .35s var(--ease-out); }
.pill:hover .pill-arrow { transform: translate(2px, -2px); }

.cta { position: relative; display: inline-flex; flex-direction: column; gap: 6px; font-size: .95rem; font-weight: 500; }
.cta-row { display: inline-flex; align-items: center; gap: 12px; }
.cta-arrow { position: relative; display: inline-flex; width: 13px; height: 13px; overflow: hidden; }
.cta-arrow > span { position: absolute; inset: 0; display: grid; place-items: center; }
.arrow-glyph, .arrow-glyph span { display: grid; place-items: center; width: 100%; height: 100%; }
.arrow-glyph svg { width: 12px; height: 13px; }
.cta-rule { position: relative; height: 1px; overflow: hidden; }
.cta-rule > span { position: absolute; inset: 0; background: currentColor; }
.cta-rule > span:first-child { transform-origin: right; }
.cta-rule > span:last-child { transform-origin: left; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); transition: background-color .4s, border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(5,5,6,.6); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-color: var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-row { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo img { width: 150px; height: auto; }
.header-tag { padding-left: 22px; border-left: 1px solid var(--line-2); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; color: var(--steel); }
.main-nav { display: flex; gap: 34px; margin-inline: auto; }
/* Each item has a grey rail; its red fill is the reader's progress through that section. */
.main-nav a { position: relative; padding: 6px 0 12px; font-size: .9rem; letter-spacing: 0; color: var(--ink-2); transition: color .25s; }
.main-nav a::before, .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; }
.main-nav a::before { background: rgba(242,243,245,.14); }
.main-nav a::after { background: var(--tail); box-shadow: 0 0 10px var(--tail-glow); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .25s linear; }
.main-nav a:hover, .main-nav a.is-current { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .cart { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); }
.cart-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tail); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.menu-toggle { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: none; cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 23px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: max(100svh, 760px); overflow: hidden; isolation: isolate; }
/* ---------- Hero scene ---------- */
.hero-scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #050506; }
.hero-bg { position: absolute; inset: -4%; will-change: transform; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(.9) contrast(1.06); }
/* A slow red key light drifting across the rubber relief. */
.hero-glow { position: absolute; inset: -25%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(25.33% 30.67% at 71.33% 36.67%, rgba(255,40,40,.22), transparent 70%); animation: hero-glow 14s var(--ease) infinite alternate; } /* 150% of the hero, so its edges never enter the frame while it drifts */
@keyframes hero-glow { from { transform: translate3d(0,0,0); opacity: .7; } to { transform: translate3d(-8%, 14.67%, 0); opacity: 1; } }
.mat-stage { position: absolute; left: 65.5%; top: 42%; width: min(27vw, 500px); aspect-ratio: 900 / 819; transform: translate(-50%, -46%); perspective: 1800px; perspective-origin: 50% 40%; }
.mat-rig { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; opacity: 0; }
.mat-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.mat-top { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(1.45) contrast(1.08) drop-shadow(0 34px 38px rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(255,90,90,.55)); }
/* The laser line: masked to the mat outline on the surface, with a faint
   extension past the edges; its glow trails behind the direction of travel. */
.mat-rig { --mat-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 819' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M14,152 L13,166 L30,354 L24,372 L21,437 L5,501 L4,524 L7,547 L54,703 L69,711 L127,706 L166,804 L170,809 L185,814 L746,736 L877,717 L887,713 L893,706 L895,700 L893,689 L824,538 L763,378 L735,292 L706,188 L688,113 L682,67 L679,60 L669,51 L657,47 L645,47 L388,87 L376,87 L371,85 L364,77 L346,19 L338,10 L326,5 L314,4 L127,29 L114,33 L108,39 L105,51 L156,172 L174,231 L206,312 L211,333 L203,345 L181,279 L124,142 L114,134 L103,132 L26,143 Z'/%3E%3C/svg%3E"); } /* mat outline, inline so it also works from disk */
.mat-laser { position: absolute; inset: 0; transform: translateZ(1px); transform-style: preserve-3d; pointer-events: none; opacity: 0; --scan: 50%; --trail: 0; }
.ml-on { position: absolute; inset: 0; -webkit-mask: var(--mat-mask) center / 100% 100% no-repeat; mask: var(--mat-mask) center / 100% 100% no-repeat; }
.ml-line { position: absolute; left: 0; right: 0; top: var(--scan); height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, #ff3434, #ffe6e6 50%, #ff3434);
  box-shadow: 0 0 6px 1px #ff2d2d, 0 0 22px 6px rgba(255,45,45,.75), 0 0 60px 16px rgba(255,45,45,.35); }
.ml-trail { position: absolute; left: 0; right: 0; top: var(--scan); height: 30%; transform-origin: top; transform: scaleY(calc(var(--trail) * 2 - 1));
  background: linear-gradient(180deg, rgba(255,50,50,.55), rgba(255,40,40,.18) 35%, transparent); mix-blend-mode: screen; }
.ml-ext { position: absolute; left: -18%; right: -18%; top: var(--scan); height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(255,55,55,.95) 24%, rgba(255,55,55,.95) 76%, transparent); box-shadow: 0 0 14px 2px rgba(255,45,45,.6); }
.mat-contour { position: absolute; left: -6.667%; top: -7.326%; width: 113.333%; height: 114.652%; overflow: visible; will-change: transform; }
.mat-contour path { fill: none; vector-effect: non-scaling-stroke; }
.mc-line { stroke: rgba(255,58,58,.9); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); filter: drop-shadow(0 0 5px rgba(255,40,40,.9)); }
.mc-run { stroke: #ffd6d6; stroke-width: 2; stroke-dasharray: .06 .94; animation: mc-run 4.8s linear infinite; filter: drop-shadow(0 0 6px #ff3b3b); }
.mat-contour[data-contour="1"] .mc-run { animation-duration: 6.1s; animation-direction: reverse; }
.mat-contour[data-contour="2"] .mc-run { animation-duration: 7.4s; }
.mat-contour[data-contour="3"] .mc-run { animation-duration: 9s; animation-direction: reverse; }
.mat-contour[data-contour="2"] .mc-line, .mat-contour[data-contour="3"] .mc-line { stroke: rgba(255,58,58,.55); }
@keyframes mc-run { to { stroke-dashoffset: -1; } }
.hero-vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.8) 26%, rgba(5,5,6,.3) 42%, rgba(5,5,6,0) 56%), linear-gradient(180deg, rgba(5,5,6,.6) 0%, rgba(5,5,6,0) 16%, rgba(5,5,6,0) 78%, var(--void) 100%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 40vw) minmax(0, 1fr); padding-top: calc(var(--header-h) + clamp(20px, 4.5vh, 56px)); padding-bottom: calc(var(--header-h) + clamp(20px, 4.5vh, 56px)); min-height: max(100svh, 760px); }
.hero-copy { align-self: center; container-type: inline-size; max-width: 40vw; }
/* Sized from the copy column: the longest line ("Sahler patosnice za auto") is ~11.4em, so each line always fits. */
.hero-title { font-weight: 400; font-size: clamp(1.8rem, 8.4cqi, 4.8rem); line-height: 1; letter-spacing: -.02em; }
.hero-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-line > span { display: inline-block; will-change: transform; }
.hero-line--dim { color: var(--steel); }
/* "vrhunskih performansi" (and [data-te-accent-last] words): solid red with a slow light sweep across it. Clipped to the glyphs. */
.hero-line--dim > span, .te-accent { padding-bottom: .14em; margin-bottom: -.14em; color: transparent; -webkit-text-stroke-color: var(--tail);
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,236,236,.9) 47%, rgba(255,236,236,0) 56%), linear-gradient(var(--tail), var(--tail));
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 130% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: hero-sheen 7s var(--ease) 2.2s infinite; }
@keyframes hero-sheen { 0% { background-position: 130% 0, 0 0; } 45%, 100% { background-position: -30% 0, 0 0; } }
.hero-rule { display: block; position: relative; width: 180px; height: 2px; margin-top: clamp(22px, 3vh, 30px); background: rgba(242,243,245,.16); border-radius: 2px; }
.hero-rule i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--tail); border-radius: 2px; box-shadow: 0 0 12px var(--tail-glow); }
.hero-down { position: absolute; left: 50%; bottom: clamp(18px, 3.5vh, 36px); z-index: 2; display: grid; place-items: center; width: 40px; height: 64px; margin-left: -20px; border-radius: 22px; color: #fff;
  border: 1px solid rgba(255,60,60,.75); background: rgba(20,6,7,.5); box-shadow: 0 0 22px -6px rgba(255,45,45,.7), inset 0 0 14px -6px rgba(255,45,45,.7); transition: box-shadow .3s, border-color .3s; }
.hero-down svg { animation: hero-down 1.8s var(--ease) infinite; }
.hero-down:hover { border-color: #ff6a6a; box-shadow: 0 0 30px -4px rgba(255,45,45,.95), inset 0 0 18px -4px rgba(255,45,45,.8); }
@keyframes hero-down { 0%, 100% { transform: translateY(-6px); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }
.hero-lede { max-width: 44ch; margin-top: clamp(18px, 2.6vh, 26px); color: var(--ink-2); font-size: clamp(.72rem, .776vw, .8rem); line-height: 1.6; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vh, 40px); }
/* Stats + spec list sit in the bottom-right corner of the hero. */
.hero-side { position: absolute; right: var(--gutter); bottom: clamp(32px, 6vh, 64px); display: grid; justify-items: end; gap: 28px; }
.spec-list { display: grid; gap: 10px; text-align: right; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.spec-list li { position: relative; padding-right: 18px; }
.spec-list li::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--tail); box-shadow: 0 0 10px var(--tail); opacity: .9; }
.stat-glass {
  display: grid; grid-template-columns: repeat(3, auto); border: 1px solid rgba(255,60,60,.7); border-radius: 18px;
  background: linear-gradient(180deg, rgba(60,10,12,.55), rgba(12,6,7,.65)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(255,45,45,.12), 0 0 36px -8px rgba(255,45,45,.6), inset 0 0 26px -12px rgba(255,45,45,.7);
}
.stat-glass > div { display: grid; gap: 6px; padding: 16px 24px; }
.stat-glass > div + div { border-left: 1px solid rgba(255,60,60,.28); }
.stat-glass b { font-size: 1.6rem; font-weight: 400; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat-glass > div > span { font-size: 11px; line-height: 1.3; color: var(--steel); }


/* ---------- Section heads ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "title aside"; gap: 22px 60px; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head .h2 { grid-area: title; }
.sec-aside { grid-area: aside; display: flex; justify-content: space-between; align-items: end; gap: 40px; color: var(--steel); }
.sec-aside p { max-width: 36ch; }

/* ---------- Products ---------- */
.products { position: relative; padding-block: clamp(110px, 14vw, 200px) clamp(90px, 10vw, 150px); isolation: isolate; overflow: hidden; }
.products-bg { position: absolute; inset: 0; z-index: -1; opacity: .8; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.opalesce, .opalesce-fade, .opalesce-canvas, .opalesce-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.opalesce-fallback { background: radial-gradient(60% 50% at 70% 40%, rgba(179,17,27,.22), transparent 70%), var(--void); }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; perspective: 1400px; }
.card { position: relative; will-change: transform; }
.card > a { position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 4.6; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 50%), var(--carbon);
  transform-style: preserve-3d; transition: border-color .4s, box-shadow .6s var(--ease-out); }
.card > a::before { /* rim light following the pointer */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,45,45,.22), transparent 45%); }
.card > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tail); box-shadow: 0 0 20px var(--tail); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.card:hover > a { border-color: var(--line-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,45,45,.15); }
.card:hover > a::before { opacity: 1; }
.card:hover > a::after { transform: scaleX(1); }
.card-index { position: absolute; top: 16px; left: 18px; font-size: var(--fs-micro); letter-spacing: .2em; color: var(--steel); font-variant-numeric: tabular-nums; z-index: 2; }
.card-corner { position: absolute; top: 14px; right: 14px; width: 14px; height: 14px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); z-index: 2; }
/* Packshots are the original white-background product photos (4:3), shown as a white panel that fills the media area under the index line. */
.card-media { position: relative; display: grid; min-height: 0; padding: 46px 14px 14px; }
.card-media img { position: relative; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px -16px rgba(0,0,0,.8); will-change: transform; transition: box-shadow .6s; }
.card:hover .card-media img { box-shadow: 0 26px 40px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(255,45,45,.25); }
.card-body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title go" "price go"; align-items: end; gap: 2px 12px; padding: 18px 18px 20px; border-top: 1px solid var(--line); }
.card-title { grid-area: title; font-size: 1rem; font-weight: 500; letter-spacing: -.035em; }
.card-price { grid-area: price; display: flex; align-items: baseline; gap: 6px; margin-top: 10px; font-size: 1.2rem; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.card-cur { font-size: 11px; color: var(--steel); letter-spacing: .1em; }
.card-go { grid-area: go; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .3s, border-color .3s, transform .4s var(--ease-out); }
.card:hover .card-go { background: var(--tail); border-color: var(--tail); transform: rotate(45deg); }

/* ---------- Tech (scroll-scrubbed film) ---------- */
.tech { position: relative; height: 420vh; }
.tech-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-items: center; }
.tech-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding-top: var(--header-h); }
.tech-copy .h2 { font-size: clamp(1.7rem, 2.9vw, 3rem); max-width: 16ch; }
.tech-lede { margin-top: 18px; max-width: 42ch; color: var(--steel); }
.steps { margin-top: clamp(26px, 4vh, 44px); display: grid; gap: 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step { display: grid; grid-template-columns: 44px 84px 1fr; grid-template-rows: auto 0fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--steel-2); transition: color .5s, grid-template-rows .6s var(--ease-out); }
.step-no { grid-row: 1 / 3; font-size: 12px; letter-spacing: .14em; font-variant-numeric: tabular-nums; padding-top: 3px; }
.step img { grid-row: 1 / 3; width: 84px; height: 52px; object-fit: cover; border-radius: 6px; filter: grayscale(1) brightness(.5); transition: filter .5s; }
.step h3 { font-size: 1.05rem; font-weight: 500; }
.step p { overflow: hidden; font-size: .9rem; line-height: 1.5; max-width: 50ch; color: var(--steel); opacity: 0; transition: opacity .4s; }
.step.is-active { color: var(--ink); grid-template-rows: auto 1fr; }
.step.is-active .step-no { color: var(--tail); }
.step.is-active img { filter: none; }
.step.is-active p { opacity: 1; padding-top: 6px; }

/* The film sits on the right of the sticky stage at its native 16:9 (nothing
   cropped) and dissolves into the page on the left, top and bottom; scroll
   scrubs it (scan → CAD → mould → product). */
.tech-film { position: absolute; z-index: 0; top: 50%; right: 0; width: calc(min(76vw, 1180px) + max(0px, (100vw - var(--max)) / 2)); aspect-ratio: 16 / 9; transform: translateY(-46%); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, #000 50%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, #000 50%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect; }
.tech-video { width: 100%; height: 100%; object-fit: cover; }
.tech-hud { position: relative; height: min(78vh, 780px); }
.tech-stage { position: absolute; top: 0; right: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.tech-stage-no { font-size: clamp(3rem, 5.4vw, 5.6rem); font-weight: 200; line-height: 1; letter-spacing: -.06em; color: var(--ink); }
.tech-stage-of { font-size: .8rem; letter-spacing: .18em; color: var(--steel); }
.explode-meter { position: absolute; right: 0; bottom: 0; font-size: 12px; letter-spacing: .18em; color: var(--steel); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.explode-meter span { color: var(--ink); font-size: 1.4rem; letter-spacing: -.04em; margin: 0 4px 0 10px; }

/* ---------- Details film strip ---------- */
.details { position: relative; height: 560vh; }
.details-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.details-track { display: flex; height: 100%; will-change: transform; }
.d-intro { position: relative; flex: 0 0 100vw; height: 100%; display: grid; align-items: end; padding: calc(var(--header-h) + 40px) var(--gutter) 90px; overflow: hidden; }
.d-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.d-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,6,.92), rgba(5,5,6,.2) 60%, rgba(5,5,6,.6)), linear-gradient(0deg, rgba(5,5,6,.85), transparent 50%); }
.d-intro-copy { position: relative; z-index: 1; max-width: 760px; }
.d-intro-copy .micro { margin-bottom: 20px; }
.d-hint { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.d-hint i { width: 60px; height: 1px; background: var(--tail); box-shadow: 0 0 10px var(--tail); }
.d-panel { position: relative; flex: 0 0 min(64vw, 940px); height: 100%; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--header-h) + 30px) clamp(24px, 3vw, 48px) 80px; border-left: 1px solid var(--line); }
.d-no { position: absolute; top: calc(var(--header-h) + 10px); left: clamp(24px, 3vw, 48px); font-size: clamp(5rem, 11vw, 10rem); font-weight: 200; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(242,243,245,.18); }
.d-media { align-self: center; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); }
.d-panel img { width: 100%; aspect-ratio: 1600 / 520; object-fit: cover; object-position: 100% 50%; will-change: transform; }
.d-text { display: grid; grid-template-columns: 1fr auto; gap: 10px 30px; align-items: end; margin-top: 26px; }
.d-text h3 { grid-column: 1 / -1; font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 400; letter-spacing: -.045em; }
.d-text p { max-width: 52ch; color: var(--steel); }
.d-spec { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 300; line-height: 1; color: var(--tail); text-shadow: 0 0 30px var(--tail-glow); font-variant-numeric: tabular-nums; }
.details-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; height: 1px; background: var(--line); }
.details-bar span { display: block; height: 100%; width: 0; background: var(--tail); box-shadow: 0 0 12px var(--tail); }

/* ---------- Material ---------- */
.material { position: relative; padding-block: clamp(110px, 13vw, 190px); overflow: hidden; isolation: isolate; }
.pellets { position: absolute; inset: 0; z-index: -1; }
.material::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 70% at 50% 50%, #0f1013, var(--void) 70%); }
.material-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.material-copy p:not(.micro):not(.pellet-hint) { margin-top: 20px; color: var(--steel); max-width: 46ch; }
.material-copy .h2 { margin-top: 18px; max-width: 13ch; }
.pellet-hint { margin-top: 30px; display: flex; align-items: center; gap: 12px; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--steel-2); }
.pellet-hint i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--tail); box-shadow: 0 0 10px var(--tail-glow); }
.gauge { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.g-bezel { fill: rgba(10,11,13,.75); stroke: var(--line-2); stroke-width: 1; }
.g-tick { stroke: rgba(242,243,245,.35); stroke-width: 1; }
.g-tick--major { stroke: rgba(242,243,245,.85); stroke-width: 1.6; }
.g-label { fill: var(--steel); font-size: 12px; font-family: var(--font); text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.g-arc-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 10; stroke-linecap: round; }
.g-arc { fill: none; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(255,45,45,.4)); }
.g-needle line { stroke: var(--tail); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--tail)); }
.g-needle circle { fill: #1a1c20; stroke: var(--ink); stroke-width: 2; }
.g-needle { transform-origin: 200px 200px; transform-box: view-box; }
.gauge-read { position: absolute; left: 0; right: 0; top: 62%; text-align: center; }
.gauge-read b { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 300; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.gauge-read span { font-size: 1rem; color: var(--steel); margin-left: 4px; }
.gauge figcaption { position: absolute; left: 0; right: 0; bottom: -6%; text-align: center; font-size: 13px; color: var(--ink-2); }
.gauge figcaption span { color: var(--steel); font-size: 12px; }
.spec-tiles { display: grid; gap: 12px; }
.spec-tiles li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13,14,17,.6); backdrop-filter: blur(10px); }
.spec-tiles b { font-size: 1.9rem; font-weight: 300; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.spec-tiles li > span { color: var(--tail); font-size: 14px; }
.spec-tiles p { grid-column: 1 / -1; font-size: 13px; color: var(--steel); }

/* ---------- Finder + printer ---------- */
.finder-sec { position: relative; padding-block: clamp(110px, 12vw, 180px); overflow: hidden; isolation: isolate; }
.finder-bg { position: absolute; inset: 0; z-index: -1; }
.finder-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; opacity: .75; }
.finder-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--void) 0%, rgba(5,5,6,.35) 30%, rgba(5,5,6,.45) 70%, var(--void) 100%), linear-gradient(90deg, rgba(5,5,6,.85), transparent 60%); }
.streak { position: absolute; left: -40%; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, var(--tail), #ffd0d0); filter: blur(.4px); box-shadow: 0 0 18px 2px var(--tail-glow); animation: streak 3.6s linear infinite; opacity: .85; z-index: 1; }
.streak.s1 { top: 66%; } .streak.s2 { top: 69%; animation-delay: 1.3s; animation-duration: 4.4s; } .streak.s3 { top: 72.5%; animation-delay: .6s; animation-duration: 3s; height: 1px; }
@keyframes streak { from { transform: translateX(0); } to { transform: translateX(380%); } }
.finder-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.finder { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; align-items: end; margin-top: 36px; padding: 14px; border: 1px solid var(--line-2); border-radius: 20px; background: rgba(10,11,13,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.field { display: grid; gap: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); padding-left: 6px; }
.field select { appearance: none; -webkit-appearance: none; height: 54px; width: 100%; padding: 0 40px 0 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff2d2d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; color: var(--ink); font-size: 15px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.field select option { background: #111; color: #eee; }
.field select:disabled { opacity: .45; cursor: not-allowed; }
.field select:focus-visible { border-color: var(--tail); outline: none; box-shadow: 0 0 0 3px rgba(255,45,45,.25); }
.popular { margin-top: 56px; }
.popular-title { font-size: 1.05rem; font-weight: 500; }
.popular-list { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
.popular-list a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14px; transition: color .25s, padding .35s var(--ease-out); }
.popular-list a::after { content: "↗"; color: var(--steel-2); transition: color .25s; }
.popular-list a:hover { color: #fff; padding-left: 8px; }
.popular-list a:hover::after { color: var(--tail); }

.printer { position: relative; justify-self: center; width: min(100%, 380px); padding-top: 10px; }
.printer-body { position: relative; z-index: 2; height: 96px; border-radius: 22px 22px 14px 14px; background: linear-gradient(180deg, #2a2d33, #121317 60%, #0b0c0e); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 30px 60px -20px rgba(0,0,0,.9); }
.printer-led { position: absolute; left: 22px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: #3a1214; transition: background-color .2s, box-shadow .2s; }
.printer-led.is-on { background: var(--tail); box-shadow: 0 0 12px var(--tail); }
.printer-name { position: absolute; right: 22px; top: 18px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.printer-slot { position: absolute; left: 26px; right: 26px; bottom: 16px; height: 8px; border-radius: 4px; background: #000; box-shadow: inset 0 2px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08); }
.label-window { position: relative; z-index: 1; margin: -20px 42px 0; overflow: hidden; padding-bottom: 30px; }
.label { position: relative; background: #f4f4f1; color: #121214; padding: 48px 22px 26px; border-radius: 0 0 4px 4px; transform: translateY(-101%); box-shadow: 0 30px 40px -20px rgba(0,0,0,.8);
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x; }
.label-head { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px dashed #b9b9b4; }
.label-head img { width: 120px; height: auto; filter: brightness(0); }
.label-head span { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #55565a; }
.label-rows { display: grid; gap: 7px; padding: 14px 0; font-size: 13px; }
.label-rows div { display: flex; justify-content: space-between; gap: 18px; }
.label-rows dt { color: #6a6b70; }
.label-rows dd { font-weight: 600; text-align: right; }
.label-rows .label-total { margin-top: 3px; padding-top: 10px; border-top: 1px dashed #b9b9b4; }
.label-rows .label-total dt { color: #121214; font-weight: 600; }
.label-bar { display: grid; gap: 4px; justify-items: center; padding-top: 12px; border-top: 1px dashed #b9b9b4; }
.label-bar svg { width: 100%; height: 46px; }
.label-bar span { font-size: 10px; letter-spacing: .3em; color: #444; }
.label-foot { margin-top: 12px; text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #77787c; }
.label-cta { position: relative; z-index: 3; margin: 6px auto 0; display: flex; width: max-content; }

/* ---------- FAQ + about ---------- */
.faq { position: relative; padding-block: clamp(110px, 12vw, 180px) clamp(80px, 9vw, 140px); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 90px); }
.faq-grid .h2 { margin-top: 18px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: clamp(.98rem, 1.25vw, 1.15rem); font-weight: 400; letter-spacing: -.035em; transition: color .25s; }
.faq-item summary::after { content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2);
  background: linear-gradient(var(--ink), var(--ink)) center/10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1px 10px no-repeat; transition: transform .4s var(--ease-out), background-color .3s, border-color .3s; }
.faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--tail); border-color: var(--tail); }
.faq-item summary:hover h3 { color: #fff; }
.faq-item p { max-width: 62ch; padding: 0 0 26px; color: var(--steel); }
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(90px, 10vw, 160px); }
.about-year { font-size: clamp(3.4rem, 6.2vw, 6.8rem); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; background: var(--chrome); -webkit-background-clip: text; background-clip: text; opacity: .9; }
.about-copy p { margin-top: 16px; color: var(--steel); max-width: 52ch; }
.about-figure img { border-radius: 16px; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%; filter: grayscale(.25) contrast(1.05); border: 1px solid var(--line); }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding-top: 80px; overflow: hidden; border-top: 1px solid var(--line); }
.footer-top { display: flex; justify-content: space-between; align-items: start; gap: 40px; flex-wrap: wrap; }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 70px; }
.footer-cols div { display: grid; gap: 10px; align-content: start; font-size: 14px; color: var(--ink-2); }
.footer-cols a:hover { color: var(--tail); }
.f-title { color: var(--steel); font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 4px; }
.footer-mark { position: relative; margin-top: 70px; text-align: center; line-height: .76; }
.footer-mark span { display: inline-block; font-weight: 800; font-size: clamp(4rem, 17vw, 21rem); letter-spacing: -.06em; color: transparent; background: var(--chrome); -webkit-background-clip: text; background-clip: text; will-change: transform; }
.footer-mark i { position: absolute; left: 0; right: 0; bottom: 26%; height: 2px; background: linear-gradient(90deg, transparent, var(--tail), transparent); box-shadow: 0 0 20px var(--tail-glow); }
/* Bez velikog SAHLER natpisa: razmak iznad pravnog reda. */
.footer-top + .footer-legal { margin-top: 64px; }
.footer-legal { display: flex; justify-content: space-between; gap: 24px; padding-block: 26px 34px; border-top: 1px solid var(--line); font-size: 12px; color: var(--steel-2); }
.footer-legal p:first-child { max-width: 80ch; }
.footer-legal a:hover { color: var(--ink); }
.to-top { margin-left: 18px; color: var(--ink-2); }

/* ---------- Cursor & grain ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; mix-blend-mode: normal; display: none; }
.has-cursor .cursor { display: block; }
.cursor-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--tail); box-shadow: 0 0 10px var(--tail); }
.cursor-ring { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor select, .has-cursor summary { cursor: none; }
.grain { position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: 0; padding: 10px var(--gutter) 28px; background: rgba(5,5,6,.97); transform: translateY(-120%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; }
  .main-nav.is-open { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
  .main-nav a { padding: 16px 0; font-size: 1.4rem; border-bottom: 1px solid var(--line); }
  .site-header:has(.main-nav.is-open) { background: var(--void); }
  .menu-toggle { display: block; }
  .header-tag { display: none; }
  .header-actions { margin-left: auto; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-grid { grid-template-columns: 1fr 1fr; }
  .material-copy { grid-column: 1 / -1; }
  .about { grid-template-columns: 1fr 1fr; }
  .about-year { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .header-actions .pill { display: none; }
  .logo img { width: 124px; }
  .hero, .hero-grid { min-height: max(100svh, 760px); }
  .hero-grid { grid-template-columns: 1fr; align-content: center; padding-bottom: 60px; }
  .hero-side { position: relative; right: auto; bottom: auto; justify-self: start; justify-items: start; margin-top: 30px; }
  .spec-list { display: none; }
  .stat-glass { max-width: 100%; }
  .stat-glass > div { padding: 12px 16px; }
  .stat-glass b { font-size: 1.4rem; }
  .hero-copy { max-width: none; }
  .mat-stage { left: 68%; top: 15%; width: min(50vw, 290px); opacity: .8; }
  .hero-vignette { background: linear-gradient(180deg, rgba(4,4,5,.55) 0%, rgba(4,4,5,.35) 40%, rgba(4,4,5,.75) 75%, var(--void) 100%); }
  .hero-down { display: none; }
  .sec-head { grid-template-columns: 1fr; grid-template-areas: "title" "aside"; }
  .sec-aside { flex-direction: column; align-items: start; }
  .tech { height: auto; }
  .tech-sticky { position: relative; height: auto; overflow: visible; padding-block: 100px 60px; }
  .tech-grid { grid-template-columns: 1fr; padding-top: 0; }
  .tech-film { position: relative; top: auto; right: auto; width: auto; transform: none; margin: 0 0 8px; aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%); }
  .tech-video { object-position: 68% 50%; }
  .tech-hud { display: none; }
  .step { grid-template-rows: auto 1fr; color: var(--ink); }
  .step p { opacity: 1; padding-top: 6px; }
  .step img { filter: none; }
  .details { height: auto; }
  .details-sticky { position: relative; height: auto; overflow: visible; }
  .details-track { flex-direction: column; height: auto; transform: none !important; }
  .d-intro { flex: none; width: 100%; min-height: 80vh; padding-bottom: 60px; }
  .d-panel { flex: none; width: 100%; height: auto; padding: 60px var(--gutter); border-left: 0; border-top: 1px solid var(--line); }
  .d-no { position: static; font-size: 4rem; margin-bottom: 14px; }
  .details-bar, .d-hint { display: none; }
  .material-grid { grid-template-columns: 1fr; }
  .finder-grid, .faq-grid { grid-template-columns: 1fr; }
  .finder { grid-template-columns: 1fr; }
  .popular-list { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, auto); gap: 30px 50px; }
  .footer-legal { flex-direction: column; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(1.6rem, 7.9vw, 2.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain, .streak { display: none; }
}