/* ============================================================================
   SORIMOTO - premium automotive-energy landing
   Design read: premium pro-automotive product landing, dark high-tech
   "energy/hardware" language. Native CSS + Three.js WebGL + GSAP.
   Dials: VARIANCE 8 / MOTION 9 / DENSITY 3. Theme: dark (brand-locked).
   Accent (locked, single): brand red. Palette: red / graphite / black.
   Radius scale (locked): buttons = pill(999px), cards = 16px, chips/inputs = 10px.
============================================================================ */

/* ----------------------------- Fonts (self-hosted, Cyrillic + Latin) ------ */
/* Unbounded - display headlines */
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/unbounded-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/unbounded-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FFFD;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/unbounded-cyrillic-800-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FFFD;
}
/* Manrope - body / UI */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/manrope-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/manrope-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/manrope-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FFFD;
}
/* JetBrains Mono - numerals / technical labels */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FFFD;
}
/* Cinzel - engraved-caps serif used as the embeddable match for the brand
   wordmark (logo). The real "Engravers MT" is used first when available locally. */
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cinzel-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2");
}

/* ----------------------------- Tokens ------------------------------------- */
:root {
  --bg:        #08080a;   /* off-black base */
  --bg-2:      #0d0d10;
  --surface:   #141417;   /* graphite */
  --surface-2: #1a1a1f;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);

  --text:      #f5f5f6;
  --dim:       #b4b4bb;
  --mute:      #9a9aa3;  /* >= 4.5:1 on bg, surface and hover-elevated surface-2 */

  --red:        #e8202a;  /* brand red (locked accent) */
  --red-soft:   #ff3b44;
  --red-deep:   #b3141c;
  --red-glow:   rgba(232,32,42,0.55);

  --r-card: 16px;
  --r-chip: 10px;
  --r-pill: 999px;

  --maxw: 1400px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --sect-y: clamp(5.5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* brand wordmark: real Engravers MT where installed, Cinzel as web fallback */
  --font-logo: "Engravers MT", "Cinzel", "Copperplate", "Times New Roman", serif;
}

/* ----------------------------- Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.has-anim { } /* set by JS when motion is allowed */

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--red); color: #fff; }

/* Visible keyboard focus (WCAG 2.4.7). Light ring on red fills, red ring elsewhere. */
:where(a, button, .btn, .btn--icon, .shop, [tabindex]):focus-visible {
  outline: 2px solid var(--red-soft);
  outline-offset: 3px;
}
.btn--primary:focus-visible,
.btn--icon:focus-visible,
.footer__social a:focus-visible { outline-color: #ffffff; }
:focus:not(:focus-visible) { outline: none; }

/* ----------------------------- Layout helpers ----------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: var(--sect-y); }
.app { position: relative; z-index: 1; }

/* opaque sections cover the fixed WebGL canvas after the hero */
.section--solid { background: var(--bg); }
.section--raise { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--red); display: inline-block;
}

.h-sect {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
}
.lede {
  color: var(--dim);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 56ch;
}

/* ----------------------------- WebGL canvas ------------------------------- */
#webgl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  will-change: opacity;
}

/* fixed grain + vignette overlay (pointer-events none) */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ----------------------------- Buttons ------------------------------------ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.96rem; white-space: nowrap;
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn .btn__i { font-size: 1.15em; line-height: 0; transition: transform 0.4s var(--ease); }
.btn:hover .btn__i { transform: translateX(3px); }

.btn--primary {
  background: var(--red); color: #fff;
  box-shadow: 0 10px 30px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--primary:hover { background: var(--red-soft); box-shadow: 0 16px 44px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.28); }

.btn--ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.02rem; }

/* ----------------------------- Chips / badges ----------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem; border-radius: var(--r-chip);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--dim);
}
.badge {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.32rem 0.65rem; border-radius: var(--r-chip); font-weight: 500;
}
.badge--new { background: var(--red); color: #fff; }
.badge--sale { background: transparent; color: var(--red-soft); border: 1px solid var(--red-deep); }

/* ----------------------------- Nav ---------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 72px;
  display: flex; align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,8,10,0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  font-family: var(--font-logo); font-weight: 600; font-size: 1.35rem;
  letter-spacing: 0.2em; color: #fff; white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: 0.92rem; color: var(--dim); font-weight: 500; position: relative; padding: 0.3rem 0;
  transition: color 0.25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--red);
  transition: width 0.35s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 0.9rem; }
.nav__burger { display: none; font-size: 1.6rem; color: var(--text); }

/* ----------------------------- Hero (scroll-scrubbed video) --------------- */
.hero { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; background: #050506; }
.hero__video-wrap { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; background: #050506; }
/* Light scrim only: a bottom band under the text and a thin top band under the
   nav. No side washes, so the devices themselves are never dimmed. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(5,5,6,0.78) 0%, rgba(5,5,6,0.26) 24%, rgba(5,5,6,0) 48%),
    linear-gradient(180deg, rgba(5,5,6,0.48) 0%, rgba(5,5,6,0) 13%);
}
.hero__ui { position: relative; z-index: 2; }
.hero__inner { position: relative; max-width: var(--maxw); margin-inline: auto; min-height: 100dvh; padding: 88px var(--pad) 7vh; }

/* Hero text blocks (intro + device panels): each is positioned on the side
   OPPOSITE its device in that shot, so text never covers the product. Only one
   panel shows at a time; the opening brand block and compressor sit in different
   corners. Legibility comes from tight text shadows, not a dark patch, so the
   product stays fully visible behind the text. */
.hpos { position: absolute; bottom: 13vh; width: min(440px, 42vw); }
.hpos--bl { left: var(--pad); text-align: left; }
.hpos--br { right: var(--pad); text-align: right; }

.hero__intro .eyebrow { margin-bottom: 1.3rem; }
.hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.03em; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 6px 34px rgba(0,0,0,0.55);
}
.hero__title .accent { color: var(--red); }
.hero__intro .btn { margin-top: 1.8rem; }

.hpanel {
  opacity: 0; visibility: hidden; will-change: transform, opacity;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.hpos--br.hpanel { align-items: flex-end; }
.hpos--br .hpanel__specs { justify-content: flex-end; }
.hpos--br .hpanel__foot { justify-content: flex-end; }
.hpanel__eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-soft); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.hpanel__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; color: #fff; letter-spacing: -0.02em; text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 6px 30px rgba(0,0,0,0.55); }
.hpanel__specs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hpanel__specs span {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text);
  padding: 0.42rem 0.7rem; border-radius: var(--r-chip);
  background: rgba(5,5,6,0.5); border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hpanel__foot { display: flex; align-items: center; gap: 1.3rem; margin-top: 0.35rem; }
.hpanel .price__now { color: #fff; }

/* flythrough progress */
.hero__progress { position: absolute; left: var(--pad); bottom: 7vh; display: flex; gap: 8px; }
.hero__progress span { width: 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); overflow: hidden; }
.hero__progress span::after { content: ""; display: block; height: 100%; width: 0; background: var(--red); transition: width 0.25s ease; }
.hero__progress span.on::after { width: 100%; }

/* ----------------------------- Values band -------------------------------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-block: 1px solid var(--line); }
.value { padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.4rem); position: relative; }
.value:not(:last-child) { border-right: 1px solid var(--line); }
.value__i {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(232,32,42,0.18), rgba(232,32,42,0.04));
  border: 1px solid var(--line-2); color: var(--red-soft); font-size: 1.6rem; margin-bottom: 1.3rem;
}
.value h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 0.6rem; }
.value p { color: var(--dim); font-size: 0.98rem; max-width: 30ch; }

/* ----------------------------- Marquee ------------------------------------ */
.marquee {
  border-block: 1px solid var(--line); overflow: hidden; padding-block: 1.5rem;
  background: var(--bg-2);
  --marq-dur: 32s;
}
.marquee__track { display: flex; width: max-content; gap: 2.5rem; will-change: transform; }
.has-anim .marquee__track { animation: marq var(--marq-dur) linear infinite; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 2.5rem;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em;
  font-size: clamp(1.4rem, 3vw, 2.6rem); color: var(--text); text-transform: uppercase;
}
.marquee__item span:nth-child(even) { color: var(--red); }
.marquee__dot { color: var(--red); font-size: 0.6em; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ----------------------------- Product gallery (horizontal pan) ----------- */
.gallery { position: relative; }
.gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 0; }
.gallery__hint { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mute); letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.5rem; }
/* horizontally scrollable by default (works without JS / under reduced motion);
   the desktop GSAP pin switches this to hidden and pans via transform instead. */
.gallery__viewport { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__track { display: flex; gap: clamp(1.2rem, 2vw, 2rem); padding-block: clamp(2.5rem, 5vw, 4rem); padding-inline: var(--pad); will-change: transform; }

/* Product card: the photo is the hero of the card (full-bleed panel with a brand
   glow and a floor shadow that grounds the cut-out), facts sit below it.
   NOTE: no transform on :hover - the GSAP tilt owns this element's transform. */
.pcard {
  flex: 0 0 auto; width: clamp(278px, 76vw, 350px);
  background: linear-gradient(180deg, #17171b 0%, #0f0f12 100%);
  border: 1px solid var(--line); border-radius: var(--r-card);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color 0.45s var(--ease), box-shadow 0.5s var(--ease);
}
.pcard:hover {
  border-color: rgba(232,32,42,0.42);
  box-shadow: 0 30px 64px -32px rgba(0,0,0,0.9);
}

.pcard__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(58% 48% at 50% 44%, rgba(232,32,42,0.20), transparent 72%),
    linear-gradient(180deg, #101014, #0b0b0e);
}
.pcard__media::after { /* floor shadow so the device does not float */
  content: ""; position: absolute; left: 50%; bottom: 9%;
  width: 54%; height: 7%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.75), transparent 72%);
  filter: blur(7px); pointer-events: none;
}
.pcard__img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; padding: 11%;
  transition: transform 0.65s var(--ease);
}
.pcard:hover .pcard__img { transform: scale(1.07) translateY(-4px); }

.pcard__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.pcard__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.pcard__type { font-family: var(--font-mono); font-size: 0.7rem; color: var(--mute); letter-spacing: 0.14em; text-transform: uppercase; }
.pcard__name { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.05; letter-spacing: -0.02em; }
.pcard__desc { color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.pcard__specs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.38rem; margin-top: auto; padding-top: 0.35rem; }
.pcard__specs li {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--dim);
  padding: 0.34rem 0.58rem; border-radius: var(--r-chip);
  background: rgba(255,255,255,0.045); border: 1px solid var(--line);
}
.pcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 0.9rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.pcard__buy { padding: 0.72rem 1.4rem; font-size: 0.9rem; }
.price { display: flex; flex-direction: column; line-height: 1.1; }
.price__now { font-family: var(--font-mono); font-weight: 500; font-size: 1.4rem; color: #fff; }
.price__old { font-family: var(--font-mono); font-size: 0.82rem; color: var(--mute); text-decoration: line-through; margin-top: 0.15rem; }

/* ----------------------------- Split spotlight (compressor) --------------- */
.spot__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.spot__media { position: relative; }
.spot__img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; border-radius: var(--r-card);
  background: radial-gradient(66% 56% at 50% 52%, rgba(232,32,42,0.14), transparent 72%);
}
.spot__floaters { position: absolute; inset: 0; pointer-events: none; }
.floater {
  position: absolute; background: rgba(20,20,23,0.82); border: 1px solid var(--line-2);
  border-radius: var(--r-chip); padding: 0.6rem 0.85rem; backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 16px 40px -20px rgba(0,0,0,0.9);
}
.floater i { color: var(--red-soft); font-size: 1.1rem; }
.floater--a { top: 8%; left: -4%; }
.floater--b { top: 44%; right: -6%; }
.floater--c { bottom: 9%; left: 6%; }
.spot__title { margin: 1.3rem 0 1.2rem; }
.spot__features { list-style: none; display: grid; gap: 0; margin: 1.8rem 0; }
.spot__features li {
  display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 0; color: var(--dim);
  border-top: 1px solid var(--line);
}
.spot__features li:last-child { border-bottom: 1px solid var(--line); }
.spot__features i { color: var(--red-soft); font-size: 1.3rem; margin-top: 1px; flex: 0 0 auto; }
.spot__features b { color: var(--text); font-weight: 600; }
.spot__buy { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* ----------------------------- Bento (tech) ------------------------------- */
.bento {
  display: grid; gap: clamp(0.9rem, 1.4vw, 1.2rem);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(160px, auto);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.cell {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  padding: clamp(1.3rem, 2vw, 1.8rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem;
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.cell:hover { border-color: var(--line-2); }
.cell__i { font-size: 1.9rem; color: var(--red-soft); }
.cell h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; }
.cell p { color: var(--dim); font-size: 0.95rem; }
/* sizes / rhythm */
.cell--wide { grid-column: span 4; }
.cell--tall { grid-column: span 2; grid-row: span 2; }
.cell--reg { grid-column: span 2; }
.cell--mid { grid-column: span 3; }
.cell--accent {
  background: linear-gradient(150deg, var(--red-deep), #6c0c12 60%, #2a0608);
  border-color: rgba(232,32,42,0.4);
}
.cell--accent .cell__i, .cell--accent p { color: rgba(255,255,255,0.92); }
.cell--accent h3 { color: #fff; }
.cell__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 80% 10%, rgba(232,32,42,0.12), transparent 70%); }
.cell__img {
  flex: 1; min-height: 200px; width: 100%; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line);
}
.cell__big { font-family: var(--font-mono); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.6rem); color: #fff; line-height: 1; }
.cell__unit { font-size: 0.4em; color: var(--dim); }

/* ----------------------------- Spec tiles --------------------------------- */
.specs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.4vw, 1.2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.spec {
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.6rem 1.4rem;
  background: var(--surface); display: flex; flex-direction: column; gap: 0.5rem;
  transition: border-color 0.4s, background 0.4s;
}
.spec:hover { border-color: var(--line-2); background: var(--surface-2); }
.spec__v { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; line-height: 1; }
.spec__v small { font-size: 0.42em; color: var(--red-soft); margin-left: 0.15em; }
.spec__k { color: var(--mute); font-size: 0.9rem; }

/* ----------------------------- Reviews ------------------------------------ */
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.review {
  border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.5rem, 2.4vw, 2rem);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  display: flex; flex-direction: column; gap: 1.3rem;
}
.review__stars { color: var(--red-soft); font-size: 1.05rem; display: flex; gap: 0.15rem; }
.review__body { color: var(--text); font-size: 1.02rem; line-height: 1.55; flex: 1; }
.review__who { display: flex; align-items: center; gap: 0.85rem; }
.review__av {
  width: 42px; height: 42px; border-radius: var(--r-pill); flex: 0 0 auto;
  background: linear-gradient(150deg, var(--surface-2), var(--bg)); border: 1px solid var(--line-2);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--red-soft); font-size: 0.95rem;
}
.review__name { font-weight: 600; font-size: 0.95rem; }
.review__role { color: var(--mute); font-size: 0.82rem; }

/* ----------------------------- Guarantee band ----------------------------- */
.guard {
  position: relative; overflow: hidden;
  border-radius: var(--r-card); border: 1px solid rgba(232,32,42,0.3);
  background: linear-gradient(120deg, #16060a, #0c0c10 60%);
  padding: clamp(2.4rem, 5vw, 4.2rem);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.guard::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 120% at 100% 0%, rgba(232,32,42,0.22), transparent 60%); }
.guard__seal {
  justify-self: center; width: clamp(140px, 20vw, 220px); aspect-ratio: 1; border-radius: var(--r-pill);
  display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(232,32,42,0.5);
  background: radial-gradient(circle at 50% 35%, rgba(232,32,42,0.22), rgba(8,8,10,0.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 70px -30px var(--red-glow);
}
.guard__seal b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.8rem, 6vw, 4rem); color: #fff; line-height: 0.9; }
.guard__seal span { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; margin-top: 0.4rem; }
.guard h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.05; margin-bottom: 1rem; }
.guard p { color: var(--dim); max-width: 46ch; margin-bottom: 1.6rem; }

/* ----------------------------- Marketplaces ------------------------------- */
.shops__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.shop {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.7rem, 2.6vw, 2.3rem);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: border-color 0.45s var(--ease), transform 0.5s var(--ease);
}
.shop::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; pointer-events: none;
  background: radial-gradient(72% 60% at 50% 0%, rgba(232,32,42,0.16), transparent 70%);
}
.shop:hover { border-color: rgba(232,32,42,0.42); transform: translateY(-4px); }
.shop:hover::before { opacity: 1; }
/* slot for an official marketplace badge, when one is supplied */
.shop__logo { height: 40px; width: auto; max-width: 72%; object-fit: contain; object-position: left center; margin-bottom: 0.7rem; }
.shop__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.1vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.1; }
.shop__sub { color: var(--mute); font-size: 0.9rem; }
.shop__go { margin-top: 1.3rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--red-soft); font-weight: 600; font-size: 0.95rem; }
.shop__go i { transition: transform 0.35s var(--ease); }
.shop:hover .shop__go i { transform: translateX(4px); }

/* ----------------------------- CTA closing -------------------------------- */
.endcta { text-align: center; }
.endcta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.02em; }
.endcta h2 .accent { color: var(--red); }
.endcta p { color: var(--dim); margin: 1.4rem auto 2.4rem; max-width: 44ch; }

/* ----------------------------- Footer ------------------------------------- */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
.footer__brand .brand { font-size: 1.4rem; }
.footer__tag { color: var(--mute); margin-top: 1rem; max-width: 32ch; font-size: 0.95rem; }
.footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 1.2rem; font-family: var(--font-mono); }
.footer__col a { display: block; color: var(--dim); padding: 0.4rem 0; font-size: 0.95rem; transition: color 0.25s; }
.footer__col a:hover { color: var(--red-soft); }
.footer__social { display: flex; gap: 0.7rem; }
.footer__social a {
  width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--dim); font-size: 1.25rem; transition: all 0.3s;
}
.footer__social a:hover { color: #fff; border-color: var(--red); background: rgba(232,32,42,0.12); }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--mute); font-size: 0.85rem; }

/* ----------------------------- Reveal init states (only when JS+motion) --- */
.has-anim [data-reveal] { opacity: 0; transform: translateY(34px); }
.has-anim [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); }

/* ----------------------------- Responsive --------------------------------- */
@media (max-width: 1024px) {
  .spot__grid { grid-template-columns: 1fr; }
  .guard { grid-template-columns: 1fr; text-align: center; }
  .guard p { margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__burger { display: block; }
  /* mobile dropdown menu */
  .nav.nav--open { background: rgba(8,8,10,0.96); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
  .nav.nav--open .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
    position: absolute; top: 72px; left: 0; right: 0;
    padding: 1.2rem var(--pad) 1.8rem;
    background: rgba(8,8,10,0.98); border-bottom: 1px solid var(--line);
  }
  .nav.nav--open .nav__links a { font-size: 1.25rem; padding: 0.6rem 0; }
  .gallery__viewport { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gallery__viewport::-webkit-scrollbar { display: none; }
  .gallery__track { padding-inline: var(--pad); }
  .values { grid-template-columns: 1fr; }
  .value:not(:last-child) { border-right: none; border-bottom: 1px solid var(--line); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell--wide, .cell--tall, .cell--reg, .cell--mid { grid-column: span 1; grid-row: span 1; }
  .specs__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: 1fr; }
  .shops__grid { grid-template-columns: 1fr; }
  /* hero: on mobile the video loops as a background; show only the intro block */
  .hpanel, .hero__progress { display: none; }
  .hero__intro.hpos { width: 88vw; bottom: 15vh; }
  .hero__title { font-size: clamp(2.4rem, 8vw, 3.2rem); }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .specs__grid { grid-template-columns: 1fr; }
  .floater { display: none; }
}

/* ----------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .has-anim [data-reveal], .has-anim [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
}