/* Kevin Pak · FBA Launch Club — verbatim build from Figma */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #0B0C0E;
  --black: #040405;
  --amber: #FFB04A;
  --amazon: #FF9900;
  --cta-text: #1A1206;
  --gray-1: #A6A9B0;
  --gray-2: #9A9CA3;
  --gray-3: #75787F;
  --warm-75: rgba(255, 233, 223, 0.75);
  --warm-50: rgba(255, 233, 223, 0.5);
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #000;
  color: #F6F7F8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
.mono { font-family: 'Geist Mono', monospace; }

/* ============ LIGHTBAR (capture) ============ */
.lightbar {
  position: relative;
  height: 40px;
  background: url('assets/lightbar.png') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbar span {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #1A1206;
  white-space: nowrap;
}

/* ============ CAPTURE HERO BAND ============ */
.band {
  position: relative;
  height: 905px;
  background: url('assets/hero-1920.jpg') center / cover no-repeat;
  overflow: hidden;
}
@media (min-width: 1600px) {
  .band { background-image: url('assets/hero-2880.jpg'); }
}
.band::before { /* top fade */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 130px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}
.band .fade-bottom {
  position: absolute; left: 0; right: 0; top: 360px; height: 545px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.58) 42%, rgba(0,0,0,0.97) 100%);
}
.band .scrim {
  position: absolute; left: 0; right: 0; top: 422px; height: 483px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
}
.band .copy {
  position: absolute; left: 0; right: 0; top: 470px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 20px;
}
.band h1 {
  font-weight: 700;
  font-size: 45px;
  line-height: 105%;
  letter-spacing: -0.01em;
  text-wrap: balance;
  background: linear-gradient(102deg, #FFFFFF 10%, #E09230 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.band h1 .money {
  font-weight: 800;
  background: none; -webkit-text-fill-color: #FF9D00; color: #FF9D00;
}
.band .sub {
  margin-top: 22px;
  max-width: 700px;
  font-size: 18px;
  line-height: 150%;
  color: #FFE9DF;
}
.band .sub .med { font-weight: 500; }
.band .sub b { font-weight: 700; color: #FFFFFF; }
.btn-amber {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px;
  padding: 17px 34px;
  border-radius: 13px;
  background: linear-gradient(180deg, #FFAD42 0%, #F49321 100%);
  box-shadow: 0 10px 26px rgba(255, 154, 31, 0.38);
  color: var(--cta-text);
  font-weight: 700; font-size: 17px;
  border: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn-amber:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ============ COUNTDOWN ============ */
.countdown-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 46px 20px 60px;
  gap: 16px;
}
.countdown-label {
  font-weight: 600; font-size: 16px; letter-spacing: 0.05em; color: var(--gray-3);
}
/* countdown — literal reference tiles: transparent 127x98 cells, hairline
   white-10% borders, Geist Medium 32 numbers at 70% white, Geist Mono 14
   uppercase labels at 20% tracking, 35% white */
.tiles { display: flex; gap: 0; }
.tile {
  width: 127px; height: 98px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
}
.tile + .tile { border-left: 0; }
.tile .num {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 500; font-size: 32px; line-height: 125%;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
}
.tile .unit {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 14px; line-height: 125%;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ============ WITHOUT TICKER ============ */
.ticker {
  height: 46px;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex; align-items: center;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex; align-items: center; gap: 30px;
  animation: tickermove 36s linear infinite;
  will-change: transform;
  padding-left: 30px;
}
.ticker-track span {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  color: #C98F4A;
}
.ticker-track .sep { color: rgba(255, 154, 31, 0.55); }
@keyframes tickermove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ BOXES TRANSITION ============ */
.boxes {
  position: relative; height: 350px;
  display: flex; justify-content: center; align-items: flex-start;
}
.boxes img { position: relative; z-index: 1; width: 835px; margin-top: 72px; height: auto; }
.boxes::after {
  content: ''; position: absolute; z-index: 0;
  left: 50%; transform: translateX(-50%);
  top: 312px; width: 760px; height: 64px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
  filter: blur(20px);
}

/* ============ WINS / CAROUSELS ============ */
.wins { padding: 36px 0 70px; overflow: hidden; }
.wins-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 20px; }
.wins-eyebrow { font-weight: 700; font-size: 13px; letter-spacing: 0.25em; color: var(--amber); }
.wins h2 {
  font-weight: 700; font-size: 42px; line-height: 110%; letter-spacing: -0.02em;
  background: linear-gradient(102deg, #FFFFFF 15%, #E09230 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.carousel {
  margin-top: 26px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel + .carousel { margin-top: 22px; }
.car-track { display: inline-flex; gap: 18px; }
.car-track img {
  height: 430px; width: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============ FOOTER ============ */
footer {
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 56px 90px 52px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.f-brand { display: flex; align-items: center; gap: 9px; }
.f-brand svg { width: 15px; height: 15px; }
.f-brand span { font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; color: #D9DAE0; }
footer p {
  font-size: 10.5px; line-height: 170%; text-align: center;
  color: #6D6F76; max-width: 1260px;
}

/* ============ ECLIPSE FOLD (SLO + TY) ============ */
.page-dark { background: var(--black); }
.fold {
  position: relative;
  width: 100%;
  /* clip horizontal spill (mobile 1440px eclipse plate) but let the button
     glow bleed DOWN into the black section below, so there is no hard
     horizontal line where the glow would otherwise be sliced flat */
  overflow-x: clip;
  overflow-y: visible;
  background: #040405;
}
.fold-bg {
  position: absolute; inset: 0;
  background: url('assets/eclipse-bg.png') top center / 100% auto no-repeat;
}
.fold-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 100px 20px 60px;
}
/* the eclipse art scales with viewport width (100% auto), so the header
   offsets must scale with it or the brandmark drifts into the glow */
@media (min-width: 901px) {
  .fold-inner { padding-top: 6.944vw; }
  .loadbar { margin-top: 1.528vw; }
  .fold h1 { margin-top: 3.194vw; }
}
.brandmark { display: flex; align-items: center; gap: 8px; }
.brandmark svg { width: 13px; height: 13px; }
.brandmark span { font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: #E0E2E7; }
/* load bar — literal Figma stack (node 45:203): square 542x51 frame,
   1px #212121 stroke, whole bar in linear-dodge; FIVE identical tick
   vectors 454x41 at (5,5) with one gradient transparent->FFB04A across
   the strip (ticks 4px wide, 10px pitch), one sharp + four blurred
   linear-dodge copies stacking to white; label = Space Mono 12 white 90%
   glowing via blurred copies. Resting state = full comet. */
.loadbar {
  --lk: 1;
  position: relative;
  margin-top: 22px;
  width: calc(542px * var(--lk));
  height: calc(51px * var(--lk));
  border: 1px solid #212121;
  border-radius: 0;
  mix-blend-mode: plus-lighter;
}
@media (max-width: 680px) { .loadbar { --lk: 0.75; } }
@media (max-width: 500px) { .loadbar { --lk: 0.6; } }
@media (max-width: 380px) { .loadbar { --lk: 0.55; } }
@media (max-width: 340px) { .loadbar { --lk: 0.5; } }
.lb-l {
  position: absolute;
  left: calc(5px * var(--lk)); top: calc(5px * var(--lk));
  width: calc(454px * var(--lk)); height: calc(41px * var(--lk));
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #FFB04A 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4px * var(--lk)), transparent calc(4px * var(--lk)) calc(10px * var(--lk)));
          mask: repeating-linear-gradient(90deg, #000 0 calc(4px * var(--lk)), transparent calc(4px * var(--lk)) calc(10px * var(--lk)));
  pointer-events: none;
}
.lb-l.l1, .lb-l.l2, .lb-l.l3, .lb-l.l4 { filter: blur(1px); mix-blend-mode: plus-lighter; }
.lb-label {
  position: absolute;
  left: calc(488px * var(--lk)); top: calc(17px * var(--lk));
  font-family: 'Space Mono', monospace;
  font-size: calc(12px * var(--lk)); line-height: calc(18px * var(--lk));
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 30px rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}
.fold h1 {
  margin-top: 46px;
  font-weight: 700; font-size: 34px; line-height: 128%; letter-spacing: -0.01em;
  text-align: center; color: #F8F9FA;
  text-wrap: balance;
}
.fold h1 .accent { color: #FF9A29; }
.fold .fold-sub {
  margin-top: 20px;
  max-width: 620px;
  font-size: 14.5px; line-height: 165%; text-align: center;
  color: #9EA1A8;
}
.fold .alert {
  margin-top: 26px;
  font-family: 'Space Mono', monospace;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  background: linear-gradient(90deg, #FF9900 0%, #FFB04A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-align: center;
}
.vsl-glass {
  margin-top: 26px;
  width: min(1000px, 94vw);
  padding: 16px;
  border-radius: 12px;
  background: rgba(14, 14, 18, 0.35);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 2.45px 2.45px rgba(0,0,0,0.25), inset 0 2.45px 35px rgba(255,255,255,0.06), inset 0 2.45px 12px rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
}
.vsl-glass .vsl-inner {
  border-radius: 8px;
  overflow: hidden;
  background: #08080A;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 14px 0;
}
.vsl-glass.vsl-slo { width: min(560px, 94vw); }
/* glowing white capsule CTA — literal recreation of the Figma layer stack
   (node 45:237): ring = white 10% fill + 1px white 20% stroke; three amber
   gradient capsules blurred 23.2 / 52.4 / 6.1 (two in linear-dodge); sharp
   white pill; text black 81% at 79% opacity; price zone tinted by blurred
   color-blend ellipses. Fixed 616x129 canvas, scaled whole via zoom. */
.cap-cta {
  --k: 1;
  position: relative;
  display: block;
  margin: calc(34px * var(--k)) 0 0;
  width: calc(616px * var(--k));
  height: calc(129px * var(--k));
  border-radius: 999px;
  transition: transform .18s ease;
}
/* glow layers: NO blend modes and NO isolation anywhere on animated elements;
   iPhone WebKit mis-composites animated blended layers (black box, clipped
   yellow box, grey wash - three artifacts, three attempts). The additive
   white-hot ramp of the Figma linear-dodge stack is baked into the gradient
   stops instead, painted source-over, which WebKit renders faithfully. */
.cap-fx {
  position: absolute;
  inset: calc(-100px * var(--k));
  pointer-events: none;
}
.cap-cta:hover { transform: scale(1.02); }
@media (max-width: 680px) { .cap-cta { --k: 0.75; } }
@media (max-width: 500px) { .cap-cta { --k: 0.6063; } }
@media (max-width: 380px) { .cap-cta { --k: 0.55; } }
@media (max-width: 340px) { .cap-cta { --k: 0.5; } }
.cap-cta::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}
/* the glow: the Figma resting state, painted as STATIC baked gradients
   (the additive white-hot ramp in the stops, source-over, no blends).
   The ONLY animation is an opacity breathe on the bloom layer: opacity
   animations composite a once-rasterized texture and are the one class
   of infinite motion iPhone WebKit never artifacts on. Every moving-light
   variant (animated gradient angle, offset-path blob) rectangled or
   read wrong on iOS and is permanently retired. */
.cap-g {
  position: absolute;
  left: calc(108px * var(--k)); top: calc(107.4px * var(--k));
  width: calc(600px * var(--k)); height: calc(115px * var(--k));
  border-radius: calc(72px * var(--k));
  background: linear-gradient(90deg, rgba(255,176,74,0) 49.18%, #FFB04A 76%, #FFD68C 90%, #FFEDC4 96%, #FFF8E8 99.37%);
  pointer-events: none;
}
.cap-g.g1 { filter: blur(calc(11.6px * var(--k))); }
.cap-g.g2 { filter: blur(calc(26.2px * var(--k))); opacity: 0.9; }
.cap-g.g3 { filter: blur(calc(3.05px * var(--k))); }
/* the button's life: a sheen sweeping INSIDE the pill. Transform-only,
   unblurred, clipped by the pill's overflow: the same animation class as
   the ticker and carousels, which render clean on iPhone. The blurred glow
   layers above stay 100% static: on iOS, ANY animation on a blurred
   element (angle, path, even opacity) paints its layer bounds as a
   rectangle; every clean build on the client's phone had static blur. */
.cap-sheen {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(150px * var(--k));
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,214,140,0.30) 42%, rgba(255,255,255,0.55) 50%, rgba(255,214,140,0.30) 58%, rgba(255,255,255,0) 100%);
  transform: translateX(calc(-200px * var(--k))) skewX(-14deg);
  animation: capsheen 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes capsheen {
  0% { transform: translateX(calc(-200px * var(--k))) skewX(-14deg); }
  60%, 100% { transform: translateX(calc(680px * var(--k))) skewX(-14deg); }
}
.cap-pill {
  position: absolute;
  left: calc(8px * var(--k)); top: calc(7.4px * var(--k));
  width: calc(600px * var(--k)); height: calc(115px * var(--k));
  border-radius: calc(72px * var(--k));
  background: #FFFFFF;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(8px * var(--k));
}
.cap-title {
  display: flex; align-items: center;
  gap: calc(16px * var(--k));
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  font-size: calc(24px * var(--k));
  line-height: calc(42px * var(--k));
  white-space: nowrap;
  color: rgba(0,0,0,0.81);
  opacity: 0.79;
  text-shadow: 0 calc(4px * var(--k)) calc(11.8px * var(--k)) rgba(0,0,0,0.25);
}
.cap-ic {
  flex: none;
  width: calc(70px * var(--k)); height: calc(70px * var(--k));
  margin: calc(-21px * var(--k));
}
.cap-sub {
  font-family: 'Public Sans', sans-serif;
  font-weight: 400;
  font-size: calc(16px * var(--k));
  line-height: calc(26px * var(--k));
  text-align: center;
  color: rgba(74,60,41,0.85);
  text-decoration: underline;
  white-space: nowrap;
}
.cap-sub b { font-weight: 400; color: #D4851A; }
.cap-sub-plain { text-decoration: none; }
.cap-tint {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFAC2 0%, #F46521 100%);
  filter: blur(calc(48.2px * var(--k)));
  mix-blend-mode: color;
  pointer-events: none;
}
.cap-tint.ta { left: calc(403px * var(--k)); top: calc(4px * var(--k)); width: calc(90px * var(--k)); height: calc(69px * var(--k)); }
.cap-tint.tb { left: calc(393px * var(--k)); top: calc(-5.6px * var(--k)); width: calc(110px * var(--k)); height: calc(84px * var(--k)); }
.cap-hot {
  position: absolute;
  left: calc(416px * var(--k)); top: calc(4px * var(--k));
  width: calc(77px * var(--k)); height: calc(69px * var(--k));
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF 0%, #FFEBB5 100%);
  filter: blur(calc(48.2px * var(--k)));
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
/* capture variant: tint follows the text end */
.cap-one .cap-tint.ta { left: calc(443px * var(--k)); }
.cap-one .cap-tint.tb { left: calc(433px * var(--k)); }
.cap-one .cap-hot { left: calc(456px * var(--k)); }
.decline {
  margin-top: 24px;
  display: inline-block;
  padding: 19px 38px;
  border-radius: 999px;
  background: #0A0A0B;
  border: 2px solid #2A2B2E;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.45);
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #83868C;
  transition: border-color .15s ease, color .15s ease;
}
.decline:hover { border-color: #3A3B3F; color: #A2A5AC; }
.pill-mono {
  margin-top: 22px;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: #7E828A;
}
.btn-ticket {
  margin-top: 36px;
  display: inline-block;
  padding: 22px 48px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FFA640 0%, #F28B14 100%);
  box-shadow: 0 0 36px rgba(255, 153, 0, 0.5);
  font-family: 'Space Mono', monospace;
  font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2A1A05;
  transition: transform .15s ease, filter .15s ease;
}
.btn-ticket:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ============ OPT-IN MODAL (capture) ============ */
.optin {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.optin[hidden] { display: none; }
.optin-backdrop { position: absolute; inset: 0; background: rgba(4,4,5,0.88); }
.optin-card {
  position: relative;
  width: 520px; max-width: 100%;
  max-height: 94vh; overflow-y: auto;
  padding: 40px 40px 36px;
  border-radius: 12px;
  background: rgba(10,10,12,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  scrollbar-width: none;
}
.optin-card::-webkit-scrollbar { display: none; }
.optin-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #FFB04A; text-align: center;
}
.optin-title {
  font-weight: 700; font-size: 26px; text-align: center;
  background: linear-gradient(92deg, #FFFFFF 0%, #FFCF4A 50%, #F46521 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.optin-boxes { width: 210px; height: auto; }
.optin-sub { font-size: 14.5px; line-height: 150%; color: #9A9CA3; text-align: center; }
.optin-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.of-field { display: flex; flex-direction: column; gap: 8px; }
.of-label {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.of-input {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: #040405;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
}
.of-input svg { flex: none; width: 18px; height: 18px; }
.of-input input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 17px 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px; color: #F6F7F8;
}
.of-input input::placeholder { color: rgba(255,255,255,0.38); }
.of-input:focus-within { border-color: rgba(255,176,74,0.5); }
/* typed values carry the headline's gradient: white heating into amber
   as the entry runs. Guarded so non-supporting browsers keep white text. */
@supports (-webkit-background-clip: text) {
  .of-input input {
    background-image: linear-gradient(92deg, #FFFFFF 0%, #FFCF4A 50%, #F46521 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    caret-color: #FFB04A;
  }
  .of-input input::placeholder {
    -webkit-text-fill-color: rgba(255,255,255,0.38);
  }
  .of-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #040405 inset;
    -webkit-text-fill-color: #F6F7F8;
  }
}
.of-consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; position: relative; }
.of-consent input { position: absolute; opacity: 0; pointer-events: none; }
.of-check {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  background: #040405; border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
}
.of-check svg { width: 14px; height: 14px; opacity: 0; }
.of-consent input:checked ~ .of-check { background: #FFB04A; border-color: #FFB04A; }
.of-consent input:checked ~ .of-check svg { opacity: 1; }
.of-ctext { font-size: 12.5px; line-height: 155%; color: #9A9CA3; }
.optin-form .cap-cta {
  --k: 0.714;
  margin: 4px auto 0;
  border: 0; background: none; padding: 0; cursor: pointer;
  display: block;
}
.optin-micro {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); text-align: center;
}
@media (max-width: 560px) {
  .optin-card { padding: 28px 20px 26px; gap: 16px; }
  .optin-title { font-size: 22px; }
  .optin-boxes { width: 170px; }
  .optin-form .cap-cta { --k: 0.5; }
}
@media (max-width: 400px) { .optin-form .cap-cta { --k: 0.45; } }
@media (max-width: 340px) { .optin-form .cap-cta { --k: 0.4; } }

/* ============ GIFT QUALIFICATION FORM (thank-you) ============ */
.giftform { padding: 8px 0 4px; }
.gf-card {
  width: 100%; max-width: 540px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  padding: 40px 36px 36px;
  background: #08080A;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}
.gf-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.gf-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #FFB04A;
}
.gf-title {
  font-weight: 700; font-size: 26px; text-align: center;
  background: linear-gradient(92deg, #FFFFFF 0%, #FFCF4A 50%, #F46521 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gf-subtext { font-size: 14.5px; line-height: 150%; color: #9A9CA3; text-align: center; max-width: 440px; }
.gf-progress { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gf-gift { width: 26px; height: 26px; color: #7A6238; transition: color .4s ease; }
.gf-steplabel {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,176,74,0.85);
}
.gf-bar { --lk: 0.62; margin: 0; max-width: 100%; }
.gf-steps, .gf-contact { width: 100%; }
.gf-step { display: none; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.gf-step.gf-active, .gf-contact.gf-active { display: flex; }
.gf-q {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 150%;
  color: rgba(255,255,255,0.5); text-align: center; max-width: 380px;
}
.gf-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; }
.gf-opt {
  width: 100%; padding: 14px 18px;
  background: #040405; border: 1px solid rgba(255,255,255,0.1); border-radius: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 500; font-size: 14px; color: rgba(230,231,235,0.92);
  text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.gf-opt:hover { border-color: rgba(255,176,74,0.45); }
.gf-opt.gf-sel { background: rgba(255,176,74,0.12); border-color: #FFB04A; color: #FFB04A; }
.gf-contact .gf-q { margin-bottom: 2px; }
.gf-contact .of-field { width: 100%; max-width: 380px; }
.gf-send { --k: 0.66; margin-top: 6px; border: 0; background: none; padding: 0; cursor: pointer; }
.gf-err { font-size: 12.5px; color: #FF8A6B; text-align: center; }
/* success */
.gf-success { position: relative; display: none; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 30px 0 14px; text-align: center; }
.gf-success.gf-active { display: flex; }
.gf-warmtop {
  position: absolute; left: 50%; top: -36px; transform: translateX(-50%);
  width: 420px; max-width: 100%; height: 150px;
  background: linear-gradient(180deg, rgba(255,153,20,0.12) 0%, rgba(255,153,20,0) 100%);
  pointer-events: none;
}
.gf-gift-solid { position: relative; width: 30px; height: 30px; }
.gf-sent-eyebrow {
  position: relative;
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #FFB04A;
}
.gf-sent-title {
  position: relative; font-weight: 700; font-size: 26px;
  background: linear-gradient(92deg, #FFFFFF 0%, #FFCF4A 50%, #F46521 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gf-sent-sub { position: relative; font-size: 14.5px; line-height: 155%; color: #9EA1A8; max-width: 360px; }
.gf-spam {
  position: relative; margin-top: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
}
@media (max-width: 560px) {
  .gf-card { padding: 30px 20px 28px; gap: 18px; }
  .gf-title, .gf-sent-title { font-size: 22px; }
  .gf-bar { --lk: 0.5; }
}

/* ============ PRE-LOADERS ============ */
.ploader {
  position: fixed; inset: 0; z-index: 80;
  background: #040405;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.ploader.on { opacity: 1; pointer-events: auto; }
.pl-brand { display: flex; align-items: center; gap: 8px; }
.pl-brand svg { width: 13px; height: 13px; }
.pl-brand span {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em;
  color: #E0E2E7;
}
.ploader .loadbar { margin: 0; }
.pl-status {
  font-family: 'Geist Mono', monospace;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  min-height: 18px;
}
.pl-flash {
  position: absolute; inset: 0;
  background: #FFF4DC; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease-in;
}
.pl-flash.on { opacity: 0.1; transition: opacity 0.25s ease-out; }

/* ============ SLO VALUE STACK ============ */
.stack {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 54px 20px 30px;
}
.vrow {
  width: min(1000px, 94vw);
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 26px 40px;
  border-radius: 14px;
  background: linear-gradient(90deg, #080809 0%, #040405 100%);
  border: 1px solid rgba(255,255,255,0.07);
}
.vrow.rev { flex-direction: row-reverse; }
.vrow .vcopy { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.vrow .vtitle { font-weight: 600; font-size: 21px; color: #F6F7F8; }
.vrow .vdesc { font-size: 13.5px; line-height: 160%; color: #9AA0AB; }
.vrow .vprice { font-weight: 700; font-size: 24px; color: var(--amber); }
.visual { position: relative; width: 250px; height: 196px; flex-shrink: 0; }
.visual::before {
  content: ''; position: absolute; left: -15px; top: 30px; width: 280px; height: 150px;
  background: radial-gradient(ellipse at center, rgba(255,153,0,0.4) 0%, rgba(255,153,0,0) 70%);
  filter: blur(30px);
}
.visual img {
  position: absolute; width: 136px; top: 10px; left: 57px;
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.55);
}
.visual.tilt-r img { transform: rotate(4deg); }
.visual.tilt-l img { transform: rotate(-4deg); }
@media (hover: hover) {
  .vrow .visual { transition: transform .25s ease; }
  .vrow .visual:hover { transform: translateY(-9px); }
}
.visual.fan { width: 300px; height: 200px; }
.visual.fan img { width: 120px; top: 24px; }
.visual.fan img:nth-child(1) { left: 10px; transform: rotate(-8deg); }
.visual.fan img:nth-child(2) { left: 90px; top: 10px; transform: none; z-index: 1; }
.visual.fan img:nth-child(3) { left: 170px; transform: rotate(8deg); }
.visual.tools { width: 280px; }
.visual.tools img { width: 118px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; }
.visual.tools img:nth-child(1) { left: 10px; top: 20px; transform: rotate(-6deg); }
.visual.tools img:nth-child(2) { left: 80px; top: 10px; transform: none; z-index: 1; }
.visual.tools img:nth-child(3) { left: 150px; top: 20px; transform: rotate(6deg); }
.vrow.total {
  padding: 30px 48px 30px 40px;
  background: linear-gradient(90deg, #0B0906 0%, #040405 100%);
  border: 1px solid rgba(255,153,0,0.3);
  box-shadow: 0 20px 60px rgba(255,153,0,0.12);
}
.totals { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.totals .strike { font-weight: 600; font-size: 18px; color: #8A8F99; text-decoration: line-through; }
.totals .now { font-weight: 700; font-size: 36px; letter-spacing: -0.01em; color: var(--amber); }
.totals .btn-amber { margin-top: 2px; font-size: 15px; padding: 14px 28px; border-radius: 11px; }

/* ============ TY SECTIONS ============ */
.ty-below {
  display: flex; flex-direction: column; align-items: center; gap: 56px;
  padding: 30px 20px 90px;
}
.steps { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.steps h2 { font-weight: 700; font-size: 30px; letter-spacing: -0.01em; }
.step-cards { display: flex; gap: 20px; align-items: stretch; }
.step {
  width: 273px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px;
  background: #0A0A0C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
}
.step .n { font-weight: 700; font-size: 24px; color: var(--amber); }
.step .t { font-weight: 600; font-size: 18px; }
.step .d { font-size: 14.5px; line-height: 160%; color: var(--gray-2); }
.story { width: min(860px, 94vw); display: flex; flex-direction: column; gap: 18px; }
.story .story-img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; }
.story h3 { font-family: 'Geist', 'Plus Jakarta Sans', sans-serif; font-weight: 400; font-size: 24px; color: var(--warm-75); }
.story p { font-family: 'Geist', 'Plus Jakarta Sans', sans-serif; font-size: 15.5px; line-height: 172%; color: var(--warm-50); }
.ytwall { width: min(860px, 94vw); display: flex; flex-direction: column; gap: 20px; }
.ytwall h3 { font-family: 'Geist', 'Plus Jakarta Sans', sans-serif; font-weight: 400; font-size: 24px; color: var(--warm-75); }
.yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
.yt-card { display: flex; flex-direction: column; gap: 10px; }
.yt-thumb { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.yt-card:hover .yt-thumb img { transform: scale(1.04); }
.yt-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 30px; border-radius: 8px;
  background: rgba(230, 13, 13, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.yt-badge svg { width: 12px; height: 12px; }
.yt-title { font-weight: 600; font-size: 12.5px; line-height: 145%; color: rgba(255,255,255,0.82); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .lightbar {
    background:
      radial-gradient(circle, rgba(255,255,255,0.18) 0.8px, transparent 1px),
      linear-gradient(90deg, #FFA766 0%, #FF8006 10%, #FF930D 20%, #FFA220 30%, #FFB338 40%, #FFC04E 50%, #FFCF67 60%, #FFDA8C 70%, #FFE6B2 80%, #FFF3DA 90%, #FFFEFE 100%);
    background-size: 6px 6px, 100% 100%;
  }
  .band { height: 660px; }
  .band .copy { top: 320px; }
  .band .scrim { top: 300px; height: 400px; }
  .band .fade-bottom { top: 250px; }
  .band h1 { font-size: 32px; }
  .band .sub { font-size: 15px; max-width: 560px; }
  .wins h2 { font-size: 30px; }
  .car-track img { height: 300px; }
  .vrow, .vrow.rev { flex-direction: column; align-items: center; text-align: center; padding: 26px 22px; }
  .vrow .vcopy { align-items: center; }
  .totals { align-items: center; }
  .step-cards { flex-direction: column; align-items: center; }
  .step { width: min(420px, 94vw); }
  .yt-grid { grid-template-columns: repeat(2, 1fr); }
  footer { padding: 44px 24px 40px; }
  .fold-bg { background-size: 1440px auto; background-position: top center; }
}
@media (max-width: 560px) {
  .lightbar span { font-size: 8.5px; letter-spacing: 0.05em; }
  .band { height: 590px; }
  .countdown-wrap { padding: 28px 20px 42px; margin-top: clamp(-56px, (390px - 100vw) * 0.52, 0px); }
  .band .copy { top: 250px; padding: 0 14px; }
  .band .fade-bottom { top: 170px; }
  .band .scrim { top: 200px; height: 420px; }
  .band h1 { font-size: 25px; }
  .band .sub { font-size: 13.5px; margin-top: 16px; }
  .btn-amber { font-size: 15px; padding: 15px 26px; }
  .countdown-label { display: none; }
  .tile { width: calc((100vw - 40px) / 4); max-width: 127px; height: auto; aspect-ratio: 127 / 98; gap: 3px; }
  .tile .num { font-size: min(32px, (100vw - 40px) * 0.0635); }
  .tile .unit { font-size: min(14px, (100vw - 40px) * 0.0276); }
  .boxes { height: 190px; }
  .boxes img { width: 92vw; margin-top: 40px; }
  .boxes::after { top: 150px; width: 80vw; }
  .wins-eyebrow { font-size: 10.5px; }
  .wins h2 { font-size: 24px; }
  .car-track img { height: 235px; border-radius: 10px; }
  .car-track { gap: 10px; }
  .fold h1 { font-size: 23px; }
  .fold .fold-sub { font-size: 13px; }
  .fold .alert { font-size: 10px; letter-spacing: 0.16em; }
  .br-d { display: none; }
  .cap-cta { margin-top: 26px; }
  .decline { font-size: 10.5px; padding: 14px 22px; letter-spacing: 0.06em; }
  .btn-ticket { padding: 18px 30px; font-size: 11.5px; }
  .steps h2 { font-size: 24px; }
  .story .story-img { height: 200px; }
  .story h3, .ytwall h3 { font-size: 20px; }
  .story p { font-size: 14px; }
  .yt-grid { grid-template-columns: 1fr; }
  .visual, .visual.fan, .visual.tools { transform: scale(0.9); }
  footer p { font-size: 9px; }
}