/* Vyra site. One motif: the radar (rings + sweep + the satellite dot from the logo). It runs the hero, the orbit of
   runners, the step numbers, the buttons (pills), the page change and the footer rings. Sections flow into each other
   on one dark field with soft violet glows, no hard boxes between them. */
:root {
  --ground: #0D0A13; --ground-2: #16111F; --ground-3: #211933; --line: #2E2445;
  --ink: #F3EDFF; --soft: #A99BC4; --accent: #9B6BFF; --accent-ink: #0D0A13; --pale: #E9DEFF;
  --volatile: #FF7A45; --win: #3DDC84;
  --r: 28px; --gut: clamp(16px, 4vw, 56px); --max: 1240px; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.soft { color: var(--soft); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--ink); color: var(--ground); padding: 8px 14px; border-radius: 99px; }
:focus-visible { outline: 3px solid var(--pale); outline-offset: 3px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
h2 { font-size: clamp(38px, 5vw, 76px); }
.lead2 { margin-top: 20px; color: var(--soft); max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); }

/* ---------- buttons: pills, magnetic ---------- */
.btn { display: inline-flex; align-items: center; gap: .55em; padding: .9em 1.6em; border-radius: 999px; background: var(--accent);
  color: var(--accent-ink); font-weight: 700; text-decoration: none; font-size: 16px; white-space: nowrap;
  transition: transform .35s var(--ease), background .2s, box-shadow .3s; box-shadow: 0 0 0 0 rgba(155, 107, 255, 0); }
.btn:hover { background: var(--pale); box-shadow: 0 10px 40px -6px rgba(155, 107, 255, .7); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); background: transparent; }
.btn.big { font-size: clamp(17px, 1.4vw, 20px); padding: 1.05em 2em; }
.btn.small { padding: .55em 1.1em; font-size: 14px; }
.btn::after { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .55; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- nav + phone menu ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 16px var(--gut);
  transition: background .3s, backdrop-filter .3s; }
.nav.solid { background: rgba(13, 10, 19, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--soft); font-weight: 500; font-size: 15px; transition: color .2s; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--ink); }
.nav nav a[aria-current]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 2px; }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ground-3); color: var(--ink); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.menu-btn span:nth-child(1) { top: 17px; } .menu-btn span:nth-child(2) { top: 22px; } .menu-btn span:nth-child(3) { top: 27px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 760px) {
  .menu-btn { display: block; }
  .nav > .btn { display: none; }
  .nav nav { position: fixed; inset: 0; z-index: -1; margin: 0; flex-direction: column; justify-content: center; gap: 8px; padding: 0 28px;
    background: var(--ground); clip-path: circle(0 at calc(100% - 39px) 39px); transition: clip-path .6s cubic-bezier(.7, 0, .3, 1); }
  .nav nav a { font-size: 44px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
  .nav nav .btn { margin-top: 24px; font-size: 18px; letter-spacing: 0; align-self: flex-start; color: var(--accent-ink); }
  .nav.open nav { clip-path: circle(150% at calc(100% - 39px) 39px); }
  .nav.open { background: transparent; backdrop-filter: none; }
}
@media (min-width: 761px) { .nav nav .btn { display: none; } }

/* ---------- the radar ---------- */
.radar { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(circle, var(--accent) 0 8%, transparent 8.2%),
    radial-gradient(circle, transparent 0 24%, rgba(155, 107, 255, .28) 24.2% 24.8%, transparent 25%),
    radial-gradient(circle, transparent 0 44%, rgba(155, 107, 255, .22) 44.2% 44.8%, transparent 45%),
    radial-gradient(circle, transparent 0 64%, rgba(155, 107, 255, .18) 64.2% 64.8%, transparent 65%),
    radial-gradient(circle, transparent 0 84%, rgba(155, 107, 255, .14) 84.2% 84.8%, transparent 85%),
    radial-gradient(circle, rgba(59, 36, 102, .55), rgba(13, 10, 19, 0) 70%); }
.radar .sw { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(155, 107, 255, .5), transparent 16%); }
.radar.auto .sw { animation: sweep 8s linear infinite; }
.radar .dot { position: absolute; width: 1.1%; aspect-ratio: 1; border-radius: 50%; background: #4A3B66; transform: translate(-50%, -50%); transition: background .5s, box-shadow .5s; }
.radar .dot.lit { background: var(--pale); box-shadow: 0 0 14px 3px rgba(155, 107, 255, .85); transition: none; }
.radar .dot.win.lit { background: var(--win); box-shadow: 0 0 16px 4px rgba(61, 220, 132, .7); }
@keyframes sweep { to { transform: rotate(1turn); } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 110px 0 60px; }
.hero .radar { width: min(115vh, 1200px); right: calc(min(115vh, 1200px) * -0.28); top: 50%; transform: translateY(-50%); }
.hero .wrap { position: relative; width: 100%; }
.hero h1 { font-size: clamp(56px, 8.4vw, 136px); max-width: 9ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { margin-top: 28px; font-size: clamp(18px, 1.6vw, 22px); max-width: 32ch; color: var(--soft); }
.hero .lead b { color: var(--ink); font-weight: 600; }
.hero .cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.hero .cue::after { content: ""; display: block; width: 1.5px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--soft), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero.sub { min-height: 72svh; }
.hero.sub h1 { font-size: clamp(50px, 7vw, 116px); max-width: 11ch; }
@media (max-width: 760px) {
  .hero { align-items: flex-start; padding-top: 104px; min-height: 0; padding-bottom: 92vw; }
  .hero .radar { width: 125vw; right: -40vw; top: auto; bottom: -38vw; transform: none; }
  .hero .cue { display: none; }
  .hero.sub { padding-bottom: 72vw; min-height: 0; }
}
.hero h1 .ln { display: inline-block; animation: rise .9s var(--ease) both; }
.hero h1 .ln:nth-child(2) { animation-delay: .1s; } .hero h1 .ln:nth-child(3) { animation-delay: .2s; }
.hero .lead, .hero .acts { animation: rise .9s var(--ease) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(44px); } }
.intro .hero h1 .ln { animation-delay: 2.3s; } .intro .hero h1 .ln:nth-child(2) { animation-delay: 2.4s; }
.intro .hero h1 .ln:nth-child(3) { animation-delay: 2.5s; } .intro .hero .lead, .intro .hero .acts { animation-delay: 2.6s; }

/* ---------- orbit: runners circle a giant radar ring as you scroll ---------- */
.orbit { position: relative; height: 320vh; }
.orbit .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.orbit .wheel { position: absolute; left: 50%; top: 60%; width: 150vmax; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, #2A1B47 0 50%, #1C1330 70%, var(--ground) 71%); box-shadow: 0 0 120px 10px rgba(155, 107, 255, .18); }
.orbit .wheel::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(155, 107, 255, .3); }
.orbit .words { position: absolute; inset: 0; }
.orbit .words text { font: 800 44px/1 Inter, sans-serif; letter-spacing: .12em; fill: var(--accent); text-transform: uppercase; }
.orbit .chip { position: absolute; left: 50%; top: 50%; width: clamp(190px, 18vw, 250px); padding: 20px 22px; border-radius: 22px;
  background: linear-gradient(160deg, #2B2140, #1A1328); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(155, 107, 255, .18);
  will-change: transform, opacity, filter; }
.orbit .chip .t { font-weight: 800; font-size: 20px; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; }
.orbit .chip .t i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.orbit .chip .t i.v { background: var(--volatile); }
.orbit .chip .x { font-weight: 800; font-size: clamp(46px, 4.4vw, 64px); letter-spacing: -.05em; color: var(--win); line-height: 1; margin: 10px 0 8px; }
.orbit .chip .m { font-size: 13px; color: var(--soft); }
.orbit .say { position: absolute; left: 0; right: 0; top: clamp(90px, 14vh, 140px); text-align: center; padding: 0 var(--gut); }
.orbit .say h2 { font-size: clamp(40px, 6vw, 92px); max-width: none; }
.orbit .say p { margin: 16px auto 0; color: var(--soft); max-width: 40ch; }
@media (max-width: 760px) { .orbit { height: 260vh; } .orbit .wheel { width: 240vw; top: 64%; } .orbit .words text { font-size: 70px; } }

/* ---------- steps that stack ---------- */
.stack { position: relative; padding: 0 var(--gut) 12vh; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; }
.stack > .head { padding: 14vh 0 8vh; }
.stk { position: sticky; top: calc(13vh + var(--i) * 26px); min-height: 66vh; border-radius: 36px; padding: clamp(28px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-bottom: 8vh; transform-origin: center top; overflow: hidden; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .9); }
.stk:nth-of-type(1) { background: linear-gradient(140deg, #1E1630, #150F21); }
.stk:nth-of-type(2) { background: linear-gradient(140deg, #2A1D45, #1B1330); }
.stk:nth-of-type(3) { background: linear-gradient(140deg, #3B2766, #241740); }
.stk:nth-of-type(4) { background: linear-gradient(140deg, #A47BFF, #7F52F0); color: var(--accent-ink); }
.stk .num { width: clamp(64px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; border: 3px solid currentColor; display: grid; place-items: center; font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 28px; opacity: .9; }
.stk h3 { font-size: clamp(54px, 7vw, 112px); letter-spacing: -.05em; }
.stk p { margin-top: 18px; font-size: clamp(18px, 1.6vw, 24px); max-width: 24ch; opacity: .82; }
.stk .vis { display: grid; place-items: center; position: relative; min-height: 260px; }
.stk .vis .radar { position: relative; width: min(100%, 380px); }
.stk .ring-big { position: absolute; width: min(110%, 520px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .14; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; position: relative; }
.ticks li { display: flex; align-items: center; gap: 14px; background: rgba(13, 10, 19, .35); padding: 12px 18px; border-radius: 999px; }
.ticks li::before { content: "✓"; width: 26px; height: 26px; border-radius: 50%; background: var(--win); color: #04210f; display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: none; }
@media (max-width: 860px) {
  .stk { grid-template-columns: minmax(0, 1fr); min-height: 0; top: calc(10vh + var(--i) * 16px); margin-bottom: 5vh; }
  .stk .vis { min-height: 0; }
  .stk .vis .radar { width: 70%; }
}

/* ---------- the call card (example UI) ---------- */
.card { background: #2B2D31; color: #DBDEE1; border-radius: 12px; border-left: 4px solid var(--win); padding: 14px 16px 16px; width: min(100%, 360px);
  font: 400 14px/1.45 Inter, system-ui, sans-serif; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .75); text-align: left; position: relative; letter-spacing: 0; }
.card .who { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #F2F3F5; margin-bottom: 8px; }
.card .who img { width: 22px; height: 22px; border-radius: 50%; }
.card .who .app { background: #5865F2; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.card .t { font-weight: 700; color: #F2F3F5; font-size: 15px; margin-bottom: 4px; }
.card .i { font-style: italic; color: #B5BAC1; }
.card .gap { height: 8px; }
.card code { display: block; margin-top: 8px; background: #1E1F22; padding: 6px 8px; border-radius: 4px; font-size: 12px; color: #B5BAC1; }
.card .rb { display: inline-block; margin-top: 10px; background: #4E5058; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 500; }
.card.tilt { transform: rotate(-4deg); }

/* ---------- two channels, split down the middle ---------- */
.duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
.duo .side { position: relative; padding: 18vh clamp(24px, 5vw, 80px) 14vh; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.duo .side.p { background: radial-gradient(55% 45% at 35% 55%, rgba(155, 107, 255, .2), transparent 100%); }
.duo .side.v { background: radial-gradient(55% 45% at 65% 55%, rgba(255, 122, 69, .16), transparent 100%); }
.duo .side h3 { font-size: clamp(48px, 6vw, 100px); letter-spacing: -.05em; }
.duo .side.p h3 { color: #C3ADFF; } .duo .side.v h3 { color: #FF9A70; }
.duo .side p { font-size: clamp(17px, 1.4vw, 20px); color: var(--soft); max-width: 28ch; }
.duo .side .card { margin-top: auto; }
.duo .side.v .card { align-self: flex-end; transform: rotate(3deg); }
.duo .side.p .card { transform: rotate(-3deg); }
.duo .mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(120px, 12vw, 180px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 14px; letter-spacing: .14em; color: var(--soft); z-index: 2; }
.duo .head { position: absolute; top: 7vh; left: 0; right: 0; text-align: center; z-index: 2; }
.duo .head .eyebrow { justify-content: center; }
@media (max-width: 860px) {
  .duo { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 120px; }
  .duo .side { padding: 48px var(--gut); }
  .duo .side.v .card { align-self: flex-start; }
  .duo .mid { display: none; }
  .duo .head { top: 32px; }
}

/* ---------- big statement ---------- */
.say-big { position: relative; padding: 16vh var(--gut) 14vh; text-align: center; }
.say-big h2 { margin: 0 auto; max-width: 13ch; font-size: clamp(46px, 7.4vw, 124px); position: relative; }
.say-big h2 em { font-style: normal; color: var(--accent); }
.say-big p { position: relative; margin: 26px auto 0; color: var(--soft); max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); }
.say-big .radar { width: min(130vw, 1100px); left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .55; }

/* ---------- podium (pricing page) ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; height: clamp(360px, 52vh, 520px); margin-top: 56px; }
.podium .bar { border-radius: 26px 26px 0 0; padding: 22px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--ease); position: relative; overflow: hidden; }
.podium .bar > * { opacity: 0; transition: opacity .5s .6s; }
.podium.in .bar { transform: none; } .podium.in .bar > * { opacity: 1; }
.podium .bar:nth-child(1) { height: 74%; background: linear-gradient(#5A3C9C, #2A1B47); transition-delay: .15s; }
.podium .bar:nth-child(2) { height: 100%; background: linear-gradient(#A47BFF, #5E3BB8); }
.podium .bar:nth-child(3) { height: 58%; background: linear-gradient(#45307A, #22163A); transition-delay: .3s; }
.podium .pl { font-weight: 800; font-size: 13px; letter-spacing: .14em; opacity: .7; }
.podium .c { font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.02em; }
.podium .x { font-weight: 800; font-size: clamp(40px, 5.6vw, 92px); letter-spacing: -.05em; line-height: .95; color: var(--win); font-variant-numeric: tabular-nums; }
.podium .bar:nth-child(2) .x { color: #0B2A17; }
.podium .m { font-size: 13px; opacity: .75; }
.roll { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; }
.roll i { display: block; font-style: normal; line-height: 1; transition: transform 1.8s var(--ease); }
.podium .x[data-roll] { line-height: 1; display: flex; align-items: flex-start; }
@media (max-width: 600px) { .podium { gap: 6px; } .podium .bar { padding: 14px 10px; border-radius: 18px 18px 0 0; } .podium .m { display: none; } }

/* ---------- inside (feature rows) ---------- */
.rows { margin-top: 48px; border-top: 1px solid var(--line); }
.rowf { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease); }
.rowf:hover { padding-left: 14px; }
.rowf .e { font-size: 34px; }
.rowf h3 { font-size: clamp(26px, 3vw, 44px); letter-spacing: -.035em; }
.rowf p { color: var(--soft); font-size: 18px; }
.rowf .free { color: var(--win); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-left: 10px; }
@media (max-width: 760px) { .rowf { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding: 22px 0; } .rowf p { grid-column: 2; font-size: 16px; } .rowf .e { font-size: 26px; } }

/* ---------- section spacing ---------- */
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.section.tight { padding-top: 0; }

/* ---------- pricing ---------- */
.price { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.price .txt p { margin-top: 16px; color: var(--soft); max-width: 36ch; }
.figure { font-size: clamp(110px, 15vw, 230px); font-weight: 800; letter-spacing: -.06em; line-height: .85; display: flex; align-items: flex-start; }
.figure .cur { font-size: .45em; margin-top: .08em; }
.fig .per { font-size: 18px; color: var(--soft); margin-top: 14px; }
.fig .inc { margin-top: 28px; display: grid; gap: 6px; font-size: 18px; }
.plans { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.plans .pill { padding: 14px 22px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.plans .pill b { color: var(--accent); margin-left: 8px; }
@media (max-width: 860px) { .price { grid-template-columns: minmax(0, 1fr); } .figure { font-size: 30vw; } }
.getin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; counter-reset: g; }
.getin div { padding: 28px 28px 28px 0; border-top: 1.5px solid var(--line); }
.getin div::before { counter-increment: g; content: "0" counter(g); display: block; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.getin h3 { font-size: 26px; letter-spacing: -.02em; }
.getin p { color: var(--soft); margin-top: 8px; }
@media (max-width: 760px) { .getin { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; }
.faq > h2 { position: sticky; top: 110px; font-size: clamp(44px, 5vw, 72px); }
.qs { display: grid; gap: 8px; }
.qs details { background: var(--ground-2); border-radius: var(--r); transition: background .25s; }
.qs summary { list-style: none; cursor: pointer; padding: 24px 64px 24px 28px; font-size: 20px; font-weight: 600; position: relative; min-height: 72px; display: flex; align-items: center; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::before, .qs summary::after { content: ""; position: absolute; right: 28px; top: 50%; width: 16px; height: 3px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease); }
.qs summary::after { transform: rotate(90deg); }
.qs details[open] { background: var(--accent); color: var(--accent-ink); }
.qs details[open] summary::after { transform: rotate(0); }
.qs details p { padding: 0 28px 26px; max-width: 58ch; font-size: 17px; }
.qs details a { font-weight: 700; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq > h2 { position: static; } .qs summary { font-size: 18px; padding: 20px 56px 20px 20px; min-height: 64px; } .qs details p { padding: 0 20px 20px; font-size: 16px; } }

/* ---------- legal ---------- */
.legal { max-width: 760px; padding-top: 60px; }
.legal h1 { font-size: clamp(40px, 5vw, 64px); }
.legal .date { color: var(--soft); margin-top: 14px; }
.legal h2 { font-size: 24px; letter-spacing: -.02em; margin-top: 44px; max-width: none; }
.legal p, .legal li { margin-top: 12px; color: #D9CFEE; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--pale); }

/* ---------- ticker of runners ---------- */
.tape { overflow: hidden; padding: 18px 0; border-block: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tape .row { display: flex; gap: 40px; width: max-content; animation: tape 40s linear infinite; }
.tape .row span { font-weight: 800; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.tape .row span b { color: var(--win); }
.tape .row span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); margin-left: 28px; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------- ending: CTA + footer as one field, rings pulse out of the name ---------- */
.end { position: relative; overflow: hidden; padding: 12vh var(--gut) 24px;
  background: radial-gradient(90% 60% at 50% 100%, rgba(155, 107, 255, .32), transparent 70%); }
.end .call { position: relative; text-align: center; z-index: 1; }
.end .call h2 { margin: 0 auto; max-width: 16ch; font-size: clamp(36px, 4.8vw, 76px); }
.end .call p { margin: 22px auto 0; color: var(--soft); max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); }
.end .call .acts { justify-content: center; }
.end .name { position: relative; height: clamp(120px, 17vw, 250px); margin-top: 7vh; display: grid; place-items: end center; }
.end .name .pulse { position: absolute; left: 50%; bottom: 30%; width: 16vw; max-width: 220px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); transform: translate(-50%, 50%) scale(.5); opacity: 0; animation: ring 4.8s ease-out infinite; }
.end .name .pulse:nth-child(2) { animation-delay: 1.6s; } .end .name .pulse:nth-child(3) { animation-delay: 3.2s; }
@keyframes ring { 0% { opacity: .8; transform: translate(-50%, 50%) scale(.5); } 100% { opacity: 0; transform: translate(-50%, 50%) scale(3.2); } }
.end .word { position: relative; font-weight: 800; font-size: clamp(96px, 17vw, 250px); letter-spacing: -.07em; line-height: .78; display: flex; color: var(--ink); }
.end .word span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.end.in .word span { transform: none; }
.end .word span:nth-child(2) { transition-delay: .08s; } .end .word span:nth-child(3) { transition-delay: .16s; } .end .word span:nth-child(4) { transition-delay: .24s; }
.end .word-clip { overflow: hidden; position: relative; padding-bottom: .02em; }
.end .links { position: relative; max-width: var(--max); margin: 32px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--line); padding-top: 28px; }
.end .links h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 12px; font-weight: 700; }
.end .links a { display: block; text-decoration: none; font-size: 15px; padding: 4px 0; }
.end .links a:hover { color: var(--pale); }
.end .last { position: relative; max-width: var(--max); margin: 36px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; color: var(--soft); }
@media (max-width: 700px) { .end .links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .end .last { flex-direction: column; align-items: flex-start; } .end .name .pulse { width: 46vw; } }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- opening: radar finds a coin, then the screen closes into the dot ---------- */
.veil { display: none; }
.intro .veil { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99; background: var(--ground);
  animation: iris .7s cubic-bezier(.7, 0, .3, 1) 1.75s forwards; pointer-events: none; }
.veil .scope { width: min(70vmin, 520px); aspect-ratio: 1; border-radius: 50%; position: relative; animation: pop .5s var(--ease) both;
  background: radial-gradient(circle, transparent 0 32%, rgba(155, 107, 255, .35) 32.4% 33.2%, transparent 33.6% 65%, rgba(155, 107, 255, .3) 65.4% 66.2%, transparent 66.6% 98%, rgba(155, 107, 255, .25) 98.4%); }
.veil .sw { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(155, 107, 255, .5), transparent 22%); animation: sweep 1.4s linear infinite; }
.veil .bl { position: absolute; width: 3%; aspect-ratio: 1; border-radius: 50%; background: var(--soft); opacity: 0; animation: blip .9s ease-out both; }
.veil .bl.win { background: var(--win); box-shadow: 0 0 18px 4px rgba(61, 220, 132, .6); animation: blipwin 1.2s ease-out both; }
.veil .v { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) 1.15s both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes blip { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }
@keyframes blipwin { 0% { opacity: 0; transform: scale(.3); } 30%, 100% { opacity: 1; transform: scale(1.3); } }
@keyframes iris { from { clip-path: circle(75% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); visibility: hidden; } }

.rip { position: fixed; z-index: 99; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--accent); pointer-events: none;
  transform: translate(-50%, -50%) scale(.2); animation: rip .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes rip { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(40); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro .veil { display: none; }
  .rv { opacity: 1; transform: none; }
  .end .word span { transform: none; }
  .podium .bar { transform: none; } .podium .bar > * { opacity: 1; }
  .orbit { height: auto; } .orbit .pin { position: relative; height: auto; padding: 120px 0; }
}
.orbit .chip { transform-origin: 50% 90%; }
.orbit .words { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }

/* ---------- headings outside the hero rise in too ---------- */
.passes h1, .ask h1 { font-size: clamp(56px, 8vw, 128px); }
.passes h1 em, .ask h1 em { font-style: normal; color: var(--accent); }
.passes h1 .ln, .ask h1 .ln { display: inline-block; animation: rise .9s var(--ease) both; }
.passes h1 .ln + .ln, .ask h1 .ln + .ln { animation-delay: .1s; }
.passes .lead, .ask .lead { margin-top: 18px; color: var(--soft); font-size: clamp(18px, 1.6vw, 22px); animation: rise .9s var(--ease) .2s both; }

/* ---------- step 2: one coin fails, the next passes ---------- */
.scan { display: grid; gap: 16px; width: min(100%, 380px); position: relative; }
.coinbox { position: relative; background: rgba(13, 10, 19, .45); border-radius: 20px; padding: 18px 20px; display: grid; gap: 2px; }
.coinbox .tk { font-size: 26px; letter-spacing: -.02em; }
.coinbox .mc { color: var(--soft); font-size: 14px; }
.stamp { position: absolute; right: 14px; top: 50%; font-weight: 800; font-size: 15px; letter-spacing: .08em; padding: 6px 12px; border-radius: 8px; opacity: 0; transform: translateY(-50%) scale(1.6) rotate(-10deg); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.stamp.show { opacity: 1; transform: translateY(-50%) scale(1) rotate(-10deg); }
.stamp.no { background: #F87171; color: #2a0707; } .stamp.yes { background: var(--win); color: #04210f; }
.ticks2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks2 li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; opacity: .35; transition: opacity .25s; }
.ticks2 li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.ticks2 li.ok { opacity: 1; } .ticks2 li.ok::before { content: "✓"; background: var(--win); color: #04210f; box-shadow: none; }
.ticks2 li.bad { opacity: 1; color: #FCA5A5; } .ticks2 li.bad::before { content: "✕"; background: #F87171; color: #2a0707; box-shadow: none; }

/* ---------- step 3: the call pings your phone ---------- */
.phone { width: min(78%, 290px); aspect-ratio: 9 / 16.5; border-radius: 40px; background: linear-gradient(170deg, #1B1428, #0D0A13); box-shadow: inset 0 0 0 8px #2A2140, 0 40px 80px -30px #000; position: relative; overflow: hidden; padding: 56px 16px 16px; }
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; width: 34%; height: 22px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.ph-time { position: absolute; top: 18px; left: 26px; font-size: 13px; font-weight: 700; }
.notif { display: flex; gap: 10px; align-items: center; background: rgba(243, 237, 255, .14); backdrop-filter: blur(10px); border-radius: 18px; padding: 10px 12px; font-size: 12px; line-height: 1.35;
  transform: translateY(-140%); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; color: var(--ink); }
.notif img { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.notif b { display: block; font-size: 12px; }
.phone .card.mini { margin-top: 14px; width: 100%; font-size: 12px; padding: 10px 12px; opacity: 0; transform: translateY(20px); transition: opacity .5s .1s, transform .6s var(--ease) .1s; }
.phone .card.mini .t { font-size: 12px; }
.phone.s1 .notif, .phone.s2 .notif { transform: none; opacity: 1; }
.phone.s2 .card.mini { opacity: 1; transform: none; }

/* ---------- step 4: the run draws itself ---------- */
.run { width: min(100%, 420px); display: grid; gap: 10px; }
.run .rx { font-weight: 800; font-size: clamp(56px, 6.4vw, 96px); letter-spacing: -.05em; line-height: 1; color: #0B2A17; font-variant-numeric: tabular-nums; }
.run .rx small { font-size: 18px; letter-spacing: 0; font-weight: 700; margin-left: 10px; opacity: .7; }
.run svg { width: 100%; height: 160px; overflow: visible; }
.run path { fill: none; stroke: #0B2A17; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.run .rl { font-size: 14px; font-weight: 600; opacity: .7; }

/* ---------- two channels: one scene, scrolling moves you from Precision to Volatile ---------- */
.lanes { position: relative; height: 240vh; }
.lanes .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.lanes .glow { position: absolute; inset: -20%; transition: opacity .8s; pointer-events: none; }
.lanes .glow.p { background: radial-gradient(40% 40% at 50% 55%, rgba(155, 107, 255, .3), transparent 70%); }
.lanes .glow.v { background: radial-gradient(40% 40% at 50% 55%, rgba(255, 122, 69, .26), transparent 70%); opacity: 0; }
.lanes.vol .glow.p { opacity: 0; } .lanes.vol .glow.v { opacity: 1; }
.lanes .radar { width: min(130vmin, 1000px); left: 50%; top: 55%; transform: translate(-50%, -50%); opacity: .5;
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
.lanes .tabs { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(33, 25, 51, .7); backdrop-filter: blur(10px); z-index: 2; }
.lanes .tabs span { padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--soft); transition: background .4s, color .4s; white-space: nowrap; }
.lanes .tabs span.on { background: var(--accent); color: var(--accent-ink); }
.lanes.vol .tabs span.on { background: var(--volatile); }
.lanes .lane { position: absolute; display: grid; justify-items: center; text-align: center; gap: 18px; padding: 0 var(--gut); width: 100%; max-width: 760px;
  opacity: 0; transform: translateY(60px) scale(.96); filter: blur(6px); transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s; }
.lanes .lane.on { opacity: 1; transform: none; filter: none; }
.lanes .lane.out { transform: translateY(-60px) scale(.96); }
.lanes .lane .eyebrow { justify-content: center; margin: 0; }
.lanes .lane.v .eyebrow { color: var(--volatile); }
.lanes .lane h3 { font-size: clamp(60px, 9vw, 150px); letter-spacing: -.06em; }
.lanes .lane.p h3 { color: #C3ADFF; } .lanes .lane.v h3 { color: #FF9A70; }
.lanes .lane > p:not(.eyebrow) { color: var(--soft); font-size: clamp(18px, 1.6vw, 22px); max-width: 30ch; }
.lanes .lane .card { margin-top: 10px; transform: rotate(-2deg); }
.lanes .lane.v .card { transform: rotate(2deg); border-left-color: var(--volatile); }
.lanes .both { position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--soft); }
@media (max-width: 760px) { .lanes .tabs { top: 84px; } .lanes .lane .card { width: min(100%, 320px); } }

/* ---------- pricing top: the two passes on the wheel ---------- */
.passes { position: relative; overflow: hidden; padding: clamp(130px, 15vw, 190px) 0 clamp(60px, 8vw, 110px); text-align: center; }
.passes .arc { position: absolute; left: 50%; top: 46%; width: 140vmax; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, #2A1B47 0 50%, #1C1330 70%, transparent 71%); box-shadow: 0 0 140px 10px rgba(155, 107, 255, .2); }
.passes .arc::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(155, 107, 255, .3); }
.passes .wrap { position: relative; }
.pass-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 6vw, 72px); flex-wrap: wrap; }
.pass { position: relative; width: min(100%, 340px); border-radius: 32px; padding: 34px 30px 30px; text-align: left; display: grid; gap: 4px;
  background: linear-gradient(165deg, #2B2140, #17111F); box-shadow: inset 0 0 0 1px rgba(155, 107, 255, .2), 0 40px 80px -30px #000;
  transition: transform .5s var(--ease); }
.pass:hover { transform: translateY(-8px); }
.pass.best { background: linear-gradient(165deg, #A47BFF, #6D44DC); color: var(--accent-ink); padding-top: 58px; transform: translateY(-18px); box-shadow: 0 50px 100px -30px rgba(155, 107, 255, .6); }
.pass.best:hover { transform: translateY(-26px); }
.pass .tag { position: absolute; top: 20px; left: 30px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--accent-ink); color: var(--pale); padding: 5px 12px; border-radius: 999px; }
.pass .pn { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.pass .pp { font-weight: 800; font-size: clamp(64px, 7vw, 96px); letter-spacing: -.06em; line-height: 1; margin-top: 10px; display: flex; align-items: flex-start; }
.pass .pp span { font-size: .42em; margin-top: .12em; letter-spacing: -.02em; }
.pass .pt { opacity: .7; font-weight: 600; margin-bottom: 22px; }
.pass .btn { justify-content: center; }
.pass.best .btn { background: var(--accent-ink); color: var(--ink); }
.inc-row { list-style: none; padding: 0; margin: clamp(36px, 5vw, 56px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; }
.inc-row li { padding: 10px 18px; border-radius: 999px; background: rgba(33, 25, 51, .75); backdrop-filter: blur(8px); font-weight: 600; font-size: 15px; }
@media (max-width: 760px) { .pass.best { transform: none; order: -1; } .pass.best:hover { transform: translateY(-6px); } .passes .arc { top: 52%; width: 220vw; } }

/* ---------- FAQ: ask Vyra in a Discord chat ---------- */
.ask { padding: clamp(130px, 14vw, 180px) 0 clamp(60px, 8vw, 100px); position: relative; overflow: hidden;
  background: radial-gradient(50% 50% at 75% 55%, rgba(155, 107, 255, .18), transparent 70%); }
.ask-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.qchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.qchips button { font: 600 15px Inter, sans-serif; color: var(--ink); background: var(--ground-3); border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: background .2s, transform .3s var(--ease); }
.qchips button:hover { background: var(--line); transform: translateY(-2px); }
.qchips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.chat { background: #313338; border-radius: 24px; overflow: hidden; box-shadow: 0 50px 100px -30px #000; position: sticky; top: 100px; color: #DBDEE1; }
.chat-top { padding: 14px 18px; font-weight: 700; color: #F2F3F5; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.chat-top .hash { color: #80848E; margin-right: 4px; font-size: 20px; }
.log { padding: 10px 18px 22px; height: clamp(340px, 52vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; align-items: flex-start; animation: rise .45s var(--ease) both; }
.msg .av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #5865F2; font-size: 20px; }
.msg b { color: #F2F3F5; font-size: 15px; } .msg.you b { color: #C3ADFF; }
.msg .app { background: #5865F2; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 600; margin-left: 4px; }
.msg p { font-size: 15px; line-height: 1.5; margin-top: 2px; }
.typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #B5BAC1; animation: bob 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 860px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } .chat { position: relative; top: 0; } .log { height: 380px; } }

/* ---------- round 5 (2026-11-07) ---------- */
/* opening fills the screen instead of a small scope in the middle */
.veil .scope { width: 150vmin; }
.veil .bl { width: 14px; } .veil .bl.win { width: 18px; }
.veil .v { left: 50%; top: 50%; width: clamp(110px, 18vmin, 190px); height: auto; aspect-ratio: 1; translate: -50% -50%; }

/* the wheel melts down into the four steps: no line between the two */
.orbit .pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; background: linear-gradient(transparent, #1C1330); pointer-events: none; z-index: 1; }
.orbit + .stack::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 90vh; transform: translateX(-50%);
  background: linear-gradient(#1C1330, var(--ground)); pointer-events: none; }

/* how it works: the whole radar, running down behind the steps */
.hero.sub { overflow: visible; }
.hero.sub .radar { width: min(96vh, 900px); right: 2vw; top: auto; bottom: calc(min(96vh, 900px) * -0.5); transform: none; }
@media (max-width: 760px) { .hero.sub .radar { width: 100vw; right: 0; bottom: -45vw; } }

/* pricing: the arc behind the passes fades down through the podium */
.passes { overflow: visible; }
.passes .arc { -webkit-mask: linear-gradient(#000 28%, transparent 62%); mask: linear-gradient(#000 28%, transparent 62%); }

/* podium bars follow the scroll */
.podium.scroll .bar { transition: transform .12s linear; transition-delay: 0s; }

/* channel tabs are real buttons now */
.lanes .tabs button { font: 700 14px Inter, sans-serif; border: 0; background: transparent; cursor: pointer; padding: 8px 16px; border-radius: 999px; color: var(--soft); transition: background .4s, color .4s; white-space: nowrap; }
.lanes .tabs button:hover { color: var(--ink); }
.lanes .tabs button.on { background: var(--accent); color: var(--accent-ink); }
.lanes.vol .tabs button.on { background: var(--volatile); }

/* step 1: where Vyra looks, each source pings in turn around the radar */
.stk .srcs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stk .srcs li { position: absolute; padding: 7px 13px; border-radius: 999px; background: rgba(13, 10, 19, .72); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(155, 107, 255, .3); font-weight: 700; font-size: 13px; white-space: nowrap; opacity: .5; animation: srcping 6s var(--ease) infinite; }
.stk .srcs li:nth-child(1) { left: 0; top: 6%; }
.stk .srcs li:nth-child(2) { right: 0; top: 16%; animation-delay: 1s; }
.stk .srcs li:nth-child(3) { left: 2%; top: 46%; animation-delay: 2s; }
.stk .srcs li:nth-child(4) { right: 4%; top: 58%; animation-delay: 3s; }
.stk .srcs li:nth-child(5) { left: 8%; bottom: 4%; animation-delay: 4s; }
.stk .srcs li:nth-child(6) { right: 10%; bottom: 0; animation-delay: 5s; }
@keyframes srcping { 0%, 100% { opacity: .5; } 6% { opacity: 1; transform: scale(1.1); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 26px rgba(155, 107, 255, .65); } 18% { opacity: 1; transform: none; } 30% { opacity: .5; } }
@media (max-width: 860px) { .stk .srcs li { font-size: 12px; padding: 6px 10px; } }

/* ---------- round 6 (2026-11-07) ---------- */
/* home: the whole radar shows, its bottom melts into the wins wheel; the hero stays one screen tall */
.hero:not(.sub) { overflow: visible; }
.hero:not(.sub) .radar { width: min(100vh, 1000px); right: 3vw; top: 14vh; transform: none;
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
@media (max-width: 760px) { .hero:not(.sub) .radar { width: 92vw; right: 4vw; bottom: -30vw; } }

/* how it works: radar on the left this time, lifted off the first step, fading down behind the heading */
.hero.sub { min-height: 60svh; }
.hero.sub .wrap { text-align: right; }
.hero.sub h1, .hero.sub .lead { margin-left: auto; }
.hero.sub .radar { right: auto; left: 2vw; width: min(80vh, 760px); bottom: calc(min(80vh, 760px) * -0.2);
  -webkit-mask: linear-gradient(#000 65%, transparent); mask: linear-gradient(#000 65%, transparent); }
@media (max-width: 760px) { .hero.sub .radar { width: 92vw; left: 4vw; bottom: -24vw; } .hero.sub .wrap { text-align: left; } .hero.sub h1, .hero.sub .lead { margin-left: 0; } }

/* steps 02 + 04: picture on the left, so it isn't text-left every time */
@media (min-width: 861px) { .stk:nth-of-type(even) > .vis { order: -1; } }

/* FAQ: the chat on the left, the questions on the right */
@media (min-width: 861px) { .ask-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .ask-grid .chat { order: -1; } }
/* how it works radar: pinned from the top so the full circle always clears the menu bar */
.hero.sub .radar { top: 92px; bottom: auto; width: min(calc(100vh - 160px), 680px); }
@media (max-width: 760px) { .hero.sub .radar { top: auto; bottom: -24vw; width: 92vw; } }
@media (max-width: 760px) { .hero:not(.sub) .radar { top: auto; bottom: -12vw; } }

/* ---------- round 7 (2026-11-07) ---------- */
/* opening: coins blip across the screen, crosshairs lock onto the green one, the screen zooms into it (~2s) */
.intro .veil { display: block; position: fixed; inset: 0; z-index: 99; background: var(--ground); pointer-events: none;
  transform-origin: 64% 62%; animation: lockzoom .6s cubic-bezier(.7, 0, .3, 1) 1.35s forwards; }
.veil .rg { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(155, 107, 255, .35); translate: -50% -50%; animation: rgin .5s ease-out both; }
.veil .rg:nth-child(1) { width: 30vmax; } .veil .rg:nth-child(2) { width: 60vmax; } .veil .rg:nth-child(3) { width: 90vmax; } .veil .rg:nth-child(4) { width: 130vmax; }
.veil .bl { position: absolute; width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--soft); translate: -50% -50%; opacity: 0; animation: lockblip .7s ease-out both; }
.veil .bl.win { left: 64%; top: 62%; width: 18px; background: var(--win); box-shadow: 0 0 18px 4px rgba(61, 220, 132, .6); animation: winin .35s var(--ease) .5s both; }
.veil .ch { position: absolute; left: 64%; top: 62%; width: 22vmin; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--win); translate: -50% -50%; opacity: 0; animation: lockon .55s var(--ease) .75s forwards; }
@keyframes rgin { from { opacity: 0; } }
@keyframes lockblip { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.5); } 100% { opacity: .35; transform: none; } }
@keyframes winin { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes lockon { 0% { opacity: 0; transform: scale(3); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(.35); } }
@keyframes lockzoom { to { transform: scale(9); opacity: 0; visibility: hidden; } }
.intro .hero h1 .ln { animation-delay: 1.6s; } .intro .hero h1 .ln:nth-child(2) { animation-delay: 1.7s; }
.intro .hero h1 .ln:nth-child(3) { animation-delay: 1.8s; } .intro .hero .lead, .intro .hero .acts { animation-delay: 1.9s; }

/* page change (ripple) styles live inline in each page head, see tools/build.mjs: they must be there before the first paint */

/* ---------- round 8 (2026-11-07) ---------- */
/* opening: a glowing V sits in the middle the whole time, so people know it's Vyra */
.veil .vv { position: absolute; left: 50%; top: 50%; width: clamp(96px, 13vmin, 156px); height: auto; translate: -50% -50%; border-radius: 50%;
  animation: vvin .45s cubic-bezier(.2, 1.4, .4, 1) both, vvglow 1.2s ease-in-out .45s infinite alternate; }
@keyframes vvin { from { opacity: 0; transform: scale(.5); } }
@keyframes vvglow { from { filter: drop-shadow(0 0 14px rgba(155, 107, 255, .55)); } to { filter: drop-shadow(0 0 38px rgba(155, 107, 255, .95)); } }

/* the V is just the letter, glowing (no logo badge) */
.veil .vv { width: auto; border-radius: 0; font: 800 clamp(110px, 16vmin, 190px)/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; color: var(--pale);
  animation: vvin .45s cubic-bezier(.2, 1.4, .4, 1) both, vvglow 1.2s ease-in-out .45s infinite alternate; }
@keyframes vvglow { from { text-shadow: 0 0 18px rgba(155, 107, 255, .6), 0 0 40px rgba(155, 107, 255, .3); } to { text-shadow: 0 0 28px rgba(155, 107, 255, .95), 0 0 80px rgba(155, 107, 255, .6); } }

/* ---------- round 9 (2026-11-07) ---------- */
/* how it works top: text back on the left, the coin funnel on the right, running down behind the "Four steps" heading */
.hero.sub .wrap { text-align: left; }
.hero.sub h1, .hero.sub .lead { margin-left: 0; }
.hero.sub .funnel { position: absolute; right: 2vw; top: 70px; width: min(52vw, 820px); height: calc(100% + 34vh); pointer-events: none;
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
@media (max-width: 760px) { .hero.sub .funnel { right: 0; left: 0; width: 100%; top: auto; bottom: -26vh; height: calc(72vw + 26vh); } }

/* step 4: the curvy run, with "Called" and the peak marked */
.run svg { width: 100%; height: auto; aspect-ratio: 328 / 186; }
.run .ln { fill: none; stroke: #0B2A17; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.run .cm circle, .run .pk circle { fill: #0B2A17; }
.run .cm text, .run .pk text { font: 800 13px Inter, system-ui, sans-serif; fill: #0B2A17; text-anchor: middle; }
.run .cm text { text-anchor: start; }
.run .pk { opacity: 0; transition: opacity .3s; } .run .pk.on { opacity: 1; }
.run .pk circle { fill: var(--win); stroke: #0B2A17; stroke-width: 3; }

/* FAQ: questions + chat on top, the market river as a wide band underneath, both on the first screen;
   the chart starts a little under the chat so the two flow together (the questions stay clickable) */
.ask { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 0; }
.ask .wrap { position: relative; z-index: 1; width: 100%; }
.ask h1 { font-size: clamp(52px, 6vw, 96px); }
.ask .log { height: clamp(220px, 32vh, 380px); }
.ask { padding-top: clamp(100px, 10vw, 140px); }
.ask .chat { position: relative; top: 0; }
.ask .river { order: 2; position: relative; display: block; flex: 1 1 0px; height: 0; width: 100%; min-height: 230px; margin-top: -50px; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 22%); mask: linear-gradient(transparent, #000 22%); }
@media (max-width: 860px) { .ask .river { min-height: 220px; margin-top: 0; } }

/* ---------- why vyra (2026-11-07) ---------- */
/* top: the ticker wall behind a centred headline; the wall fades into the line that runs down the page */
.wallhero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px 0 80px; }
.wallhero .wall { position: absolute; inset: 0; display: flex; justify-content: space-around; pointer-events: none;
  -webkit-mask: radial-gradient(46% 34% at 50% 48%, transparent 35%, #000 85%), linear-gradient(#000 70%, transparent);
  -webkit-mask-composite: source-in; mask: radial-gradient(46% 34% at 50% 48%, transparent 35%, #000 85%) intersect, linear-gradient(#000 70%, transparent); }
.wallhero .col { display: flex; flex-direction: column; gap: 22px; transform: translateY(var(--off)); animation: wallup var(--sp) linear infinite;
  font: 700 clamp(13px, 1.15vw, 17px)/1 Inter, system-ui, sans-serif; color: #3A2E52; letter-spacing: .02em; }
.wallhero .col span { white-space: nowrap; transition: color .35s, text-shadow .35s; }
.wallhero .col span.bad { color: #F87171; text-decoration: line-through; text-decoration-thickness: 2px; }
.wallhero .col span.ok { color: var(--win); text-shadow: 0 0 16px rgba(61, 220, 132, .75); }
.wallhero .col span.ok::after { content: " ✓ CALLED"; font-size: .7em; letter-spacing: .1em; }
@keyframes wallup { from { transform: translateY(var(--off)); } to { transform: translateY(calc(var(--off) - 50%)); } }
.wallhero .wrap { position: relative; }
.wallhero h1 { font-size: clamp(56px, 8.4vw, 136px); }
.wallhero h1 em { font-style: normal; color: var(--accent); }
.wallhero h1 .ln { display: inline-block; animation: rise .9s var(--ease) both; } .wallhero h1 .ln + .ln { animation-delay: .1s; }
.wallhero .eyebrow { justify-content: center; }
.wallhero .lead { margin: 26px auto 0; max-width: 34ch; color: var(--soft); font-size: clamp(18px, 1.6vw, 22px); animation: rise .9s var(--ease) .2s both; }

/* the reasons: one line down the middle, each reason on alternating sides of it (one column + line on the left on phones) */
.why { position: relative; max-width: var(--max); margin: 0 auto; padding: 4vh var(--gut) 18vh; display: grid; gap: clamp(90px, 16vh, 180px); }
.why .spine { position: absolute; left: 50%; top: 0; bottom: 12vh; width: 2px; background: var(--line); transform: translateX(-50%); }
.why .spine i { position: absolute; inset: 0; background: linear-gradient(var(--accent), var(--pale)); box-shadow: 0 0 18px rgba(155, 107, 255, .7); transform-origin: top; transform: scaleY(0); }
.why .rs { position: relative; width: calc(50% - clamp(40px, 6vw, 90px)); }
.why .rs:nth-of-type(even) { justify-self: end; }
.why .rs::before { content: ""; position: absolute; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 2px var(--line); transition: background .4s, box-shadow .4s; }
.why .rs:nth-of-type(odd)::before { right: calc(-1 * clamp(40px, 6vw, 90px) - 9px); }
.why .rs:nth-of-type(even)::before { left: calc(-1 * clamp(40px, 6vw, 90px) - 9px); }
.why .rs.lit::before { background: var(--accent); box-shadow: 0 0 0 6px rgba(155, 107, 255, .2), 0 0 24px rgba(155, 107, 255, .8); }
.why .rs:nth-of-type(odd) { text-align: right; } .why .rs:nth-of-type(odd) .eyebrow { justify-content: flex-end; } .why .rs:nth-of-type(odd) .tags { justify-content: flex-end; }
.why h2 { font-size: clamp(38px, 4.6vw, 70px); }
.why .rs > p:not(.eyebrow) { margin-top: 18px; color: var(--soft); font-size: clamp(17px, 1.4vw, 20px); }
.why .tags { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.why .tags li { padding: 8px 14px; border-radius: 999px; background: var(--ground-3); font-weight: 600; font-size: 14px; }
.why .tags.no li { color: #FCA5A5; } .why .tags.no li::before { content: "✕ "; }
.why .tags.yes li { color: #9BEBBF; }
@media (max-width: 760px) {
  .why { gap: 80px; padding-left: calc(var(--gut) + 30px); }
  .why .spine { left: calc(var(--gut) + 7px); transform: none; }
  .why .rs, .why .rs:nth-of-type(even) { width: 100%; justify-self: start; text-align: left; }
  .why .rs:nth-of-type(odd) .eyebrow, .why .rs:nth-of-type(odd) .tags { justify-content: flex-start; }
  .why .rs:nth-of-type(odd)::before, .why .rs:nth-of-type(even)::before { left: -31px; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .wallhero .col { animation: none; } }
/* why vyra fixes: calmer wall with a wider clear middle, tighter spacing, phones all left-aligned */
.wallhero .col { color: #2E2541; }
.wallhero .wall { -webkit-mask: radial-gradient(58% 42% at 50% 50%, transparent 45%, #000 90%), linear-gradient(#000 70%, transparent); -webkit-mask-composite: source-in;
  mask: radial-gradient(58% 42% at 50% 50%, transparent 45%, #000 90%) intersect, linear-gradient(#000 70%, transparent); }
.why { gap: clamp(56px, 9vh, 110px); }
@media (max-width: 760px) {
  .wallhero .wall { -webkit-mask: radial-gradient(90% 34% at 50% 52%, transparent 55%, #000 95%), linear-gradient(#000 70%, transparent); -webkit-mask-composite: source-in;
    mask: radial-gradient(90% 34% at 50% 52%, transparent 55%, #000 95%) intersect, linear-gradient(#000 70%, transparent); }
  .why .rs:nth-of-type(odd) { text-align: left; }
}
.wallhero .wall { -webkit-mask: radial-gradient(58% 42% at 50% 50%, transparent 45%, #000 90%), linear-gradient(transparent 60px, #000 170px, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask: radial-gradient(58% 42% at 50% 50%, transparent 45%, #000 90%) intersect, linear-gradient(transparent 60px, #000 170px, #000 70%, transparent); }
@media (max-width: 760px) { .wallhero .wall { -webkit-mask: radial-gradient(90% 34% at 50% 52%, transparent 55%, #000 95%), linear-gradient(transparent 60px, #000 170px, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask: radial-gradient(90% 34% at 50% 52%, transparent 55%, #000 95%) intersect, linear-gradient(transparent 60px, #000 170px, #000 70%, transparent); } }