/* =========================================================
   Sombra WOD · landing page
   Cores, fontes e tom do app (lib/core/theme.dart).
   ========================================================= */

@font-face { font-family: "Big Shoulders"; src: url("../assets/fonts/BigShouldersDisplay-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #141311;
  --bg-deep: #0f0e0d;
  --splash: #10100e;
  --surface: #1f1d1a;
  --surface-high: #23211d;
  --surface-tag: #2a2723;
  --line: #3b3833;
  --line-soft: #2f2c28;
  --line-strong: #4a463f;
  --text: #eeeae2;
  --text-soft: #cfcac0;
  --muted: #aba699;
  --faint: #7d796f;
  --yellow: #f2c230;
  --yellow-soft: #2b2618;
  --yellow-tag: #3a3218;
  --red: #e5533d;
  --red-text: #f07a66;
  --red-soft: #2a1a15;
  --on-yellow: #141311;

  --display: "Big Shoulders", "Barlow", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;

  --gutter: clamp(20px, 5vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --vh100: 100vh;
}
@supports (height: 100svh) { :root { --vh100: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
html.is-loading { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--yellow); color: var(--on-yellow); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 10001; padding: 10px 16px; border-radius: 10px; background: var(--yellow); color: var(--on-yellow); font-weight: 700; transition: top .2s; }
.skip:focus { top: 16px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.y { color: var(--yellow); }
.red { color: var(--red); }
svg.y { color: var(--yellow); }
.muted { color: var(--muted); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 13px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .8; }
.kicker--y { color: var(--yellow); }
.kicker--red { color: var(--red-text); }
.hero__kicker::before { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0 rgba(242, 194, 48, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(242, 194, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 194, 48, 0); } }

.h-lg { font: 800 clamp(42px, 6.2vw, 96px)/.92 var(--display); letter-spacing: .005em; text-wrap: balance; }
.h-xl { font: 900 clamp(52px, 8.6vw, 140px)/.88 var(--display); text-wrap: balance; }
.lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--text-soft); max-width: 54ch; text-wrap: pretty; }

.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; background: var(--surface-tag); color: var(--text-soft); font: 700 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.tag--y { background: var(--yellow-tag); color: var(--yellow); }
.tag--red { background: rgba(229, 83, 61, .18); color: var(--red-text); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 999px;
  font: 700 16px/1 var(--body); white-space: nowrap;
  transition: transform .3s var(--ease-out), background .3s, box-shadow .3s;
}
.btn--yellow { background: var(--yellow); color: var(--on-yellow); box-shadow: 0 8px 30px -10px rgba(242, 194, 48, .6); }
.btn--yellow:hover { box-shadow: 0 10px 40px -8px rgba(242, 194, 48, .85); }
.btn--sm { padding: 11px 18px; font-size: 14px; }

.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 186px; padding: 11px 22px 11px 16px;
  border-radius: 14px; border: 1px solid var(--line-strong);
  background: rgba(15, 14, 13, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text);
  transition: color .35s, border-color .35s, transform .4s var(--ease-out), box-shadow .35s;
}
.store::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: translateY(101%); transition: transform .45s var(--ease-out); }
.store:hover { color: var(--on-yellow); border-color: var(--yellow); box-shadow: 0 12px 40px -12px rgba(242, 194, 48, .7); }
.store:hover::before { transform: none; }
.store svg { width: 28px; height: 28px; flex: none; }
.store span { display: flex; flex-direction: column; font: 600 20px/1.05 var(--body); letter-spacing: -.01em; text-align: left; }
.store small { font: 500 11.5px/1.3 var(--body); letter-spacing: .02em; color: var(--muted); transition: color .35s; }
.store:hover small { color: rgba(20, 19, 17, .72); }
.stores--big .store { min-width: 214px; padding: 14px 26px 14px 18px; }
.stores--big .store svg { width: 32px; height: 32px; }
.stores--big .store span { font-size: 23px; }

/* ---------- Abertura (loader) ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: radial-gradient(ellipse 60% 45% at 50% 42%, rgba(189, 129, 6, .14), transparent 70%), var(--splash);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--ease-io);
  --k: 1;
}
.js .loader.is-quick { --k: .45; }
.js .loader.is-out { clip-path: inset(0 0 100% 0); pointer-events: none; }
.loader__embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__stage { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform 1s var(--ease-io), opacity .8s; }
.loader.is-out .loader__stage { transform: translateY(-14vh) scale(.92); opacity: 0; }
.loader__logo { position: relative; width: min(266px, 40vh, 66vw); aspect-ratio: 1; }
.loader__logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.loader__eyes { animation: l-fade calc(var(--k) * .35s) ease-in-out calc(var(--k) * .15s) both; filter: drop-shadow(0 0 10px rgba(242, 194, 48, .8)); }
.loader__hood { animation: l-hood calc(var(--k) * 1.15s) var(--ease-out) calc(var(--k) * .5s) both; }
.loader__bar { animation: l-bar calc(var(--k) * .85s) var(--ease-out) calc(var(--k) * .92s) both; }
.loader__word { display: flex; flex-direction: column; align-items: center; margin-top: clamp(8px, 2vh, 18px); animation: l-up calc(var(--k) * .7s) var(--ease-out) calc(var(--k) * 1.46s) both; }
.loader__word span:first-child { font: 800 clamp(44px, 9vh, 63px)/1 var(--display); letter-spacing: .05em; }
.loader__word span:last-child { font: 700 clamp(22px, 4.2vh, 30px)/1 var(--display); letter-spacing: .33em; margin: 6px 0 0 .33em; color: var(--yellow); }
.loader__line { width: 48px; height: 1px; margin: clamp(14px, 3vh, 28px) 0; background: rgba(242, 194, 48, .5); animation: l-fade calc(var(--k) * .6s) ease calc(var(--k) * 2s) both; }
.loader__tag { font: 400 11px/1 var(--body); letter-spacing: .2em; color: var(--muted); animation: l-fade calc(var(--k) * .6s) ease calc(var(--k) * 2.05s) both; }
.loader__skip { position: absolute; right: 24px; bottom: 24px; font: 600 13px var(--body); color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
@keyframes l-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes l-hood { from { opacity: 0; transform: translateY(9px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes l-bar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes l-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Cursor-sombra e granulado ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; opacity: 0; transition: opacity .4s; }
.has-cursor .cursor.is-on { opacity: 1; }
.cursor i {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid rgba(242, 194, 48, .75);
  background: radial-gradient(circle, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%);
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .35s, border-color .35s;
}
.cursor.is-hover i { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(242, 194, 48, .1); border-color: var(--yellow); }

.grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Navegação ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--gutter);
  transition: transform .55s var(--ease-out), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(20, 19, 17, .72); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-color: rgba(59, 56, 51, .6); }
.nav.is-hidden { transform: translateY(-105%); }
.nav__brand { display: flex; align-items: center; gap: 8px; font: 900 22px/1 var(--display); letter-spacing: .08em; }
.nav__brand img { width: 40px; height: 40px; }
.nav__brand b { color: var(--yellow); margin-left: 6px; font-weight: 700; letter-spacing: .2em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { position: relative; font: 600 15px/1 var(--body); color: var(--text-soft); padding: 6px 0; transition: color .25s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Barra de vida ---------- */
.life { display: inline-flex; align-items: center; gap: 10px; }
.life__label { font: 700 12px/1 var(--body); letter-spacing: .16em; color: var(--muted); }
.life__bar { display: flex; gap: 4px; }
.life__bar i { width: 13px; height: 8px; border-radius: 3px; background: var(--line); transition: background .3s, transform .35s var(--ease-out), box-shadow .3s; }
.life__bar i.on { background: var(--red); }
.life__bar i.pop { animation: seg-pop .6s var(--ease-out); }
@keyframes seg-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6, 1.9); box-shadow: 0 0 16px rgba(229, 83, 61, .9); } 100% { transform: scale(1); } }
.life__num { font: 800 18px/1 var(--display); min-width: 3.2ch; font-variant-numeric: tabular-nums; }
.life.is-hit { animation: hit .5s; }
@keyframes hit { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.life--nav { margin-left: 8px; }
.life--big { gap: 14px; }
.life--big .life__label { font-size: 13px; }
.life--big .life__bar { gap: 6px; }
.life--big .life__bar i { width: clamp(15px, 2.4vw, 30px); height: 14px; border-radius: 4px; }
.life--big .life__num { font-size: clamp(28px, 3vw, 40px); }

/* ---------- Cenas com palco fixo ---------- */
.scene { position: relative; }
.stage { position: sticky; top: 0; height: var(--vh100); overflow: hidden; }

/* Vídeo de fundo com duotone da marca */
.media { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 40%, #2a2414, var(--bg-deep) 70%); will-change: transform; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25) brightness(.72); opacity: 0; transition: opacity 1.4s ease; }
.media video.is-playing { opacity: 1; }
.media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--tint, var(--yellow)); mix-blend-mode: multiply; }
.media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, transparent 35%, rgba(15, 14, 13, .9) 100%),
    linear-gradient(to bottom, rgba(20, 19, 17, .7), rgba(20, 19, 17, .15) 30%, rgba(20, 19, 17, .25) 65%, var(--bg) 100%);
}
.media--red { --tint: #e5533d; }
.media--fire { --tint: #f08a2c; }
.media--soft::after { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(20, 19, 17, .55), var(--bg) 85%); }

/* ---------- 1 · Hero ---------- */
.hero { height: 190vh; }
.hero .media::after {
  background:
    radial-gradient(ellipse 70% 65% at 50% 48%, rgba(15, 14, 13, .35), rgba(15, 14, 13, .92) 100%),
    linear-gradient(to bottom, rgba(20, 19, 17, .6), transparent 30%, transparent 70%, var(--bg) 100%);
}
.hero__figure { position: absolute; inset: 0; margin: auto; width: min(96vh, 110vw); height: min(96vh, 110vw); z-index: 1; pointer-events: none; will-change: transform, opacity; }
.hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__hood { opacity: .11; }
.hero__eyes { filter: drop-shadow(0 0 8px rgba(242, 194, 48, .9)) drop-shadow(0 0 34px rgba(242, 194, 48, .55)); animation: blink 7s infinite; transform-origin: 50% 40%; }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
.hero__content {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 96px var(--gutter) 90px; text-align: center;
}
.hero__kicker { color: var(--text-soft); margin-bottom: 8px; }
.hero__title {
  position: relative; isolation: isolate;
  font: 900 clamp(64px, 13.4vw, 214px)/.84 var(--display);
  text-transform: uppercase; letter-spacing: .005em;
  margin: .1em 0 .22em; will-change: transform;
}
.hero__line { display: block; }
.hero__line--y { color: var(--yellow); text-shadow: 0 0 60px rgba(242, 194, 48, .25); }
.hero__shadow { position: absolute; inset: 0; z-index: -1; color: #000; opacity: .7; filter: blur(9px); pointer-events: none; will-change: transform; }
.hero__shadow span { display: block; }
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.js .hero .ch { opacity: 0; transform: translateY(.45em) rotate(4deg); filter: blur(10px); }
.js .hero.is-in .ch { opacity: 1; transform: none; filter: blur(0); transition: opacity .7s ease calc(var(--i) * 38ms + .15s), transform 1.1s var(--ease-out) calc(var(--i) * 38ms + .15s), filter .8s ease calc(var(--i) * 38ms + .15s); }
.hero__sub { max-width: 44ch; font-size: clamp(16px, 1.5vw, 20px); color: var(--text-soft); margin-bottom: 30px; text-wrap: balance; }
.hero__stores, .hero__sub, .hero__kicker, .hero__cue { will-change: transform, opacity; }
.hero__cue { position: absolute; z-index: 3; left: 50%; bottom: 26px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hero__cue i { width: 1px; height: 46px; background: linear-gradient(var(--yellow), transparent); transform-origin: top; animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 · Faixas ---------- */
.ticker { position: relative; z-index: 2; padding: 7vh 0 8vh; background: var(--bg); overflow: hidden; }
.ticker__row { white-space: nowrap; margin: 0 -6vw; }
.ticker__row--y { background: var(--yellow); color: var(--on-yellow); transform: rotate(-2.4deg); box-shadow: 0 20px 60px -20px rgba(242, 194, 48, .45); position: relative; z-index: 1; }
.ticker__row--o { background: var(--bg-deep); transform: rotate(1.6deg); margin-top: -6px; border-block: 1px solid var(--line); }
.ticker__track { display: inline-flex; align-items: center; gap: .45em; padding: .16em 0; font: 900 clamp(36px, 6.4vw, 92px)/1 var(--display); text-transform: uppercase; will-change: transform; }
.ticker__track i { font-style: normal; font-size: .42em; }
.ticker__row--o .ticker__track span { color: transparent; -webkit-text-stroke: 1.5px var(--text-soft); }
.ticker__row--o .ticker__track i { color: var(--yellow); }

/* ---------- 3 · Manifesto ---------- */
.manifesto { height: 260vh; }
.manifesto .stage { display: flex; align-items: center; background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(242, 194, 48, .05), transparent 70%); }
.manifesto__eyes { position: absolute; left: 50%; top: 50%; width: min(120vw, 1400px); translate: -50% -55%; opacity: .05; pointer-events: none; filter: drop-shadow(0 0 30px rgba(242, 194, 48, .6)); }
.manifesto__text { font: 800 clamp(36px, 5.7vw, 92px)/1.02 var(--display); letter-spacing: .005em; max-width: 19ch; }
.manifesto__text em { font-style: normal; color: var(--yellow); }
.manifesto__text strong { font-weight: 800; color: var(--red-text); }
.mw { display: inline-block; opacity: .12; filter: blur(6px); transform: translateY(.25em); }
.manifesto__foot { margin-top: 34px; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); opacity: 0; transition: opacity .6s; }
.manifesto__foot.is-in { opacity: 1; }

/* ---------- 4 · Como funciona ---------- */
.steps { height: 560vh; }
.steps__glow { position: absolute; right: 8%; top: 50%; width: 60vw; height: 60vw; translate: 0 -50%; background: radial-gradient(circle, rgba(242, 194, 48, .13), transparent 60%); pointer-events: none; }
.steps__grid { position: relative; height: 100%; width: min(1200px, 100% - 2 * var(--gutter)); margin: auto; display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: center; align-items: center; gap: 9vw; padding-top: 40px; }
.steps__copy { position: relative; padding-left: 34px; }
.steps__copy .kicker { margin-bottom: 26px; }
.steps__list { position: relative; min-height: 380px; }
.step { position: absolute; left: 0; top: 0; right: 0; visibility: hidden; transition: visibility 0s .6s; }
.step.is-active { visibility: visible; transition: none; }
.step__n { display: block; font: 900 clamp(70px, 9vw, 140px)/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); margin-bottom: 16px; transition: opacity .5s, transform .8s var(--ease-out); opacity: 0; transform: translateY(30px); }
.step.is-active .step__n { opacity: 1; transform: none; -webkit-text-stroke-color: var(--yellow); }
.step__title { font: 800 clamp(38px, 4.6vw, 70px)/.94 var(--display); margin-bottom: 20px; text-wrap: balance; }
.step p { font-size: clamp(16px, 1.35vw, 20px); color: var(--text-soft); max-width: 40ch; }
.sw { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.35em); transition: opacity .35s, filter .35s, transform .4s; }
.is-active .sw { opacity: 1; filter: blur(0); transform: none; transition: opacity .6s ease calc(var(--i) * 18ms + .08s), filter .6s ease calc(var(--i) * 18ms + .08s), transform .8s var(--ease-out) calc(var(--i) * 18ms + .08s); }
.steps__rail { position: absolute; left: 0; top: 4px; bottom: 0; width: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.steps__rail i { position: absolute; inset: 0; background: var(--yellow); transform-origin: top; transform: scaleY(0); }

.steps__device { position: relative; height: min(78vh, 740px); aspect-ratio: .49; }
.phone { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.phone__frame {
  position: absolute; inset: 0; padding: 3.4%;
  border-radius: 15% / 7.4%;
  background: linear-gradient(150deg, #47433c, #1a1916 28%, #121110 70%, #3a3731);
  box-shadow: inset 0 0 0 1.5px #5e5950, inset 0 0 0 4px #0c0c0b, 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 140px -40px rgba(242, 194, 48, .45);
}
.phone__frame::before, .phone__frame::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #3c3933; }
.phone__frame::before { left: -3px; top: 18%; height: 7%; box-shadow: 0 9vh 0 #3c3933; }
.phone__frame::after { right: -3px; top: 25%; height: 11%; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 12% / 5.8%; overflow: hidden; background: #121110; display: flex; flex-direction: column; container-type: inline-size; }
.phone__status { position: relative; z-index: 3; flex: none; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 2cqw 8cqw 0 10cqw; font: 600 4.4cqw/1 var(--body); color: var(--text); background: #131211; }
.phone__island { position: absolute; left: 50%; top: 3.2cqw; width: 30cqw; height: 8.4cqw; translate: -50% 0; background: #000; border-radius: 99px; }
.phone__icons { display: flex; align-items: flex-end; gap: 1cqw; }
.phone__icons b { width: 1.4cqw; background: var(--text); border-radius: 1px; }
.phone__icons b:nth-child(1) { height: 1.8cqw; } .phone__icons b:nth-child(2) { height: 2.6cqw; } .phone__icons b:nth-child(3) { height: 3.4cqw; width: 5.6cqw; border-radius: 1cqw; margin-left: 1.4cqw; }
.phone__view { position: relative; flex: 1; overflow: hidden; }
.screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: translateY(102%); transition: transform .9s var(--ease-io), filter .9s, opacity .9s; }
.screen.is-active { transform: none; z-index: 2; }
.screen.is-past { transform: scale(.88) translateY(-3%); filter: brightness(.3); border-radius: 6cqw; }

/* Tela da câmera lendo o quadro */
.screen--scan { background: radial-gradient(ellipse at 50% 40%, #2b2a27, #0d0d0c 75%); display: grid; place-items: center; }
.scan__board {
  position: relative; width: 78%; aspect-ratio: .82; padding: 9cqw 7cqw;
  display: flex; flex-direction: column; gap: 1.6cqw;
  background: linear-gradient(160deg, #f4f2ec, #dcd8ce);
  border: 2.4cqw solid #b9b4a8; border-radius: 2cqw;
  box-shadow: 0 6cqw 12cqw rgba(0, 0, 0, .6);
  transform: rotate(-3deg) translateY(-6%);
  font: 400 6.4cqw/1.15 var(--marker); color: #232a3d;
}
.scan__k { color: #c3392b; font-size: 6cqw; }
.scan__big { font-size: 15cqw; line-height: 1; color: #1b1b1b; margin: 1cqw 0 2cqw; }
.scan__note { margin-top: auto; font-size: 4.6cqw; color: #2f55a4; }
.scan__corner { position: absolute; width: 10cqw; height: 10cqw; border: 1cqw solid var(--yellow); z-index: 2; animation: corner 5s var(--ease-out) infinite; }
.scan__corner--tl { left: 7%; top: 13%; border-right: 0; border-bottom: 0; border-radius: 3cqw 0 0 0; }
.scan__corner--tr { right: 7%; top: 13%; border-left: 0; border-bottom: 0; border-radius: 0 3cqw 0 0; }
.scan__corner--bl { left: 7%; bottom: 25%; border-right: 0; border-top: 0; border-radius: 0 0 0 3cqw; }
.scan__corner--br { right: 7%; bottom: 25%; border-left: 0; border-top: 0; border-radius: 0 0 3cqw 0; }
@keyframes corner { 0% { transform: scale(1.25); opacity: 0; } 12%, 100% { transform: scale(1); opacity: 1; } }
.scan__line { position: absolute; left: 6%; right: 6%; top: 13%; height: 2px; z-index: 3; background: var(--yellow); box-shadow: 0 0 14px 3px rgba(242, 194, 48, .7); animation: scanline 5s linear infinite; }
.scan__line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 16cqw; background: linear-gradient(to top, rgba(242, 194, 48, .28), transparent); }
@keyframes scanline { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 44% { transform: translateY(54cqh); opacity: 1; } 48%, 100% { transform: translateY(54cqh); opacity: 0; } }
.screen--scan { container-type: size; }
.scan__flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; animation: flash 5s linear infinite; }
@keyframes flash { 0%, 47% { opacity: 0; } 49% { opacity: .85; } 58%, 100% { opacity: 0; } }
.scan__result { position: absolute; left: 6%; right: 6%; top: 4%; z-index: 4; display: flex; flex-wrap: wrap; gap: 2cqw; justify-content: center; }
.scan__chip { padding: 1.6cqw 3.2cqw; border-radius: 99px; background: rgba(31, 29, 26, .92); border: 1px solid var(--line-strong); font: 700 3.8cqw/1 var(--body); color: var(--text); opacity: 0; animation: chip 5s var(--ease-out) infinite; }
.scan__chip--y { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.scan__chip:nth-child(2) { animation-name: chip2; } .scan__chip:nth-child(3) { animation-name: chip3; } .scan__chip:nth-child(4) { animation-name: chip4; }
@keyframes chip { 0%, 52% { opacity: 0; transform: translateY(6cqw) scale(.8); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chip2 { 0%, 55% { opacity: 0; transform: translateY(6cqw) scale(.8); } 61%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chip3 { 0%, 58% { opacity: 0; transform: translateY(6cqw) scale(.8); } 64%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chip4 { 0%, 61% { opacity: 0; transform: translateY(6cqw) scale(.8); } 67%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.scan__status { position: absolute; left: 50%; bottom: 17%; z-index: 4; translate: -50% 0; display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 4cqw; border-radius: 99px; background: rgba(15, 14, 13, .86); border: 1px solid var(--line); font: 600 3.9cqw/1 var(--body); white-space: nowrap; }
.scan__status i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--yellow); animation: blinkdot .8s infinite alternate; }
@keyframes blinkdot { to { opacity: .2; } }
.scan__status { display: grid; grid-template-columns: auto auto; }
.scan__status span { grid-area: 1 / 2; animation: s1 5s steps(1) infinite; }
.scan__status .scan__s2 { color: var(--yellow); animation-name: s2; }
@keyframes s1 { 0% { opacity: 1; } 52% { opacity: 0; } }
@keyframes s2 { 0% { opacity: 0; } 52% { opacity: 1; } }
.scan__shutter { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; z-index: 4; width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow); box-shadow: 0 0 0 1.4cqw rgba(242, 194, 48, .25); }
.scan__shutter svg { width: 7cqw; height: 7cqw; }
.screen--scan:not(.is-active) *, .screen--scan:not(.is-active)::after { animation-play-state: paused !important; }

/* Etiquetas flutuando em volta do celular */
.chips { position: absolute; inset: 0; pointer-events: none; z-index: 5; will-change: transform; }
.chip-set { position: absolute; inset: 0; }
.fchip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(31, 29, 26, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .8);
  font: 700 15px/1.1 var(--body); white-space: nowrap;
  opacity: 0; transform: translateY(20px) scale(.85);
  transition: opacity .4s, transform .6s var(--ease-out);
}
.fchip svg { width: 18px; height: 18px; color: var(--yellow); }
.fchip svg.red { color: var(--red); }
.fchip--a { left: -26%; top: 22%; }
.fchip--b { right: -30%; bottom: 22%; }
.fchip--big { font: 900 34px/1 var(--display); color: var(--yellow); padding: 12px 18px; }
.fchip--y { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); font-size: 18px; }
.chip-set.is-active .fchip { opacity: 1; transform: none; transition-delay: .35s; }
.chip-set.is-active .fchip--b { transition-delay: .5s; }

/* ---------- 5 · Coach (texto vazado) ---------- */
.coach { height: 320vh; }
.ko { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: var(--bg); color: #fff; mix-blend-mode: multiply; overflow: hidden; }
.ko__text { display: block; font: 900 min(46vw, 74vh)/.8 var(--display); letter-spacing: -.005em; will-change: transform; }
.coach__copy { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.coach__copy .h-xl { max-width: 13ch; margin-bottom: 26px; }
.coach .media video { filter: grayscale(1) contrast(1.35) brightness(1.15); }
.coach .media::after { background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(15, 14, 13, .5)); }
.coach__shade { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(15, 14, 13, .5), rgba(15, 14, 13, .9)), linear-gradient(to bottom, transparent 70%, var(--bg)); }

/* ---------- 6 · Duelo ---------- */
.duel { height: 280vh; }
.duel .stage { display: flex; align-items: center; background: radial-gradient(ellipse 60% 60% at 50% 60%, rgba(242, 194, 48, .06), transparent 70%); }
.duel__bgnum { position: absolute; left: 50%; top: 52%; translate: -50% -50%; font: 900 44vw/.8 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(238, 234, 226, .05); pointer-events: none; white-space: nowrap; }
.duel__wrap { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head clock" "lanes lanes" "verdict verdict"; align-items: end; gap: 5vh 40px; padding-top: 50px; }
.duel__head { grid-area: head; }
.duel__wod { margin-top: 14px; font: 600 18px var(--body); color: var(--muted); }
.duel__clock { grid-area: clock; text-align: right; }
.duel__time { display: block; font: 900 clamp(84px, 13vw, 200px)/.82 var(--display); letter-spacing: .01em; }
.duel__time span { display: inline-block; width: .52em; text-align: center; }
.duel__time span.colon { width: .26em; }
.duel__delta { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font: 700 15px/1 var(--body); color: var(--text-soft); transition: color .3s, background .3s, border-color .3s; }
.duel__delta.is-ahead { color: var(--on-yellow); background: var(--yellow); border-color: var(--yellow); }
.duel__delta.is-behind { color: var(--red-text); background: var(--red-soft); border-color: rgba(229, 83, 61, .4); }
.lanes { grid-area: lanes; display: grid; gap: 22px; }
.lane { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 22px; }
.lane__label { display: flex; align-items: center; gap: 12px; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.lane__label img { width: 44px; height: 44px; }
.lane__you { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow); font: 900 17px/1 var(--display); box-shadow: 0 0 24px rgba(242, 194, 48, .5); }
.lane__t { margin-left: auto; font: 700 16px/1 var(--body); color: var(--muted); }
.lane--you .lane__t { color: var(--yellow); }
.lane__track { --q: 0; position: relative; height: 20px; display: grid; grid-template-columns: 21fr 15fr 9fr; gap: 5px; }
.lane__seg { border-radius: 6px; background: var(--surface); border: 1px solid var(--line-soft); }
.lane__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--q) * 100%); border-radius: 6px; pointer-events: none; }
.lane--shadow .lane__fill { background: repeating-linear-gradient(-45deg, rgba(171, 166, 153, .55) 0 6px, rgba(171, 166, 153, .25) 6px 12px); }
.lane--you .lane__fill { background: linear-gradient(90deg, #b88f17, var(--yellow)); box-shadow: 0 0 24px rgba(242, 194, 48, .45); }
.lane__runner { position: absolute; top: 50%; left: calc(var(--q) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; }
.lane--shadow .lane__runner { background: #6a665d; box-shadow: 0 0 0 6px rgba(106, 102, 93, .25), 0 0 26px 6px rgba(0, 0, 0, .8); filter: blur(.6px); }
.lane--you .lane__runner { background: var(--yellow); box-shadow: 0 0 0 6px rgba(242, 194, 48, .25), 0 0 30px rgba(242, 194, 48, .8); }
.lanes__rounds { display: grid; grid-template-columns: 21fr 15fr 9fr; gap: 5px; margin-left: calc(190px + 22px); font: 700 13px/1 var(--body); letter-spacing: .14em; color: var(--faint); }
.lanes__rounds span::before { content: "Round · "; font-weight: 500; }
.verdict { grid-area: verdict; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 74px; }
.verdict__stamp { display: inline-block; padding: 10px 22px 6px; border: 3px solid var(--yellow); border-radius: 10px; color: var(--yellow); font: 900 clamp(40px, 5vw, 64px)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; opacity: 0; transform: scale(2.4) rotate(-14deg); }
.verdict__info { display: inline-flex; align-items: center; gap: 8px; font: 600 18px var(--body); color: var(--text-soft); opacity: 0; transform: translateX(-16px); transition: opacity .5s .25s, transform .6s var(--ease-out) .25s; }
.verdict__info b { color: var(--yellow); }
.verdict__info svg { width: 18px; height: 18px; }
.duel.is-won .verdict__stamp { opacity: 1; transform: rotate(-6deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; box-shadow: 0 0 40px rgba(242, 194, 48, .35), inset 0 0 20px rgba(242, 194, 48, .2); }
.duel.is-won .verdict__info { opacity: 1; transform: none; }

/* ---------- 7 · Run ---------- */
.run { height: 520vh; }
.run .stage { display: flex; flex-direction: column; justify-content: center; gap: 5vh; padding-top: 50px; }
.run__bgword { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none; font: 900 32vh/1 var(--display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(238, 234, 226, .06); will-change: transform; }
.run__head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.run__head .kicker { transition: color .3s; }
.run__viewport { position: relative; width: 100%; margin-top: 56px; }
.run__marker { position: absolute; left: 50%; top: -24px; bottom: -20px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, var(--yellow) 0 6px, transparent 6px 12px); opacity: .7; z-index: 0; }
.run__marker span { position: absolute; top: -14px; left: 50%; translate: -50% -100%; padding: 6px 10px; border-radius: 8px; background: var(--yellow); color: var(--on-yellow); font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.run__track { position: relative; z-index: 1; display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0 calc(50vw - 130px); will-change: transform; }
.rnode { position: relative; flex: 0 0 260px; padding: 0 12px; opacity: .32; filter: saturate(.2); transition: opacity .5s, filter .5s; }
.rnode::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: var(--line); }
.rnode:first-child::before { left: 50%; }
.rnode:last-child::before { right: 50%; }
.rnode.is-past { opacity: 1; filter: none; }
.rnode__dot { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2.5px solid var(--line-strong); color: var(--muted); transition: transform .5s var(--ease-out), box-shadow .5s; }
.rnode__dot svg { width: 28px; height: 28px; }
.rnode__dot img { width: 100%; height: 100%; }
.rnode--win .rnode__dot { border-color: var(--yellow); color: var(--yellow); }
.rnode--lose .rnode__dot { border-color: var(--red); color: var(--red); }
.rnode--fire .rnode__dot { border-color: #6a665d; color: #f08a2c; }
.rnode--boss .rnode__dot { width: 92px; height: 92px; margin-top: -12px; border: 0; background: none; }
.rnode.is-now .rnode__dot { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(242, 194, 48, .12), 0 0 40px rgba(242, 194, 48, .35); }
.rnode--boss.is-now .rnode__dot { box-shadow: 0 0 60px rgba(229, 83, 61, .6); border-radius: 50%; }
.rnode__card { margin-top: 22px; padding: 18px 18px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: border-color .4s, transform .5s var(--ease-out), background .4s; }
.rnode.is-now .rnode__card { border-color: var(--yellow); background: #24211a; transform: translateY(-6px); }
.rnode--boss .rnode__card { border-color: rgba(229, 83, 61, .5); background: linear-gradient(160deg, #2c1a15, var(--surface)); }
.rnode--boss.is-now .rnode__card { border-color: var(--red); }
.rnode__day { font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rnode__name { margin: 8px 0 10px; font: 800 26px/1 var(--display); }
.rnode--boss .rnode__name { font-size: 40px; color: var(--red-text); text-transform: uppercase; }
.rnode__note { font: 600 15px/1.3 var(--body); color: var(--muted); }
.rnode--win .rnode__note { color: var(--yellow); }
.rnode--lose .rnode__note { color: var(--red-text); }
.rnode__extra { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 10px; border-radius: 10px; background: var(--yellow-soft); color: var(--yellow); font: 700 13px/1.1 var(--body); }
.rnode__extra svg { width: 15px; height: 15px; }
.rnode__week { position: absolute; left: 50%; top: -34px; translate: -50% 0; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); font: 700 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.run__foot { color: var(--muted); font-size: 17px; }

/* ---------- 8 · Cartas ---------- */
.cards { height: 270vh; --cw: clamp(126px, 17vw, 228px); }
.cards .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; padding-top: 40px; }
.cards__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cards__head .lead { margin-top: 20px; }
.deck { position: relative; width: var(--cw); height: calc(var(--cw) * 1.45); perspective: 1600px; flex: none; }
.gcard { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.gcard__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.gcard__face { position: absolute; inset: 0; border-radius: calc(var(--cw) * .08); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.gcard__back {
  transform: rotateY(180deg);
  background:
    url("../assets/img/logo.webp") center / 70% no-repeat,
    repeating-linear-gradient(45deg, rgba(242, 194, 48, .07) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #24211c, #121110);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 calc(var(--cw) * .035) #171614, inset 0 0 0 calc(var(--cw) * .04) rgba(242, 194, 48, .55), 0 20px 50px -15px rgba(0, 0, 0, .9);
}
.gcard__front {
  display: flex; flex-direction: column; padding: calc(var(--cw) * .09);
  background: radial-gradient(ellipse at 50% 0%, rgba(242, 194, 48, .14), transparent 60%), linear-gradient(170deg, #2a2720, #181715);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #1a1917, inset 0 0 0 calc(var(--cw) * .036) rgba(242, 194, 48, .4), 0 30px 60px -18px rgba(0, 0, 0, .95);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.gcard { cursor: pointer; }
.gcard.is-picked { z-index: 10; }
.gcard.is-picked .gcard__front { transform: translateY(-34px) scale(1.12); box-shadow: inset 0 0 0 calc(var(--cw) * .03) #1a1917, inset 0 0 0 calc(var(--cw) * .036) var(--yellow), 0 40px 70px -18px rgba(0, 0, 0, .95), 0 0 60px -6px rgba(242, 194, 48, .6); }
.cards__hint { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 2vh; }
.gcard:hover .gcard__front { transform: translateY(-14px) translateZ(1px); box-shadow: inset 0 0 0 calc(var(--cw) * .03) #1a1917, inset 0 0 0 calc(var(--cw) * .036) var(--yellow), 0 40px 70px -18px rgba(0, 0, 0, .95), 0 0 50px -10px rgba(242, 194, 48, .5); }
.gcard__type { font: 700 calc(var(--cw) * .055)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.gcard__ic { width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); margin: calc(var(--cw) * .1) 0 calc(var(--cw) * .07); color: var(--yellow); }
.gcard__ic--txt { display: grid; place-items: center; width: auto; font: 900 calc(var(--cw) * .2)/1 var(--display); color: var(--red-text); }
.gcard h3 { font: 800 calc(var(--cw) * .135)/.95 var(--display); margin-bottom: calc(var(--cw) * .05); }
.gcard p { font: 500 calc(var(--cw) * .066)/1.35 var(--body); color: var(--text-soft); }
.gcard__foot { margin-top: auto; font: 700 calc(var(--cw) * .045)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.gcard--risk .gcard__type { color: var(--red-text); }
.gcard--risk .gcard__front { background: radial-gradient(ellipse at 50% 0%, rgba(229, 83, 61, .2), transparent 60%), linear-gradient(170deg, #2b1c17, #181715); box-shadow: inset 0 0 0 calc(var(--cw) * .03) #1a1917, inset 0 0 0 calc(var(--cw) * .036) rgba(229, 83, 61, .55), 0 30px 60px -18px rgba(0, 0, 0, .95); }

/* ---------- 9 · Relíquias ---------- */
.relics { position: relative; padding: 14vh 0 16vh; }
.relics__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px 60px; margin-bottom: 56px; }
.relics__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.relic {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 22px 24px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .35s, translate .5s var(--ease-out);
}
.relic::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 194, 48, .16), transparent 70%); }
.relic:hover { border-color: rgba(242, 194, 48, .55); translate: 0 -6px; }
.relic:hover::before { opacity: 1; }
.relic__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 50%; background: var(--yellow-soft); color: var(--yellow); box-shadow: inset 0 0 0 1.5px rgba(242, 194, 48, .6); transition: transform .6s var(--ease-out), box-shadow .4s; }
.relic:hover .relic__ic { transform: rotate(-12deg) scale(1.08); box-shadow: inset 0 0 0 1.5px var(--yellow), 0 0 26px rgba(242, 194, 48, .5); }
.relic__ic svg { width: 26px; height: 26px; }
.relic__ic img { width: 100%; height: 100%; }
.relic h3 { font: 800 26px/1 var(--display); margin-bottom: 10px; }
.relic p { font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.relic--more { background: transparent; border-style: dashed; }
.relic--more .relic__ic { background: none; box-shadow: none; }

/* ---------- 10 · Chefão ---------- */
.boss { height: 290vh; }
.boss .stage { display: flex; align-items: center; text-align: center; }
.boss .media::after { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(15, 14, 13, .45), rgba(15, 14, 13, .95)), linear-gradient(to bottom, var(--bg), transparent 20%, transparent 80%, var(--bg)); }
.boss__flash { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 50%, rgba(229, 83, 61, .55), transparent 65%); opacity: 0; pointer-events: none; }
.boss__wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.boss__title { margin-bottom: 1vh; }
.reel { height: .9em; overflow: hidden; font: 900 clamp(96px, 21vw, 340px)/.9 var(--display); text-transform: uppercase; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); transition: color .3s, text-shadow .4s; }
.reel__list { will-change: transform; }
.reel__list span { display: block; height: .9em; line-height: .9em; }
.boss__wod { display: flex; align-items: center; gap: 12px; margin: 2vh 0 22px; font: 600 clamp(17px, 1.6vw, 22px) var(--body); color: var(--text-soft); opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .7s var(--ease-out); }
.boss__lead { margin-inline: auto; opacity: 0; transform: translateY(16px); transition: opacity .5s .1s, transform .7s var(--ease-out) .1s; }
.boss.is-landed .reel { color: var(--red-text); text-shadow: 0 0 80px rgba(229, 83, 61, .55); }
.boss.is-landed .boss__wod, .boss.is-landed .boss__lead { opacity: 1; transform: none; }
.boss.is-landed .boss__flash { animation: bflash 1s ease-out; }
.boss.is-landed .boss__wrap { animation: shake .55s; }
@keyframes bflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translate(-10px, 4px) rotate(-.6deg); } 30% { transform: translate(9px, -5px) rotate(.5deg); } 45% { transform: translate(-6px, 3px); } 60% { transform: translate(5px, -2px); } 80% { transform: translate(-2px, 1px); } }
.boss__ticker { position: absolute; left: 0; right: 0; bottom: 4vh; z-index: 2; white-space: nowrap; border-block: 1px solid rgba(229, 83, 61, .3); background: rgba(15, 14, 13, .6); }
.boss__ticker .ticker__track { font: 600 15px/1 var(--body); text-transform: none; gap: 1.2em; padding: 14px 0; color: var(--muted); }
.boss__ticker b { color: var(--text); font: 800 18px var(--display); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.boss__ticker i { color: var(--red); font-size: 12px; }

/* ---------- 11 · Ranking ---------- */
.rank { padding: 18vh 0 16vh; background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(242, 194, 48, .06), transparent 70%); }
.rank__grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); align-items: center; gap: 60px; }
.rank__copy .lead { margin: 26px 0 14px; }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 30px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; min-width: 130px; padding: 13px 18px; border-radius: 12px; font: 700 16px/1 var(--body); color: var(--muted); transition: color .35s; }
.seg button[aria-selected="true"] { color: var(--on-yellow); }
.seg__pill { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc(50% - 5px); border-radius: 12px; background: var(--yellow); transition: transform .5s var(--ease-out); }
.seg.is-net .seg__pill { transform: translateX(100%); }
.board { padding: 26px 22px 22px; border-radius: 28px; background: linear-gradient(170deg, #1d1b18, #151412); border: 1px solid var(--line); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); --rh: 74px; }
.board__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.board__top .kicker { margin: 0; }
.board__top .kicker::before { display: none; }
.board__wod { font: 700 13px var(--body); letter-spacing: .14em; color: var(--muted); }
.board__list { position: relative; list-style: none; margin: 0; padding: 0; height: calc(6 * var(--rh)); }
.brow {
  --pos: 0;
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rh) - 10px);
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px;
  padding: 0 12px 0 18px; border-radius: 18px;
  background: var(--surface-high); border: 1px solid var(--line-soft);
  transform: translateY(calc(var(--pos) * var(--rh)));
  transition: transform 1s var(--ease-io), border-color .4s, background .4s, box-shadow .5s;
}
.brow__pos { font: 900 32px/1 var(--display); color: var(--faint); transition: color .4s; }
.brow__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brow__name { display: flex; align-items: center; gap: 10px; font: 700 19px/1 var(--body); }
.brow__sub { font: 500 13px/1 var(--body); color: var(--faint); height: 13px; opacity: 0; transition: opacity .4s; }
.brow__val { min-width: 92px; padding: 10px 12px; border-radius: 12px; text-align: center; font: 700 18px/1 var(--body); background: var(--surface-tag); color: var(--text); transition: background .4s, color .4s; font-variant-numeric: tabular-nums; }
.board.is-net .brow__pos { color: var(--yellow); }
.board.is-net .brow__val.is-pos { background: var(--yellow); color: var(--on-yellow); }
.board.is-net .brow__val.is-neg { background: var(--red-soft); color: var(--red-text); }
.board.is-net .brow__sub { opacity: 1; }
.brow--me { border-color: rgba(242, 194, 48, .7); background: var(--yellow-soft); }
.board.is-net .brow--star { box-shadow: 0 0 0 1px var(--yellow), 0 0 50px -6px rgba(242, 194, 48, .55); }
.board__foot { margin-top: 8px; color: var(--faint); font-size: 14px; }

/* ---------- 12 · Fogueira ---------- */
.fire { position: relative; min-height: 120vh; display: flex; align-items: center; overflow: hidden; padding: 16vh 0; }
.fire .media::after { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(15, 14, 13, .55), rgba(15, 14, 13, .95)), linear-gradient(to bottom, var(--bg), transparent 25%, transparent 75%, var(--bg)); }
.fire__embers { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.fire__wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.fire__wrap .lead { margin-inline: auto; }
.fire__ic { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 50px rgba(240, 138, 44, .45); animation: flicker 3s infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.04) rotate(-1deg); } 60% { transform: scale(.98) rotate(1deg); } }
.fire__life { position: relative; margin-top: 10px; padding: 14px 18px; border-radius: 16px; background: rgba(15, 14, 13, .7); border: 1px solid var(--line); }
.life__plus { position: absolute; right: -14px; top: -16px; padding: 6px 10px; border-radius: 10px; background: var(--red); color: #fff; font: 800 16px/1 var(--display); opacity: 0; transform: translateY(10px) scale(.7); transition: opacity .4s, transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.fire__life.is-healed .life__plus { opacity: 1; transform: none; }

/* ---------- 13 · Perguntas ---------- */
.faq { padding: 16vh 0; border-top: 1px solid var(--line-soft); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px 80px; align-items: start; }
.qa { border-bottom: 1px solid var(--line); overflow: hidden; }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font: 700 clamp(18px, 1.6vw, 22px)/1.3 var(--body); transition: color .25s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--yellow); }
.qa summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform .45s var(--ease-out), background .3s, border-color .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 2px; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { transform: rotate(45deg); background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.qa p { padding: 0 50px 26px 0; color: var(--text-soft); font-size: 17px; }

/* ---------- 14 · Baixar ---------- */
.cta { height: 170vh; }
.cta .stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.cta__glow { position: absolute; left: 50%; top: 30%; width: 90vmax; height: 90vmax; translate: -50% -50%; background: radial-gradient(circle, rgba(242, 194, 48, .16), transparent 55%); pointer-events: none; z-index: 1; }
.cta__wrap { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: max(80px, 11vh); }
.cta__logo { position: relative; width: clamp(110px, 15vh, 170px); aspect-ratio: 1; margin-bottom: 4px; }
.cta__logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta__eyes { filter: drop-shadow(0 0 8px rgba(242, 194, 48, .9)) drop-shadow(0 0 24px rgba(242, 194, 48, .6)); will-change: transform; }
.cta__title { font: 900 clamp(56px, 9vw, 150px)/.86 var(--display); text-transform: uppercase; }
.cta__title span { display: inline-block; }
.cta .lead { margin-bottom: 10px; }
.trio { position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(980px, 100%); height: 0; translate: -50% 0; pointer-events: none; }
.mini { position: absolute; bottom: 0; left: 50%; width: clamp(150px, 17vw, 250px); aspect-ratio: .49; padding: 2.6%; border-radius: 15% / 7.4%; background: linear-gradient(150deg, #47433c, #161513 30%, #121110 70%, #3a3731); box-shadow: inset 0 0 0 1.5px #5e5950, 0 40px 80px -20px rgba(0, 0, 0, .9); will-change: transform; }
.mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 12% / 5.8%; }
.mini--c { z-index: 2; }

/* ---------- Rodapé ---------- */
.footer { position: relative; z-index: 2; padding: 50px 0 40px; border-top: 1px solid var(--line-soft); background: var(--bg-deep); }
.footer__grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer__brand img { width: 190px; height: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 26px; }
.footer__links a { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--body); color: var(--text-soft); transition: color .25s; }
.footer__links a:hover { color: var(--yellow); }
.footer__links svg { width: 18px; height: 18px; }
.footer__note { width: 100%; color: var(--faint); font-size: 14px; }

/* ---------- Aviso (toast) ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 9600; translate: -50% 0; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 14px; background: var(--surface-high); border: 1px solid var(--yellow); color: var(--text); font: 600 15px/1.35 var(--body); box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .35s, transform .5s var(--ease-out); }
.toast.is-on { opacity: 1; transform: none; }

/* ---------- Revelar ao rolar ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s), filter .9s var(--ease-out) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1180px) {
  .life--nav { display: none; }
}
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .relics__head, .faq__grid, .rank__grid { grid-template-columns: 1fr; }
  .relics__grid { grid-template-columns: repeat(2, 1fr); }
  .rank__grid { gap: 48px; }
  .fchip--a { left: -18%; } .fchip--b { right: -20%; }
}
@media (max-width: 860px) {
  .steps__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 22px; padding-top: 78px; }
  .steps__device { order: -1; height: min(52vh, 470px); margin: 0 auto; }
  .steps__copy { padding-left: 0; text-align: center; }
  .steps__copy .kicker { display: none; }
  .steps__list { min-height: 220px; }
  .step__n { display: none; }
  .step__title { font-size: clamp(32px, 8.4vw, 46px); margin-bottom: 12px; }
  .step p { font-size: 15.5px; margin: 0 auto; }
  .steps__rail { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 2px; margin-top: -12px; }
  .steps__rail i { transform-origin: left; }
  .fchip { padding: 8px 11px; font-size: 12.5px; border-radius: 12px; }
  .fchip--big { font-size: 24px; }
  .fchip--y { font-size: 15px; }
  .fchip--a { left: -20%; top: 14%; } .fchip--b { right: -22%; bottom: 14%; }

  .duel__wrap { grid-template-columns: 1fr; grid-template-areas: "head" "clock" "lanes" "verdict"; gap: 26px; }
  .duel__clock { text-align: left; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .duel__time { font-size: clamp(72px, 22vw, 120px); }
  .lane { grid-template-columns: 1fr; gap: 10px; }
  .lane__label { font-size: 22px; }
  .lane__label img, .lane__you { width: 34px; height: 34px; font-size: 14px; }
  .lanes__rounds { margin-left: 0; }
  .lanes__rounds span::before { content: ""; }
  .lanes__rounds span::after { content: " reps"; font-weight: 500; }
  .cards { --cw: 138px; }

  .run__track { padding: 0 calc(50vw - 110px); }
  .rnode { flex-basis: 220px; padding: 0 9px; }
  .rnode__name { font-size: 22px; }
  .rnode--boss .rnode__name { font-size: 32px; }
  .rnode__card { padding: 14px; }
  .run__bgword { font-size: 24vh; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { padding-block: 10px; gap: 12px; }
  .nav__brand { font-size: 19px; }
  .nav__brand img { width: 34px; height: 34px; }
  .btn--sm { padding: 10px 14px; font-size: 13px; }
  .hero__content { padding-top: 84px; }
  .hero__sub { font-size: 15.5px; margin-bottom: 24px; }
  .store { min-width: 0; padding: 9px 16px 9px 12px; gap: 10px; }
  .store svg { width: 24px; height: 24px; }
  .store span { font-size: 17px; }
  .stores--big .store { min-width: 0; padding: 11px 18px 11px 14px; }
  .stores--big .store span { font-size: 19px; }
  .relics__grid { grid-template-columns: 1fr; }
  .relic { padding: 22px 20px; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; }
  .relic__ic { grid-row: span 2; margin: 0; }
  .relic h3 { font-size: 23px; margin-bottom: 6px; }
  .board { --rh: 64px; padding: 20px 14px 16px; border-radius: 22px; }
  .brow { grid-template-columns: 34px 1fr auto; padding: 0 10px 0 12px; border-radius: 14px; }
  .brow__pos { font-size: 26px; }
  .brow__name { font-size: 16px; gap: 6px; }
  .brow__name .tag { font-size: 10px; padding: 3px 6px; letter-spacing: .08em; }
  .brow__val { min-width: 72px; font-size: 15px; padding: 9px 8px; }
  .seg button { min-width: 0; padding: 12px 16px; }
  .duel__delta { font-size: 13px; }
  .verdict { gap: 14px; }
  .verdict__info { font-size: 15px; }
  .qa p { padding-right: 0; }
  .footer__brand img { width: 160px; }
}
@media (max-height: 640px) and (min-width: 861px) {
  .steps__list { min-height: 300px; }
  .step__n { font-size: 60px; }
}

/* Movimento reduzido: sem paralaxe decorativa, sem loops */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .grain, .cursor { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .mw { filter: none; }
}

/* Os ícones redondos do Instagram têm um brilho quadrado quase invisível: corta no círculo. */
.fire__ic, .rnode__dot img, .lane__label img, .relic__ic img {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 90%, transparent 97%);
  mask-image: radial-gradient(circle closest-side, #000 90%, transparent 97%);
}