/* ─── FONTS ──────────────────────────────────────────── */
/* Urbanist + Inter loaded via Google Fonts <link> in each HTML.
   Urbanist  → UI default (font-sans): headings, buttons, labels, badges, stats, CTAs.
   Inter     → prose      (font-prose): long body copy, descriptions, list items.
   Auto-applied to body-text classes below; opt-in via .font-prose. */
.text-hero-sub,
.text-body-xs,
.text-body-sm,
.text-body-lg,
.text-step-xs,
.text-step-sm,
.text-step-md,
.font-prose {
  font-family: 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif';
}

/* Footer is UI-y (nav links, labels) — keep on Urbanist except prose-tagged blocks (legal copy). */
footer .text-hero-sub,
footer .text-body-xs,
footer .text-body-sm,
footer .text-body-lg,
footer .text-step-xs,
footer .text-step-sm,
footer .text-step-md {
  font-family: 'Urbanist', 'ui-sans-serif', 'system-ui', 'sans-serif';
}
footer .font-prose {
  font-family: 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif';
}

/* Footer pixel-art pattern strip — full bleed, anchored to viewport left, repeats on wide screens. */
.footer-pattern {
  height: 100px;
  background-image: url('pattern.svg');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 1360px 100px;
  pointer-events: none;
}

/* ─── FLUID TYPOGRAPHY ───────────────────────────────── */
.text-display    { font-size: clamp(40px, 5vw, 68px);    line-height: 1.05; letter-spacing: -0.035em; }

/* Hero headline — balanced wrapping, tighter tracking */
.hero-h1 { text-wrap: balance; }
.text-hero-mega  { font-size: clamp(32px, 5vw, 54px);   line-height: 1.03; letter-spacing: -0.04em;  text-wrap: balance; hyphens: manual; }
.text-hero-kicker{ font-size: clamp(28px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.04em;  text-wrap: balance; hyphens: manual; }
.text-display-sm { font-size: clamp(38px, 5vw, 72px);   line-height: 1.05; letter-spacing: -0.04em; }
.text-h1         { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.1;  letter-spacing: -0.04em; }
.text-h2         { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.2;  letter-spacing: -0.03em; }
.text-h3         { font-size: clamp(18px, 1.8vw, 26px); line-height: 1.2;  letter-spacing: -0.02em; }
.text-section    { font-size: clamp(28px, 2.5vw, 40px); line-height: 1.1;  letter-spacing: -0.03em; }
.text-hero-sub   { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; }
.text-cta        { font-size: clamp(28px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -0.04em; }

/* ─── SELECTION ──────────────────────────────────────── */
::selection { background: #C8F135; color: #1e2330; }

/* ─── PAGE-LOAD STAGGER ──────────────────────────────── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.load-0 { animation: revealUp 0.45s cubic-bezier(0.16,1,0.3,1)   0ms both; }
.load-1 { animation: revealUp 0.45s cubic-bezier(0.16,1,0.3,1)  70ms both; }
.load-2 { animation: revealUp 0.45s cubic-bezier(0.16,1,0.3,1) 140ms both; }
.load-3 { animation: revealUp 0.45s cubic-bezier(0.16,1,0.3,1) 210ms both; }
.load-4 { animation: revealUp 0.45s cubic-bezier(0.16,1,0.3,1) 280ms both; }
.load-5 { animation: revealUp 0.45s cubic-bezier(0.16,1,0.3,1) 370ms both; }

/* ─── SCROLL REVEAL ──────────────────────────────────── */
.sr { opacity: 0; transform: translateY(14px); transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.sr.in { opacity: 1; transform: none; }
.sr-d1 { transition-delay: 50ms; }
.sr-d2 { transition-delay: 100ms; }
.sr-d3 { transition-delay: 150ms; }
.sr-d4 { transition-delay: 200ms; }

/* ─── BUTTON MICROINTERACTIONS ───────────────────────── */
.btn-retro { transition: transform 0.12s cubic-bezier(0.16,1,0.3,1); }
.btn-retro:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 #1e2330; }
.btn-retro:active { transform: translate(4px,4px); box-shadow: none; }

.btn-lift { transition: transform 0.15s cubic-bezier(0.16,1,0.3,1); }
.btn-lift:hover  { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(30,35,48,0.1), 0 0 0 1px rgba(30,35,48,0.06); }
.btn-lift:active { transform: translateY(0);    box-shadow: none; }

/* Magnetic button wrapper — inner element translates with cursor */
.magnetic { display: inline-block; will-change: transform; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }

/* ─── BRANDED FOCUS ──────────────────────────────────── */
*:focus-visible { outline: 2px solid #5B3FD4; outline-offset: 3px; border-radius: 6px; }
a:focus-visible, button:focus-visible { outline-offset: 4px; }

/* ─── HERO · WORD-REVEAL ─────────────────────────────── */
.word       { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.02em 0.02em 0.18em; margin-bottom: -0.18em; }
.word-inner { display: inline-block; transform: translateY(112%); opacity: 0; will-change: transform, opacity; }

.hero-ready .hero-headline .word-inner { animation: wordRise 0.95s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.hero-ready .hero-kicker   .word-inner { animation: wordRise 1.05s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: calc(var(--i, 0) * 80ms + 880ms); }
@keyframes wordRise { to { transform: translateY(0); opacity: 1; } }

/* Headline is static after reveal (no ambient floating loop). */

/* ─── HERO · SPARKLINE DRAW ──────────────────────────── */
.sparkline-path { stroke-dasharray: 420; stroke-dashoffset: 420; }
.hero-ready .sparkline-path { animation: sparkDraw 1.8s cubic-bezier(0.65,0,0.35,1) 1.1s forwards; }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

/* ─── HERO · BENTO FLOAT-IN ──────────────────────────── */
.bento-card { opacity: 0; transform: translateY(18px) scale(0.98); will-change: transform, opacity; }
.hero-ready .bento-card { animation: bentoIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: calc(var(--i, 0) * 90ms + 900ms); }
@keyframes bentoIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Hero earn badge should not appear before hero entrance animation. */
.hero-earn-badge { opacity: 0; transform: translateY(10px) rotate(6deg) scale(0.96); will-change: transform, opacity; }
.hero-ready .hero-earn-badge { animation: earnBadgeIn 0.6s cubic-bezier(0.16,1,0.3,1) 1.05s forwards; }
@keyframes earnBadgeIn { to { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); } }

/* ─── HOW IT WORKS · ANIMATION GATING ────────────────── */
[data-step-card]:not(.is-active) [data-step-buy-demo],
[data-step-card]:not(.is-active) [data-step-buy-demo] *,
[data-step-card]:not(.is-active) .step-ship-demo,
[data-step-card]:not(.is-active) .step-ship-demo *,
[data-step-card]:not(.is-active) .step-notify-demo,
[data-step-card]:not(.is-active) .step-notify-demo *,
[data-step-card]:not(.is-active) .step-payday-demo,
[data-step-card]:not(.is-active) .step-payday-demo * {
  animation-name: none !important;
}
[data-step-card]:not(.is-active) .step-ship-particle {
  animation-name: stepParticleFly !important;
}

/* ─── HOW IT WORKS · STEP 01 DEMO ─────────────────────── */
.step-buy-demo {
  position: relative;
  min-height: 76px;
  padding: 12px 0 12px 28px;
}
.step-buy-button {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: #c8f135;
  color: #1e2330;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 24px -8px rgba(30, 35, 48, 0.18),
              0 2px 6px rgba(30, 35, 48, 0.08),
              0 0 0 1px rgba(30, 35, 48, 0.05);
  transition: transform 320ms cubic-bezier(0.34, 1.4, 0.5, 1),
              background-color 360ms cubic-bezier(0.5, 0, 0.2, 1),
              box-shadow 320ms cubic-bezier(0.5, 0, 0.2, 1);
}
.step-buy-label {
  display: inline-block;
  transition: opacity 200ms ease;
}
.step-buy-icon-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.step-buy-cart,
.step-buy-spinner-wrap,
.step-buy-check {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-buy-cart {
  font-size: 14px;
  line-height: 1;
  opacity: 1;
  transform: scale(1);
}
.step-buy-spinner-wrap {
  opacity: 0;
  transform: scale(0.3);
}
.step-buy-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(30, 35, 48, 0.2);
  border-top-color: #1e2330;
  border-radius: 999px;
  animation: stepSpin 0.8s linear infinite;
}
.step-buy-check {
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.3);
}
.step-buy-demo.is-loading .step-buy-cart,
.step-buy-demo.is-success .step-buy-cart {
  opacity: 0;
  transform: scale(0.4);
}
.step-buy-cursor {
  position: absolute;
  top: 9px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translate3d(-30px, 22px, 0);
  transition: transform 660ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.step-buy-lead-tag {
  order: 2;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #5b3fd4;
  background: rgba(91, 63, 212, 0.12);
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
}
.step-buy-cursor-icon {
  order: 1;
  font-size: 18px;
  color: #5b3fd4;
  transform: rotate(-10deg);
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-buy-demo.is-click .step-buy-cursor {
  transform: translate3d(-118px, 16px, 0);
}
.step-buy-demo.is-click .step-buy-cursor-icon {
  transform: rotate(-10deg) scale(0.85);
}
.step-buy-demo.is-click .step-buy-button {
  transform: scale(0.94);
  box-shadow: 0 4px 12px -6px rgba(30, 35, 48, 0.16),
              0 1px 3px rgba(30, 35, 48, 0.06),
              0 0 0 1px rgba(30, 35, 48, 0.05);
}
.step-buy-demo.is-loading .step-buy-button {
  background: #d8e5ff;
  transform: scale(1);
}
.step-buy-demo.is-loading .step-buy-spinner-wrap {
  opacity: 1;
  transform: scale(1);
}
.step-buy-demo.is-loading .step-buy-cursor {
  transform: translate3d(-118px, 16px, 0);
}
.step-buy-demo.is-loading .step-buy-cursor-icon {
  transform: rotate(-10deg);
}
.step-buy-demo.is-success .step-buy-button {
  background: #d8f5a2;
  transform: scale(1);
}
.step-buy-demo.is-success .step-buy-check {
  opacity: 1;
  transform: scale(1);
}
.step-buy-demo.is-success .step-buy-cursor {
  animation: stepCursorReturn 660ms cubic-bezier(0.32, 0.72, 0.18, 1) forwards;
}
@keyframes stepSpin { to { transform: rotate(360deg); } }
@keyframes stepCursorReturn {
  0%   { transform: translate3d(-118px, 16px, 0); }
  100% { transform: translate3d(-30px, 22px, 0); }
}

/* ─── HOW IT WORKS · STEP 02 DEMO ─────────────────────── */
.step-ship-demo {
  position: relative;
  min-height: 84px;
  container-type: inline-size;
  --ship-cycle: 4s;
  --truck-stop: calc(100cqw - 90px);
  --truck-exit: calc(100cqw + 60px);
  --box-land: calc(var(--truck-stop) - 32px);
}
.step-ship-truck-wrap {
  position: absolute;
  left: 10px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  animation: stepCarDrive var(--ship-cycle) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.step-ship-car {
  font-size: 33px;
  color: #2d4478;
  line-height: 1;
}
.step-ship-lines {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: 4px;
  pointer-events: none;
  opacity: 0;
  animation: stepLinesGate var(--ship-cycle) linear forwards;
}
.step-ship-lines span {
  display: block;
  height: 1.5px;
  background: rgba(45, 68, 120, 0.55);
  border-radius: 999px;
  transform-origin: right center;
  animation: stepSpeedLine 0.55s ease-out infinite;
}
.step-ship-lines span:nth-child(1) { width: 14px; animation-delay: 0s; }
.step-ship-lines span:nth-child(2) { width: 20px; animation-delay: 0.12s; }
.step-ship-lines span:nth-child(3) { width: 10px; animation-delay: 0.24s; }

.step-ship-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.step-ship-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(45, 68, 120, 0.45);
  animation: stepParticleFly 0.85s linear infinite;
}
.step-ship-particle:nth-child(1) { top: 24%; right: 22%; animation-delay: 0s; }
.step-ship-particle:nth-child(2) { top: 48%; right: 42%; animation-delay: 0.1s; width: 2px; height: 2px; }
.step-ship-particle:nth-child(3) { top: 70%; right: 14%; animation-delay: 0.22s; }
.step-ship-particle:nth-child(4) { top: 32%; right: 60%; animation-delay: 0.34s; width: 4px; height: 4px; }
.step-ship-particle:nth-child(5) { top: 56%; right: 78%; animation-delay: 0.46s; }
.step-ship-particle:nth-child(6) { top: 18%; right: 88%; animation-delay: 0.58s; width: 2px; height: 2px; }
.step-ship-particle:nth-child(7) { top: 64%; right: 50%; animation-delay: 0.7s; }
.step-ship-particle:nth-child(8) { top: 40%; right: 30%; animation-delay: 0.05s; width: 2px; height: 2px; }

.step-ship-box {
  position: absolute;
  left: var(--box-land);
  bottom: 14px;
  font-size: 24px;
  color: #14a44d;
  line-height: 1;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: stepBoxFly var(--ship-cycle) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes stepCarDrive {
  0%, 4%   { transform: translateX(0) rotate(0deg); opacity: 1;
             animation-timing-function: cubic-bezier(0.22, 0.65, 0.3, 1); }
  28%  { transform: translateX(calc(var(--truck-stop) + 6px)) rotate(-1.5deg);
         animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1); }
  32%  { transform: translateX(var(--truck-stop)) rotate(0deg); opacity: 1;
         animation-timing-function: ease-out; }
  56%  { transform: translateX(var(--truck-stop)) rotate(0deg); opacity: 1;
         animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  76%  { transform: translateX(var(--truck-exit)) rotate(0deg); opacity: 1; }
  78%  { transform: translateX(var(--truck-exit)) rotate(0deg); opacity: 0; }
  80%  { transform: translateX(-100px) rotate(0deg); opacity: 0;
         animation-timing-function: cubic-bezier(0.22, 0.65, 0.3, 1); }
  82%  { transform: translateX(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes stepLinesGate {
  0%       { opacity: 0; }
  6%, 28%  { opacity: 1; }
  32%, 56% { opacity: 0; }
  60%, 76% { opacity: 1; }
  78%, 82% { opacity: 0; }
  84%, 96% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes stepSpeedLine {
  0%   { opacity: 0; transform: translateX(0) scaleX(0.4); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-16px) scaleX(1); }
}
@keyframes stepParticleFly {
  0%   { opacity: 0; transform: translateX(0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-120px) scale(0.4); }
}
@keyframes stepBoxFly {
  0%, 32% {
    opacity: 0;
    transform: translate(36px, 4px) scale(0.4);
    animation-timing-function: ease-out;
  }
  36% {
    opacity: 1;
    transform: translate(28px, -10px) scale(0.85);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  42% {
    opacity: 1;
    transform: translate(14px, -28px) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  50% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  54% {
    opacity: 1;
    transform: translate(0, -3px) scale(1.08);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  68%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.92);
  }
}

/* ─── HOW IT WORKS · STEP 03 DEMO ─────────────────────── */
.step-notify-demo {
  position: relative;
  min-height: 76px;
}
.step-notify-card {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 24px -8px rgba(30, 35, 48, 0.18),
              0 2px 6px rgba(30, 35, 48, 0.08),
              0 0 0 1px rgba(30, 35, 48, 0.05);
  padding: 8px 12px 8px 8px;
  will-change: transform, opacity;
  animation: stepNotifyDrop 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.step-notify-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5b3fd4 0%, #7d63ea 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}
.step-notify-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.step-notify-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1e2330;
  line-height: 1.1;
}
.step-notify-app {
  letter-spacing: 0.01em;
}
.step-notify-time {
  color: rgba(30, 35, 48, 0.42);
  font-weight: 500;
  font-size: 10px;
}
.step-notify-text {
  font-size: 12px;
  color: rgba(30, 35, 48, 0.74);
  line-height: 1.25;
  white-space: nowrap;
}
.step-notify-text .nums {
  color: #14a44d;
  font-weight: 700;
}
@keyframes stepNotifyDrop {
  0%, 12% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.5, 0, 0.78, 0);
  }
  42% {
    transform: translateY(140px);
    opacity: 0;
    animation-timing-function: linear;
  }
  46% {
    transform: translateY(-70px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.32, 0, 0.4, 1);
  }
  64% {
    transform: translateY(18px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.36, 0, 0.5, 1);
  }
  72% {
    transform: translateY(-9px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1);
  }
  80% {
    transform: translateY(6px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1);
  }
  87% {
    transform: translateY(-3px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  93% {
    transform: translateY(1px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─── HOW IT WORKS · STEP 04 DEMO ─────────────────────── */
.step-payday-demo {
  position: relative;
  min-height: 76px;
  --pay-cycle: 3.5s;
}
.step-payday-grid {
  display: inline-flex;
  gap: 3px;
  padding-top: 14px;
}
.step-payday-day {
  width: 26px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(30, 35, 48, 0.42);
  border-radius: 8px;
  background: rgba(30, 35, 48, 0.04);
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.step-payday-day.is-target {
  color: #1e2330;
  background: #c8f135;
  transform: scale(1.1);
  animation: stepTargetGlow var(--pay-cycle) ease-out forwards;
}
.step-payday-loupe {
  position: absolute;
  left: 4px;
  top: 18px;
  font-size: 22px;
  color: #c0392b;
  filter: drop-shadow(0 1px 1px rgba(30, 35, 48, 0.18));
  transform: translate(124px, 12px) scale(1.2);
  animation: stepLoupeScan var(--pay-cycle) cubic-bezier(0.5, 0, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.step-payday-coin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c8f135 0%, #8db910 100%);
  color: #1e2330;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(141, 185, 16, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.step-payday-coin-1 { left: 100px; top: 8px; transform: translate(-8px, -9px) scale(1); animation: stepPayCoin1 var(--pay-cycle) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.step-payday-coin-2 { left: 120px; top: -2px; transform: translate(0, -10px) scale(1); animation: stepPayCoin2 var(--pay-cycle) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.step-payday-coin-3 { left: 140px; top: 8px; transform: translate(8px, -9px) scale(1); animation: stepPayCoin3 var(--pay-cycle) cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes stepLoupeScan {
  0%, 3% {
    transform: translate(58px, -28px) scale(0.5);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.4, 0.4, 1);
  }
  12% {
    transform: translate(58px, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1);
  }
  22% {
    transform: translate(58px, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  32% {
    transform: translate(145px, 0) scale(1);
    opacity: 1;
  }
  42% {
    transform: translate(145px, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  54% {
    transform: translate(124px, 12px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(124px, 12px) scale(1.2);
    opacity: 1;
  }
}

@keyframes stepTargetGlow {
  0%, 50%   { background: rgba(30, 35, 48, 0.08); color: #1e2330; transform: scale(1); }
  58%, 100% { background: #c8f135; color: #1e2330; transform: scale(1.1); }
}

@keyframes stepPayCoin1 {
  0%, 56%  { opacity: 0; transform: translate(6px, 8px) scale(0.3); }
  64%      { opacity: 1; transform: translate(0, 0) scale(1.15); }
  70%      { opacity: 1; transform: translate(-8px, -9px) scale(1); }
  100%     { opacity: 1; transform: translate(-8px, -9px) scale(1); }
}
@keyframes stepPayCoin2 {
  0%, 60%  { opacity: 0; transform: translate(0, 8px) scale(0.3); }
  68%      { opacity: 1; transform: translate(0, 0) scale(1.15); }
  74%      { opacity: 1; transform: translate(0, -10px) scale(1); }
  100%     { opacity: 1; transform: translate(0, -10px) scale(1); }
}
@keyframes stepPayCoin3 {
  0%, 64%  { opacity: 0; transform: translate(-6px, 8px) scale(0.3); }
  72%      { opacity: 1; transform: translate(0, 0) scale(1.15); }
  78%      { opacity: 1; transform: translate(8px, -9px) scale(1); }
  100%     { opacity: 1; transform: translate(8px, -9px) scale(1); }
}

/* ─── MARQUEE ────────────────────────────────────────── */
.marquee       { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 3rem; padding-right: 3rem; align-items: center; animation: marqueeSlide 38s linear infinite; }
@keyframes marqueeSlide { to { transform: translateX(-50%); } }

/* ─── SIZE-OF-IT · GHOST NUMERAL ──────────────────────── */
.size-section { background: transparent; }

/* ghost numeral — stroke reveals on scroll-in; container stays static */
.ghost-numeral { transition: none; transform: none; opacity: 1; }
.ghost-numeral span {
  font-size: clamp(220px, 42vw, 640px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0);
  transition: -webkit-text-stroke-color 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.98);
  will-change: transform;
}
.ghost-numeral.in span {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.07);
  transform: scale(1);
}

/* ─── HERO · VIEWPORT FILL ───────────────────────────── */
:root { --nav-h: 74px; }
@media (min-width: 1024px) {
  .hero-shell { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; }
  .hero-shell > .hero-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}

/* ─── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ─── UTILITIES ──────────────────────────────────────── */
.nums { font-variant-numeric: tabular-nums; }