/* ─── Konst marketing site — custom styles ─────────────────────── */

:root {
  --accent: #d6b694;
  --accent-light: #E6CDB0;
  --accent-dark: #8A6D4A;
  --accent-rgb: 214, 182, 148;
}

/* ─── image protection (best-effort) ──────────────────────────────
   None of this stops a determined user — DevTools, screenshots, and
   curl always win. But it kills the "right-click → save" / "drag to
   desktop" / "long-press save" paths, which catches 95% of casual
   reuse. Hotlink protection lives in netlify.toml. */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none; /* re-enabled per-element where needed */
}
/* Only re-enable interactivity on UI imagery (none today, but future-proof). */
img.is-interactive { pointer-events: auto; }

html { scroll-behavior: smooth; }

body {
  font-feature-settings: "ss01", "ss02", "cv11";
  letter-spacing: -0.011em;
  /* smooth global transitions when accent changes */
  transition: --accent .6s ease;
}

/* Decorative glows in some sections (.phone-glow, .hero-glow-*) extend
   off-canvas by design. Clip them at section edges so they don't widen
   the page on mobile and shift cards off-center. */
section { overflow-x: clip; }

/* Display-weight headlines — pure sans, but heavy weight + tight tracking
   so they still have presence without leaning on a serif. Mirrors how
   the app's largest text reads (system semibold, tight). */
.font-display {
  font-weight: 700;
  letter-spacing: -0.025em;
}
h1.font-display, h2.font-display { letter-spacing: -0.035em; font-weight: 700; }
h3.font-display { font-weight: 600; letter-spacing: -0.02em; }
.font-display .italic {
  font-style: normal;            /* drop the italic — it was leaning on the serif's italic shape */
  color: var(--accent-light);    /* differentiate the second sentence with color instead */
  font-weight: 600;
}

@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #d6b694;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ─── grain overlay ─── */
.grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* ─── logo mark — uses the real app icon ─── */
.logo-mark, .logo-icon {
  width: 32px; height: 32px;
  display: inline-block;
  border-radius: 9px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 8px 20px -8px rgba(var(--accent-rgb), 0.6);
}
.logo-icon {
  object-fit: cover;
  background: #000;
  pointer-events: none;
}
/* legacy CSS K — kept for footer where image isn't loaded */
.logo-mark { background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark)); }
.logo-mark::after {
  content: "K";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: system-ui, -apple-system, 'Inter', sans-serif;
  font-weight: 800; font-size: 18px;
  color: rgba(0,0,0,0.82);
  letter-spacing: -0.04em;
}

/* ─── typography helpers ─── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent);
}
.eyebrow-gold { color: rgba(247,218,114,0.8); }
.eyebrow-gold::before { background: #E8B923; }

/* ─── glass card ─── */
.glass-card {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 4px 24px -2px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  transition: border-color .3s ease, transform .4s ease;
}
.glass-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 0% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%);
  pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.glass-card:hover { border-color: rgba(var(--accent-rgb), 0.30); }
.glass-card:hover::before { opacity: 1; }

/* ─── pill-icon (small icon container) ─── */
.pill-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.pill-icon svg { width: 22px; height: 22px; }

/* ─── checkmark dot ─── */
.check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  position: relative;
}
.check::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--accent-light);
  border-bottom: 2px solid var(--accent-light);
  transform: rotate(45deg);
}

/* ─── email input — explicit placeholder styling for cross-browser ─── */
.email-input::placeholder { color: rgba(255,255,255,0.45); opacity: 1; }
.email-input::-webkit-input-placeholder { color: rgba(255,255,255,0.45); }
.email-input::-moz-placeholder { color: rgba(255,255,255,0.45); opacity: 1; }
.email-input:-ms-input-placeholder { color: rgba(255,255,255,0.45); }
/* prevent autofill yellow on Chrome/Safari */
.email-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,0.05) inset;
  caret-color: #fff;
}

/* ─── chip ─── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 13px;
}

/* ─── CTA button ─── */
.cta-btn {
  background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark));
  color: #1a0e02;
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .25s ease;
  box-shadow:
    0 8px 24px -8px rgba(var(--accent-rgb), 0.5),
    inset 0 1px 0 rgba(255,255,255,0.40);
  font-weight: 600;
}
.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px -10px rgba(var(--accent-rgb), 0.65),
    inset 0 1px 0 rgba(255,255,255,0.40);
}
.cta-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .8s ease;
}
.cta-btn:hover::after { transform: translateX(110%); }

/* ─── iPhone Pro mockup ────────────────────────────────────────
   Realistic frame: titanium bezel (metallic gradient + edge highlights),
   side buttons, inner screen with proper double-rounded clipping. */

.phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
.phone {
  position: relative;
  width: 320px;
  aspect-ratio: 9/19.5;
  border-radius: 50px;
  /* outer titanium frame: brushed-metal vertical gradient */
  background:
    linear-gradient(180deg, #2a2a2e 0%, #1a1a1d 25%, #131316 50%, #1a1a1d 75%, #2a2a2e 100%);
  padding: 5px;                      /* thin bezel — closer to a real iPhone Pro */
  box-shadow:
    0 60px 100px -30px rgba(0,0,0,0.85),
    inset 0  1px 0 rgba(255,255,255,0.18),  /* top highlight */
    inset 0 -1px 0 rgba(0,0,0,0.5),         /* bottom shadow */
    inset  1px 0 0 rgba(255,255,255,0.08),  /* left highlight */
    inset -1px 0 0 rgba(255,255,255,0.08);  /* right highlight */
  z-index: 2;
  transform: rotate(-2deg);
  transition: transform .6s ease;
  isolation: isolate;
}
.phone:hover { transform: rotate(0deg) translateY(-4px); }

/* outer hairline ring for that polished titanium edge */
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 4;
}

/* iPhone side buttons — silent switch + volume up/down on left, power on right */
.phone::after {
  content: "";
  position: absolute;
  pointer-events: none;
  /* left: stacked silent + vol up + vol down */
  left: -2px;
  top: 92px;
  width: 3px; height: 28px;
  background: linear-gradient(180deg, #1a1a1d, #2a2a2e 50%, #1a1a1d);
  border-radius: 2px 0 0 2px;
  box-shadow:
    0 50px  0 0 #1a1a1d, 0 50px  0 1px rgba(0,0,0,0.4),
    0 100px 0 0 #1a1a1d, 0 100px 0 1px rgba(0,0,0,0.4),
    /* power button on right side */
    calc(320px - 1px) 60px 0 0 #1a1a1d;
}

/* inner screen surface */
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: #000;
  /* subtle reflective sheen across the glass */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 2px 4px rgba(0,0,0,0.6);
}
/* a faint diagonal glass reflection over the screen */
.phone-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0) 75%,
    rgba(255,255,255,0.025) 100%
  );
  pointer-events: none;
  z-index: 3;
}
/* Darkening film + edge vignette on the screen.
   This is a translucent overlay (NOT a brightness filter) — the
   screenshot's pixels stay full quality and full saturation, but the
   perceived light output drops so the screen doesn't out-glow the
   cinematic page around it. */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* uniform dim film */
    linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)),
    /* top + bottom edge vignette */
    radial-gradient(80% 30% at 50% 0%,   rgba(0,0,0,0.30), transparent 70%),
    radial-gradient(80% 30% at 50% 100%, rgba(0,0,0,0.30), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Dynamic Island (only when there's no screenshot — screenshots already
   carry their own Dynamic Island as part of the iOS capture). */
.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%; transform: translateX(-50%);
  width: 96px; height: 28px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.phone:has(.phone-screenshot) .phone-notch { display: none; }

/* Real app screenshot — fills the screen at full quality. The dimming
   happens via the .phone-screen::after overlay, so the screenshot
   itself keeps its original colors, contrast, and saturation. */
.phone-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.phone-glow {
  position: absolute;
  inset: -10% -20%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

/* ─── AI summary card inside phone ─── */
.ai-card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.ai-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ai-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

.stat-card {
  border-radius: 12px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}
.stat-num { font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; letter-spacing: 0.05em; text-transform: uppercase; }

.ai-chat {
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 88%;
  margin-bottom: 6px;
}
.bubble-user {
  margin-left: auto;
  background: rgba(var(--accent-rgb), 0.18);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  color: #fff;
}
.bubble-ai {
  margin-right: auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.typing {
  display: inline-flex; gap: 3px;
  vertical-align: middle;
  margin-right: 6px;
}
.typing span {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--accent-light);
  animation: dot 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* ─── streak phone ─── */
.streak-screen {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(232,185,35,0.22), transparent 70%),
    linear-gradient(180deg, #100a02 0%, #050300 100%);
}
.streak-hero {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  margin-top: 8px;
}
.streak-num {
  background: linear-gradient(180deg, #F7DA72 0%, #E8B923 60%, #B8862E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(232,185,35,0.25);
}
.streak-bar {
  position: relative;
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: visible;
}
.streak-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #F2A53A, #E8B923, #F7DA72);
  box-shadow: 0 0 12px rgba(232,185,35,0.5);
}
.streak-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff8cf, #E8B923);
  box-shadow: 0 0 16px #E8B923, 0 0 0 2px rgba(0,0,0,0.4);
}

.mini-stat {
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ─── mascot rim-light blend ─── */
.mascot-rim {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), 0.45));
  /* recolor white rim to active accent */
}

/* ─── accent picker ─── */
.swatch {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--c);
  border: 2px solid rgba(255,255,255,0.12);
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .25s ease;
}
.swatch:hover { transform: scale(1.1); }
.swatch[data-active="true"] {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 4px var(--c), 0 8px 24px -8px var(--c);
}
.swatch[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 7px; height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.swatch-label {
  position: absolute;
  bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0; transition: opacity .15s ease;
  white-space: nowrap;
}
.swatch:hover .swatch-label { opacity: 1; }

/* ─── FAQ ─── */
.faq-item {
  padding: 22px 4px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: rgba(255,255,255,0.45);
  transition: transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-item p {
  margin-top: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  max-width: 60ch;
}

/* ─── reveal-on-scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HERO — cinematic backdrop ──────────────────────────────────
   Layered radial gradients + slow drift. Matches the app's "ember /
   dusk" cinematic background style. */

.hero-cinema {
  background: radial-gradient(120% 80% at 70% 20%, #1a0e02 0%, #050304 60%, #000 100%);
}

.hero-glow-1, .hero-glow-2, .hero-glow-3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
/* OLED-friendly opacities: the right-side glow used to peak at .55,
   which lit up the entire upper-right quadrant and compounded with
   the rim layer below — the page read as a wash of bright pixels on
   AMOLED. Dialled all three back so the cinematic ember sits in the
   page rather than shouting from it. */
.hero-glow-1 {
  width: 70vw; height: 70vw;
  top: -20vw; right: -15vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.32) 0%, transparent 60%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.hero-glow-2 {
  width: 60vw; height: 60vw;
  bottom: -25vw; left: -10vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, transparent 65%);
  animation: drift2 28s ease-in-out infinite alternate;
}
.hero-glow-3 {
  width: 40vw; height: 40vw;
  top: 30%; left: 35%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.10) 0%, transparent 70%);
  animation: drift3 18s ease-in-out infinite alternate;
}
@keyframes drift1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-6%,4%) scale(1.08); }
}
@keyframes drift2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(8%,-3%) scale(1.12); }
}
@keyframes drift3 {
  0%   { transform: translate(0,0) scale(1); opacity:.8; }
  100% { transform: translate(4%,6%) scale(1.15); opacity:.5; }
}

.hero-rays {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      105deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 20px,
      rgba(255,255,255,0.012) 21px,
      rgba(255,255,255,0) 60px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 50%, #000 92%);
}

/* ─── HERO — phone mockup ───────────────────────────────────────
   The product itself, as the stage's focal point. Aligned with the
   text column via the parent grid layout. */

.hero-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  z-index: 1;
}
.hero-phone {
  width: 320px;
  transform: rotate(2deg);
  animation: hero-phone-float 8s ease-in-out infinite;
  z-index: 2;
}
@keyframes hero-phone-float {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-10px); }
}
.hero-phone:hover { animation-play-state: paused; }

/* glow behind the phone — anchors it to the page in the active accent */
.hero-phone-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 55% at 50% 50%, rgba(var(--accent-rgb), 0.35), transparent 65%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: hero-phone-pulse 5s ease-in-out infinite;
}
@keyframes hero-phone-pulse {
  0%, 100% { opacity: .8;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* streak flame in the phone header — gentle pulse */
.streak-flame {
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(232,185,35,0.7));
  animation: flame 2.4s ease-in-out infinite;
}
@keyframes flame {
  0%, 100% { transform: scale(1)    rotate(0); }
  50%      { transform: scale(1.12) rotate(-3deg); }
}

/* today's workout card inside the hero phone */
.workout-card {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 14px;
}
.set-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.set-row:last-of-type { border-bottom: none; }
.set-row.dim { color: rgba(255,255,255,0.45); }
.set-num {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 600;
}
.set-row.dim .set-num {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.35);
}
.set-meta {
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.55);
  font-size: 11.5px;
}
.start-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark));
  color: #1a0e02;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 6px 18px -6px rgba(var(--accent-rgb), 0.6),
    inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  transition: transform .15s ease;
}
.start-btn:hover { transform: translateY(-1px); }

/* mobile: phone goes below the text */
@media (max-width: 1024px) {
  .hero-phone-wrap { margin-top: 40px; }
  .hero-phone { width: 280px; }
}

/* ─── HERO — mascot figure (now unused — kept for future use) ──── */
   Anchored bottom-right. Rim-light layer is recolored to the active
   accent using mask-image so the same PNG reads in any palette. */

.hero-figure {
  position: absolute;
  right: -2vw;
  bottom: -2vw;
  /* The source PNG is 1024² — capping at 640px keeps the displayed
     size near native resolution on retina screens, which kills the
     spray-paint pixelation visible on wide displays. */
  width: min(48vw, 640px);
  aspect-ratio: 1/1;
  z-index: 0;
  pointer-events: none;
  animation: float 9s ease-in-out infinite;
}
@media (min-width: 1600px) {
  .hero-figure { width: min(40vw, 720px); right: 4vw; }
}
@media (max-width: 1024px) {
  .hero-figure { width: 70vw; right: -14vw; opacity: .55; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-12px) }
}

.hero-figure .figure-base,
.hero-figure .figure-rim {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* base silhouette: deep black with soft accent halo on the floor. */
.hero-figure .figure-base {
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.7))
    drop-shadow(0 0 80px rgba(0,0,0,0.35));
}

/* rim-light: original white rim PNG, lifted via screen blend, with an
   accent-colored halo as drop-shadow. The rim PNG hits near-pure
   white at its hottest pixels — at full opacity over the dark page
   that resolves to max-brightness AMOLED, which both swamps the
   dark theme and chews through battery on OLED phones. We drop the
   layer's opacity so the rim renders as warm mid-grey instead of
   #FFF, and trim the halo blur radii so the surrounding glow doesn't
   re-introduce the same brightness. The accent color stays; only
   the luminance is cut. */
.hero-figure .figure-rim {
  mix-blend-mode: screen;
  /* 0.7 keeps it crisp without driving full-white pixels on AMOLED.
     The accent-tinted halo carries the color; the rim itself stays
     a warm highlight rather than a pure-white sticker edge. */
  opacity: 0.7;
  filter:
    drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.55))
    drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.40));
  animation: rim-pulse 4.5s ease-in-out infinite;
}
@keyframes rim-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.50))
      drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.35));
  }
  50% {
    filter:
      drop-shadow(0 0 26px rgba(var(--accent-rgb), 0.65))
      drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.50));
  }
}


/* Ground shadow under the figure — anchors him to the floor so the
   silhouette doesn't read as floating in mid-air. Animated drift gives
   the impression of an unseen flickering light. */
.figure-ground {
  position: absolute;
  left: 12%; right: 12%;
  bottom: 4%;
  height: 16%;
  background:
    radial-gradient(closest-side, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 50%, transparent 80%);
  filter: blur(8px);
  z-index: -1;
  animation: ground-flicker 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ground-flicker {
  0%, 100% { transform: scaleX(1)    scaleY(1);   opacity: .85; }
  50%      { transform: scaleX(1.04) scaleY(.95); opacity: 1; }
}

/* Streak (in-phone) figure — same approach, gold halo */
.streak-figure {
  position: absolute;
  inset: 8% 10% 14% 10%;
  width: 80%; height: 78%;
  object-fit: contain;
}
.streak-figure.figure-base { filter: drop-shadow(0 14px 32px rgba(0,0,0,0.6)); }
.streak-figure.figure-rim {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px var(--accent))
    drop-shadow(0 0 6px var(--accent));
  animation: rim-pulse 5s ease-in-out infinite;
}
.streak-figure.figure-rim-gold {
  filter:
    drop-shadow(0 0 22px #E8B923)
    drop-shadow(0 0 8px #F7DA72);
  animation: rim-pulse-gold 4s ease-in-out infinite;
}
@keyframes rim-pulse-gold {
  0%, 100% { filter: drop-shadow(0 0 18px #E8B923) drop-shadow(0 0 6px #F7DA72); }
  50%      { filter: drop-shadow(0 0 32px #E8B923) drop-shadow(0 0 12px #F7DA72); }
}

/* aurora glow behind streak hero */
.streak-aurora {
  position: absolute;
  inset: 5% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,185,35,0.45), rgba(232,185,35,0.10) 50%, transparent 70%);
  filter: blur(18px);
  animation: aurora 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aurora {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.05); }
}

/* gold sparks rising from feet */
.streak-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff8cf, #E8B923 60%, transparent 100%);
  bottom: 12%;
  opacity: 0;
  filter: blur(0.5px);
}
.streak-spark.s1 { left: 38%; animation: spark 3.2s ease-in-out .0s infinite; }
.streak-spark.s2 { left: 50%; animation: spark 3.6s ease-in-out 1.0s infinite; }
.streak-spark.s3 { left: 62%; animation: spark 3.0s ease-in-out 1.8s infinite; }
@keyframes spark {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-90px) scale(1.3); opacity: 0; }
}

/* ─── figure toggle (male / female) ──────────────────────────── */

/* by default we show the figure that matches body[data-figure] and hide the other */
body[data-figure="male"]   .figure-female { display: none; }
body[data-figure="female"] .figure-male   { display: none; }

.figure-toggle {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
}
.figure-btn {
  position: relative;
  z-index: 2;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  transition: color .25s ease;
  cursor: pointer;
}
.figure-btn[aria-pressed="true"] { color: #1a0e02; font-weight: 600; }
.figure-pill {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 4px 16px -4px rgba(var(--accent-rgb), 0.55);
  transition: transform .35s cubic-bezier(.4,1.4,.6,1);
  z-index: 1;
}
body[data-figure="female"] .figure-pill { transform: translateX(100%); }

/* live preview tile in Personalize section — single mascot, no extra reveals */
.preview-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(var(--accent-rgb), 0.35), transparent 70%),
    linear-gradient(180deg, #0A0A0C 0%, #050507 100%);
  border: 1px solid rgba(255,255,255,0.08);
}
.preview-figure {
  position: absolute; inset: 8% 0 0 0;
  width: 100%; height: 92%;
}
.preview-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.preview-figure .figure-base { filter: drop-shadow(0 18px 30px rgba(0,0,0,0.5)); }
.preview-figure .figure-rim {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px var(--accent))
    drop-shadow(0 0 8px var(--accent));
  animation: rim-pulse 5s ease-in-out infinite;
}
.preview-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, #050507 90%);
  pointer-events: none;
}

/* ─── status pills (hero) ────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.78);
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
}

/* ─── headline reveal ─────────────────────────────────────────── */
h1 .italic { display: inline-block; }
section h1, section h2 {
  view-timeline: --headline;
  animation: headline-fade linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 35%;
}
@keyframes headline-fade {
  from { opacity: .35; transform: translateY(8px); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* keep the hero h1 fully visible — no scroll-fade on first paint */
section.relative > .mx-auto > .max-w-2xl > h1 { animation: none; opacity: 1; transform: none; }

/* ─── streak fill bar — animated on reveal ───────────────────── */
.streak-fill { width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.streak-marker { left: 0; transition: left 1.4s cubic-bezier(.2,.8,.2,1); }

/* ─── scroll progress bar (top of page) ────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.04);
  z-index: 100;
  pointer-events: none;
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent));
  box-shadow: 0 0 12px var(--accent);
  transition: width 80ms linear;
}

/* ─── scroll-driven animations (modern browsers) ────────────────
   Fall back gracefully — the JS observers cover the same intent. */
@supports (animation-timeline: view()) {

  /* hero phone shrinks + rotates as the hero exits viewport */
  .hero-phone {
    animation: hero-phone-exit linear both;
    animation-timeline: view();
    animation-range: cover 30% cover 100%;
  }
  @keyframes hero-phone-exit {
    0%   { transform: rotate(2deg) scale(1)    translateY(0); opacity: 1; }
    100% { transform: rotate(-4deg) scale(0.85) translateY(40px); opacity: .35; }
  }

  /* hero copy slides up + dims a touch as user scrolls past */
  section:first-of-type h1 {
    animation: copy-rise linear both;
    animation-timeline: view();
    animation-range: cover 40% cover 100%;
  }
  @keyframes copy-rise {
    0%   { transform: translateY(0);   opacity: 1; }
    100% { transform: translateY(-30px); opacity: .6; }
  }

  /* glass cards in pillar grid stagger as they enter */
  .glass-card {
    animation: card-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
  @keyframes card-rise {
    0%   { transform: translateY(50px) scale(.96); opacity: 0; filter: blur(6px); }
    100% { transform: translateY(0)    scale(1);   opacity: 1; filter: blur(0); }
  }

  /* the cinematic backdrop drifts slightly with scroll for depth */
  .hero-glow-1 {
    animation: bg-drift-1 linear both;
    animation-timeline: scroll();
  }
  .hero-glow-2 {
    animation: bg-drift-2 linear both;
    animation-timeline: scroll();
  }
  @keyframes bg-drift-1 {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(-15%,30vh) scale(1.3); opacity: .4; }
  }
  @keyframes bg-drift-2 {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(20%,-20vh) scale(1.15); opacity: .5; }
  }
}

/* ─── word-by-word reveal helper (added by JS to big headlines) ── */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--word-delay, 0ms);
}
.word.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ─── stagger reveal for groups (set via JS) ──────────────────── */
.reveal-group > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-group.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── streak section: pin the phone briefly so the gold lands ─── */
@media (min-width: 1024px) {
  #streak .phone-wrap {
    position: sticky;
    top: 12vh;
    align-self: start;
  }
}

/* ─── shimmer text effect (for hero italic word) ──────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--accent-light) 0%,
    var(--accent) 35%,
    #ffffff 50%,
    var(--accent) 65%,
    var(--accent-light) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── mobile tweaks ─── */
@media (max-width: 768px) {
  .phone { width: 280px; }
  h1 { font-size: 3rem !important; }
  .hero-figure { display: none; }  /* mascot off-canvas on phone — copy reads first */
}