/* ============================================================
   JIFFYSCORE — WELCOME / VITRINE PAGE
   Composes the JiffyResources design-system tokens only.
   No new colours / fonts / radii are invented here.
   ============================================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* scroll progress bar */
.w-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--lime-gradient); z-index: 200;
  box-shadow: 0 0 12px var(--lime);
  transition: width .1s linear;
}

/* ---- section scaffold ----------------------------------- */
.w-section { position: relative; padding: clamp(72px, 11vh, 132px) 24px; }
.w-wrap { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.w-wrap--wide { max-width: 1380px; }
.w-wrap--narrow { max-width: 880px; }

.w-eyebrow { /* gold mono kicker */
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); display: inline-flex;
  align-items: center; gap: 10px; margin: 0 0 22px;
}
.w-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); opacity: .7; }
.w-eyebrow--center { justify-content: center; }
.w-eyebrow--center::after { content: ''; width: 26px; height: 1px; background: var(--gold); opacity: .7; }

.w-h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.02; font-size: clamp(34px, 5vw, 64px); margin: 0; color: var(--ink);
  text-wrap: balance;
}
.w-h2 em { font-style: normal; color: var(--gold); }
.w-sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; margin: 20px 0 0; }
.w-sub--center { margin-left: auto; margin-right: auto; text-align: center; }
.w-center { text-align: center; }

/* ---- decorative glows ----------------------------------- */
.w-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .5; }
.w-glow--gold { background: radial-gradient(circle, var(--gold-glow), transparent 68%); }
.w-glow--lime { background: radial-gradient(circle, rgba(141,230,90,.22), transparent 68%); }
html[data-motion="off"] .w-glow { display: none; }

/* ============================================================
   1 · HERO (immersive video frame)
   ============================================================ */
.w-hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  overflow: hidden; padding: 120px 24px 88px; text-align: center;
}
.w-hero-media { position: absolute; inset: -6% -2%; z-index: 0; }
.w-hero-media video, .w-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* legibility scrim — emerald, bottom-weighted */
.w-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(7,20,13,.32), transparent 55%),
    linear-gradient(180deg, rgba(7,20,13,.55) 0%, rgba(7,20,13,.30) 32%, rgba(7,20,13,.62) 74%, var(--off) 100%);
}
.w-hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(7,20,13,.7);
}

/* floating chaos words */
.w-chaos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.w-chaos span {
  position: absolute; font-family: var(--font-mono); font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap;
  opacity: 0; transform: translate(0,0) scale(1);
  transition: opacity 1s var(--ease-out-quart), transform 1.4s var(--ease-out-expo);
}
.w-chaos span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); margin-right: 8px; vertical-align: middle; opacity: .7; }
body.is-loaded .w-chaos span { opacity: .42; }
/* after settle: drift toward center & fade — clarity wins */
body.is-settled .w-chaos span { opacity: .07; transform: translate(var(--cx,0), var(--cy,0)) scale(.82); }
html[data-motion="off"] .w-chaos { display: none; }

.w-hero-inner { position: relative; z-index: 3; max-width: 980px; }
.w-hero h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
  line-height: .98; margin: 0; color: var(--ink);
  font-size: clamp(46px, 8.2vw, 112px); text-wrap: balance;
  text-shadow: 0 2px 40px rgba(7,20,13,.55);
}
.w-hero h1 em { font-style: normal; color: var(--gold); }
.w-hero .w-lead {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2);
  max-width: 64ch; margin: 26px auto 0; text-shadow: 0 1px 18px rgba(7,20,13,.6);
}
.w-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

.w-proof { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.w-proof .it { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }
.w-proof .it svg { width: 17px; height: 17px; color: var(--lime); flex: none; }

/* announce pill (reused look) */
.w-announce {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px;
  padding: 6px 14px 6px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in oklch, var(--off) 55%, transparent);
  backdrop-filter: blur(12px); font-size: 13px; color: var(--ink-soft);
}
.w-announce .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-lime); background: var(--lime-gradient); padding: 4px 9px; border-radius: var(--r-pill); }

/* scroll cue */
.w-scrollcue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
}
.w-scrollcue .bar { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.w-scrollcue .bar::after { content: ''; position: absolute; top: -40px; left: 0; width: 1px; height: 40px; background: var(--gold); animation: w-cue 2.2s var(--ease-out-quart) infinite; }
@keyframes w-cue { to { top: 40px; } }
html[data-motion="off"] .w-scrollcue .bar::after { animation: none; }

/* ============================================================
   2 · PAIN → RELIEF equation band
   ============================================================ */
.w-relief { background: linear-gradient(180deg, var(--off), var(--bg-2)); }
.w-relief-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.w-figure {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-3);
  aspect-ratio: 16 / 9; background: var(--bg-2);
}
.w-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-figure .glint { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: inherit; }

.w-eq { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.w-eq .term {
  flex: 1 1 0; min-width: 120px; background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 18px 16px; text-align: center;
}
.w-eq .term .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.w-eq .term .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 24px); color: var(--ink); margin-top: 6px; }
.w-eq .op { align-self: center; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--gold); flex: none; }
.w-eq .term--out { background: linear-gradient(165deg, var(--cream), var(--bg-2)); border-color: var(--line); box-shadow: var(--glow-gold); }
.w-eq .term--out .v { color: var(--gold); }

/* ============================================================
   3 · PAIN-REMOVER PILLARS
   ============================================================ */
.w-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.w-pillar { padding: 32px 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.w-pillar p { flex: 1; }
.w-pillar .ic {
  width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--line); margin-bottom: 20px;
}
.w-pillar .ic svg { width: 24px; height: 24px; }
.w-pillar h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0 0 10px; color: var(--ink); letter-spacing: -.01em; }
.w-pillar p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--ink-soft); }
.w-pillar .was { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.w-pillar .was b { color: var(--coral); font-weight: 500; }

/* ============================================================
   4 · ENGINE (immersive video frame) + score reveal
   ============================================================ */
.w-engine { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 110px 24px; }
.w-engine-media { position: absolute; inset: -4%; z-index: 0; }
.w-engine-media video, .w-engine-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-engine-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--off) 0%, rgba(7,20,13,.55) 16%, rgba(7,20,13,.42) 50%, rgba(7,20,13,.6) 84%, var(--off) 100%),
    radial-gradient(80% 60% at 50% 50%, transparent 30%, rgba(7,20,13,.5) 100%);
}
.w-engine-inner { position: relative; z-index: 2; width: 100%; max-width: 1080px; text-align: center; }
.w-engine-def {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(19px, 2vw, 27px); line-height: 1.42; color: var(--ink-2);
  max-width: 40ch; margin: 22px auto 0; text-wrap: balance;
}
.w-engine-def strong, .w-engine-def em { font-style: normal; color: var(--gold); }

.w-ring-wrap { display: flex; flex-direction: column; align-items: center; margin: 14px 0 8px; }
.w-ring { position: relative; width: 220px; height: 220px; }
.w-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.w-ring .track { stroke: var(--line-soft); }
.w-ring .prog { stroke: url(#wgrad); stroke-linecap: round; stroke-dasharray: 540.354; stroke-dashoffset: 540.354; transition: stroke-dashoffset 1.8s var(--ease-out-expo); filter: drop-shadow(0 0 10px var(--gold-glow)); }
.w-ring .ctr { position: absolute; inset: 0; display: grid; place-items: center; }
.w-ring .num { font-family: var(--font-mono); font-weight: 600; font-size: 58px; color: var(--ink); line-height: 1; }
.w-ring .max { font-family: var(--font-mono); font-size: 13px; color: var(--mute); margin-top: 4px; }
.w-ring .badge { position: absolute; top: 8px; right: -6px; }

/* stepper */
.w-steps { display: flex; align-items: stretch; gap: 0; margin: 44px auto 0; max-width: 940px; counter-reset: s; flex-wrap: wrap; justify-content: center; }
.w-step {
  flex: 1 1 0; min-width: 120px; position: relative; padding: 18px 14px; text-align: center;
  transition: opacity .5s var(--ease-out-quart), transform .5s var(--ease-out-quart);
  opacity: .5;
}
.w-step.is-on { opacity: 1; transform: translateY(-3px); }
.w-step .n {
  width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 14px; color: var(--gold); border: 1px solid var(--line);
  background: color-mix(in oklch, var(--off) 60%, transparent); backdrop-filter: blur(8px); transition: all .5s;
}
.w-step.is-on .n { background: var(--gold); color: var(--on-lime); border-color: var(--gold); box-shadow: var(--glow-gold); }
.w-step h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 4px; color: var(--ink); }
.w-step p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.w-step:not(:last-child)::after {
  content: ''; position: absolute; top: 37px; right: -10px; width: 20px; height: 1px;
  background: var(--line); z-index: 0;
}
@media (max-width: 720px) { .w-step:not(:last-child)::after { display: none; } }

/* ============================================================
   5 · VISIBILITY / mechanism — image + signal bars
   ============================================================ */
.w-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.w-split--rev { direction: rtl; }
.w-split--rev > * { direction: ltr; }

.w-signals { display: grid; gap: 14px; margin-top: 30px; }
.w-sig { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: 14px; }
.w-sig .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.w-sig .bar { display: block; height: 7px; border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; border: 1px solid var(--line-soft); }
.w-sig .fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; border-radius: inherit; background: var(--lime-gradient); transition: transform 1.4s var(--ease-out-expo); }
.w-sig .fill.gold { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.w-sig .v { font-family: var(--font-mono); font-size: 13px; color: var(--gold); text-align: right; }
.w-sig.is-in .fill { transform: scaleX(var(--wf, .6)); }

/* ============================================================
   6 · PRODUCT FAMILY
   ============================================================ */
.w-family { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 52px; }
.w-prod { padding: 30px 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 220px; }
.w-prod--feat { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 36px; }
.w-prod .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.w-prod .head .name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -.01em; }
.w-prod .pain { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--gold); margin: 0 0 10px; }
.w-prod .promise { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.w-prod .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.w-prod .price { font-family: var(--font-mono); font-size: 12.5px; color: var(--mute); }
.w-prod .price b { color: var(--ink); font-weight: 600; }
.w-prod--feat .body { flex: 1; }
.w-prod--soon { opacity: .82; }
.w-prod .tag-soon { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 3px 9px; }
.w-prodlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--lime); }
.w-prodlink svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out-expo); }
.w-prod:hover .w-prodlink svg { transform: translateX(4px); }

/* ============================================================
   7 · TRUST / glass-box
   ============================================================ */
.w-trust { background: linear-gradient(180deg, var(--bg-2), var(--off)); }
.w-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 28px; }
.w-bullet { display: flex; gap: 12px; align-items: flex-start; }
.w-bullet .ck { width: 26px; height: 26px; border-radius: 8px; background: var(--emerald-soft); color: var(--emerald); display: grid; place-items: center; flex: none; }
.w-bullet .ck svg { width: 15px; height: 15px; }
.w-bullet .t { font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.w-bullet .t span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* ============================================================
   8 · LOW-RISK ENTRY offer
   ============================================================ */
.w-entry { display: grid; place-items: center; }
.w-pass {
  max-width: 560px; width: 100%; text-align: center; padding: 44px 40px;
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--cream), var(--bg-2));
  border: 1px solid var(--line); box-shadow: var(--glow-gold), var(--shadow-3);
}
.w-pass .price { font-family: var(--font-mono); font-weight: 600; color: var(--ink); margin: 14px 0 4px; }
.w-pass .price b { font-size: 52px; color: var(--gold); }
.w-pass .price .cur { font-size: 22px; color: var(--gold); vertical-align: super; }
.w-pass .price .per { font-size: 14px; color: var(--mute); }
.w-pass .credit { font-size: 14px; color: var(--lime); margin: 0 0 26px; }
.w-reassure { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.w-reassure .it { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.w-reassure .it svg { width: 14px; height: 14px; color: var(--lime); }

/* ============================================================
   9 · FINAL CTA (immersive video frame)
   ============================================================ */
.w-final { position: relative; min-height: 92svh; display: grid; place-items: center; overflow: hidden; padding: 110px 24px; text-align: center; }
.w-final-media { position: absolute; inset: -4%; z-index: 0; }
.w-final-media video, .w-final-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-final-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--off) 0%, rgba(7,20,13,.5) 30%, rgba(7,20,13,.66) 70%, var(--off) 100%);
}
.w-final-emblem {
  position: absolute; z-index: 1; width: 520px; height: 520px; top: 50%; left: 50%;
  transform: translate(-50%,-50%); mix-blend-mode: screen; opacity: .12; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  animation: w-spin 80s linear infinite;
}
@keyframes w-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
html[data-motion="off"] .w-final-emblem, html[data-motion="subtle"] .w-final-emblem { animation: none; }
.w-final-inner { position: relative; z-index: 2; max-width: 820px; }
.w-final h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1;
  font-size: clamp(40px, 7vw, 92px); margin: 0; color: var(--ink); text-wrap: balance;
  text-shadow: 0 2px 40px rgba(7,20,13,.55);
}
.w-final h2 em { font-style: normal; color: var(--gold); }
.w-final .w-lead { font-size: clamp(16px,1.5vw,20px); color: var(--ink-2); max-width: 56ch; margin: 22px auto 0; line-height: 1.5; }

/* ---- footer --------------------------------------------- */
.w-footer { background: var(--off); border-top: 1px solid var(--line-soft); padding: 40px 24px; }
.w-footer-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.w-footer .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.w-footer .meta { font-size: 13px; color: var(--mute); }
.w-footer .meta a { color: var(--ink-soft); }
.w-footer .links { display: flex; gap: 18px; font-size: 13px; }
.w-footer .links a { color: var(--ink-soft); }
.w-footer .links a:hover { color: var(--gold); }

/* ============================================================
   parallax helper (consumes JS-set --py)
   ============================================================ */
.w-px { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
html[data-motion="off"] .w-px { transform: none; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.w-tweaks {
  position: fixed; right: 18px; bottom: 18px; z-index: 300; width: 290px;
  background: color-mix(in oklch, var(--off) 92%, transparent); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: 16px; display: none; font-size: 13px; color: var(--ink);
}
.w-tweaks.is-open { display: block; }
.w-tweaks header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.w-tweaks header .ttl { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.w-tweaks header button { background: none; border: none; color: var(--mute); font-size: 18px; line-height: 1; padding: 2px 6px; }
.w-tweaks header button:hover { color: var(--ink); }
.w-trow { margin-bottom: 14px; }
.w-trow > label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 7px; }
.w-seg { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 3px; }
.w-seg button { flex: 1; border: none; background: none; color: var(--ink-soft); font-size: 11.5px; padding: 6px 4px; border-radius: var(--r-pill); transition: all .2s; font-family: var(--font-body); }
.w-seg button.is-sel { background: var(--gold); color: var(--on-lime); font-weight: 600; }
.w-swatches { display: flex; gap: 8px; }
.w-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.w-swatches button.is-sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--off), 0 0 0 4px var(--gold); }
.w-toggle { display: flex; align-items: center; justify-content: space-between; }
.w-toggle .sw { width: 40px; height: 23px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line-soft); position: relative; transition: background .25s; flex: none; }
.w-toggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-soft); transition: transform .25s, background .25s; }
.w-toggle.is-on .sw { background: var(--lime-gradient); }
.w-toggle.is-on .sw::after { transform: translateX(17px); background: var(--on-lime); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- nav: collapses on tablet / phone -------------------- */
@media (max-width: 1024px) {
  .nav { padding: 14px 22px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 8px 11px; }
}
@media (max-width: 880px) {
  /* the in-page anchor links live in the page itself — drop them
     from the bar so brand + primary action always fit */
  .nav .nav-links { display: none; }
}
@media (max-width: 620px) {
  .nav { padding: 12px 16px; }
  .brand { font-size: 19px; gap: 8px; }
  .brand .brand-dot { width: 28px; height: 28px; }
  /* keep only the one job that matters on a phone */
  .nav .row .nav-link { display: none; }
  .nav-cta { padding: 9px 15px; font-size: 13px; }
  .w-soundbtn { top: 74px; }
}

@media (max-width: 940px) {
  .w-relief-grid, .w-split { grid-template-columns: 1fr; }
  .w-split--rev { direction: ltr; }
  .w-cards3 { grid-template-columns: 1fr; }
  .w-family { grid-template-columns: 1fr; }
  .w-prod--feat { flex-direction: column; align-items: flex-start; gap: 18px; }
  .w-bullets { grid-template-columns: 1fr; }
  .w-figure { order: -1; }
}
@media (max-width: 560px) {
  .w-section { padding: clamp(60px, 9vh, 96px) 18px; }
  .w-hero { padding: 104px 18px 76px; }
  .w-engine, .w-final { padding: 96px 18px; }
  .w-eq .term { flex: 1 1 100%; }
  .w-eq .op { width: 100%; text-align: center; }
  .w-sig { grid-template-columns: 84px 1fr 36px; gap: 10px; }
  .w-pillar { padding: 26px 22px; }
  .w-pass { padding: 36px 24px; }
  .w-tweaks { right: 10px; left: 10px; width: auto; bottom: 10px; }
  .w-final-emblem { width: 360px; height: 360px; }
  .w-footer-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .w-welcome-enter { padding: 14px 26px; }
}
@media (max-width: 380px) {
  .w-welcome-title { font-size: clamp(42px, 13vw, 52px); }
  .w-hero h1 { font-size: clamp(38px, 11vw, 52px); }
}

/* honor reduced motion globally for our transitions */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w-chaos { display: none; }
  .w-final-emblem, .w-scrollcue .bar::after { animation: none; }
  .w-px { transform: none; }
}

/* ============================================================
   v2 — WELCOME POP-UP · CINEMA VIDEOS · ONCE-ONLY MOTION
   ============================================================ */

/* ---- 0 · Welcome pop-up (first thing on the page) -------- */
.w-welcome {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  text-align: center; padding: 24px; cursor: pointer;
  background:
    radial-gradient(120% 90% at 50% 36%, var(--bg-2) 0%, var(--off) 72%);
  opacity: 0; transition: opacity .55s var(--ease-out-quart);
}
.w-welcome.is-in { opacity: 1; }
.w-welcome.is-out { opacity: 0; transform: scale(1.05); pointer-events: none;
  transition: opacity .8s var(--ease-out-quart), transform .8s var(--ease-out-expo); }
.w-welcome-aura {
  position: absolute; width: min(78vw, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 64%);
  filter: blur(60px); opacity: .6; pointer-events: none;
  animation: w-aura 5s var(--ease-out-quart) infinite;
}
@keyframes w-aura { 0%,100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.06); opacity: .72; } }
.w-welcome-ring {
  position: absolute; width: min(86vw, 620px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-soft); pointer-events: none; opacity: .5;
}
.w-welcome-crest {
  position: absolute; top: 50%; left: 50%; z-index: 0; pointer-events: none;
  width: min(92vw, 720px); aspect-ratio: 1; height: auto; object-fit: contain;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen; opacity: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 64%);
  animation: w-crest-fade 1.4s var(--ease-out-expo) .2s forwards, w-crest-spin 90s linear infinite;
}
@keyframes w-crest-fade { to { opacity: .16; } }
@keyframes w-crest-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
html[data-motion="off"] .w-welcome-crest,
html[data-motion="subtle"] .w-welcome-crest { animation: w-crest-fade 1.4s var(--ease-out-expo) .2s forwards; transform: translate(-50%,-50%); }
html:not(.w-anim) .w-welcome-crest { animation: none !important; opacity: .16 !important; transform: translate(-50%,-50%) !important; }
@media (prefers-reduced-motion: reduce) {
  .w-welcome-crest { animation: w-crest-fade 1.4s ease .2s forwards; transform: translate(-50%,-50%); }
}
.w-welcome-inner { position: relative; z-index: 2; max-width: 940px; }
.w-welcome-emblem {
  width: 86px; height: 86px; border-radius: var(--r-lg); display: grid; place-items: center;
  margin: 0 auto 26px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--glow-gold); background: var(--white);
  opacity: 0; transform: translateY(18px) scale(.8);
  animation: w-pop-in .7s var(--ease-spring) .15s forwards;
}
.w-welcome-emblem img { width: 100%; height: 100%; object-fit: cover; }
.w-welcome-kicker {
  font-family: var(--font-mono); font-size: clamp(12px, 1.4vw, 15px); letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
  opacity: 0; transform: translateY(14px); animation: w-pop-in .7s var(--ease-out-expo) .28s forwards;
}
.w-welcome-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: .94;
  font-size: clamp(52px, 12vw, 168px); margin: 0; color: var(--ink);
  text-shadow: 0 8px 60px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(26px) scale(.96);
  animation: w-pop-in .9s var(--ease-out-expo) .4s forwards;
}
.w-welcome-title em { font-style: normal; color: var(--gold); }
.w-welcome-sub {
  font-size: clamp(17px, 2vw, 26px); color: var(--ink-soft); margin: 22px auto 0; max-width: 36ch;
  opacity: 0; transform: translateY(16px); animation: w-pop-in .8s var(--ease-out-expo) .58s forwards;
}
.w-welcome-enter {
  margin: 40px auto 0; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--on-lime); background: var(--lime-gradient); border: none;
  padding: 15px 30px; border-radius: var(--r-pill); box-shadow: var(--glow-lime);
  opacity: 0; transform: translateY(16px); animation: w-pop-in .8s var(--ease-spring) .72s forwards;
  transition: transform .25s var(--ease-out-expo);
}
.w-welcome-enter:hover { transform: translateY(-3px); }
.w-welcome-enter svg { transition: transform .3s var(--ease-out-expo); }
.w-welcome-enter:hover svg { transform: translateX(4px); }
.w-welcome-hint {
  display: block; margin-top: 18px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
  opacity: 0; animation: w-fade .9s ease 1s forwards;
}
@keyframes w-pop-in { to { opacity: 1; transform: none; } }
@keyframes w-fade { to { opacity: .8; } }
html[data-motion="off"] .w-welcome-emblem,
html[data-motion="off"] .w-welcome-kicker,
html[data-motion="off"] .w-welcome-title,
html[data-motion="off"] .w-welcome-sub,
html[data-motion="off"] .w-welcome-enter,
html[data-motion="off"] .w-welcome-hint { animation: none; opacity: 1; transform: none; }
html[data-motion="off"] .w-welcome-aura { animation: none; }

/* ---- 1 · Hero state machine ------------------------------ */
/* media + scrim are present during the video; content is hidden */
.w-hero-media, .w-hero-scrim, .w-hero-vignette { transition: opacity .9s var(--ease-out-quart); }
.w-hero-inner { opacity: 0; }

/* video stage: show the sound control, keep content hidden */
.w-hero.is-playing .w-soundbtn { opacity: 1; pointer-events: auto; transform: none; }

/* revealed: video + scrims fade away, plain themed background, content in */
.w-hero.is-revealed { background: radial-gradient(120% 100% at 50% -10%, var(--gold-soft), transparent 58%), var(--off); }
.w-hero.is-revealed .w-hero-media,
.w-hero.is-revealed .w-hero-scrim,
.w-hero.is-revealed .w-hero-vignette { opacity: 0; visibility: hidden; }
.w-hero.is-revealed .w-hero-inner { opacity: 1; }
.w-hero-inner > * { opacity: 0; transform: translateY(28px); }
.w-hero.is-revealed .w-hero-inner > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out-quart), transform .8s var(--ease-out-expo);
}
.w-hero.is-revealed .w-hero-inner > *:nth-child(1) { transition-delay: .04s; }
.w-hero.is-revealed .w-hero-inner > *:nth-child(2) { transition-delay: .12s; }
.w-hero.is-revealed .w-hero-inner > *:nth-child(3) { transition-delay: .20s; }
.w-hero.is-revealed .w-hero-inner > *:nth-child(4) { transition-delay: .28s; }
.w-hero.is-revealed .w-hero-inner > *:nth-child(5) { transition-delay: .36s; }

/* scroll cue only appears once the hero content is live */
.w-scrollcue { opacity: 0; transition: opacity .6s ease; }
.w-hero.is-revealed .w-scrollcue { opacity: 1; }

/* sound toggle */
.w-soundbtn {
  position: absolute; top: 96px; right: clamp(16px, 4vw, 40px); z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 14px; border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--off) 55%, transparent); backdrop-filter: blur(14px);
  border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .5s ease, transform .5s var(--ease-out-expo), border-color .25s;
}
.w-soundbtn:hover { border-color: var(--gold); }
.w-soundbtn .ic-off { display: none; }
.w-soundbtn.is-muted .ic-on { display: none; }
.w-soundbtn.is-muted .ic-off { display: block; color: var(--mute); }
.w-soundbtn.is-muted { color: var(--ink-soft); }

/* ---- 2 · Relief equation — pops 1·2·3·4 then figure ------ */
.w-eq .term, .w-eq .op { opacity: 0; transform: translateY(18px) scale(.86); }
.w-eq .term.is-in, .w-eq .op.is-in {
  opacity: 1; transform: none;
  transition: opacity .42s var(--ease-out-quart), transform .55s var(--ease-spring);
}

/* ---- figures: hidden, then reveal + gold "glare" --------- */
.w-figure { opacity: 0; transform: translateY(26px) scale(.965); }
.w-figure.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out-quart), transform .9s var(--ease-out-expo);
}
.w-fig-flare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 62%);
  transform: translateX(-120%); opacity: 0;
}
.w-figure.is-in .w-fig-flare { animation: w-flare 1.1s var(--ease-out-quart) .15s; }
@keyframes w-flare { 0% { transform: translateX(-120%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }

/* ---- 3 · Pillars — dealt out like cards ------------------ */
.w-pillar { opacity: 0; transform: translateY(46px) rotate(-5deg) scale(.94); transform-origin: bottom center; }
.w-pillar.is-dealt {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out-quart), transform .75s var(--ease-out-expo);
}

/* ---- 4 · Engine — cinema video then steps ---------------- */
.w-engine-media, .w-engine-scrim { transition: opacity .9s var(--ease-out-quart); }
.w-engine-inner { opacity: 0; }
.w-engine.is-revealed { background: radial-gradient(110% 90% at 50% 30%, var(--gold-soft), transparent 60%), var(--off); }
.w-engine.is-revealed .w-engine-media,
.w-engine.is-revealed .w-engine-scrim { opacity: 0; visibility: hidden; }
.w-engine.is-revealed .w-engine-inner { opacity: 1; }
.w-engine-inner > :not(.w-steps) { opacity: 0; transform: translateY(24px); }
.w-engine.is-revealed .w-engine-inner > :not(.w-steps) {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out-quart), transform .8s var(--ease-out-expo);
}
.w-engine.is-revealed .w-engine-inner > :nth-child(2) { transition-delay: .08s; }
.w-engine.is-revealed .w-engine-inner > :nth-child(3) { transition-delay: .16s; }
.w-engine.is-revealed .w-engine-inner > :nth-child(4) { transition-delay: .24s; }
.w-engine-sub { margin-top: 16px; }
/* steps appear after the video, then stay lit (no scroll dimming) */
.w-step { opacity: 0; transform: translateY(22px); }
.w-step.is-on { opacity: 1; transform: translateY(-3px); }
.w-step.is-on .n { background: var(--gold); color: var(--on-lime); border-color: var(--gold); box-shadow: var(--glow-gold); }

/* ---- 5 · Trust ticks — check off one after another ------- */
.w-bullet { opacity: 0; transform: translateX(-14px); }
.w-bullet.is-in {
  opacity: 1; transform: none;
  transition: opacity .42s var(--ease-out-quart), transform .5s var(--ease-out-expo);
}
.w-bullet .ck { transform: scale(0); transform-origin: center; }
.w-bullet.is-in .ck { transform: scale(1); transition: transform .45s var(--ease-spring) .12s; }

/* ---- 6 · Final CTA — cinema video then content ----------- */
.w-final-media, .w-final-scrim, .w-final-emblem { transition: opacity .9s var(--ease-out-quart); }
.w-final-inner { opacity: 0; }
.w-final.is-revealed { background: radial-gradient(120% 100% at 50% 110%, var(--gold-soft), transparent 60%), var(--off); }
.w-final.is-revealed .w-final-media,
.w-final.is-revealed .w-final-scrim { opacity: 0; visibility: hidden; }
.w-final.is-revealed .w-final-emblem { opacity: .12; }
.w-final.is-revealed .w-final-inner { opacity: 1; }
.w-final-inner > * { opacity: 0; transform: translateY(26px); }
.w-final.is-revealed .w-final-inner > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out-quart), transform .8s var(--ease-out-expo);
}
.w-final.is-revealed .w-final-inner > *:nth-child(2) { transition-delay: .08s; }
.w-final.is-revealed .w-final-inner > *:nth-child(3) { transition-delay: .16s; }
.w-final.is-revealed .w-final-inner > *:nth-child(4) { transition-delay: .24s; }

/* ---- 7 · ScorePass heartbeat (stays live to attract) ----- */
.w-pass-wrap { position: relative; display: flex; justify-content: center; }
.w-pass-heart {
  position: absolute; top: 50%; left: 50%; width: 108%; height: 116%;
  transform: translate(-50%, -50%); border-radius: var(--r-xl); z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--gold-glow) 0%, rgba(141,230,90,.18) 45%, transparent 72%);
  filter: blur(34px);
  animation: w-heartbeat 1.7s var(--ease-out-quart) infinite;
}
.w-pass-wrap .w-pass { position: relative; z-index: 1; }
@keyframes w-heartbeat {
  0%   { transform: translate(-50%,-50%) scale(.9);  opacity: .42; }
  12%  { transform: translate(-50%,-50%) scale(1.04); opacity: .85; }
  24%  { transform: translate(-50%,-50%) scale(.95); opacity: .55; }
  38%  { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
  58%  { transform: translate(-50%,-50%) scale(.9);  opacity: .42; }
  100% { transform: translate(-50%,-50%) scale(.9);  opacity: .42; }
}
html[data-motion="off"] .w-pass-heart, html[data-motion="subtle"] .w-pass-heart { animation: none; opacity: .6; }

/* ============================================================
   FROZEN-SAFE FALLBACK
   Every hidden pre-state above only animates when <html> carries
   .w-anim — which welcome.js adds ONLY when the page is actually
   visible and motion is on. Without it (reduced motion, motion
   off, print, or a backgrounded/never-focused render) the base
   end-state shows immediately so content is never stuck hidden.
   ============================================================ */
html:not(.w-anim) .w-welcome { opacity: 1 !important; transition: none !important; }
html:not(.w-anim) .w-welcome-emblem,
html:not(.w-anim) .w-welcome-kicker,
html:not(.w-anim) .w-welcome-title,
html:not(.w-anim) .w-welcome-sub,
html:not(.w-anim) .w-welcome-enter,
html:not(.w-anim) .w-welcome-hint,
html:not(.w-anim) .w-hero-inner, html:not(.w-anim) .w-hero-inner > *,
html:not(.w-anim) .w-scrollcue,
html:not(.w-anim) .w-engine-inner, html:not(.w-anim) .w-engine-inner > *, html:not(.w-anim) .w-step,
html:not(.w-anim) .w-final-inner, html:not(.w-anim) .w-final-inner > *,
html:not(.w-anim) .w-figure,
html:not(.w-anim) .w-eq .term, html:not(.w-anim) .w-eq .op,
html:not(.w-anim) .w-pillar,
html:not(.w-anim) .w-bullet, html:not(.w-anim) .w-bullet .ck {
  opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
}
/* steps stay lit in the static fallback */
html:not(.w-anim) .w-step .n { background: var(--gold); color: var(--on-lime); border-color: var(--gold); }
/* in the static fallback the intro videos are hidden so text reads on a plain bg */
html:not(.w-anim) .w-hero-media, html:not(.w-anim) .w-hero-scrim, html:not(.w-anim) .w-hero-vignette,
html:not(.w-anim) .w-engine-media, html:not(.w-anim) .w-engine-scrim,
html:not(.w-anim) .w-final-media, html:not(.w-anim) .w-final-scrim { opacity: 0 !important; visibility: hidden !important; }
html:not(.w-anim) .w-hero { background: radial-gradient(120% 100% at 50% -10%, var(--gold-soft), transparent 58%), var(--off); }
html:not(.w-anim) .w-engine { background: radial-gradient(110% 90% at 50% 30%, var(--gold-soft), transparent 60%), var(--off); }
html:not(.w-anim) .w-final { background: radial-gradient(120% 100% at 50% 110%, var(--gold-soft), transparent 60%), var(--off); }
html[data-motion="off"] .w-pass-heart, html[data-motion="subtle"] .w-pass-heart { animation: none; opacity: .6; }