/* A · Stage — one idea per viewport (pp. 10–16). Typeface: Geist 300–600 */

.dir-stage { --f-display: var(--f-ui); }

.stage { position: relative; min-height: 100svh; overflow: hidden; background: #000; }
.s-card, .s-keys { background: var(--k-stage-alt); }
.s-pay { background: var(--k-stage-alt); color: var(--k-green-ink); }

.stage-in {
  position: relative; z-index: 1; min-height: 100svh; padding: 120px var(--gutter) 80px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px;
}
.stage-h { justify-self: start; max-width: 420px; min-width: 300px;
  font-size: clamp(40px, calc(31.24px + 2.247vw), 60px); line-height: 1; letter-spacing: -.035em; }
.s-hero .stage-h { max-width: 360px; }
.stage-product { position: relative; display: grid; place-items: center; }
.stage-copy { justify-self: end; width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; color: var(--k-text-2); }
.s-pay .stage-copy { color: var(--k-green-ink); }
.stage-legal { position: absolute; left: var(--gutter); bottom: 28px; z-index: 2; }

.bullets { display: flex; flex-direction: column; gap: 8px; }
.bullets li { position: relative; padding-left: 16px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.glow { position: absolute; pointer-events: none; border-radius: 50%; background: var(--k-glow); }

/* 01 · Hero */
.hero-glow { width: 700px; height: 700px; left: 50%; top: 50%; margin: -350px 0 0 -350px; }
.hero-phone-wrap { position: relative; }

/* 02 · Card fan — transform-origin 50% 150% */
.fan { position: relative; width: 340px; height: 214px; --k: 1; }
.fan-card { all: unset; position: absolute; left: 0; top: 0; width: 340px; height: 214px; cursor: pointer; border-radius: var(--r-card);
  --a: 0deg; --p: 1; --lift: 0px;
  transform-origin: 50% 150%;
  --raise: 0px;
  transform: rotate(calc(var(--a) * var(--p) * var(--k))) translateY(calc(var(--lift) + var(--raise)));
  transition: filter 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.fan.settled .fan-card { transition: transform 240ms var(--ease-out), filter 240ms var(--ease-out), opacity 240ms var(--ease-out); }
.fan-card:focus-visible { outline: 2px solid var(--k-green); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .fan.settled:hover .fan-card:not(:hover) { filter: brightness(.7); }
  .fan.settled .fan-card:hover { --lift: -16px; z-index: 10 !important; }
}

/* 03 · Pay — green flood from phone centre */
.flood { position: absolute; inset: 0; background: var(--k-green); clip-path: circle(150% at 50% 50%); z-index: 0; }
.pay-phone-wrap { position: relative; }
.pay-chip-jonah { position: absolute; left: -52px; top: 88px; }
.pay-chip-sol { position: absolute; right: -58px; top: 330px; }
.s-pay .kp-slot .kphone { box-shadow: 0 0 0 1px rgba(3,32,14,.4), 0 60px 120px -40px rgba(3,32,14,.6); background: #0f1f15; }

/* 04 · Wallet */
.wallet { width: 520px; text-align: center; }
.wallet-label { font-size: 12px; color: var(--k-muted); }
.wallet-bal { font-size: clamp(56px, calc(38.47px + 4.494vw), 96px); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; margin-top: 4px; }
.wallet-bar { display: flex; gap: 6px; height: 6px; margin-top: 20px; }
.wallet-bar i { display: block; height: 100%; border-radius: 9px; transform-origin: left; transition: opacity 240ms var(--ease-out); }
.wallet-bar .evm { width: 62%; background: #fff; } .wallet-bar .sol { flex: 1; background: var(--k-green); }
.wallet[data-hover="evm"] .sol, .wallet[data-hover="sol"] .evm { opacity: .35; }
.wallet-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; text-align: left; }
.wtile { background: var(--k-surface); border-radius: 24px; padding: 18px 18px 14px; font-size: 12px; color: var(--k-muted); }
.wt-h { display: flex; gap: 6px; align-items: center; font-size: 11px; } .wt-h .g { color: var(--k-green); }
.wt-v { color: #fff; font-size: 24px; letter-spacing: -.03em; margin: 8px 0 14px; }
.wt-r { display: flex; justify-content: space-between; padding: 5px 0; font-size: 11px; } .wt-r span:last-child { color: #fff; }

/* 05 · Keys — 200px disc, 12 chips on a 225px radius */
.keys { position: relative; width: 560px; height: 560px; display: grid; place-items: center; }
.key-disc { position: relative; z-index: 2; width: 200px; height: 200px; border-radius: 50%; background: var(--k-green); color: var(--k-green-ink);
  display: grid; place-items: center; box-shadow: 0 0 60px rgba(34,221,110,.45); animation: keyglow 3s var(--ease-io) infinite; }
.key-disc svg { width: 64px; height: 64px; }
@keyframes keyglow { 50% { box-shadow: 0 0 120px rgba(34,221,110,.45); } }
.keys-ring { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.kchip-pos { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --r: 225px;
  transform: rotate(var(--ang)) translateX(var(--r)) rotate(calc(-1 * var(--ang))); }
.kchip-spin { position: absolute; left: 0; top: 0; animation: spin 60s linear infinite reverse; }
.kchip { position: absolute; left: 0; top: 0; translate: -50% -50%; height: 30px; padding: 0 14px; border-radius: 99px;
  background: var(--k-surface); border: 1px solid var(--k-line); display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; color: var(--k-muted); white-space: nowrap; pointer-events: auto; }
.kchip b { font-weight: 400; color: var(--k-text-2); min-width: 5ch; letter-spacing: .1em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 06 · Stats · Claim */
.s-claim { background: #000; padding: 96px var(--gutter) 120px; }
.stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 48px; max-width: var(--maxw); margin: 0 auto; }
.stats-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-line); transform-origin: left; }
.stat-v { font-size: clamp(44px, calc(35.24px + 2.247vw), 64px); line-height: 1; letter-spacing: -.04em; }
.stat-v.g { color: var(--k-green); }
.stat-l { margin-top: 8px; font-size: 13px; color: var(--k-muted); }
.claim-block { margin-top: 160px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.claim-h { font-size: clamp(48px, calc(26.97px + 5.393vw), 96px); line-height: 1; letter-spacing: -.04em; }
.claim-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.claim-lede { margin-top: -8px; max-width: 520px; color: var(--k-text-2); font-size: 17px; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl[hidden] { display: none; }
.s-claim .stores .btn { cursor: default; opacity: .7; }
.claim-wrap .claim { margin: 0 auto; }
.s-claim .stores { justify-content: center; margin-top: -8px; }

/* ---------- Tablet: headline above product, copy + CTA below ---------- */
@media (max-width: 1279px) {
  .stage-in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px; padding-top: 128px; padding-bottom: 96px; }
  .stage-h { justify-self: center; max-width: 560px; min-width: 0; font-size: clamp(40px, calc(31.24px + 2.247vw), 52px); }
  .s-hero .stage-h { max-width: 560px; }
  .stage-copy { justify-self: center; align-items: center; width: auto; max-width: 420px; }
  .bullets { text-align: left; }
}
/* Tablet ≥1024 is still pinned — compact the stacked stage so it fits one viewport */
@media (min-width: 1024px) and (max-width: 1279px) {
  .stage-in { gap: 24px; padding-top: 104px; padding-bottom: 64px; }
  .hero-phone, .pay-phone { --s: .6; }
  .hero-glow { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
  .pay-chip-jonah { left: -80px; top: 50px; } .pay-chip-sol { right: -80px; top: 200px; }
  .fan { margin: 48px 0 24px; }
  .keys { width: 400px; height: 400px; } .kchip-pos { --r: 165px; }
  .key-disc { width: 140px; height: 140px; } .key-disc svg { width: 48px; height: 48px; }
  .wallet-bal { font-size: 72px; }
  .stage-copy { flex-direction: row; align-items: center; max-width: 760px; gap: 32px; text-align: left; }
  .stage-copy > p, .stage-copy > .bullets { max-width: 420px; }
  .stage-copy .btn { flex: none; }
}
/* ---------- Mobile: stack, phone scaled .8, fan ×0.6 ---------- */
@media (max-width: 767px) {
  .stage { min-height: 0; }
  .stage-in { min-height: 0; padding: 112px var(--gutter) 88px; gap: 32px; }
  .stage-h { font-size: 40px; }
  .stage-legal { bottom: 24px; }
  .hero-phone, .pay-phone { --s: .8; }
  .hero-glow { width: 480px; height: 480px; margin: -240px 0 0 -240px; }
  .fan { --k: .6; transform: scale(.8); margin: 40px 0; }
  .pay-chip-jonah { left: -24px; top: 70px; } .pay-chip-sol { right: -24px; top: 270px; }
  .wallet { width: min(520px, calc(100vw - 40px)); }
  .wallet-tiles { grid-template-columns: 1fr; }
  .keys { width: 340px; height: 340px; }
  .kchip-pos { --r: 150px; }
  .key-disc { width: 120px; height: 120px; } .key-disc svg { width: 44px; height: 44px; }
  .kchip { height: 26px; padding: 0 10px; font-size: 10px; }
  .kchip b { display: none; }
  .stats { grid-template-columns: 1fr; gap: 28px; }
  .claim-block { margin-top: 96px; }
  .s-claim { padding-bottom: 88px; }
}