/* =============================================================================
   Svync — landing page
   Tokens mirror the app's theme (src/theme.ts) so the site and the app are one
   brand: ink #101014, lime, pink, cyan, violet, the Svync cyan from the logo.
   ============================================================================= */

@font-face { font-family: "Sora"; font-weight: 400; font-display: swap; src: url("/fonts/Sora_400Regular.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url("/fonts/Sora_600SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url("/fonts/Sora_700Bold.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("/fonts/Unbounded_800ExtraBold.woff2") format("woff2"); }

:root {
  --ink: #101014; --deep: #0a0a0d; --card: #1c1c24; --control: #26262f; --pressed: #3a3a46; --line: #4a4a56;
  --text: #f5f5f0; --sub: #c4c4cf; --muted: #a4a4b2; --dim: #8a8a96;
  --lime: #d8ff3d; --pink: #ff4fa3; --cyan: #3dd9ff; --violet: #9b82ff; --orange: #ff8a3d;
  --sun: #ffd93d; --mint: #3dffa8; --red: #ff5a5a; --sv: #1accd1; --sv-glow: #00f0ff; --sv-pink: #ff3df0;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --mx: 50vw; --my: 30vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 17px/1.55 "Sora", system-ui, sans-serif;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--lime); color: var(--ink); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 12px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }

/* ---------- ambient layers ---------- */
.spotlight { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(26, 204, 209, .09), transparent 60%); }
main, .foot { position: relative; z-index: 1; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 "Sora"; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot--lime { background: var(--lime); } .dot--cyan { background: var(--cyan); } .dot--pink { background: var(--pink); }
.dot--mint { background: var(--mint); } .dot--violet { background: var(--violet); } .dot--sun { background: var(--sun); } .dot--sv { background: var(--sv); }
.h2 { font: 800 clamp(34px, 5.4vw, 64px)/1.06 "Unbounded", sans-serif; letter-spacing: -.02em; margin-top: 18px; }
.lede { color: var(--sub); font-size: clamp(17px, 1.6vw, 20px); max-width: 620px; margin-top: 20px; }
.small { color: var(--muted); font-size: 14px; margin-top: 18px; }
.center { text-align: center; margin-inline: auto; }
.muted { color: var(--muted); }
.hl-lime { color: var(--lime); } .hl-pink { color: var(--pink); } .hl-cyan { color: var(--cyan); }
.hl-mint { color: var(--mint); } .hl-violet { color: var(--violet); }
.hl-sv { background: linear-gradient(100deg, var(--sv-glow), var(--sv) 40%, var(--sv-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- buttons: the app's "physical key" ---------- */
.btn { --face: var(--lime); --ledge: #9fbf1f; position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 28px; border-radius: 20px; font: 700 18px/1 "Sora"; text-decoration: none; color: var(--ink);
  background: var(--face); box-shadow: 0 6px 0 var(--ledge); transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); animation: shine 5s 2s infinite; }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ledge); }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--sm { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 16px; box-shadow: 0 4px 0 var(--ledge); }
.btn--ghost { --face: transparent; background: var(--control); color: var(--text); box-shadow: none; }
.btn--ghost::after { display: none; }
.btn--ghost:hover { background: var(--pressed); }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px;
  max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 120px; }
.hero__title { font: 800 clamp(46px, 8.2vw, 112px)/.98 "Unbounded", sans-serif; letter-spacing: -.035em; margin-top: 22px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .word { display: inline-block; transform: translateY(105%) rotate(4deg); animation: rise 1s var(--ease) forwards; }
.hero__title .line:nth-child(1) .word:nth-child(1) { animation-delay: .1s; }
.hero__title .line:nth-child(1) .word:nth-child(2) { animation-delay: .2s; }
.hero__title .line:nth-child(2) .word:nth-child(1) { animation-delay: .34s; }
.hero__title .line:nth-child(2) .word:nth-child(2) { animation-delay: .44s; }
@keyframes rise { to { transform: none; } }
.hero__sub { color: var(--sub); font-size: clamp(18px, 1.9vw, 22px); max-width: 560px; margin-top: 26px; }
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.45em; color: var(--text); font-weight: 700; }
.rotator__word { display: inline-block; background: var(--pink); color: var(--ink); padding: 0 .35em; border-radius: .35em; transition: transform .45s var(--ease), opacity .45s; }
.rotator__word.out { transform: translateY(-110%); opacity: 0; }
.rotator__word.in { transform: translateY(110%); opacity: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero__chips li { padding: 8px 14px; border-radius: 999px; background: var(--card); color: var(--sub); font-size: 14px; font-weight: 600; }
.hero__chips li::before { content: "✓"; color: var(--mint); margin-right: 8px; font-weight: 800; }

/* blobs: the app's characters, eyes follow the pointer */
.hero__blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; display: grid; place-items: center; will-change: transform; }
.blob .eyes { display: flex; gap: 22%; width: 46%; justify-content: center; transform: translate(var(--ex, 0), var(--ey, 0)); transition: transform .25s var(--ease); }
.blob .eyes b { width: 18%; aspect-ratio: 1; min-width: 10px; border-radius: 50%; background: var(--ink); animation: blink 5.2s infinite; }
.blob--lime { width: 190px; height: 190px; border-radius: 50%; background: var(--lime); left: -50px; bottom: 6%; }
.blob--pink { width: 150px; height: 150px; border-radius: 44px; background: var(--pink); right: 3%; top: 4%; rotate: 10deg; }
.blob--cyan { width: 120px; height: 120px; border-radius: 50%; background: var(--cyan); right: 38%; bottom: 3%; }
.blob--violet { width: 92px; height: 92px; border-radius: 28px; background: var(--violet); left: 44%; top: 2%; rotate: -8deg; }
.blob--lime .eyes b { animation-delay: .4s; } .blob--cyan .eyes b { animation-delay: 1.3s; } .blob--violet .eyes b { animation-delay: 2.1s; }
.hero__blobs .blob { animation: bob 6s ease-in-out infinite; }
.hero__blobs .blob:nth-child(2) { animation-duration: 7.5s; animation-delay: -2s; }
.hero__blobs .blob:nth-child(3) { animation-duration: 5.4s; animation-delay: -1s; }
.hero__blobs .blob:nth-child(4) { animation-duration: 8s; animation-delay: -3s; }
@keyframes bob { 50% { translate: 0 -14px; } }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }

/* phone */
.hero__phone { display: grid; place-items: center; perspective: 1200px; }
.phone { position: relative; width: min(330px, 78vw); aspect-ratio: 9 / 19; border-radius: 52px; padding: 12px; background: #1b1b22;
  box-shadow: 0 0 0 2px #2c2c36, 0 40px 80px -20px rgba(0,0,0,.7), 0 0 120px -30px rgba(26,204,209,.45); transform-style: preserve-3d;
  transition: transform .4s var(--ease); }
.phone__notch { position: absolute; top: 22px; left: 50%; translate: -50% 0; width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: var(--ink); }
.phone__dots { position: absolute; bottom: -34px; left: 50%; translate: -50% 0; display: flex; gap: 8px; }
.phone__dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--pressed); transition: width .3s var(--ease), background .3s; }
.phone__dots i.on { width: 26px; background: var(--sv); }
.screen { position: absolute; inset: 0; padding: 56px 16px 16px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateX(30px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.screen.is-active { opacity: 1; transform: none; }
.screen.is-leaving { opacity: 0; transform: translateX(-30px) scale(.98); }
.s-band { margin: -56px -16px 4px; padding: 58px 18px 18px; border-radius: 0 0 26px 26px; }
.s-band--lime { background: var(--lime); color: var(--ink); }
.s-eyebrow { font: 700 10px/1 "Sora"; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.s-title { font: 800 26px/1.1 "Unbounded"; margin-top: 6px; }
.s-title--light { color: var(--text); }
.s-card { border-radius: 20px; padding: 12px; }
.s-card--lime { background: var(--lime); }
.s-card .art { height: 80px; border-radius: 12px; margin-bottom: 10px; }
.s-small { font-size: 12px; font-weight: 600; }
.s-big { font: 800 18px/1.1 "Unbounded"; margin-top: 4px; }
.ink { color: var(--ink); }
.s-label { font-weight: 700; font-size: 13px; margin-top: 4px; }
.s-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--card); font-size: 12px; font-weight: 600; }
.pip { width: 26px; height: 26px; border-radius: 9px; flex: none; }
.pip--cyan { background: var(--cyan); } .pip--mint { background: var(--mint); } .pip--orange { background: var(--orange); }
.s-live { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--lime); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.s-timer { height: 8px; border-radius: 4px; background: var(--control); overflow: hidden; margin-top: 8px; }
.s-timer span { display: block; height: 100%; background: var(--pink); animation: drain 4s linear infinite; transform-origin: 0 50%; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.s-q { font: 800 22px/1.1 "Unbounded"; text-align: center; margin: 16px 0 6px; }
.s-choice { display: grid; place-items: center; height: 92px; border-radius: 22px; font: 800 26px/1 "Unbounded"; color: var(--ink); }
.s-choice--pink { background: var(--pink); animation: nudge 4s infinite; } .s-choice--cyan { background: var(--cyan); }
@keyframes nudge { 40%, 60% { transform: scale(1); } 50% { transform: scale(1.04); } }
.s-or { text-align: center; color: var(--muted); font-weight: 700; font-size: 13px; }
.s-person { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--card); }
.s-person b { display: block; font-size: 14px; }
.s-person small { display: block; font-size: 11px; color: var(--muted); }
.s-person small.mint { color: var(--mint); font-weight: 700; }
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 16px/1 "Unbounded"; color: var(--ink); }
.av--sun { background: var(--sun); } .av--mint { background: var(--mint); } .av--orange { background: var(--orange); } .av--pink { background: var(--pink); }
.av--lg { width: 84px; height: 84px; font-size: 32px; }

.scroll-cue { position: absolute; bottom: 30px; left: 50%; translate: -50% 0; width: 28px; height: 46px; border-radius: 16px; border: 2px solid var(--line); }
.scroll-cue span { position: absolute; left: 50%; top: 9px; translate: -50% 0; width: 4px; height: 9px; border-radius: 2px; background: var(--text); animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--control); background: var(--deep); rotate: -1.4deg; margin: 10px -20px; }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.m { font: 800 clamp(22px, 3vw, 36px)/1 "Unbounded"; padding: 14px 26px; border-radius: 999px; color: var(--ink); white-space: nowrap; }
.m--pink { background: var(--pink); } .m--cyan { background: var(--cyan); } .m--lime { background: var(--lime); } .m--mint { background: var(--mint); }
.m--orange { background: var(--orange); } .m--violet { background: var(--violet); } .m--sun { background: var(--sun); } .m--red { background: var(--red); }
@keyframes slide { to { transform: translateX(calc(-50% - 8px)); } }

/* ---------- sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 160px) var(--gutter) 0; }
.section__head { max-width: 760px; }
/* Anchored jumps land below the sticky header, not under it. */
[id] { scroll-margin-top: 28px; }

/* how */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; counter-reset: s; }
.step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--card); overflow: hidden; }
.step::before { content: ""; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: var(--c); opacity: .12; transition: transform .6s var(--ease), opacity .6s; }
.step:hover::before { transform: scale(1.4); opacity: .22; }
.step__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--c); color: var(--ink); font: 800 22px/1 "Unbounded"; }
.step h3 { font: 800 22px/1.2 "Unbounded"; margin-top: 22px; }
.step p { color: var(--sub); margin-top: 10px; }

/* try a round */
.try { margin-top: 26px; padding: clamp(22px, 4vw, 40px); border-radius: 34px; background: linear-gradient(160deg, #1e1a33, #15151c); border: 1px solid #2c2645; }
.try__head { display: flex; justify-content: space-between; align-items: center; }
.try__count { font: 800 18px/1 "Unbounded"; color: var(--muted); }
.try__timer { height: 10px; border-radius: 5px; background: var(--control); overflow: hidden; margin-top: 20px; }
.try__timer span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--orange)); transform-origin: 0 50%; }
.try__q { font: 800 clamp(22px, 3vw, 32px)/1.15 "Unbounded"; text-align: center; margin: 28px 0 22px; }
.try__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { position: relative; height: clamp(110px, 16vw, 160px); border: 0; border-radius: 26px; font: 800 clamp(24px, 3.6vw, 40px)/1 "Unbounded"; color: var(--ink); overflow: hidden; isolation: isolate;
  transition: transform .15s var(--ease), filter .3s; }
.choice--pink { background: var(--pink); } .choice--cyan { background: var(--cyan); }
.choice:hover { transform: translateY(-3px); } .choice:active { transform: scale(.97); }
.choice__bar { position: absolute; inset: auto 0 0 0; height: 0; background: rgba(16,16,20,.22); z-index: -1; transition: height .9s var(--ease); }
.choice__pct { position: absolute; right: 18px; bottom: 14px; font: 800 18px/1 "Unbounded"; font-style: normal; opacity: 0; transition: opacity .4s .5s; }
.try.is-revealed .choice__pct { opacity: 1; }
.try.is-revealed .choice:not(.is-picked) { filter: saturate(.4) brightness(.7); }
.choice.is-picked::after { content: "Your pick"; position: absolute; left: 18px; top: 14px; font: 700 12px/1 "Sora"; letter-spacing: .1em; text-transform: uppercase; }
.try__note { color: var(--muted); font-size: 14px; text-align: center; margin-top: 18px; }

/* games */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 54px; }
.card { position: relative; padding: 14px 14px 22px; border-radius: var(--radius); background: var(--card); transform-style: preserve-3d;
  transition: transform .35s var(--ease), box-shadow .35s; }
.card:hover { box-shadow: 0 30px 60px -30px var(--c); }
.card__art { height: 140px; border-radius: 20px; background: var(--c); margin-bottom: 18px; transform: translateZ(30px); }
.card h3 { font: 800 19px/1.2 "Unbounded"; padding: 0 6px; }
.card p { color: var(--sub); font-size: 15px; margin-top: 8px; padding: 0 6px; }
.tag { display: inline-block; margin: 14px 6px 0; padding: 6px 12px; border-radius: 999px; background: var(--control); color: var(--sub); font-size: 13px; font-weight: 600; }
.soon { margin-top: 26px; color: var(--sub); display: flex; align-items: center; gap: 12px; }
.lock { width: 22px; height: 22px; border-radius: 6px; background: var(--line); position: relative; flex: none; }
.lock::before { content: ""; position: absolute; left: 5px; top: -7px; width: 12px; height: 10px; border: 3px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }

/* game art: flat geometric pictures, like the app's GameArt */
.art--whosaid { background: radial-gradient(circle at 30% 45%, var(--ink) 0 12%, transparent 13%), radial-gradient(circle at 70% 45%, var(--ink) 0 12%, transparent 13%), linear-gradient(var(--violet), var(--violet)); position: relative; }
.art--whosaid::after { content: "?"; position: absolute; right: 14%; top: 8%; font: 800 44px/1 "Unbounded"; color: var(--sun); }
.s-card .art--whosaid { background: radial-gradient(circle at 35% 50%, var(--ink) 0 9%, transparent 10%), radial-gradient(circle at 65% 50%, var(--ink) 0 9%, transparent 10%), var(--violet); }
.art--rapid { background: linear-gradient(115deg, var(--pink) 0 49%, var(--ink) 49% 51%, var(--cyan) 51%); }
.art--prompt { background: radial-gradient(ellipse 22% 17% at 36% 40%, var(--text) 97%, transparent 100%), radial-gradient(ellipse 18% 14% at 64% 64%, var(--sun) 97%, transparent 100%), var(--pink); }
.art--puzzle { background: conic-gradient(from 45deg, var(--mint) 0 25%, var(--ink) 0 26%, var(--mint) 0 50%, var(--ink) 0 51%, var(--mint) 0 75%, var(--ink) 0 76%, var(--mint) 0); background-size: 46px 46px; }
.art--carrom { background: radial-gradient(circle at 50% 50%, var(--red) 0 9%, transparent 10%), radial-gradient(circle at 30% 34%, var(--ink) 0 7%, transparent 8%), radial-gradient(circle at 68% 66%, var(--text) 0 7%, transparent 8%), radial-gradient(circle at 72% 30%, var(--ink) 0 7%, transparent 8%), repeating-linear-gradient(45deg, #e8a45a 0 10px, #f0b36e 10px 20px); }
.art--trivia { background: linear-gradient(var(--sun), var(--sun)); position: relative; }
.art--trivia::before { content: ""; position: absolute; inset: 22% 26%; background: linear-gradient(var(--ink) 0 0) 0 0 / 46% 44% no-repeat, linear-gradient(var(--ink) 0 0) 100% 0 / 46% 44% no-repeat, linear-gradient(var(--ink) 0 0) 0 100% / 46% 44% no-repeat, linear-gradient(var(--orange) 0 0) 100% 100% / 46% 44% no-repeat; }
.art--draw { background: var(--cyan); position: relative; overflow: hidden; }
.art--draw::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46%; height: 10px; border-radius: 5px; background: var(--ink); rotate: -12deg; box-shadow: 0 -26px 0 -2px var(--pink), 0 26px 0 -2px var(--lime); }
.art--lights { background: radial-gradient(circle at 50% 46%, var(--sun) 0 13%, transparent 14%), radial-gradient(circle at 22% 70%, var(--ink) 0 8%, transparent 9%), radial-gradient(circle at 78% 70%, var(--ink) 0 8%, transparent 9%), var(--red); }
.art--pong { background: radial-gradient(circle at 30% 70%, var(--red) 0 9%, transparent 10%), radial-gradient(circle at 50% 70%, var(--red) 0 9%, transparent 10%), radial-gradient(circle at 70% 70%, var(--red) 0 9%, transparent 10%), radial-gradient(circle at 40% 48%, var(--red) 0 9%, transparent 10%), radial-gradient(circle at 60% 48%, var(--red) 0 9%, transparent 10%), radial-gradient(circle at 50% 26%, var(--text) 0 5%, transparent 6%), var(--lime); }
.art--ludo { background: linear-gradient(var(--red) 0 0) 0 0 / 50% 50% no-repeat, linear-gradient(var(--cyan) 0 0) 100% 0 / 50% 50% no-repeat, linear-gradient(var(--mint) 0 0) 0 100% / 50% 50% no-repeat, linear-gradient(var(--sun) 0 0) 100% 100% / 50% 50% no-repeat; position: relative; }
.art--ludo::after { content: ""; position: absolute; inset: 30%; background: var(--ink); rotate: 45deg; border-radius: 6px; }

/* build a svync */
.build { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.templates, .palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.palette { margin-top: 12px; }
.tpl, .palette button { border: 0; padding: 11px 16px; border-radius: 14px; background: var(--card); color: var(--sub); font-weight: 600; font-size: 15px; transition: background .2s, color .2s, transform .15s; }
.tpl:hover, .palette button:hover { background: var(--pressed); color: var(--text); }
.tpl:active, .palette button:active { transform: scale(.95); }
.tpl.is-on { background: var(--sv); color: var(--ink); }
.palette button::before { content: "+ "; color: var(--sv); font-weight: 800; }
.build__phone { display: grid; place-items: center; }
.phone--sv { box-shadow: 0 0 0 2px #1d3a3c, 0 40px 80px -20px rgba(0,0,0,.7), 0 0 140px -30px rgba(26, 204, 209, .7); }
.phone__screen--sv { background: radial-gradient(120% 60% at 50% 0%, #0b2a2d, #071618 70%); padding: 58px 14px 14px; display: flex; flex-direction: column; }
.sv-name { font: 800 22px/1.1 "Unbounded"; color: var(--text); padding: 0 4px 12px; }
.sv-blocks { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.blk { border-radius: 18px; padding: 12px 14px; color: var(--ink); animation: snap .55s var(--ease) both; }
.blk.out { animation: unsnap .3s var(--ease) both; }
@keyframes snap { from { opacity: 0; transform: translateY(24px) scale(.9) rotate(-2deg); } }
@keyframes unsnap { to { opacity: 0; transform: translateX(-40px) scale(.9); height: 0; padding: 0; margin: 0; } }
.blk h4 { margin: 0; font: 700 11px/1 "Sora"; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.blk .v { font: 800 24px/1.15 "Unbounded"; margin-top: 6px; }
.blk .row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-weight: 700; font-size: 14px; }
.blk button { border: 0; background: var(--ink); color: var(--text); border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 13px; }
.blk ul { margin-top: 6px; font-size: 13px; font-weight: 600; }
.blk .check li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.blk .check li::before { content: ""; width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--ink); flex: none; }
.blk .check li.done::before { background: var(--ink); }
.blk .check li.done { text-decoration: line-through; opacity: .6; }
.blk .bar { height: 10px; border-radius: 5px; background: rgba(16,16,20,.2); overflow: hidden; margin-top: 4px; }
.blk .bar i { display: block; height: 100%; background: var(--ink); transition: width .8s var(--ease); }

/* people */
.people { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.radar { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,217,255,.12), transparent 70%); }
.radar__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(61,217,255,.35); animation: ping 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
.radar__ring:nth-child(2) { animation-delay: 1.2s; } .radar__ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes ping { from { transform: scale(.15); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(61,217,255,.28), transparent 25%); animation: spin 4s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.radar__me { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 8px rgba(61,217,255,.2); }
.radar__room { position: absolute; padding: 10px 14px; border-radius: 16px; background: var(--card); font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); animation: bob 5s ease-in-out infinite; }
.radar__room small { display: block; font-weight: 600; color: var(--cyan); font-size: 12px; }
.r1 { left: 8%; top: 18%; } .r2 { right: 2%; top: 44%; animation-delay: -1.5s; } .r3 { left: 18%; bottom: 10%; animation-delay: -3s; }
.ticks { margin-top: 26px; display: grid; gap: 12px; }
.ticks li { padding-left: 34px; position: relative; color: var(--sub); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 7px; background: var(--cyan); }
.ticks b { color: var(--text); }

/* swap */
.swapdemo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 46px; }
.swapcard { display: grid; justify-items: center; gap: 14px; padding: 30px 20px; border-radius: var(--radius); background: var(--card); text-align: center; }
.swapcard__name { font: 800 clamp(20px, 2.6vw, 28px)/1.1 "Unbounded"; transition: opacity .25s, transform .25s; }
.swapcard__name.flip { opacity: 0; transform: translateY(10px); }
.toggle { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--sub); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { position: relative; width: 56px; height: 32px; border-radius: 16px; background: var(--pressed); transition: background .25s; }
.toggle span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--muted); transition: transform .25s var(--ease), background .25s; }
.toggle input:checked + span { background: var(--mint); }
.toggle input:checked + span::after { transform: translateX(24px); background: var(--ink); }
.toggle input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.shield { width: 110px; }
.shield path:first-child { fill: rgba(74,74,86,.4); stroke: var(--line); stroke-width: 4; stroke-linejoin: round; transition: fill .5s, stroke .5s; }
.shield .tick { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 64; stroke-dashoffset: 64; transition: stroke-dashoffset .6s .2s var(--ease); }
.swapdemo.is-mutual .shield path:first-child { fill: var(--mint); stroke: var(--mint); }
.swapdemo.is-mutual .shield .tick { stroke-dashoffset: 0; }
.swapdemo__status { text-align: center; margin-top: 22px; font-weight: 700; color: var(--muted); min-height: 1.6em; }
.swapdemo__status.ok { color: var(--mint); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.pillar { padding: 26px; border-radius: var(--radius); border: 1px solid var(--control); }
.pillar h3 { font: 800 18px/1.2 "Unbounded"; }
.pillar p { color: var(--sub); margin-top: 10px; font-size: 15px; }

/* alike */
.alike { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.alike__ring { position: relative; max-width: 380px; width: 100%; margin: 0 auto; }
.alike__ring svg { rotate: -90deg; }
.alike__ring circle { fill: none; stroke-width: 18; stroke-linecap: round; }
.alike__ring .track { stroke: var(--control); }
.alike__ring .fill { stroke: url(#none); stroke: var(--violet); stroke-dasharray: 528; stroke-dashoffset: 528; transition: stroke-dashoffset 2s var(--ease); filter: drop-shadow(0 0 18px rgba(155,130,255,.6)); }
.alike__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 800 clamp(56px, 8vw, 84px)/1 "Unbounded"; }
.alike__num small { display: block; font: 700 14px/1 "Sora"; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.vibes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.vibes span { padding: 10px 16px; border-radius: 999px; background: var(--c); color: var(--ink); font-weight: 700; font-size: 15px; transition: transform .2s var(--ease); }
.vibes span:hover { transform: rotate(-3deg) scale(1.06); }

/* faq */
.faq__list { margin-top: 40px; display: grid; gap: 12px; max-width: 880px; }
.faq details { border-radius: 22px; background: var(--card); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 64px 22px 24px; font: 700 18px/1.35 "Sora"; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 14px; translate: 0 -70%; border-right: 3px solid var(--sun); border-bottom: 3px solid var(--sun); rotate: 45deg; transition: rotate .3s var(--ease), translate .3s; }
.faq details[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq details p { padding: 0 24px 24px; color: var(--sub); }

/* get */
.get { position: relative; max-width: var(--max); margin: clamp(80px, 12vw, 160px) auto 0; padding: clamp(60px, 9vw, 110px) var(--gutter); border-radius: 44px;
  background: radial-gradient(80% 120% at 50% 0%, #1b2a12, var(--deep) 70%); text-align: center; overflow: hidden; }
.get__title { font: 800 clamp(40px, 7vw, 92px)/1 "Unbounded"; letter-spacing: -.03em; }
.get__blobs .blob { position: absolute; }
.get__blobs .blob--sm:nth-child(1) { width: 110px; height: 110px; border-radius: 34px; left: 6%; top: 14%; rotate: -10deg; animation: bob 6s infinite ease-in-out; }
.get__blobs .blob--sm:nth-child(2) { width: 80px; height: 80px; border-radius: 50%; right: 8%; top: 20%; animation: bob 5s -2s infinite ease-in-out; }
.get__blobs .blob--sm:nth-child(3) { width: 130px; height: 130px; border-radius: 50%; right: 14%; bottom: -40px; animation: bob 7s -1s infinite ease-in-out; }
.stores { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-width: 200px; padding: 14px 22px; border-radius: 18px; background: var(--text); color: var(--ink); text-decoration: none; text-align: left; font: 800 20px/1.1 "Unbounded"; transition: transform .2s var(--ease); }
.store svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.store small { display: block; font: 600 12px/1.3 "Sora"; opacity: .7; }
.store:hover { transform: translateY(-3px); }
.store[aria-disabled="true"] { cursor: default; background: var(--card); color: var(--sub); }

/* footer */
.foot { max-width: var(--max); margin: 0 auto; padding: 60px var(--gutter) 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
.foot__brand p { color: var(--muted); font-size: 14px; margin-top: 10px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot__nav a { text-decoration: none; color: var(--sub); font-weight: 600; font-size: 15px; }
.foot__nav a:hover { color: var(--text); }
.foot__fine { grid-column: 1 / -1; color: var(--dim); font-size: 13px; border-top: 1px solid var(--control); padding-top: 22px; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; text-align: left; }
  .hero__phone { margin-top: 30px; }
  .build, .people, .alike { grid-template-columns: 1fr; }
  .people .radar { order: 2; }
  .steps, .pillars { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { min-height: auto; padding-bottom: 90px; }
  .blob--pink { width: 96px; height: 96px; border-radius: 28px; top: 10px; right: -20px; }
  .blob--lime { width: 120px; height: 120px; left: -40px; bottom: 40%; }
  .blob--violet, .blob--cyan { display: none; }
  .scroll-cue { display: none; }
  .swapdemo { grid-template-columns: 1fr; }
  .swapdemo__mid { justify-self: center; order: 2; }
  #swap-them { order: 3; }
  .foot { grid-template-columns: 1fr; }
  .get__blobs .blob--sm:nth-child(1), .get__blobs .blob--sm:nth-child(2) { display: none; }
}

/* ---------- reduced motion: the site works, it just stops moving ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__title .word { transform: none; }
  .marquee__track { animation: none; }
}

/* =============================================================================
   v3 — Svync-first. Everything below supersedes the matching rules above.
   ============================================================================= */
body { background:
  radial-gradient(1200px 700px at 85% -10%, rgba(26, 204, 209, .16), transparent 60%),
  radial-gradient(900px 600px at -10% 30%, rgba(255, 61, 240, .07), transparent 60%),
  var(--ink); }
.btn--sv { --face: var(--sv); --ledge: #0e8c90; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center-head { margin-inline: auto; text-align: center; }
.center-head .eyebrow { justify-content: center; }
.m--sv { background: var(--sv); }
.mini-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: var(--ink); font: 800 10px/1 "Unbounded"; margin-right: -6px; box-shadow: 0 0 0 2px #071618; }

/* ---------- hero ---------- */
.hero { grid-template-columns: 1fr 1fr; }
.hero__title { font-size: clamp(44px, 7vw, 100px); }
.hero__title .line--small { font-size: .42em; letter-spacing: -.01em; margin-top: .25em; color: var(--sub); }
.hero__title .line:nth-child(3) .word { animation-delay: .62s; }
.hl-sv { background-size: 200% 100%; animation: hue 6s ease-in-out infinite; }
@keyframes hue { 50% { background-position: 100% 0; } }
.rotator__word { background: var(--sv); }

/* the assembler stage */
.stage { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; perspective: 1400px; }
.stage__glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 240, 255, .32), rgba(255, 61, 240, .12) 45%, transparent 70%); filter: blur(30px); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
.stage__phone { width: min(270px, 56vw); z-index: 2; }
.orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chip { position: absolute; left: 50%; top: 50%; padding: 10px 16px; border-radius: 14px; font: 700 15px/1 "Sora"; color: var(--ink);
  background: var(--c, var(--sv)); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); white-space: nowrap; will-change: transform, opacity; }
.chip.is-flying { visibility: hidden; }
.chip[data-k="score"] { --c: var(--lime); } .chip[data-k="timer"] { --c: var(--pink); } .chip[data-k="checklist"] { --c: var(--violet); }
.chip[data-k="notes"] { --c: var(--sun); } .chip[data-k="split"] { --c: var(--orange); } .chip[data-k="poll"] { --c: var(--cyan); }
.chip[data-k="counter"] { --c: var(--mint); } .chip[data-k="log"] { --c: var(--red); } .chip[data-k="setlist"] { --c: var(--sv); }
.flyer { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; padding: 10px 16px; border-radius: 14px; font: 700 15px/1 "Sora"; color: var(--ink); }
.sv-cat { font: 700 10px/1 "Sora"; letter-spacing: .14em; text-transform: uppercase; color: var(--sv); padding: 0 4px 6px; }
.sv-name { min-height: 1.2em; }
.caret { display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -2px; background: var(--sv); animation: blinkc 1s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.sv-blocks { flex: 1; }
.sv-members { display: flex; align-items: center; padding: 10px 4px 2px; font-size: 11px; color: var(--sub); }
.sv-members b { margin-left: 14px; font-weight: 600; }
.sv-members b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: 6px; animation: pulse 1.4s infinite; }
.blk.mini { padding: 10px 12px; border-radius: 14px; }
.blk.mini .v { font-size: 20px; }
.blk.landed { animation: land .5s var(--ease); }
@keyframes land { 0% { transform: scale(1.08); filter: brightness(1.4); } 100% { transform: none; filter: none; } }

/* ---------- live sync ---------- */
.sync { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: clamp(14px, 3vw, 40px); align-items: center; margin-top: 56px; }
.sync__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.sync__wires path { fill: none; stroke: rgba(26, 204, 209, .35); stroke-width: 2; stroke-dasharray: 4 8; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.packet { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sv-glow); box-shadow: 0 0 18px 4px rgba(0, 240, 255, .7); z-index: 2; pointer-events: none; }
.mini-phone { position: relative; z-index: 1; padding: 16px; border-radius: 34px; background: #0b1f21; box-shadow: 0 0 0 2px #1d3a3c, 0 30px 60px -30px rgba(0,0,0,.8); }
.mini-phone--you { padding: 20px; box-shadow: 0 0 0 2px var(--sv), 0 0 80px -20px rgba(26, 204, 209, .6), 0 30px 60px -30px rgba(0,0,0,.8); }
.mp-who { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 12px; }
.mp-who .mini-av { margin: 0; }
.mp-card { border-radius: 18px; padding: 14px; background: var(--lime); color: var(--ink); }
.mp-card h4 { margin: 0; font: 700 11px/1 "Sora"; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.mp-score { font: 800 clamp(26px, 3.4vw, 40px)/1.1 "Unbounded"; margin-top: 6px; }
.mp-over { font-size: 12px; font-weight: 700; opacity: .7; }
.mini-phone.is-hit .mp-card { animation: hit .7s var(--ease); }
@keyframes hit { 0% { box-shadow: 0 0 0 0 rgba(216, 255, 61, .9); transform: scale(1.04); } 100% { box-shadow: 0 0 0 18px rgba(216, 255, 61, 0); transform: none; } }
.mp-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mp-pad button { height: 48px; border: 0; border-radius: 14px; background: var(--control); font: 800 16px/1 "Unbounded"; transition: transform .12s, background .2s; }
.mp-pad button:hover { background: var(--pressed); }
.mp-pad button:active { transform: scale(.92); }
.mp-pad button[data-run="4"], .mp-pad button[data-run="6"] { background: var(--sv); color: var(--ink); }
.mp-pad button[data-run="W"] { background: var(--red); color: var(--ink); }
.mp-log { margin-top: 12px; display: grid; gap: 6px; font-size: 12px; color: var(--sub); }
.mp-log li { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); animation: snap .45s var(--ease) both; }
.mp-log li:nth-child(n+4) { display: none; }
.sync__hint { text-align: center; margin-top: 22px; color: var(--sv); font-weight: 700; animation: pulse 1.6s infinite; }
.sync__hint.done { animation: none; color: var(--muted); }

/* ---------- pinned gallery ---------- */
.gallery { position: relative; height: 320vh; margin-top: clamp(80px, 12vw, 160px); }
.gallery__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gallery__head { max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.gallery__track { display: flex; gap: 20px; padding: 48px var(--gutter) 30px; width: max-content; will-change: transform; }
.tcard { position: relative; flex: none; width: 300px; height: 380px; padding: 26px; border-radius: 32px; background: var(--c); color: var(--ink); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .4s var(--ease); }
.tcard::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 60px; background: rgba(16,16,20,.12); rotate: 18deg; transition: rotate .8s var(--ease), scale .8s var(--ease); }
.tcard:hover { transform: translateY(-10px) rotate(-1.5deg); }
.tcard:hover::after { rotate: 60deg; scale: 1.2; }
.tcard__cat { font: 700 12px/1 "Sora"; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.tcard h3 { font: 800 30px/1.05 "Unbounded"; margin-top: 14px; }
.tcard p { margin-top: 10px; font-weight: 600; }
.tcard__blocks { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.tcard__blocks i { font-style: normal; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--text); font-weight: 700; font-size: 13px; }
.tcard--blank { background: transparent; color: var(--text); border: 2px dashed var(--line); }
.tcard--blank::after { display: none; }
.tcard--blank .btn { margin-top: auto; align-self: flex-start; }
.gallery__bar { max-width: var(--max); width: calc(100% - 2 * var(--gutter)); margin: 0 auto; height: 4px; border-radius: 2px; background: var(--control); overflow: hidden; }
.gallery__bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--lime), var(--sv)); transform-origin: 0 50%; transform: scaleX(var(--g, 0)); }

/* ---------- block library ---------- */
.lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 54px; }
.lb { position: relative; min-height: 190px; padding: 22px; border-radius: 28px; background: var(--card); overflow: hidden; isolation: isolate; }
.lb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); opacity: 0; transition: opacity .4s; }
.lb:hover::before { opacity: .12; }
.lb h3 { display: inline-block; font: 700 13px/1 "Sora"; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 10px; background: var(--c); color: var(--ink); }
.lb p { color: var(--sub); margin-top: 6px; font-size: 14px; }
.lb .lb__v { font: 800 44px/1.1 "Unbounded"; color: var(--text); margin-top: 18px; font-variant-numeric: tabular-nums; }
.lb__v { transform-origin: 0 60%; }
.lb__v.tick { animation: tickpop .5s var(--ease); }
@keyframes tickpop { 0% { transform: scale(1.12); color: var(--c); } 100% { transform: none; } }
.lb__list, .lb__feed { margin-top: 16px; display: grid; gap: 8px; font-weight: 600; font-size: 15px; }
.lb__list li { display: flex; gap: 10px; align-items: center; transition: opacity .3s; }
.lb__list li::before { content: ""; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--c); flex: none; transition: background .3s; }
.lb__list li.done { opacity: .5; text-decoration: line-through; }
.lb__list li.done::before { background: var(--c); }
.lb__feed li { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); animation: snap .5s var(--ease) both; }
.lb__feed li:nth-child(n+4) { display: none; }
.lb .lb__type { font-weight: 600; color: var(--text); font-size: 17px; margin-top: 18px; min-height: 3em; }
.lb__type::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--sun); margin-left: 3px; vertical-align: -2px; animation: blinkc 1s steps(1) infinite; }
.lb__bars { margin-top: 16px; display: grid; gap: 10px; }
.lb__bars i { position: relative; display: block; font-style: normal; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; isolation: isolate; }
.lb__bars i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); opacity: .35; z-index: -1; transition: width 1s var(--ease); }

/* ---------- games, now the bonus act ---------- */
.games__intro { max-width: 760px; }
.gchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.gchip { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 18px; background: var(--card); border-left: 6px solid var(--c); transition: transform .2s var(--ease), background .2s; }
.gchip:hover { transform: translateY(-4px) rotate(-1deg); background: var(--control); }
.gchip b { font: 800 16px/1.1 "Unbounded"; }
.gchip span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---------- people + privacy duo ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo__card { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: 32px; background: var(--card); overflow: hidden; }
.duo__card h3 { font: 800 clamp(22px, 2.4vw, 30px)/1.15 "Unbounded"; margin-top: 14px; }
.duo__card > p:not(.eyebrow) { color: var(--sub); margin-top: 12px; }
.duo__card--near .radar { max-width: 260px; margin: 0 auto 24px; }
.duo .swapdemo { grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 22px; }
.duo .swapcard { padding: 18px 10px; background: var(--control); }
.duo .swapcard .av { width: 54px; height: 54px; font-size: 22px; }
.duo .swapcard__name { font-size: 18px; }
.duo .shield { width: 64px; }

/* ---------- get ---------- */
.get { background: radial-gradient(80% 120% at 50% 0%, #0b3033, var(--deep) 70%); }

/* ---------- responsive (v3) ---------- */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; }
  .stage { max-width: 460px; }
  .sync { grid-template-columns: 1fr 1fr; }
  .mini-phone--you { grid-column: 1 / -1; grid-row: 1; }
  .lib { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .chip { padding: 7px 11px; font-size: 12px; border-radius: 10px; }
  /* Phones keep the point of the demo: your phone on top, your friends'
     as two compact cards underneath, wired to it. */
  .sync { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mini-phone--you { grid-column: 1 / -1; grid-row: 1; }
  .mini-phone:not(.mini-phone--you) { padding: 12px; border-radius: 24px; margin-top: 40px; }
  .mini-phone:not(.mini-phone--you) .mp-log { display: none; }
  .mini-phone:not(.mini-phone--you) .mp-score { font-size: 24px; }
  .mini-phone:not(.mini-phone--you) .mp-who { font-size: 12px; gap: 8px; }
  .gallery { height: auto; }
  .gallery__pin { position: static; height: auto; }
  .gallery__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .tcard { width: 78vw; height: 340px; scroll-snap-align: center; }
  .gallery__bar { display: none; }
  .lib { grid-template-columns: 1fr; }
  .duo .swapdemo { grid-template-columns: 1fr auto 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery { height: auto; }
  .gallery__pin { position: static; height: auto; }
  .gallery__track { width: auto; overflow-x: auto; }
}

/* Hero mini blocks: compact enough that three always fit the phone. */
.stage .sv-blocks { min-height: 0; overflow: hidden; gap: 8px; }
.blk.mini { padding: 9px 12px; border-radius: 14px; }
.blk.mini h4 { font-size: 9px; }
.blk.mini .v { font-size: 19px; margin-top: 3px; }
.blk.mini .row { margin-top: 3px; font-size: 12px; }
.blk.mini button { padding: 4px 9px; font-size: 11px; border-radius: 8px; }
.blk.mini button[data-vote] { display: none; }
.blk.mini .bar { height: 7px; margin-top: 3px; }
.blk.mini ul { margin-top: 3px; font-size: 11px; }
.blk.mini .check li { padding: 1px 0; }
.blk.mini .check li::before { width: 11px; height: 11px; border-radius: 4px; }

/* The swipeable gallery on phones: no scrollbar, the cards say it scrolls. */
.gallery__track { scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }

/* =============================================================================
   v4 — every feature, Svync first.
   ============================================================================= */
.hl-sun { color: var(--sun); }
.dot--orange { background: var(--orange); }

/* ---------- everything: the bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 14px; margin-top: 54px; }
.bt { position: relative; border-radius: 26px; background: var(--card); overflow: hidden; isolation: isolate; transition: transform .35s var(--ease); }
.bt--wide { grid-column: span 2; }
.bt a { display: block; height: 100%; padding: 22px; text-decoration: none; }
.bt::before { content: ""; position: absolute; inset: auto -30% -70% auto; width: 240px; height: 240px; border-radius: 50%; background: var(--c); opacity: .08; z-index: -1; transition: transform .7s var(--ease), opacity .7s; }
.bt:hover { transform: translateY(-6px); }
.bt:hover::before { transform: scale(2.4); opacity: .16; }
.bt h3 { font: 800 18px/1.2 "Unbounded"; margin-top: 18px; }
.bt p { color: var(--sub); font-size: 14px; margin-top: 8px; }
.bt--wide h3 { font-size: 22px; }

/* Icons drawn in CSS, one shape language with the app's blocks. */
.bt__ico { position: relative; display: block; width: 48px; height: 48px; border-radius: 14px; background: var(--c); }
.bt:hover .bt__ico { animation: wiggle .6s var(--ease); }
@keyframes wiggle { 25% { rotate: -10deg; } 60% { rotate: 8deg; } }
.bt__ico::before, .bt__ico::after { content: ""; position: absolute; background: var(--ink); }
.bt__ico--dice::before { width: 8px; height: 8px; border-radius: 50%; left: 11px; top: 11px; box-shadow: 18px 18px 0 var(--ink), 9px 9px 0 var(--ink); }
.bt__ico--sun { border-radius: 50%; }
.bt__ico--sun::before { inset: 14px; border-radius: 50%; }
.bt__ico--poll::before { left: 10px; bottom: 10px; width: 7px; height: 18px; border-radius: 3px; box-shadow: 10px -8px 0 var(--ink), 20px 4px 0 var(--ink); }
.bt__ico--bolt::before { left: 18px; top: 8px; width: 12px; height: 32px; clip-path: polygon(60% 0, 0 55%, 45% 55%, 30% 100%, 100% 40%, 55% 40%); }
.bt__ico--bars::before { left: 10px; bottom: 10px; width: 8px; height: 26px; border-radius: 3px; box-shadow: 10px 8px 0 var(--ink), 20px 14px 0 var(--ink); }
.bt__ico--star::before { inset: 9px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bt__ico--radar { border-radius: 50%; }
.bt__ico--radar::before { inset: 10px; border-radius: 50%; background: transparent; border: 3px solid var(--ink); }
.bt__ico--radar::after { inset: 20px; border-radius: 50%; }
.bt__ico--people::before { left: 9px; top: 12px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 16px 0 0 var(--ink); }
.bt__ico--people::after { left: 7px; bottom: 9px; width: 34px; height: 10px; border-radius: 10px 10px 4px 4px; }
.bt__ico--swap::before { left: 9px; top: 15px; width: 16px; height: 16px; border-radius: 50%; }
.bt__ico--swap::after { right: 9px; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: transparent; border: 3px solid var(--ink); }
.bt__ico--ring { border-radius: 50%; }
.bt__ico--ring::before { inset: 9px; border-radius: 50%; background: transparent; border: 5px solid var(--ink); border-right-color: transparent; rotate: 30deg; }
.bt__ico--bell::before { left: 14px; top: 10px; width: 20px; height: 22px; border-radius: 10px 10px 4px 4px; }
.bt__ico--bell::after { left: 20px; bottom: 9px; width: 8px; height: 5px; border-radius: 0 0 4px 4px; }
.bt__ico--shield::before { inset: 9px 11px; clip-path: path("M13 0 L26 5 V14 C26 22 20 27 13 30 C6 27 0 22 0 14 V5 Z"); }
.bt__ico--groups::before { left: 9px; top: 9px; width: 13px; height: 13px; border-radius: 4px; box-shadow: 17px 0 0 var(--ink), 0 17px 0 var(--ink), 17px 17px 0 var(--ink); }
.bt__ico--badge { border-radius: 50%; }
.bt__ico--badge::before { inset: 11px; rotate: 45deg; border-radius: 5px; }
.bt__ico--plus::before { left: 21px; top: 10px; width: 6px; height: 28px; border-radius: 3px; }
.bt__ico--plus::after { left: 10px; top: 21px; width: 28px; height: 6px; border-radius: 3px; }

/* ---------- group life ---------- */
.life__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 54px; }
.lc { position: relative; padding: 24px; border-radius: 28px; background: var(--card); overflow: hidden; }
.lc--board { grid-row: span 2; }
.lc__eyebrow { font: 700 11px/1 "Sora"; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lc h3 { font: 800 24px/1.15 "Unbounded"; margin-top: 10px; }
.lc__foot { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--sub); }
.lc__big { font: 800 26px/1.1 "Unbounded"; color: var(--orange); margin-top: 6px; }
.lc__quote { font: 800 19px/1.35 "Unbounded"; margin-top: 14px; color: var(--sun); }
.board { margin-top: 22px; display: grid; gap: 12px; }
.board li { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); overflow: hidden; isolation: isolate; }
.board li .mini-av { margin: 0; }
.board li i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c); opacity: .22; z-index: -1; transition: width 1.4s var(--ease); }
.lc.is-in .board li i { width: var(--w); }
.board li:nth-child(2) i { transition-delay: .15s; } .board li:nth-child(3) i { transition-delay: .3s; } .board li:nth-child(4) i { transition-delay: .45s; }
.board em { font: 800 18px/1 "Unbounded"; font-style: normal; }
.board li:first-child em::after { content: " 👑"; font-size: 14px; }
.flame { position: relative; width: 70px; height: 84px; margin: 18px 0 6px; }
.flame span, .flame::before, .flame::after { position: absolute; left: 50%; bottom: 0; translate: -50% 0; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; }
.flame::before { content: ""; width: 70px; height: 84px; background: var(--orange); animation: flick 1.6s ease-in-out infinite; }
.flame::after { content: ""; width: 44px; height: 54px; background: var(--sun); animation: flick 1.2s ease-in-out infinite reverse; }
.flame span { width: 20px; height: 26px; background: var(--text); z-index: 1; }
@keyframes flick { 50% { transform: scaleY(1.08) scaleX(.94) rotate(2deg); } }
.pollbars { display: grid; gap: 10px; margin-top: 18px; }
.pollbars div { position: relative; display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); overflow: hidden; isolation: isolate; font-weight: 700; }
.pollbars i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--cyan); opacity: .3; z-index: -1; transition: width 1.2s var(--ease); }
.feed { margin-top: 14px; display: grid; gap: 8px; }
.feed li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--control); }
.feed li:last-child { border: 0; }
.feed .pip { width: 18px; height: 18px; border-radius: 6px; }
.pip--violet { background: var(--violet); }

/* ---------- you ---------- */
.you { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.you__card { padding: 28px; border-radius: 32px; background: var(--card); box-shadow: 0 40px 80px -40px rgba(255, 79, 163, .45); }
.you__id { display: flex; align-items: center; gap: 18px; }
.you__av { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--pink); color: var(--ink); font: 800 34px/1 "Unbounded"; flex: none; }
.you__av::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--pink); animation: spin 14s linear infinite; }
.you__id h3 { font: 800 26px/1.1 "Unbounded"; }
.you__id p { color: var(--sub); font-size: 14px; margin-top: 6px; }
.you__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; padding: 14px 0; border-radius: 20px; background: var(--control); text-align: center; font-size: 12px; font-weight: 600; color: var(--sub); }
.you__stats li + li { border-left: 1px solid var(--pressed); }
.you__stats b { display: block; font: 800 22px/1.2 "Unbounded"; color: var(--text); }
.you__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.you__badges li { padding: 9px 14px; border-radius: 12px; background: var(--c); color: var(--ink); font-weight: 700; font-size: 14px; transition: transform .2s var(--ease); }
.you__badges li:hover { transform: rotate(-4deg) scale(1.06); }

/* ---------- plus / pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; margin: 46px auto 0; max-width: 900px; align-items: stretch; }
.plan { padding: 30px; border-radius: 32px; background: var(--card); }
.plan h3 { font: 800 22px/1.1 "Unbounded"; }
.plan__price { font: 800 48px/1 "Unbounded"; margin-top: 14px; }
.plan__price small { font: 600 15px/1 "Sora"; color: var(--sub); margin-left: 8px; }
.plan__note { color: var(--muted); font-size: 14px; margin-top: 8px; }
.plan ul { margin-top: 20px; display: grid; gap: 10px; }
.plan li { padding-left: 28px; position: relative; color: var(--sub); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 800; }
.plan--plus { position: relative; background: linear-gradient(160deg, #3a3210, #1c1c24 60%); box-shadow: 0 0 0 2px var(--sun), 0 30px 80px -30px rgba(255, 217, 61, .45); }
.plan--plus li::before { color: var(--sun); }
.plan__tag { display: inline-block; padding: 7px 12px; border-radius: 10px; background: var(--sun); color: var(--ink); font-weight: 700; font-size: 13px; margin-bottom: 16px; }

/* ---------- responsive (v4) ---------- */
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .life__grid { grid-template-columns: 1fr 1fr; }
  .lc--board { grid-row: auto; grid-column: 1 / -1; }
  .you { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bt a { padding: 16px; }
  .bt h3 { font-size: 15px; margin-top: 12px; }
  .bt--wide h3 { font-size: 17px; }
  .bt p { font-size: 13px; }
  .bt__ico { width: 40px; height: 40px; border-radius: 12px; }
  .life__grid { grid-template-columns: 1fr; }
  .you__stats b { font-size: 18px; }
}

.nowrap { white-space: nowrap; }

/* The tilted marquee and swipeable cards overhang the page by design.
   `clip`, not `hidden`: hidden would make <main> a scroll container and break
   the sticky gallery pin; clip trims the overhang and changes nothing else. */
main { overflow-x: clip; }

/* =============================================================================
   v5 — the hero carries the games too: a second, tilted orbit.
   ============================================================================= */
.orbit--games { position: absolute; inset: 0; pointer-events: none; }
/* Blocks are solid colour; games are dark pills with their colour as a ring
   and a dot -- two rings, visibly two kinds of thing. */
.gchip-o { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: rgba(16, 16, 20, .9); color: var(--text); font: 700 14px/1 "Sora"; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--c), 0 12px 30px -12px rgba(0, 0, 0, .8); will-change: transform, opacity; }
.gchip-o::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.gchip-o.is-flying { visibility: hidden; }

/* While a game is on, the stage glows warmer. */
.stage .stage__glow { transition: background 1s var(--ease); }
.stage.is-game .stage__glow { background: radial-gradient(circle, rgba(255, 79, 163, .3), rgba(61, 217, 255, .14) 45%, transparent 70%); }
.stage.is-game .sv-cat { color: var(--pink); }

/* A game on the phone's screen. */
.gs-wrap { border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--gc) 18%, #0b1416); box-shadow: inset 0 0 0 2px var(--gc); }
.gs-wrap.out { animation: unsnap .3s var(--ease) both; }
.gs { display: grid; gap: 10px; color: var(--text); }
.gs__q { font: 800 18px/1.1 "Unbounded"; text-align: center; }
.gs__timer { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.gs__timer i { display: block; height: 100%; background: var(--pink); transform-origin: 0 50%; }
.gs-wrap.is-live .gs__timer i { animation: drain 2.6s linear forwards; }
.gs__two { display: grid; gap: 8px; }
.gs__two b { display: grid; place-items: center; height: 54px; border-radius: 14px; background: var(--c); color: var(--ink); font: 800 18px/1 "Unbounded"; }
.gs-wrap.is-live .gs__two b:first-child { animation: pickit 2.6s var(--ease) forwards; }
@keyframes pickit { 0%, 55% { transform: none; box-shadow: none; } 65% { transform: scale(.94); } 80%, 100% { transform: none; box-shadow: 0 0 0 3px var(--text); } }
.gs__meta { font-size: 11px; color: var(--sub); text-align: center; }
.gs__meta b { color: var(--text); }
.gs__art { height: 130px; border-radius: 14px; }
.gs__row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--sub); }
.gs__row b { color: var(--text); font-size: 13px; }
.die { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--text); color: var(--ink); font: 800 22px/1 "Unbounded"; flex: none; }
.gs-wrap.is-live .die { animation: roll .7s var(--ease); }
@keyframes roll { 0% { rotate: -180deg; scale: .6; } 100% { rotate: 0deg; scale: 1; } }
.gs__quote { font: 800 16px/1.3 "Unbounded"; color: var(--sun); text-align: center; padding: 10px 2px 0; }
.gs__guess { display: flex; justify-content: center; gap: 12px; }
.gs__guess .mini-av { width: 34px; height: 34px; font-size: 13px; margin: 0; transition: transform .3s var(--ease); }
.gs-wrap.is-live .gs__guess .is-pick { animation: guess 1.6s .5s var(--ease) forwards; }
@keyframes guess { 40% { transform: scale(1.25); box-shadow: 0 0 0 3px var(--text); } 100% { transform: scale(1.15); box-shadow: 0 0 0 3px var(--text); } }
.gs__sketch { width: 100%; height: 120px; border-radius: 14px; background: #f5f5f0; }
.gs__sketch path, .gs__sketch circle { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.gs-wrap.is-live .gs__sketch path { animation: sketch 1.6s var(--ease) forwards; }
.gs-wrap.is-live .gs__sketch circle { animation: sketch 1s .9s var(--ease) forwards; }
@keyframes sketch { to { stroke-dashoffset: 0; } }

@media (max-width: 760px) {
  .gchip-o { padding: 6px 10px 6px 8px; font-size: 11px; gap: 6px; }
  .gchip-o::before { width: 8px; height: 8px; }
}

/* =============================================================================
   v6 — the hero, calmed down: two concentric rings, clear of the phone,
   turning in lock-step. Supersedes the 3D orbit styles above.
   ============================================================================= */
.stage { max-width: 620px; perspective: none; }
.stage__phone { width: 35%; min-width: 190px; }
.stage .phone { border-radius: 40px; padding: 9px; }
.stage .phone__screen { border-radius: 32px; }
.stage .phone__notch { top: 16px; width: 70px; height: 20px; }
.stage .phone__screen--sv { padding: 42px 10px 10px; }
.stage .sv-name { font-size: 19px; padding-bottom: 8px; }
.stage .gs__art { height: 92px; }
.stage .gs__two b { height: 44px; font-size: 15px; }
.stage .gs__quote { font-size: 13px; }
.stage .gs__sketch { height: 90px; }

/* The two tracks the chips ride on: faint, dotted, turning with them. */
.orbit-tracks { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.track { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(26, 204, 209, .28); }
.track--blocks { width: calc(var(--r1, 220px) * 2); height: calc(var(--r1, 220px) * 2); animation: spin 120s linear infinite; }
.track--games { width: calc(var(--r2, 280px) * 2); height: calc(var(--r2, 280px) * 2); border-color: rgba(255, 79, 163, .22); animation: spin 120s linear infinite reverse; }
.stage.is-game .track--games { border-color: rgba(255, 79, 163, .5); }
.stage:not(.is-game) .track--blocks { border-color: rgba(26, 204, 209, .45); }

/* Flat rings: every chip full size, full colour, above everything. */
.orbit, .orbit--games { z-index: 3 !important; }
.chip, .gchip-o { z-index: auto !important; transition: box-shadow .3s var(--ease), filter .3s; }
.chip { padding: 8px 13px; font-size: 13px; border-radius: 12px; }
.gchip-o { padding: 7px 12px 7px 9px; font-size: 12px; }
/* The cue: the next chip lifts and glows before it flies. */
.chip.is-cue, .gchip-o.is-cue { filter: brightness(1.15); box-shadow: 0 0 0 3px var(--text), 0 0 26px 4px var(--c, var(--sv)); }
.flyer { padding: 8px 13px; font-size: 13px; border-radius: 12px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.7); }

@media (max-width: 760px) {
  /* Phones: rows, not rings. */
  .stage { aspect-ratio: auto; padding: 78px 0; max-width: none; overflow: hidden; margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); }
  .stage__phone { width: 58vw; min-width: 0; }
  .orbit-tracks { display: none; }
  .chip { padding: 7px 11px; font-size: 12px; }
  .gchip-o { padding: 6px 10px 6px 8px; font-size: 11px; }
}

/* =============================================================================
   v7 — the hero as "( phone )": two arcs, one either side, in lock-step.
   ============================================================================= */
.orbit-tracks { display: block; }
.orbit-tracks svg { position: absolute; inset: 0; overflow: visible; }
.orbit-tracks .track { position: static; border: 0; border-radius: 0; width: auto; height: auto; animation: none;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; }
.orbit-tracks .track--blocks { stroke: rgba(26, 204, 209, .45); }
.orbit-tracks .track--games { stroke: rgba(255, 79, 163, .4); }
.stage.is-game .orbit-tracks .track--games { stroke: rgba(255, 79, 163, .8); }
.stage:not(.is-game) .orbit-tracks .track--blocks { stroke: rgba(26, 204, 209, .85); }
.chip, .gchip-o { opacity: 1; }
.chip { font-size: 12px; padding: 7px 11px; }
.gchip-o { font-size: 11px; padding: 6px 10px 6px 8px; }

/* =============================================================================
   v8 — no header bar. The wordmark floats free; navigation is the app's own
   tab bar, docked at the bottom: five chapters drawn in the app's shapes, a
   colour pill that stretches open under the chapter you're reading, and a
   meter along its edge that fills as you go.
   ============================================================================= */
.hero { padding-top: 120px; }
.mark { position: absolute; top: 22px; left: var(--gutter); z-index: 2; display: block; transition: transform .3s var(--ease); }
.mark img { width: 104px; height: auto; display: block; }
.mark:hover { transform: rotate(-4deg) scale(1.04); }

.dock { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 6px;
  padding: 7px; border-radius: 26px; background: rgba(22, 22, 28, .82); translate: -50% 0;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 50px -18px rgba(0, 0, 0, .85);
  transition: translate .5s var(--ease), opacity .4s;
  animation: dockin .8s 1.2s var(--ease) backwards; }
.dock.is-tucked { translate: -50% calc(100% + 30px); opacity: 0; }
/* It rises in once the hero has had its moment. */
@keyframes dockin { from { translate: -50% calc(100% + 30px); opacity: 0; } }

.dock__meter { position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dock__meter i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--sv), var(--lime), var(--pink), var(--violet), var(--sun)); }

.dock__tabs { position: relative; display: flex; gap: 2px; }
.dock__pill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 20px; background: var(--pc, var(--sv)); pointer-events: none;
  transition: background .55s var(--ease); }
.dock__tabs a { position: relative; z-index: 1; display: flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 20px;
  text-decoration: none; color: var(--sub); font: 700 14px/1 "Sora"; transition: color .3s; }
.dock__tabs a span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .55s var(--ease), opacity .3s, margin .55s var(--ease); }
.dock__tabs a:hover { color: var(--text); }
.dock__tabs a.is-on { color: var(--ink); }
.dock__tabs a.is-on span { max-width: 110px; opacity: 1; margin-left: 9px; }

/* The app's shapes, as tab icons: coloured at rest, ink on the pill. */
.dk { position: relative; display: block; width: 18px; height: 18px; flex: none; color: var(--c); background: currentColor;
  transition: rotate .5s var(--ease), color .3s; }
.dock__tabs a.is-on .dk { color: var(--ink); }
.dk--sq { border-radius: 5px; }
.dk--grid { background: none; }
.dk--grid::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2.5px; background: currentColor;
  box-shadow: 10px 0 0 currentColor, 0 10px 0 currentColor, 10px 10px 0 currentColor; }
.dk--tri { clip-path: polygon(50% 4%, 98% 92%, 2% 92%); }
.dk--dot { border-radius: 50%; }
.dk--star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.dock__tabs a:hover .dk { rotate: -12deg; }
.dock__tabs a.is-on .dk--sq { rotate: 45deg; }

.dock__cta { display: flex; align-items: center; height: 46px; padding: 0 18px; margin-left: 4px; border-radius: 20px; text-decoration: none;
  background: var(--sv); color: var(--ink); font: 800 14px/1 "Sora"; box-shadow: 0 4px 0 #0f8f93; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.dock__cta:active { transform: translateY(4px); box-shadow: 0 0 0 #0f8f93; }
.dock a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Room for the dock at the end of the page. */
.foot { padding-bottom: 110px; }

@media (max-width: 760px) {
  .hero { padding-top: 92px; }
  .mark { top: 16px; }
  .mark img { width: 86px; }
  .dock { padding: 6px; gap: 4px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .dock__tabs a { height: 42px; padding: 0 11px; font-size: 13px; }
  .dock__tabs a.is-on span { margin-left: 7px; }
  .dock__cta { height: 42px; padding: 0 14px; font-size: 13px; }
  .dock__cta span { display: none; }
}
@media (max-width: 370px) {
  .dock__tabs a { padding: 0 9px; }
  .dock__tabs a.is-on span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dock, .dock__pill, .dock__tabs a span { animation: none; transition: none; }
}

/* =============================================================================
   v9 — why Svync, in the hero. Four things the big group-game apps don't do,
   in place of the old check chips: play with no internet, one app for the
   whole group, nicknames not names, no real money. Each card wears one of the
   app's shapes in its own colour, the same shapes as the dock.
   ============================================================================= */
.edges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; max-width: 580px; }
/* In on load, not on scroll: the scroll reveal waits until 12% of an element
   clears the bottom 8% of the window, and on a laptop the cards sit right at
   the fold, so they stayed hidden until the first scroll. */
.edge { animation: edgein .7s var(--ease) backwards; }
.edge:nth-child(1) { animation-delay: .75s; } .edge:nth-child(2) { animation-delay: .85s; }
.edge:nth-child(3) { animation-delay: .95s; } .edge:nth-child(4) { animation-delay: 1.05s; }
@keyframes edgein { from { opacity: 0; transform: translateY(14px); } }
.edge { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: start;
  padding: 14px 16px 15px; border-radius: 20px; background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
/* A thin bar of the card's colour along the top: the highlight, without a border. */
.edge::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.edge b { grid-column: 2; font: 700 15px/1.3 "Sora"; color: var(--text); }
.edge span { grid-column: 2; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.edge__ico { grid-row: 1 / span 2; position: relative; width: 18px; height: 18px; margin-top: 1px; color: var(--c); background: currentColor; }
.edge__ico--grid { background: none; }
.edge__ico--grid::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2.5px; background: currentColor;
  box-shadow: 10px 0 0 currentColor, 0 10px 0 currentColor, 10px 10px 0 currentColor; }
.edge__ico--dot { border-radius: 50%; }
.edge__ico--star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* Wi-Fi: the one icon that is not an app shape, so it is a small inline SVG. */
.edge__ico--wifi { background: none; width: 20px; height: 20px; margin-top: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.edge__ico--wifi circle { fill: currentColor; stroke: none; }

/* "A Svync is…": the word the whole page uses, defined once, in the brand gradient. */
.sv-def { font-weight: 700; background: linear-gradient(100deg, var(--sv-glow), var(--sv) 45%, var(--sv-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 1020px) {
  .edges { max-width: 640px; }
}
@media (max-width: 480px) {
  .edges { grid-template-columns: 1fr; gap: 8px; }
  .edge { padding: 12px 14px 13px; }
}

/* =============================================================================
   v10 — the hero fits the screen it is on. Until now the title was sized by
   width alone (7vw, up to 100px), so a wide, short laptop screen -- 1512x690
   at 125% Windows scaling -- got a 100px title wrapped onto four lines and a
   hero 1,066px tall. On two-column screens the title, the spacing and the
   phone stage now take the window's HEIGHT into account too, so the whole
   banner, the four cards included, is on screen at once.
   ============================================================================= */
@media (min-width: 1021px) {
  .hero { min-height: min(100svh, 980px); padding-top: clamp(78px, 12svh, 120px); padding-bottom: clamp(72px, 11svh, 120px); gap: clamp(24px, 3vw, 40px); }
  .hero__title { font-size: clamp(40px, min(6.4vw, 8.2svh), 96px); margin-top: clamp(10px, 2svh, 22px); }
  .hero__sub { font-size: clamp(16px, min(1.8vw, 2.5svh), 21px); margin-top: clamp(12px, 2.4svh, 26px); }
  .hero__cta { margin-top: clamp(16px, 3svh, 34px); }
  .edges { margin-top: clamp(14px, 2.4svh, 26px); }
  /* The stage is square, so cap its width by the height left for it. */
  .hero .stage { width: min(100%, calc(100svh - 150px)); min-width: 320px; }
}
/* Short two-column screens: smaller buttons and tighter cards. */
@media (min-width: 1021px) and (max-height: 760px) {
  .hero .btn { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 17px; }
  .edges { gap: 8px; }
  .edge { padding: 11px 14px 12px; }
  .edge b { font-size: 14px; }
  .edge span { font-size: 12.5px; }
}

/* ---------- scrollbar: an ink track and a Svync-gradient thumb ---------- */
/* Chrome, Edge and Safari. Chrome ignores these once scrollbar-color is set,
   so the standard property below is kept for browsers without them. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { border: 3px solid var(--deep); border-radius: 999px;
  background: linear-gradient(180deg, var(--sv-glow), var(--sv) 45%, var(--sv-pink)); }
::-webkit-scrollbar-thumb:hover { border-width: 2px; }
::-webkit-scrollbar-corner { background: var(--deep); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--sv) var(--deep); }
}

/* ---------- pointer (app.js adds the two elements and html.has-cursor) ---------- */
html.has-cursor, html.has-cursor * { cursor: none; }
html.has-cursor :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable]) { cursor: text; }
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; translate: -50% -50%; opacity: 0;
  transition: opacity .2s; }
.cursor { width: 8px; height: 8px; background: var(--sv-glow); box-shadow: 0 0 10px var(--sv-glow), 0 0 2px #fff;
  transition: opacity .2s, width .2s var(--ease), height .2s var(--ease), background .25s; }
.cursor-ring { width: 34px; height: 34px; border: 2px solid rgba(26, 204, 209, .65);
  transition: opacity .2s, width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
html.cursor-on .cursor, html.cursor-on .cursor-ring { opacity: 1; }
/* Over something pressable: the ring opens in that thing's colour. */
html.cursor-hot .cursor-ring { width: 54px; height: 54px; border-color: var(--cursor-c, var(--pink));
  background: color-mix(in srgb, var(--cursor-c, var(--pink)) 14%, transparent); }
html.cursor-hot .cursor { background: var(--cursor-c, var(--pink)); box-shadow: 0 0 12px var(--cursor-c, var(--pink)); }
/* Pressed: the ring closes in, like the app's keys going down. */
html.cursor-down .cursor-ring { width: 24px; height: 24px; }
html.cursor-hot.cursor-down .cursor-ring { width: 42px; height: 42px; }
/* In a text field the I-beam is the cursor; ours steps aside. */
html.cursor-text .cursor, html.cursor-text .cursor-ring { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-ring { transition: opacity .2s; }
}