/* ============================================================
   3AM PALETTE — automotive paint colors
   Black  : BMW Black Sapphire Metallic  (M2)   ~#000000
   White  : Audi Glacier White Metallic  (RS3)  ~#eef1f4 / rgba(233,238,242,..)
   Grey   : Toyota Supra Phantom Matte Gray (Supra) ~#5f6368
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#000000;color:#eef1f4;
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── GRAIN OVERLAY (KillTec-style noise texture) ── */
body::after{
  content:'';
  position:fixed;inset:0;z-index:9997;
  pointer-events:none;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grainShift 0.08s steps(1) infinite;
}
@keyframes grainShift{
  0%{background-position:0 0}
  10%{background-position:-30px 20px}
  20%{background-position:15px -25px}
  30%{background-position:-20px 10px}
  40%{background-position:25px -15px}
  50%{background-position:-10px 30px}
  60%{background-position(20px 5px)}
  70%{background-position(-25px -20px)}
  80%{background-position(10px 25px)}
  90%{background-position(-15px -10px)}
  100%{background-position(5px 0)}
}

/* While the loader/gate is up, the page underneath must not scroll or peek
   through (iOS rubber-banding revealed content below the fixed overlay). */
html{background:#000000}
body.gated{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}

/* ── LOADER (KillTec-style: logo glitch/jitter + white bar) ── */
#loader{
  position:fixed;inset:0;z-index:10000;
  background:#000000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .7s ease;
}
#loader.out{opacity:0;pointer-events:none}
.loader-logo-wrap{
  position:relative;
  animation:logoJitter 0.12s steps(1) infinite;
  margin-bottom:50px;
}
.loader-logo-main{
  width:200px;
  filter:brightness(0) invert(1);
  display:block;
}
/* ghost glitch layers */
.loader-logo-ghost{
  position:absolute;top:0;left:0;
  width:200px;
  filter:brightness(0) invert(1);
  pointer-events:none;
}
.loader-logo-ghost.r{
  clip-path:inset(20% 0 60% 0);
  mix-blend-mode:screen;
  opacity:.6;
  animation:glitchR 0.18s steps(1) infinite;
}
.loader-logo-ghost.b{
  clip-path:inset(55% 0 20% 0);
  mix-blend-mode:screen;
  opacity:.5;
  animation:glitchB 0.22s steps(1) infinite;
}
@keyframes logoJitter{
  0%{transform:translate(0,0)}
  15%{transform:translate(-1px,1px)}
  30%{transform:translate(1px,-1px)}
  45%{transform:translate(-2px,0)}
  60%{transform:translate(0,2px)}
  75%{transform:translate(2px,-1px)}
  90%{transform:translate(-1px,-2px)}
  100%{transform:translate(0,0)}
}
@keyframes glitchR{
  0%{transform:translate(-3px,0);opacity:.6}
  33%{transform:translate(3px,0);opacity:.3}
  66%{transform:translate(-2px,1px);opacity:.7}
  100%{transform:translate(0,0);opacity:.5}
}
@keyframes glitchB{
  0%{transform:translate(3px,0);opacity:.5}
  40%{transform:translate(-3px,1px);opacity:.2}
  80%{transform:translate(2px,-1px);opacity:.6}
  100%{transform:translate(0,0);opacity:.4}
}
.loader-bar-track{
  width:160px;height:1px;background:rgba(233,238,242,.1);position:relative;overflow:hidden;
}
.loader-bar{
  position:absolute;top:0;left:0;height:100%;
  background:#eef1f4;
  animation:loadFill 2.2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes loadFill{from{width:0}to{width:100%}}
.loader-txt{
  font-size:9px;font-weight:600;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(233,238,242,.3);margin-bottom:20px;
}
/* ── LOADER DROP TIMER (revealed with the gate after the bar loads) ── */
.gate-cd{
  margin-top:0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .5s ease .1s,transform .5s ease .1s;
}
#loader.ask .gate-cd{opacity:1;pointer-events:auto;transform:translateY(0)}
.gate-cd-label{
  display:inline-flex;align-items:center;gap:12px;
  font-size:9px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(233,238,242,.4);
}
.gate-cd-label span{width:24px;height:.5px;background:rgba(233,238,242,.3)}
.gate-cd-timer{margin:0;opacity:1;animation:none}
.gate-cd .cd-num{font-size:clamp(26px,3vw,36px)}
.gate-cd .cd-sep{font-size:clamp(20px,2.4vw,28px)}

/* ── ACCESS GATE (password prompt, revealed after the bar loads) ── */
.gate{
  margin-top:18px;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
}
#loader.ask .gate{opacity:1;pointer-events:auto;transform:translateY(0)}
/* once the bar has loaded, the tagline + bar are REPLACED by the drop timer + gate */
#loader.ask .loader-txt,
#loader.ask .loader-bar-track{display:none}
/* and the whole timer+gate block tucks up right under the logo */
#loader.ask .loader-logo-wrap{margin-bottom:24px}
.gate-label{
  font-size:9px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(233,238,242,.4);
}
.gate-row{display:flex;flex-direction:column;align-items:center;gap:9px}
.gate-input{
  background:rgba(233,238,242,.05);
  border:.5px solid rgba(233,238,242,.2);
  color:#eef1f4;border-radius:1px;
  padding:9px 14px;width:186px;
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.25em;text-align:center;
  outline:none;transition:border-color .2s,background .2s;
}
.gate-input:focus{border-color:rgba(233,238,242,.55);background:rgba(233,238,242,.08)}
.gate-input::placeholder{color:rgba(233,238,242,.25);letter-spacing:.3em}
.gate-btn{
  background:#eef1f4;color:#000;border:none;cursor:pointer;border-radius:1px;
  padding:9px 18px;
  font-family:'Inter',sans-serif;font-size:8px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  transition:filter .2s,letter-spacing .2s;
}
.gate-btn:hover{filter:brightness(1.04);letter-spacing:.28em}
.gate-error{
  min-height:11px;
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#e0574f;opacity:0;transition:opacity .2s;
}
.gate-error.show{opacity:1}
.gate.shake{animation:gateShake .4s}
@keyframes gateShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}80%{transform:translateX(5px)}
}

/* cursor removed */

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:28px 56px;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .4s ease;
}
nav.scrolled{
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:16px 56px;
  border-bottom:.5px solid rgba(233,238,242,.07);
}
.nav-logo img{
  height:128px;
  filter:brightness(0) invert(1);
  transition:opacity .2s;
  display:block;
}
.nav-logo img:hover{opacity:.7}
.nav-links{display:flex;gap:44px;list-style:none;align-items:center}
.nav-links a{
  color:rgba(233,238,242,.5);text-decoration:none;
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;width:0;height:.5px;
  background:#eef1f4;transition:width .3s ease;
}
.nav-links a:hover{color:#eef1f4}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-cart{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(233,238,242,.45);cursor:pointer;transition:color .2s;
}
.nav-cart:hover{color:#eef1f4}

/* ── HERO ── */
#hero{
  position:relative;height:100vh;min-height:720px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 56px 96px;overflow:hidden;
  background:#000000;
}
/* Hero background video (revealed via glitch after the loader) */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;opacity:0;
  filter:brightness(.55) contrast(1.2) saturate(.92);
  transform:scale(1.08);
  will-change:opacity,transform,filter;
}
#hero.hero-playing .hero-video{
  animation:heroVidReveal .75s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroVidReveal{
  0%{opacity:0;transform:scale(1.08) translateX(-14px);filter:brightness(.15) contrast(2.2) hue-rotate(8deg)}
  16%{opacity:1;transform:scale(1.05) translateX(12px);filter:brightness(1.5) contrast(1.7)}
  28%{transform:scale(1.05) translateX(-9px);filter:brightness(.5) contrast(1.5)}
  42%{transform:scale(1.04) translateX(5px)}
  62%{opacity:1;transform:scale(1.02) translateX(-3px);filter:brightness(.8) contrast(1.25)}
  100%{opacity:1;transform:scale(1);filter:brightness(.58) contrast(1.18) saturate(.92)}
}
#hero.hero-playing .hero-watermark{opacity:0}
/* During playback: clean, full-bleed video — hide all text, buttons & overlays.
   Hiding is INSTANT (transition:none) so no text flashes as the video starts;
   the base .45s transition still fades everything back in when the clip ends. */
.hero-bg,.scanlines,.streaks,.hero-scan{transition:opacity .45s ease}
#hero.hero-playing .hero-content{opacity:0;pointer-events:none;transition:none}
#hero.hero-playing .hero-bg,
#hero.hero-playing .scanlines,
#hero.hero-playing .streaks,
#hero.hero-playing .hero-scan{opacity:0;transition:none}
#hero.hero-playing .scroll-hint{animation:none;opacity:0;pointer-events:none;transition:none}
.hero-bg{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.9) 100%);
}
/* Glitch transition overlay */
.hero-glitch{
  position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg, rgba(233,238,242,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
#hero.hero-glitching .hero-glitch{animation:heroGlitch .82s steps(1) forwards}
@keyframes heroGlitch{
  0%{opacity:0;transform:translateX(0);box-shadow:none}
  4%{opacity:1;transform:translateX(-9px) skewX(3deg);box-shadow:inset 70px 0 rgba(255,0,80,.28),inset -70px 0 rgba(0,255,220,.28)}
  9%{transform:translateX(11px) skewX(-2deg)}
  15%{opacity:.85;transform:translateX(-6px)}
  21%{opacity:1;transform:translateX(8px);background-color:rgba(233,238,242,.07)}
  27%{transform:translateX(-3px);background-color:rgba(0,0,0,0)}
  35%{opacity:.65;transform:translateX(5px)}
  47%{opacity:1;transform:translateX(-10px) skewX(2deg);box-shadow:inset 45px 0 rgba(255,0,80,.22),inset -45px 0 rgba(0,255,220,.22)}
  60%{opacity:.45;transform:translateX(4px)}
  74%{opacity:.75;transform:translateX(-2px);box-shadow:none}
  100%{opacity:0;transform:translateX(0)}
}
#hero.hero-glitching .hero-content{animation:heroContentJit .82s steps(1) forwards}
@keyframes heroContentJit{
  0%,100%{transform:translate(0,0)}
  6%{transform:translate(-3px,1px)}
  15%{transform:translate(4px,-1px)}
  31%{transform:translate(-2px,0)}
  49%{transform:translate(3px,1px)}
  71%{transform:translate(-1px,0)}
}
/* Sound toggle */
.hero-sound{
  position:absolute;left:56px;bottom:40px;z-index:20;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:.5px solid rgba(233,238,242,.2);border-radius:1px;
  padding:9px 14px;cursor:pointer;color:rgba(233,238,242,.7);
  font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
  opacity:0;animation:fadeIn 1s ease 3.3s forwards;
}
.hero-sound:hover{border-color:rgba(233,238,242,.55);color:#eef1f4;background:rgba(0,0,0,.65)}
.hero-sound-ico{
  width:11px;height:11px;flex-shrink:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero-sound.muted .hero-sound-ico{opacity:.5}
.hero-sound .hero-sound-txt::after{content:' On'}
.hero-sound.muted .hero-sound-txt::after{content:' Off'}
/* Scanline effect (KillTec-style) */
.scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(233,238,242,.04) 2px,
    rgba(233,238,242,.04) 4px
  );
}
/* Speed lines / light streaks */
.streaks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.streak{
  position:absolute;height:.5px;
  background:linear-gradient(90deg,transparent,rgba(233,238,242,.65),transparent);
  animation:streakMove 8s linear infinite;opacity:0;
}
.streak:nth-child(1){width:350px;top:58%;animation-delay:0s}
.streak:nth-child(2){width:560px;top:60%;animation-delay:2.2s}
.streak:nth-child(3){width:240px;top:62%;animation-delay:4s}
.streak:nth-child(4){width:480px;top:56%;animation-delay:6s}
.streak:nth-child(5){width:300px;top:64%;animation-delay:1.5s}
@keyframes streakMove{
  0%{transform:translateX(-700px);opacity:0}
  6%{opacity:1}90%{opacity:.4}
  100%{transform:translateX(2800px);opacity:0}
}
/* BIG watermark logo behind text (KillTec-style) */
.hero-watermark{
  position:absolute;
  right:-5%;bottom:-8%;
  width:70%;
  opacity:.14;
  pointer-events:none;z-index:1;
  filter:brightness(0) invert(1);
  animation:watermarkDrift 20s ease-in-out infinite alternate;
  transition:opacity .5s ease;
}
@keyframes watermarkDrift{
  from{transform:translate(0,0) rotate(-3deg)}
  to{transform:translate(-15px,10px) rotate(-1deg)}
}
.hero-content{position:relative;z-index:10;max-width:920px;transition:opacity .45s ease}
/* ── HERO COUNTDOWN (replaces the old drop label) ── */
.hero-countdown{
  opacity:0;animation:riseIn .7s ease .3s forwards;margin-bottom:28px;
}
.hero-cd-label{
  display:inline-flex;align-items:center;gap:12px;
  font-size:9px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(233,238,242,.4);margin-bottom:0;
}
.hero-cd-label span{width:24px;height:.5px;background:rgba(233,238,242,.3)}
.hero-cd-timer{
  display:inline-flex;align-items:flex-start;gap:9px;
  margin:0 0 30px;
  opacity:0;animation:riseIn .9s ease .7s forwards;
}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:34px}
.cd-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(18px,1.9vw,24px);font-weight:600;line-height:1;
  letter-spacing:-.01em;color:#eef1f4;font-variant-numeric:tabular-nums;
}
.cd-cap{
  margin-top:6px;font-size:7px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(233,238,242,.32);
}
.cd-sep{
  font-family:'Space Grotesk',sans-serif;font-weight:300;line-height:1;
  font-size:clamp(15px,1.6vw,20px);color:rgba(233,238,242,.22);padding-top:1px;
}
h1.hero-hl{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(60px,8vw,118px);
  font-weight:700;line-height:.9;letter-spacing:-.03em;
  color:#eef1f4;margin-bottom:28px;
  opacity:0;animation:riseIn .9s ease .5s forwards, glitchTxt 6s steps(1) 3s infinite;
}
h1.hero-hl em{font-style:normal;color:#bfc4c9}
.hero-sub{
  font-size:16px;font-weight:300;font-style:italic;
  color:rgba(233,238,242,.4);letter-spacing:.04em;line-height:1.7;
  margin-bottom:56px;
  opacity:0;animation:riseIn .9s ease .7s forwards;
}
.hero-cta{
  display:flex;gap:16px;flex-wrap:wrap;
  opacity:0;animation:riseIn .9s ease .9s forwards;
}
.btn-p{
  background:linear-gradient(180deg,#f6f8fa 0%,#eef1f4 55%,#e4e9ed 100%);
  color:#000000;border:none;
  padding:17px 42px;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;border-radius:1px;text-decoration:none;display:inline-block;
  transition:filter .2s,transform .15s,letter-spacing .2s;
}
.btn-p:hover{filter:brightness(1.03);transform:translateY(-1px);letter-spacing:.28em}
.btn-g{
  background:transparent;color:rgba(233,238,242,.65);
  border:.5px solid rgba(233,238,242,.2);
  padding:16px 36px;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;border-radius:1px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  transition:all .2s;
}
.btn-g:hover{border-color:rgba(233,238,242,.55);color:#eef1f4;background:rgba(233,238,242,.05)}
.play-ring{
  width:15px;height:15px;border-radius:50%;border:.5px solid rgba(233,238,242,.45);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.play-ring::after{content:'';border-left:5px solid #eef1f4;border-top:2.5px solid transparent;border-bottom:2.5px solid transparent;margin-left:1px}
.scroll-hint{
  position:absolute;bottom:40px;right:56px;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;animation:fadeIn 1s ease 1.8s forwards;
}
.scroll-hint span{font-size:8px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:rgba(233,238,242,.22);writing-mode:vertical-rl}
.scroll-line{width:.5px;height:56px;background:linear-gradient(to bottom,rgba(233,238,242,.22),transparent);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.22}50%{opacity:.8}}

/* ── TICKER (KillTec-style full-bleed) ── */
.ticker-wrap{
  background:#eef1f4;color:#000000;
  padding:12px 0;overflow:hidden;
  border-top:.5px solid rgba(233,238,242,.1);
  border-bottom:.5px solid rgba(233,238,242,.1);
}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 18s linear infinite}
.ticker-item{
  display:inline-flex;align-items:center;gap:20px;padding:0 32px;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#000000;flex-shrink:0;
}
.t-star{font-size:12px;color:#4a4e54}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTION SHARED ── */
.sec-label{
  font-size:8px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(233,238,242,.35);display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.sec-label::before{content:'';display:block;width:18px;height:.5px;background:rgba(233,238,242,.3)}
.sec-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,3.8vw,56px);font-weight:700;
  letter-spacing:-.02em;line-height:1.05;color:#eef1f4;margin-bottom:14px;
}

/* ── STORY ── */
#story{background:#0a0a0a}
.story-grid{display:grid;grid-template-columns:1fr 1fr;min-height:680px}
.story-img{
  position:relative;overflow:hidden;min-height:580px;
  background:#000000;
}
/* KillTec-style: big logo ghost in image panel */
.story-img-logo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.12;z-index:3;
}
.story-img-logo img{width:85%;filter:brightness(0) invert(1);opacity:1}
.story-car{width:82%;opacity:.9;position:relative;z-index:2}
.story-text{
  padding:80px 72px;display:flex;flex-direction:column;justify-content:center;
  background:#0a0a0a;
}
.story-hl{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,3vw,48px);font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:#eef1f4;margin-bottom:30px;
}
.story-body{font-size:14px;font-weight:300;line-height:1.95;color:rgba(233,238,242,.42);margin-bottom:18px}
.story-body strong{color:rgba(233,238,242,.82);font-weight:500}
.story-quote{
  margin-top:40px;padding-top:26px;border-top:.5px solid rgba(233,238,242,.1);
  font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:400;
  line-height:1.55;color:#c4c9ce;font-style:italic;
}

/* ── FULL-BLEED BRAND STATEMENT (KillTec-style big text) ── */
.brand-statement{
  background:#000000;padding:72px 0;overflow:hidden;position:relative;
  border-top:.5px solid rgba(233,238,242,.06);
  border-bottom:.5px solid rgba(233,238,242,.06);
}
.brand-statement-inner{
  white-space:nowrap;display:flex;align-items:center;
  animation:slideTxt 25s linear infinite;
}
.brand-statement-inner span{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(80px,10vw,140px);font-weight:700;
  letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1.5px rgba(233,238,242,.45);
  padding-right:80px;flex-shrink:0;
  transition:color .3s,-webkit-text-stroke .3s;
}
.brand-statement-inner span:hover{
  color:#eef1f4;-webkit-text-stroke:0px transparent;
}
@keyframes slideTxt{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── PRODUCTS ── */
#products{padding:96px 56px;background:#000000}
.products-hdr{text-align:center;margin-bottom:80px}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:1340px;margin:0 auto}
.product-card{background:#101010;overflow:hidden;cursor:pointer;position:relative}
.product-img{
  width:100%;aspect-ratio:3/4;background:#161616;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  transition:transform .7s cubic-bezier(.23,1,.32,1);
}
.product-card:hover .product-img{transform:scale(1.04)}
/* Product logo watermark */
.prod-wm{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.2;pointer-events:none;
}
.prod-wm img{width:70%;filter:brightness(0) invert(1);opacity:1}
.bottle-wrap{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.bottle-cap{
  width:50px;height:26px;background:linear-gradient(135deg,#c4c9ce,#76797e);border-radius:1px 1px 0 0;margin:0 auto;
}
.bottle-body{
  width:78px;height:176px;background:linear-gradient(135deg,#b8bcc0,#83878c,#9fa3a8);
  border-radius:0 0 4px 4px;display:flex;align-items:center;justify-content:center;
}
.bottle-body::after{
  content:'3AM';font-family:'Space Grotesk',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.2em;color:rgba(0,0,0,.4);
}
.hover-ov{
  position:absolute;inset:0;background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:36px;
  transition:background .35s;
}
.product-card:hover .hover-ov{background:rgba(0,0,0,.4)}
.quick-add{
  background:#eef1f4;color:#000000;border:none;padding:12px 28px;
  font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;border-radius:1px;
  transform:translateY(16px);opacity:0;transition:transform .3s,opacity .3s;
}
.product-card:hover .quick-add{transform:translateY(0);opacity:1}
.product-info{padding:20px 24px 26px;border-top:.5px solid rgba(233,238,242,.06)}
.product-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#eef1f4;margin-bottom:4px}
.product-scent{font-size:10px;color:#6a6e73;font-weight:400;letter-spacing:.05em;margin-bottom:12px}
.product-footer{display:flex;align-items:center;justify-content:space-between}
.product-price{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#eef1f4}
.product-badge{
  font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,238,242,.4);border:.5px solid rgba(233,238,242,.15);padding:4px 9px;border-radius:1px;
}

/* ── LIFESTYLE ── */
#lifestyle{background:#000000;padding:2px 0}
.ls-block{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.ls-block.rev{direction:rtl}
.ls-block.rev>*{direction:ltr}
.ls-photo{position:relative;overflow:hidden;min-height:460px}
.ls-bg{position:absolute;inset:0;transition:transform .9s cubic-bezier(.23,1,.32,1)}
.ls-photo:hover .ls-bg{transform:scale(1.05)}
.sc1{background:linear-gradient(145deg,#0a0a0a 0%,#1b1b1b 60%,#060606 100%)}
.sc2{background:linear-gradient(145deg,#060606 0%,#0f0f0f 60%,#050505 100%)}
.sc3{background:linear-gradient(145deg,#080808 0%,#161616 60%,#060606 100%)}
.ls-photo-logo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:1;
}
.ls-photo-logo img{width:60%;opacity:.18;filter:brightness(0) invert(1)}
.ls-copy{padding:70px 60px;display:flex;flex-direction:column;justify-content:center;background:#0a0a0a}
.ls-hl{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(26px,2.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  color:#eef1f4;margin-bottom:20px;
}
.ls-body{font-size:13px;font-weight:300;line-height:2;color:rgba(233,238,242,.38);margin-bottom:28px}
.ls-body strong{color:rgba(233,238,242,.75);font-weight:500}
.ls-tag{
  font-size:8px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(233,238,242,.3);display:inline-flex;align-items:center;gap:10px;
}
.ls-tag::before{content:'';display:block;width:14px;height:.5px;background:rgba(233,238,242,.25)}

/* ── STATS ── */
#stats{padding:96px 56px;background:#060606;border-top:.5px solid rgba(233,238,242,.05)}
.stats-hdr{padding:32px 56px 52px;text-align:center}
.stats-body{padding:0 56px 120px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:1100px;margin:0 auto}
.stat-card{
  padding:52px 36px;background:#0d0d0d;text-align:center;position:relative;overflow:hidden;
  transition:background .3s;cursor:default;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:.5px;
  background:linear-gradient(90deg,transparent,rgba(233,238,242,.25),transparent);
  transform:scaleX(0);transition:transform .6s;transform-origin:center;
}
.stat-card:hover{background:#161616}
.stat-card:hover::before{transform:scaleX(1)}
.stat-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(36px,3.8vw,58px);font-weight:700;
  color:#eef1f4;line-height:1;letter-spacing:-.02em;margin-bottom:14px;
}
.stat-suf{color:rgba(233,238,242,.5)}
.stat-label{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5f6368;line-height:1.6}

/* ── LOGO GRID (brand repetition, KillTec-style) ── */
.logo-grid{
  background:#000000;padding:60px 0;
  border-top:.5px solid rgba(233,238,242,.06);
  overflow:hidden;
}
.logo-grid-track{
  display:flex;align-items:center;gap:80px;
  animation:logoScroll 20s linear infinite;
  white-space:nowrap;
}
.logo-grid-item{flex-shrink:0;opacity:.22;transition:opacity .3s;cursor:default}
.logo-grid-item:hover{opacity:.55}
.logo-grid-item img{height:44px;filter:brightness(0) invert(1)}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── REVIEWS ── */
#reviews{padding:96px 56px;background:#000000}
.reviews-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:60px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:1340px;margin:0 auto}
.review-card{background:#0c0c0c;padding:38px;position:relative;overflow:hidden;transition:background .3s}
.review-card:hover{background:#0f0f0f}
.review-card::before{
  content:'\201C';position:absolute;top:14px;right:22px;
  font-size:80px;font-family:'Space Grotesk',sans-serif;color:rgba(233,238,242,.04);line-height:1;
}
.review-stars{display:flex;gap:3px;margin-bottom:20px}
.star{color:#b0923a;font-size:12px}
.review-text{font-size:13px;font-weight:300;line-height:1.9;color:rgba(233,238,242,.45);margin-bottom:28px}
.review-author{display:flex;align-items:center;gap:12px}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(233,238,242,.07);color:rgba(233,238,242,.6);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;flex-shrink:0;
}
.author-name{font-size:11px;font-weight:600;color:#eef1f4;margin-bottom:1px}
.author-detail{font-size:9px;color:#5f6368;letter-spacing:.05em}

/* ── NEWSLETTER ── */
#newsletter{
  padding:120px 56px;background:#000000;text-align:center;
  position:relative;overflow:hidden;
}
/* Giant ghost logo behind (KillTec-style) */
.nl-ghost{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:90%;opacity:.09;pointer-events:none;
  filter:brightness(0) invert(1);
  animation:watermarkDrift 18s ease-in-out infinite alternate;
}
.nl-content{position:relative;z-index:1;max-width:520px;margin:0 auto}
.nl-hl{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(52px,6.5vw,96px);font-weight:700;letter-spacing:-.03em;line-height:.95;
  color:#eef1f4;margin-bottom:20px;
}
.nl-sub{font-size:13px;font-weight:300;color:rgba(233,238,242,.32);line-height:1.8;margin-bottom:48px}
.nl-form{display:flex;max-width:420px;margin:0 auto}
.nl-input{
  flex:1;background:rgba(233,238,242,.04);
  border:.5px solid rgba(233,238,242,.1);border-right:none;
  color:#eef1f4;padding:16px 20px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:300;
  outline:none;transition:border-color .2s;border-radius:1px 0 0 1px;
}
.nl-input::placeholder{color:rgba(233,238,242,.2)}
.nl-input:focus{border-color:rgba(233,238,242,.3)}
.nl-btn{
  background:#eef1f4;color:#000000;border:none;padding:16px 24px;
  font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;border-radius:0 1px 1px 0;transition:background .2s;white-space:nowrap;
}
.nl-btn:hover{background:#dfe4e8}
.nl-disc{font-size:9px;color:rgba(233,238,242,.16);margin-top:16px;letter-spacing:.05em}

/* ── FOOTER ── */
footer{background:#000000;border-top:.5px solid rgba(233,238,242,.07);padding:60px 56px 36px}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:56px;padding-bottom:40px;border-bottom:.5px solid rgba(233,238,242,.06)}
.footer-logo img{height:56px;filter:brightness(0) invert(1)}
.footer-tagline{font-size:9px;color:#5f6368;font-weight:300;letter-spacing:.1em;margin-top:10px}
.footer-links{display:flex;gap:64px}
.footer-col h4{font-size:8px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#4a4e54;margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:11px;font-weight:300;color:rgba(233,238,242,.32);text-decoration:none;transition:color .2s;letter-spacing:.02em}
.footer-col a:hover{color:#eef1f4}
.footer-bottom{display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-size:9px;color:rgba(233,238,242,.16);letter-spacing:.06em}
.footer-social{display:flex;gap:20px}
.social-link{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,238,242,.26);text-decoration:none;transition:color .2s}
.social-link:hover{color:#eef1f4}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.23,1,.32,1),transform .85s cubic-bezier(.23,1,.32,1)}
.reveal.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── ANIMATIONS ── */
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  nav,nav.scrolled{padding-left:28px;padding-right:28px}
  #hero{padding:0 28px 64px}
  .story-grid{grid-template-columns:1fr}
  .story-text{padding:52px 28px}
  .ls-block,.ls-block.rev{grid-template-columns:1fr;direction:ltr}
  .reviews-grid{grid-template-columns:1fr}
  .reviews-hdr{flex-direction:column;gap:18px}
  .footer-top{flex-direction:column;gap:40px}
  .footer-links{gap:32px}
  #products,#reviews,#stats,#newsletter,footer{padding-left:28px;padding-right:28px}
  /* section already provides side padding; drop the inner wrappers' own */
  .stats-hdr{padding-left:0;padding-right:0}
  .stats-body{padding-left:0;padding-right:0}
}
@media(max-width:620px){
  nav,nav.scrolled{padding-left:18px;padding-right:18px}
  .nav-links{display:none}
  .nav-logo img{height:76px}
  #hero{padding:0 18px 76px}
  .scroll-hint{display:none}
  /* stacked product cards: real gap + a bit less height so they don't read as one thin strip */
  .products-grid{grid-template-columns:1fr;gap:16px}
  .product-img{height:480px !important}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  /* tighter vertical rhythm between sections on phones */
  #products,#reviews{padding-top:64px;padding-bottom:64px}
  #newsletter{padding-top:88px;padding-bottom:88px}
  .brand-statement{padding:52px 0}
  .logo-grid{padding:40px 0}
  .products-hdr{margin-bottom:48px}
  #stats{padding:56px 18px}
  .stats-hdr{padding:0 0 36px}
  .stats-body{padding:0 0 8px}
  .stat-card{padding:28px 12px}
  .stat-num{font-size:clamp(24px,7vw,32px);margin-bottom:10px}
  .stat-label{font-size:9px;letter-spacing:.14em}
  /* loader/gate: shrink + scroll so the password box is never cut off */
  #loader{padding:32px 20px}
  #loader.ask{justify-content:flex-start;overflow-y:auto;padding-top:52px}
  .loader-logo-main,.loader-logo-ghost{width:140px}
  #loader.ask .loader-logo-wrap{margin-bottom:18px}
  .gate-cd .cd-num{font-size:24px}
  .gate-cd .cd-sep{font-size:18px}
  /* 16px input font stops iOS auto-zoom on focus */
  .gate-input{font-size:16px;width:220px;padding:10px 14px;letter-spacing:.18em}
  .nl-form{flex-direction:column}
  .nl-input{border-right:.5px solid rgba(233,238,242,.1);border-bottom:none;border-radius:1px 1px 0 0}
  .nl-btn{border-radius:0 0 1px 1px}
  .footer-links{flex-wrap:wrap;gap:24px}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .ls-copy{padding:40px 18px}
  #products,#reviews,#stats,#newsletter,footer{padding-left:18px;padding-right:18px}
  .brand-statement-inner span{font-size:64px}
}

/* ── PRODUCT IMAGE FLIP ── */
.prod-back-img,.prod-front-img{display:block}
.product-img:hover .prod-back-img{opacity:0;transform:scale(1.04)}
.product-img:hover .prod-front-img{opacity:1;transform:scale(1)}
.prod-flip-hint{
  position:absolute;top:14px;right:14px;
  font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,238,242,.35);
  background:rgba(0,0,0,.6);
  padding:5px 10px;border-radius:1px;
  border:.5px solid rgba(233,238,242,.1);
  transition:opacity .3s;
  pointer-events:none;
}
.product-img:hover .prod-flip-hint{opacity:0}
.product-img:hover .quick-add{transform:translateY(0);opacity:1}
/* hint copy: mouse devices say hover, touch devices say tap */
.prod-flip-hint::after{content:'Hover to flip'}
@media (hover:none){
  .prod-flip-hint::after{content:'Tap to flip'}
  /* no hover on touch: keep Add to Cart visible and let JS toggle the flip */
  .quick-add{transform:none;opacity:1}
  .hover-ov{background:rgba(0,0,0,.25)}
}
/* tap-to-flip state (mirrors the hover flip) */
.product-img.flipped .prod-back-img{opacity:0;transform:scale(1.04)}
.product-img.flipped .prod-front-img{opacity:1;transform:scale(1)}
.product-img.flipped .prod-flip-hint{opacity:0}


/* ── KILLTEC EXTRA VIBES ── */

/* Glitch on hero headline */
@keyframes glitchTxt {
  0%   { text-shadow: none; clip-path: none; }
  2%   { text-shadow: 3px 0 #eef1f4, -3px 0 rgba(233,238,242,.3); clip-path: inset(10% 0 85% 0); }
  4%   { clip-path: inset(50% 0 40% 0); text-shadow: -3px 0 #eef1f4; }
  6%   { clip-path: none; text-shadow: none; }
  100% { text-shadow: none; clip-path: none; }
}
/* glitchTxt is applied in the main h1.hero-hl rule above (merged with riseIn so
   the headline stays visible). Standalone override removed — it was hiding the headline. */

/* Horizontal scan sweep across hero */
.hero-scan {
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(233,238,242,.18),transparent);
  animation:scanSweep 4s ease-in-out infinite;
  pointer-events:none;z-index:3;
}
@keyframes scanSweep {
  0%   { top:-2px; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:.6; }
  100% { top:100%; opacity:0; }
}

/* Corner brackets on product cards (KillTec UI detail) */
.product-card::before,
.product-card::after {
  content:'';
  position:absolute;
  width:18px;height:18px;
  z-index:10;pointer-events:none;
  transition:width .3s,height .3s,opacity .3s;
  opacity:0;
}
.product-card::before {
  top:10px;left:10px;
  border-top:1.5px solid rgba(233,238,242,.7);
  border-left:1.5px solid rgba(233,238,242,.7);
}
.product-card::after {
  bottom:10px;right:10px;
  border-bottom:1.5px solid rgba(233,238,242,.7);
  border-right:1.5px solid rgba(233,238,242,.7);
}
.product-card:hover::before,
.product-card:hover::after {
  opacity:1;
  width:28px;height:28px;
}

/* Stat cards: glitch number on hover */
.stat-card:hover .stat-num {
  animation: glitchNum .15s steps(1) 2;
}
@keyframes glitchNum {
  0%  { transform:translate(0); }
  25% { transform:translate(-2px,1px); }
  50% { transform:translate(2px,-1px); }
  75% { transform:translate(-1px,2px); }
  100%{ transform:translate(0); }
}

/* Nav: active underline pulse */
.nav-links a::after {
  animation: none;
}

/* KillTec-style: flicker on logo in loader */
@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; }
  20%,24%,55% { opacity:.4; }
}
.loader-logo-main { animation: logoJitter .12s steps(1) infinite, flicker 8s linear infinite; }

/* Grain animation more frames */
@keyframes grainShift {
  0%  { background-position: 0 0 }
  10% { background-position: -40px 20px }
  20% { background-position: 15px -35px }
  30% { background-position: -25px 15px }
  40% { background-position: 35px -20px }
  50% { background-position: -15px 40px }
  60% { background-position: 28px 8px }
  70% { background-position: -35px -28px }
  80% { background-position: 12px 32px }
  90% { background-position: -18px -12px }
  100%{ background-position: 6px 0 }
}

/* White bleed lines on section borders */
.brand-statement {
  position:relative;
}
.brand-statement::before,
.brand-statement::after {
  content:'';
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,238,242,.35),transparent);
}
.brand-statement::before { top:0; }
.brand-statement::after  { bottom:0; }

/* Product modal overlay */
.prod-modal-overlay {
  position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,0);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  pointer-events:none;
  transition:background .35s ease;
}
.prod-modal-overlay.open {
  background:rgba(0,0,0,.92);
  pointer-events:all;
}
.prod-modal {
  background:#0c0c0c;
  border:.5px solid rgba(233,238,242,.12);
  max-width:900px;width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  opacity:0;transform:translateY(32px) scale(.97);
  transition:opacity .35s ease,transform .35s ease;
  position:relative;
  max-height:90vh;overflow:hidden;
}
.prod-modal-overlay.open .prod-modal {
  opacity:1;transform:translateY(0) scale(1);
}
.prod-modal-img {
  background:#101010;
  display:flex;align-items:center;justify-content:center;
  padding:32px;min-height:420px;position:relative;overflow:hidden;
}
.prod-modal-img img { width:100%;max-height:480px;object-fit:contain }
.prod-modal-body {
  padding:48px 40px;display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;
}
.prod-modal-close {
  position:absolute;top:18px;right:18px;
  background:none;border:none;color:rgba(233,238,242,.5);
  font-size:22px;cursor:pointer;line-height:1;z-index:10;
  transition:color .2s;font-family:'Inter',sans-serif;font-weight:300;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
}
.prod-modal-close:hover { color:#eef1f4; }
.prod-modal-label {
  font-size:8px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(233,238,242,.3);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.prod-modal-label::before { content:'';display:block;width:16px;height:.5px;background:rgba(233,238,242,.3); }
.prod-modal-name {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.02em;
  color:#eef1f4;margin-bottom:10px;line-height:1.1;
}
.prod-modal-tagline {
  font-size:14px;font-weight:300;font-style:italic;
  color:rgba(233,238,242,.5);margin-bottom:24px;
}
.prod-modal-divider { height:.5px;background:rgba(233,238,242,.08);margin-bottom:24px; }
.prod-modal-detail {
  font-size:12px;font-weight:300;color:rgba(233,238,242,.45);
  line-height:1.8;margin-bottom:6px;
}
.prod-modal-detail strong { color:rgba(233,238,242,.75);font-weight:500; }
.prod-modal-price {
  font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;
  color:#eef1f4;margin:24px 0 20px;
}
.prod-modal-btn {
  background:#eef1f4;color:#000000;border:none;
  padding:16px 32px;width:100%;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;border-radius:1px;transition:background .2s,letter-spacing .2s;
  margin-bottom:10px;
}
.prod-modal-btn:hover { background:#dfe4e8;letter-spacing:.28em; }
.prod-modal-sub {
  font-size:9px;color:rgba(233,238,242,.22);text-align:center;letter-spacing:.08em;
}
/* Corner brackets in modal */
.prod-modal::before,.prod-modal::after {
  content:'';position:absolute;width:24px;height:24px;pointer-events:none;
}
.prod-modal::before { top:0;left:0;border-top:1px solid rgba(233,238,242,.4);border-left:1px solid rgba(233,238,242,.4); }
.prod-modal::after  { bottom:0;right:0;border-bottom:1px solid rgba(233,238,242,.4);border-right:1px solid rgba(233,238,242,.4); }

@media(max-width:700px){
  .prod-modal{grid-template-columns:1fr}
  .prod-modal-img{min-height:280px}
  .prod-modal-body{padding:28px 24px}
  /* phones: sound toggle bottom-right so it never overlaps the CTA buttons */
  .hero-sound{left:auto;right:16px;bottom:16px}
}

/* ── PRODUCT PAGES ── */
/* compact nav: the pinned bar on product pages uses a smaller logo so it
   never overlaps the page content below it */
.nav-pp .nav-logo img{height:60px}
.pp-wrap{max-width:1200px;margin:0 auto;padding:150px 40px 80px}
.pp-back{display:inline-block;margin-bottom:28px;color:rgba(233,238,242,.45);text-decoration:none;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
.pp-back:hover{color:#eef1f4}
.pp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.pp-main{background:#0a0a0a;border:.5px solid rgba(233,238,242,.07);height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.pp-main img{width:100%;height:100%;object-fit:contain;padding:28px}
.pp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pp-thumb{background:#0a0a0a;border:.5px solid rgba(233,238,242,.08);aspect-ratio:1;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:0;transition:border-color .2s}
.pp-thumb img{width:100%;height:100%;object-fit:contain;padding:8px}
.pp-thumb:hover{border-color:rgba(233,238,242,.3)}
.pp-thumb.on{border-color:rgba(233,238,242,.5)}
.pp-thumb.ph{cursor:default}
.pp-thumb.ph:hover{border-color:rgba(233,238,242,.08)}
.pp-thumb.ph img{opacity:.1;filter:brightness(0) invert(1)}
.pp-thumb.ph span{position:absolute;font-size:7px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,238,242,.35)}
.pp-label{font-size:9px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:rgba(233,238,242,.4);margin-bottom:14px}
.pp-name{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1;color:#eef1f4;margin-bottom:12px}
.pp-tagline{font-size:12px;color:#76797e;letter-spacing:.06em;margin-bottom:18px;line-height:1.7}
.pp-price{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:600;color:#eef1f4;margin-bottom:30px}
.pp-sec{font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,238,242,.4);margin-bottom:12px}
.pp-scents{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pp-scent{background:transparent;border:.5px solid rgba(233,238,242,.18);color:rgba(233,238,242,.6);padding:10px 14px;font-family:'Inter',sans-serif;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:all .2s;display:inline-flex;align-items:center;gap:7px}
.pp-scent svg{width:13px;height:13px;flex-shrink:0}
/* scent icon colors: warm, muted, never neon */
.pp-scent[data-scent="first-million"] svg{color:#729c74}
.pp-scent[data-scent="no-witnesses"] svg{color:#e8ecef}
.pp-scent[data-scent="blue-hour"] svg{color:#7189ad}
.pp-scent[data-scent="redline"] svg{color:#b2574f}
/* selected buttons flip to a light background; the white icon needs to darken */
.pp-scent.on[data-scent="no-witnesses"] svg{color:#141414}
.pp-scent:hover{border-color:rgba(233,238,242,.45);color:#eef1f4}
.pp-scent.on{background:#eef1f4;color:#0a0a0a;border-color:#eef1f4}
.pp-notes{border:.5px solid rgba(233,238,242,.08);background:#0a0a0a;padding:22px 24px;margin-bottom:30px}
.pp-notes-name{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:#eef1f4;margin-bottom:4px}
.pp-notes-insp{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,238,242,.45);margin-bottom:8px}
.pp-notes-vibe{font-size:11px;color:#76797e;font-style:italic;margin-bottom:16px}
.pp-note-row{display:flex;justify-content:space-between;padding:9px 0;border-top:.5px solid rgba(233,238,242,.07);font-size:11px}
.pp-note-row span:first-child{color:rgba(233,238,242,.4);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:9px}
.pp-note-row span:last-child{color:#c4c9ce}
.pp-add{width:100%;background:#eef1f4;color:#0a0a0a;border:none;padding:17px;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:filter .2s}
.pp-add:hover{filter:brightness(1.04)}
.pp-ship{font-size:10px;color:#5f6368;text-align:center;margin-top:12px;letter-spacing:.04em}
.pp-details{margin-top:26px;border-top:.5px solid rgba(233,238,242,.08);padding-top:18px}
.pp-detail{font-size:11px;color:#76797e;line-height:2.1}
.pp-detail strong{color:#c4c9ce;font-weight:600}
.pp-reviews{margin-top:90px}
@media(max-width:900px){
  .pp-wrap{padding:130px 24px 60px}
  .pp-grid{grid-template-columns:1fr;gap:34px}
  .pp-main{height:420px}
  .pp-reviews{margin-top:64px}
}
@media(max-width:620px){
  .nav-pp .nav-logo img{height:46px}
  .pp-wrap{padding:104px 18px 48px}
  .pp-main{height:360px}
  .pp-name{font-size:30px}
  .pp-thumbs{gap:8px}
  .pp-scents{gap:6px}
  .pp-scent{padding:9px 11px;font-size:8px;gap:6px}
  .pp-scent svg{width:12px;height:12px}
  .pp-reviews{margin-top:52px}
}