/* TONEC website. Deep-sea night sections for the game world (hero, games, heroes, Premium), paper sections for
   reading (curriculum, safety, pricing, FAQ). Colours are the app's own (Ocean & Coral): ocean teal, coral,
   token gold, and the game cards' gradients. */

@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/unbounded-cyrillic.e30bf6a606.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/unbounded-latin-ext.845e1c9fe2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/unbounded-latin.22f9b928aa.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-cyrillic.68e5e01d62.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-latin-ext.14e7d3079b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-latin.052df74533.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --night: #031a22;
  --night-2: #072631;
  --night-3: #0b3644;
  --ink: #0a2530;
  --ink-2: #24444f;
  --muted: #557079;
  --paper: #f1f8fa;
  --paper-2: #e0f4f8;
  --card: #ffffff;
  --line: #d3e9ee;
  --brand: #0e7490;
  --coral: #ff6b57;
  --brand-2: #22b8cf;
  --brand-3: #8adbe7;
  --brand-deep: #0b3b4c;
  --gold: #ffb020;
  --gold-2: #ffd45c;
  --gold-ink: #3d2700;
  --orange: #ff7a1a;
  --pink: #e5446d;
  --magenta: #b5179e;
  --teal: #0e9f8e;
  --sky: #2d7ff0;
  --green: #17b26a;
  --red: #e5484d;
  --on-dark: #eaf7fa;
  --on-dark-2: #a9c9d1;
  --on-dark-3: #6f949e;
  --radius: 26px;
  --display: 'Unbounded', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --body: 'Onest', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }
/* grid columns may shrink below their longest word (German and Finnish have very long ones), so a phone never scrolls sideways */
.foot-grid > *, .social-grid > *, .hero-grid > *, .steps > *, .story > *, .curr-grid > *, .safe-grid > *, .plans > *, .packs > *, .cta-box > *, .row > *, .cards3 > *, .ages > *, .perks > *, .heroes-grid > *, .versus > *, .arcade > *, .subj-cols > * { min-width: 0; }
/* where a language has no hyphenation, a word too long for its column may break anywhere */
.foot a { hyphens: auto; overflow-wrap: anywhere; }
h1 { font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 4.6rem); }
h2 { font-weight: 800; font-size: clamp(1.8rem, 3.9vw, 3.1rem); }
h3 { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; vertical-align: -0.22em; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.narrow { max-width: 860px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- shared pieces ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 .78rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: currentColor; }
.dark .eyebrow { color: var(--gold-2); }
.head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 56px); }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
.head p { font-size: 1.12rem; color: var(--muted); }
.dark .head p { color: var(--on-dark-2); }
.grad { background: linear-gradient(100deg, var(--gold-2), var(--gold) 40%, #ff6b57 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark { background: var(--night); color: var(--on-dark); }
section { position: relative; padding-block: clamp(64px, 8vw, 112px); }

.btn { --b: var(--brand); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 16px; border: 0; background: var(--b); color: #fff; font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; box-shadow: 0 5px 0 color-mix(in srgb, var(--b) 55%, #000), 0 14px 30px -12px color-mix(in srgb, var(--b) 70%, transparent); overflow: hidden; isolation: isolate; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); z-index: -1; }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--b) 55%, #000); }
.btn-gold { --b: var(--gold); color: var(--gold-ink); }
.btn-white { --b: #fff; color: var(--brand-deep); box-shadow: 0 5px 0 #b4e1ea, 0 14px 30px -12px rgba(0,0,0,.4); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; opacity: .92; }
.btn-ghost:active { box-shadow: inset 0 0 0 2px currentColor; }
.btn-sm { min-height: 42px; padding: 0 16px; border-radius: 13px; font-size: .92rem; }
.play-badge { display: inline-block; line-height: 0; border-radius: 14px; transition: transform .25s var(--spring), filter .25s; }
.play-badge img { width: 196px; height: auto; margin: -10px; }
.play-badge:hover { transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
/* before launch: the badge isn't a link, a gold "Coming soon" tag sits on its corner */
.play-badge.soon { position: relative; cursor: default; }
.play-badge.soon:hover { transform: none; filter: none; }
.play-badge.soon img { opacity: .6; }
.play-badge.soon em { position: absolute; top: -10px; right: -14px; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font: 800 .68rem/1 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: rotate(4deg); box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.play-badge.in-plan { align-self: center; margin-top: auto; }
/* "TONEC STUDY": STUDY a step lighter so the two words read as one name */
.brand .word { white-space: nowrap; }
.brand .word b { font-weight: 800; opacity: .72; letter-spacing: .08em; font-size: .82em; }
a.mail { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-weight: 700; font-size: .9rem; }
.dark .chip { background: rgba(255,255,255,.08); color: var(--on-dark); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font: 800 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand); text-decoration: none; }
.link-arrow .i { transition: transform .25s var(--ease); }
.link-arrow:hover .i { transform: translateX(4px); }
.dark .link-arrow { color: var(--gold-2); }

/* the phone frame used for every real screenshot: 720 / 1505 outside leaves exactly 720 / 1559 inside the 3.2% bezel */
.phone { --w: 290px; position: relative; width: var(--w); max-width: 100%; aspect-ratio: 720 / 1505; padding: calc(var(--w) * .032); border-radius: calc(var(--w) * .15); background: linear-gradient(150deg, #2c4a55, #061418 55%, #163640); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 5px #04090b, 0 50px 90px -30px rgba(2, 18, 24, .75), 0 18px 36px -18px rgba(2, 18, 24, .6); flex: none; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w) * .12); background: #eef7f9; }
.phone::before { content: ''; position: absolute; top: calc(var(--w) * .007); left: 50%; width: calc(var(--w) * .018); aspect-ratio: 1; margin-left: calc(var(--w) * -.009); border-radius: 50%; background: #020405; box-shadow: inset 0 0 0 1px #10262d; z-index: 2; }
.phone::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.16), transparent 35%); pointer-events: none; }

/* scroll-in reveal */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal='left'] { transform: translateX(-36px); }
.js [data-reveal='right'] { transform: translateX(36px); }
.js [data-reveal='zoom'] { transform: scale(.92); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- top bar ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--gold), #ff6b57, var(--brand-2)); z-index: 60; pointer-events: none; }
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, box-shadow .3s, backdrop-filter .3s; color: var(--on-dark); }
.bar.solid { background: rgba(3, 26, 34, .8); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.light-top .bar:not(.solid) { color: var(--ink); }
.bar-in { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 800 1.2rem/1 var(--display); letter-spacing: .03em; }
.brand .logo { width: 38px; height: 38px; filter: drop-shadow(0 6px 14px rgba(14,116,144,.45)); transition: transform .4s var(--spring); }
.brand:hover .logo { transform: rotate(-8deg) scale(1.06); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { position: relative; padding: 10px 13px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .86; transition: opacity .2s, background .2s; }
.nav a:hover, .nav a[aria-current='page'] { opacity: 1; background: rgba(255,255,255,.1); }
.light-top .bar:not(.solid) .nav a:hover, .light-top .bar:not(.solid) .nav a[aria-current='page'] { background: rgba(14,116,144,.1); }
.bar-end { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 13px; text-decoration: none; font: 800 .8rem/1 var(--body); letter-spacing: .08em; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .8; transition: opacity .2s; }
.lang:hover { opacity: 1; }
/* the language menu: a button with the language code, opening a grid of every language */
.langs { position: relative; }
.langs > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 13px; cursor: pointer; font: 800 .8rem/1 var(--body); letter-spacing: .08em; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .8; transition: opacity .2s; user-select: none; }
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary:hover, .langs[open] > summary { opacity: 1; }
.langs-list { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 70; width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; padding: 10px; border-radius: 18px; background: var(--night-2); color: var(--on-dark); box-shadow: 0 24px 50px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); letter-spacing: 0; }
.langs-list a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--on-dark-2); font: 600 .95rem/1.25 var(--body); }
.langs-list a:hover, .langs-list a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.langs-list a[aria-current] { background: rgba(255,255,255,.14); color: #fff; }
.langs.up .langs-list { top: auto; bottom: calc(100% + 10px); inset-inline-start: 0; inset-inline-end: auto; }
@media (max-width: 1100px) { .langs.top .langs-list { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); inset-inline: 16px; width: auto; } }
.menu-btn { display: none; width: 46px; height: 46px; border: 0; border-radius: 13px; background: rgba(255,255,255,.1); cursor: pointer; place-items: center; }
.light-top .bar:not(.solid) .menu-btn { background: rgba(14,116,144,.1); }
.menu-btn span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.menu-btn span + span { margin-top: 5px; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: radial-gradient(120% 80% at 80% 0%, #0b3b4c 0%, var(--night) 60%); color: var(--on-dark); padding: calc(96px + env(safe-area-inset-top, 0px)) 24px 40px; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow-y: auto; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu a.m { font: 800 clamp(1.6rem, 7vw, 2.3rem)/1.15 var(--display); text-decoration: none; padding: 10px 0; transform: translateY(16px); opacity: 0; transition: transform .45s var(--ease), opacity .45s; transition-delay: calc(var(--d, 0) * 50ms + 60ms); }
.menu-open .menu a.m { transform: none; opacity: 1; }
.menu .menu-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 28px; }
.menu-open { overflow: hidden; }
@media (max-width: 1100px) { .nav { display: none; } .menu-btn { display: grid; } .bar-in { min-height: 64px; } .bar-end { margin-left: auto; } }
@media (max-width: 1220px) { html[lang="ka"] .nav { display: none; } html[lang="ka"] .menu-btn { display: grid; } html[lang="ka"] .bar-end { margin-left: auto; } }
@media (max-width: 420px) { .bar-end .btn-sm { display: none; } }

.langbar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 55; transform: translate(-50%, 20px); opacity: 0; transition: transform .4s var(--spring), opacity .3s; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 18px; background: var(--night-2); color: var(--on-dark); box-shadow: 0 20px 40px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); width: max-content; max-width: calc(100vw - 32px); font-size: .95rem; }
.langbar.show { transform: translate(-50%, 0); opacity: 1; }
.langbar a { color: var(--gold-2); font-weight: 700; }
.consent { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 56; transform: translate(-50%, 20px); opacity: 0; transition: transform .4s var(--spring), opacity .3s; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; border-radius: 20px; background: var(--night-2); color: var(--on-dark); box-shadow: 0 20px 40px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); width: min(700px, calc(100vw - 32px)); font-size: .92rem; line-height: 1.5; }
.consent.show { transform: translate(-50%, 0); opacity: 1; }
.consent p { margin: 0; flex: 1 1 300px; min-width: 0; }
.consent a { color: var(--gold-2); font-weight: 700; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-inline-start: auto; }
.foot-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.foot-link:hover { color: #fff; text-decoration: underline; }
.langbar button { border: 0; background: rgba(255,255,255,.1); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; flex: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: center; padding-block: calc(110px + env(safe-area-inset-top, 0px)) 90px; overflow: hidden; isolation: isolate; }
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.sky .b1 { width: 620px; height: 620px; left: -160px; top: -200px; background: #0e7490; animation: drift1 22s ease-in-out infinite alternate; }
.sky .b2 { width: 520px; height: 520px; right: -140px; top: 10%; background: #ff6b57; opacity: .3; animation: drift2 26s ease-in-out infinite alternate; }
.sky .b3 { width: 480px; height: 480px; left: 35%; bottom: -260px; background: #ff9f1c; opacity: .28; animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(140px, 120px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-120px, 160px) scale(.9); } }
@keyframes drift3 { to { transform: translate(-160px, -80px) scale(1.2); } }
.hexgrid { position: absolute; inset: -2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v30L28 61 2 46V16zM28 61v36M2 16 0 15M54 16l2-1' fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 56px 97px; -webkit-mask-image: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); mask-image: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glyphs span { position: absolute; font: 800 var(--s, 1.6rem)/1 var(--display); color: #fff; opacity: 0; animation: float-up var(--t, 18s) linear infinite; animation-delay: var(--dl, 0s); left: var(--x); bottom: -60px; }
@keyframes float-up { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: .13; } 80% { opacity: .1; } 100% { opacity: 0; transform: translateY(-110vh) rotate(25deg); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.hero-copy { display: grid; gap: 26px; }
.hero-copy .lead { font-size: clamp(1.08rem, 1.6vw, 1.26rem); color: var(--on-dark-2); max-width: 36rem; }
.hero h1 { color: #fff; }
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rotator > span { grid-area: 1 / 1; white-space: nowrap; background: linear-gradient(100deg, var(--gold-2), var(--gold) 40%, #ff6b57 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(105%); opacity: 0; transition: transform .7s var(--spring), opacity .4s; }
.rotator > span.on { transform: none; opacity: 1; }
.rotator > span.off { transform: translateY(-105%); opacity: 0; }
.no-js .rotator > span:first-child { transform: none; opacity: 1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-weight: 600; font-size: .9rem; color: var(--on-dark-2); }
.hero-badge b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font: 800 .72rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-ink); position: relative; }
.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold-ink); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--on-dark-2); font-weight: 600; font-size: .95rem; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust .i { color: var(--gold-2); }

.stage { position: relative; height: 640px; perspective: 1400px; }
/* the phones and floating cards are placed as one picture; in right-to-left languages it stays the same picture */
[dir='rtl'] .stage { direction: ltr; }
[dir='rtl'] .stage .pop > span { direction: rtl; unicode-bidi: plaintext; }
.stage .phone { --w: 300px; position: absolute; left: 50%; top: 50%; margin: calc(var(--w) * -1.045) 0 0 calc(var(--w) * -.5); transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx, 6deg)) rotateZ(2deg); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.stage .phone.back { --w: 250px; transform: translate(-150px, 60px) rotateY(-24deg) rotateX(8deg) rotateZ(-8deg); filter: brightness(.6) saturate(.9); }
.stage .float { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -14px; } }
.stage .hero-avatar { position: absolute; width: 190px; right: -14px; bottom: -6px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)); animation: bob 5s ease-in-out infinite reverse; z-index: 3; }
.stage .glow { position: absolute; left: 50%; top: 52%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(34,184,207,.55), transparent 65%); filter: blur(10px); }
.pop { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.96); color: var(--ink); font-weight: 700; font-size: .92rem; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); white-space: nowrap; animation: bob 7s ease-in-out infinite; }
.pop small { display: block; font-weight: 600; font-size: .74rem; color: var(--muted); }
.pop .ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.pop .ic .i { width: 20px; height: 20px; }
.pop .emblem { width: 40px; height: 40px; }
.pop.p1 { left: -6%; top: 14%; animation-delay: -1s; }
.pop.p2 { right: -4%; top: 6%; animation-delay: -3s; }
.pop.p3 { left: -12%; bottom: 22%; animation-delay: -2s; }
.pop.p4 { right: 18%; bottom: -2%; animation-delay: -4.5s; }
/* IQ, the app's currency: a gold brain (the same icon as in the app) */
.coin { width: 22px; height: 22px; background: linear-gradient(160deg, #ffe08a, var(--gold) 55%, #d98a00); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M455 275Q456 300 445.5 322.5Q435 345 415 360L431 391Q439 407 432.5 422.5Q426 438 410 444L393 449Q388 451 381 451Q364 451 353 437L308 384Q279 379 256 361Q240 365 224 365Q195 365 171 349Q154 354 136 353Q111 354 87.5 343.5Q64 333 50 312.5Q36 292 35 267Q33 243 43 222Q33 197 41 172Q53 141 83 124Q92 97 115.5 81Q139 65 168 67Q194 43 229 40.5Q264 38 292 59Q306 55 320 55Q342 55 361.5 64Q381 73 395 90Q427 99 448.5 125Q470 151 471 185Q473 222 453 252Q455 264 455 275ZM348 245Q358 246 364 252.5Q370 259 370 268Q370 277 364 283Q358 289 349 289L335 289Q325 319 301 338L317 343Q384 342 405 310Q416 293 414 274L414 273Q413 251 396 235Q379 219 356 220Q348 220 341.5 214Q335 208 335 199Q335 190 341.5 184Q348 178 356 178Q397 179 428 205Q429 196 429 186Q428 164 416 151Q401 136 368 132Q359 111 342 102Q328 94 311 97Q296 100 285 108Q274 116 274 124L274 124Q274 127 276 133Q278 139 279 140Q288 140 294.5 146Q301 152 301 161Q301 170 294.5 176.5Q288 183 279 183L279 183Q262 182 249 171Q234 181 215 183L215 183Q206 183 199 177.5Q192 172 191.5 163.5Q191 155 196.5 148Q202 141 211 140Q217 139 222 137Q231 132 231 124L231 124Q231 102 245 85Q213 77 183 113Q153 108 139 115.5Q125 123 116 154Q99 162 93 169Q84 177 81 192Q116 185 149 197Q157 200 161 208Q165 216 162 224.5Q159 233 151 236.5Q143 240 134 237Q110 227 85 236Q81 240 79 248Q79 253 79 264Q79 275 84.5 285.5Q90 296 100 302Q117 311 136 311Q132 303 128.5 294Q125 285 129 276.5Q133 268 141.5 265Q150 262 158.5 266Q167 270 170 279Q176 297 191 309Q206 321 226 323Q248 322 266 309.5Q284 297 294 277Q297 257 313 250Q324 245 348 245ZM391 405L378 377L363 380L384 407L391 405ZM292 221Q292 213 286.5 206.5Q281 200 272 199Q249 198 231 213Q212 233 213 260Q213 269 219.5 275Q226 281 235 281Q244 281 250 275Q256 269 256 260Q256 251 261 244Q265 241 270 241Q279 241 285.5 235.5Q292 230 292 221Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M455 275Q456 300 445.5 322.5Q435 345 415 360L431 391Q439 407 432.5 422.5Q426 438 410 444L393 449Q388 451 381 451Q364 451 353 437L308 384Q279 379 256 361Q240 365 224 365Q195 365 171 349Q154 354 136 353Q111 354 87.5 343.5Q64 333 50 312.5Q36 292 35 267Q33 243 43 222Q33 197 41 172Q53 141 83 124Q92 97 115.5 81Q139 65 168 67Q194 43 229 40.5Q264 38 292 59Q306 55 320 55Q342 55 361.5 64Q381 73 395 90Q427 99 448.5 125Q470 151 471 185Q473 222 453 252Q455 264 455 275ZM348 245Q358 246 364 252.5Q370 259 370 268Q370 277 364 283Q358 289 349 289L335 289Q325 319 301 338L317 343Q384 342 405 310Q416 293 414 274L414 273Q413 251 396 235Q379 219 356 220Q348 220 341.5 214Q335 208 335 199Q335 190 341.5 184Q348 178 356 178Q397 179 428 205Q429 196 429 186Q428 164 416 151Q401 136 368 132Q359 111 342 102Q328 94 311 97Q296 100 285 108Q274 116 274 124L274 124Q274 127 276 133Q278 139 279 140Q288 140 294.5 146Q301 152 301 161Q301 170 294.5 176.5Q288 183 279 183L279 183Q262 182 249 171Q234 181 215 183L215 183Q206 183 199 177.5Q192 172 191.5 163.5Q191 155 196.5 148Q202 141 211 140Q217 139 222 137Q231 132 231 124L231 124Q231 102 245 85Q213 77 183 113Q153 108 139 115.5Q125 123 116 154Q99 162 93 169Q84 177 81 192Q116 185 149 197Q157 200 161 208Q165 216 162 224.5Q159 233 151 236.5Q143 240 134 237Q110 227 85 236Q81 240 79 248Q79 253 79 264Q79 275 84.5 285.5Q90 296 100 302Q117 311 136 311Q132 303 128.5 294Q125 285 129 276.5Q133 268 141.5 265Q150 262 158.5 266Q167 270 170 279Q176 297 191 309Q206 321 226 323Q248 322 266 309.5Q284 297 294 277Q297 257 313 250Q324 245 348 245ZM391 405L378 377L363 380L384 407L391 405ZM292 221Q292 213 286.5 206.5Q281 200 272 199Q249 198 231 213Q212 233 213 260Q213 269 219.5 275Q226 281 235 281Q244 281 250 275Q256 269 256 260Q256 251 261 244Q265 241 270 241Q279 241 285.5 235.5Q292 230 292 221Z'/%3E%3C/svg%3E") center / contain no-repeat; flex: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-bottom: 60px; }
  .stage { height: 560px; max-width: 520px; width: 100%; margin: 0 auto; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .stage { height: 500px; }
  .stage .phone { --w: 240px; }
  .stage .phone.back { --w: 200px; transform: translate(-100px, 50px) rotateY(-20deg) rotateZ(-8deg); }
  .stage .hero-avatar { width: 140px; right: -6px; }
  .pop { font-size: .8rem; padding: 8px 12px 8px 8px; }
  .pop .ic { width: 30px; height: 30px; }
  .pop.p1 { left: -2%; top: 8%; }
  .pop.p2 { right: -2%; top: 2%; }
  .pop.p3 { left: -2%; bottom: 18%; }
  .pop.p4 { display: none; }
}

/* ---------- numbers strip ---------- */
.numbers { padding-block: 0; background: var(--night); }
.numbers-in { display: grid; grid-template-columns: repeat(6, 1fr); border-radius: var(--radius); background: linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.numbers-in > div { padding: 26px 18px; text-align: center; display: grid; gap: 6px; color: var(--on-dark); }
.numbers-in > div + div { box-shadow: -1px 0 0 rgba(255,255,255,.08); }
.numbers-in b { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #bfe6ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numbers-in span { color: var(--on-dark-2); font-weight: 600; font-size: .92rem; }
@media (max-width: 860px) { .numbers-in { grid-template-columns: repeat(3, 1fr); } .numbers-in > div:nth-child(4) { box-shadow: none; } .numbers-in > div:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.08); } }
@media (max-width: 480px) { .numbers-in { grid-template-columns: repeat(2, 1fr); } .numbers-in > div { box-shadow: none !important; border-top: 1px solid rgba(255,255,255,.08); } .numbers-in > div:nth-child(-n+2) { border-top: 0; } .numbers-in > div:nth-child(odd) { box-shadow: 1px 0 0 rgba(255,255,255,.08) !important; } }

/* ---------- subject marquee ---------- */
.marquee-sec { padding-block: 64px 30px; background: var(--night); overflow: hidden; }
.marquee { display: flex; width: max-content; gap: 12px; animation: slide var(--speed, 70s) linear infinite; padding-block: 6px; }
.marquee.rev { animation-direction: reverse; }
.marquee-wrap { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.subj { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: var(--on-dark); font-weight: 600; white-space: nowrap; }
.subj i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.subj .i { width: 18px; height: 18px; }

/* ---------- how it works ---------- */
.how { background: var(--night); color: var(--on-dark); padding-top: 70px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: s; position: relative; }
.step { position: relative; padding: 30px 28px 28px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; gap: 14px; align-content: start; overflow: hidden; }
.step .n { font: 900 4.4rem/1 var(--display); background: linear-gradient(180deg, var(--gold-2), rgba(255,176,32,0)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: -6px; }
.step p { color: var(--on-dark-2); }
.step .art { margin-top: 10px; height: 150px; border-radius: 18px; background: rgba(0,0,0,.25); position: relative; overflow: hidden; display: grid; place-items: center; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
/* step art 1: the school ladder */
.ladder-mini { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ladder-mini div { display: flex; gap: 5px; }
.ladder-mini > div:not(.uni) { display: grid; grid-template-columns: repeat(6, 24px); }
.ladder-mini i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 800 .7rem/1 var(--display); font-style: normal; background: rgba(255,255,255,.1); color: var(--on-dark-2); }
.ladder-mini i.on { background: var(--brand); color: #fff; animation: rung 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * 120ms); }
@keyframes rung { 0%, 60%, 100% { transform: none; box-shadow: none; } 30% { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(34,184,207,.6); } }
.ladder-mini .uni i { width: auto; padding: 0 8px; font-family: var(--body); font-weight: 700; }
/* step art 2: a question answered */
.qmini { width: 82%; display: grid; gap: 7px; }
.qmini b { color: #fff; font: 700 .86rem/1.3 var(--display); margin-bottom: 2px; }
.qmini span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.1); font-weight: 600; font-size: .82rem; }
.qmini span em { font-style: normal; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: .66rem; font-weight: 800; }
.play .qmini span.ok { animation: okflash 4s ease-in-out infinite; }
@keyframes okflash { 0%, 35% { background: rgba(255,255,255,.1); } 45%, 90% { background: rgba(23,178,106,.9); color: #fff; } 100% { background: rgba(255,255,255,.1); } }
/* step art 3: rewards raining */
.rewards { position: relative; width: 100%; height: 100%; }
.rewards .emblem { position: absolute; width: 64px; left: 50%; top: 50%; margin: -32px 0 0 -32px; animation: emblem-spin 6s var(--ease) infinite; }
@keyframes emblem-spin { 0%, 20% { transform: rotateY(0) scale(1); } 35% { transform: rotateY(360deg) scale(1.12); } 50%, 100% { transform: rotateY(360deg) scale(1); } }
.rewards .coin { position: absolute; width: 18px; height: 18px; top: -20px; left: var(--x); animation: rain 2.6s linear infinite; animation-delay: var(--dl); }
@keyframes rain { to { transform: translateY(200px) rotate(200deg); } }
.rewards .plus { position: absolute; font: 800 .9rem/1 var(--display); color: var(--gold-2); left: 62%; top: 26%; animation: plus 3s ease-out infinite; }
@keyframes plus { 0% { transform: translateY(10px); opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }

/* ---------- quiz ---------- */
.quiz-sec { background: radial-gradient(90% 60% at 50% 0%, #0b3b4c 0%, var(--night) 70%); color: var(--on-dark); }
.quiz-box { position: relative; max-width: 760px; margin: 0 auto; border-radius: 34px; padding: clamp(22px, 4vw, 40px); background: linear-gradient(160deg, #1594ae, #0e7490 60%, #0b5a70); box-shadow: 0 14px 0 #073e4e, 0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quiz-top .chip { background: rgba(255,255,255,.16); color: #fff; }
.quiz-score { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.2); font: 800 .95rem/1 var(--display); font-variant-numeric: tabular-nums; }
.quiz-dots { display: flex; gap: 6px; margin: 22px 0 8px; }
.quiz-dots i { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); transition: background .3s; }
.quiz-dots i.ok { background: var(--green); }
.quiz-dots i.no { background: #ff8a9a; }
.quiz-dots i.now { background: #fff; }
.quiz-q { font: 800 clamp(1.4rem, 3.2vw, 2.1rem)/1.2 var(--display); color: #fff; margin: 18px 0 24px; min-height: 2.4em; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opts button { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); font: 700 1.05rem/1.25 var(--body); cursor: pointer; box-shadow: 0 5px 0 rgba(4,40,52,.35); transition: transform .15s var(--ease), background .2s, box-shadow .15s; }
.quiz-opts button em { font-style: normal; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--brand); font: 800 .85rem/1 var(--display); flex: none; transition: background .2s, color .2s; }
.quiz-opts button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(4,40,52,.35); }
.quiz-opts button:disabled { cursor: default; }
.quiz-opts button.ok { background: #dcfce9; color: #0b5c36; box-shadow: 0 5px 0 #17b26a, 0 0 0 3px #17b26a inset; }
.quiz-opts button.ok em { background: var(--green); color: #fff; }
.quiz-opts button.no { background: #ffe1e5; color: #8a1730; box-shadow: 0 5px 0 #e5484d, 0 0 0 3px #e5484d inset; animation: shake .4s; }
.quiz-opts button.no em { background: var(--red); color: #fff; }
.quiz-opts button.dim { opacity: .5; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.quiz-fb { margin-top: 20px; min-height: 92px; padding: 16px 18px; border-radius: 18px; background: rgba(0,0,0,.18); display: grid; gap: 4px; align-content: start; }
.quiz-fb strong { font: 800 1.05rem/1.2 var(--display); }
.quiz-fb strong.ok { color: #7dffb6; }
.quiz-fb strong.no { color: #ffb3bf; }
.quiz-fb p { color: #ddf3f7; }
.quiz-fb .hint { color: #bfe6ee; font-weight: 600; }
.quiz-nav { display: flex; justify-content: flex-end; margin-top: 18px; min-height: 52px; }
.quiz-end { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 10px 0; }
.quiz-end .big { font: 900 clamp(3rem, 9vw, 5.4rem)/1 var(--display); color: #fff; }
.quiz-end .msg { font: 700 1.3rem/1.3 var(--display); color: var(--gold-2); }
.quiz-end p { color: #ddf3f7; max-width: 30rem; }
.quiz-end .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.fly { position: fixed; z-index: 70; pointer-events: none; transition: transform .8s cubic-bezier(.5, -0.4, .6, 1), opacity .8s; }
.xp-pop { position: absolute; right: 18px; top: -14px; font: 800 1rem/1 var(--display); color: var(--gold-2); text-shadow: 0 2px 8px rgba(0,0,0,.4); opacity: 0; pointer-events: none; }
.xp-pop.go { animation: plus 1.2s ease-out; }
@media (max-width: 600px) { .quiz-opts { grid-template-columns: 1fr; } .quiz-opts button { min-height: 56px; } }
.confetti { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

/* ---------- inside the app (sticky phone story) ---------- */
.inside { background: var(--night); color: var(--on-dark); }
.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); }
.story-phone { position: sticky; top: calc(50vh - 300px); height: 620px; display: grid; place-items: center; }
.story-phone .phone { --w: 286px; }
.story-phone .screens { position: absolute; inset: calc(var(--w) * .032); border-radius: calc(var(--w) * .12); overflow: hidden; }
.story-phone .screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform .8s var(--ease); }
.story-phone .screens img.on { opacity: 1; transform: none; }
.story-phone .halo { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--halo, rgba(34,184,207,.5)), transparent 62%); transition: background .6s; z-index: -1; }
.story-steps { display: grid; }
.story-step { min-height: 52vh; display: grid; align-content: center; gap: 16px; padding-block: 40px; opacity: .32; transition: opacity .5s var(--ease); }
.story-step.on { opacity: 1; }
.story-step .ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--c, var(--brand)); color: #fff; box-shadow: 0 14px 30px -10px var(--c, var(--brand)); }
.story-step .ic .i { width: 28px; height: 28px; }
.story-step h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; }
.story-step p { color: var(--on-dark-2); font-size: 1.1rem; max-width: 34rem; }
.story-step ul { list-style: none; display: grid; gap: 8px; color: var(--on-dark); font-weight: 600; }
.story-step li { display: flex; gap: 10px; align-items: baseline; }
.story-step li .i { color: var(--gold-2); width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.story-step .phone { display: none; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-phone { display: none; }
  .story-step { min-height: 0; opacity: 1; padding-block: 34px; border-top: 1px solid rgba(255,255,255,.08); }
  .story-step .phone { display: block; --w: 240px; margin: 12px auto 0; }
}

/* ---------- games ---------- */
.games { background: var(--paper); }
.arcade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.game { --a: var(--brand); --b: var(--brand-2); position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 28px; overflow: hidden; color: #fff; background: linear-gradient(140deg, var(--a), var(--b)); box-shadow: 0 8px 0 color-mix(in srgb, var(--b) 60%, #000), 0 30px 50px -24px color-mix(in srgb, var(--a) 80%, transparent); transition: transform .35s var(--spring), box-shadow .35s var(--ease); isolation: isolate; }
.game:hover { transform: translateY(-6px) rotate(-.6deg); }
.game .scene { position: relative; height: 190px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.18), transparent 60%); }
.game .body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; background: rgba(0,0,0,.12); }
.game .title { display: flex; align-items: center; gap: 12px; }
.game .title .ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; }
.game h3 { font-size: 1.12rem; }
.game p { color: rgba(255,255,255,.88); font-size: .98rem; }
@media (max-width: 960px) { .arcade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .arcade { grid-template-columns: 1fr; } }
/* the little animations are paused until the card is on screen */
.game .scene * { animation-play-state: paused; }
.game.play .scene * { animation-play-state: running; }
/* rush: a 60-second ring */
@property --sec { syntax: '<integer>'; inherits: false; initial-value: 60; }
.ring { position: relative; width: 120px; height: 120px; }
.ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: rgba(255,255,255,.22); }
.ring .arc { stroke: #fff; stroke-linecap: round; stroke-dasharray: 327; animation: ring 8s linear infinite; }
@keyframes ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 327; } }
.ring .sec { position: absolute; inset: 0; display: grid; place-items: center; font: 900 2rem/1 var(--display); counter-reset: s var(--sec); animation: sec 8s steps(60) infinite; }
.ring .sec::after { content: counter(s); }
@keyframes sec { from { --sec: 60; } to { --sec: 0; } }
.rush-bolt { position: absolute; right: 22%; top: 18%; width: 40px; height: 40px; color: #fff3c4; animation: zap 1.6s ease-in-out infinite; }
@keyframes zap { 0%, 100% { transform: rotate(-10deg) scale(.9); opacity: .7; } 50% { transform: rotate(8deg) scale(1.15); opacity: 1; } }
/* memory: cards turning over */
.mem { display: grid; grid-template-columns: repeat(4, 46px); gap: 8px; perspective: 600px; }
.mem i { position: relative; width: 46px; height: 58px; transform-style: preserve-3d; animation: flip 6s ease-in-out infinite; animation-delay: calc(var(--k) * .45s); }
.mem i::before, .mem i::after { content: ''; position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; }
.mem i::before { background: rgba(255,255,255,.95); }
.mem i::after { background: #3f6ef5; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transform: rotateY(180deg); }
.mem i b { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; transform: translateZ(1px); color: var(--brand); font: 900 1.05rem/1 var(--display); z-index: 1; }
.mem i b .i { width: 24px; height: 24px; }
@keyframes flip { 0%, 8% { transform: rotateY(180deg); } 16%, 60% { transform: rotateY(0); } 68%, 100% { transform: rotateY(180deg); } }
/* scramble: letters falling into place */
.scr { display: flex; gap: 8px; }
.scr i { width: 46px; height: 52px; border-radius: 12px; background: #fff; color: var(--teal); display: grid; place-items: center; font: 900 1.4rem/1 var(--display); font-style: normal; box-shadow: 0 4px 0 rgba(0,0,0,.18); animation: unscramble 5s var(--spring) infinite; }
@keyframes unscramble { 0%, 12% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); } 40%, 85% { transform: none; } 92% { transform: none; box-shadow: 0 4px 0 #0b7a6d, 0 0 0 3px #7dffe0; } 100% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); } }
/* target: answers drifting, one gets hit */
.tgt { position: relative; width: 100%; height: 100%; }
.tgt i { position: absolute; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--magenta); font: 800 .85rem/1 var(--display); font-style: normal; white-space: nowrap; left: var(--x); top: var(--y); animation: wander 7s ease-in-out infinite alternate; animation-delay: var(--dl); }
.tgt i.hit { animation: wander 7s ease-in-out infinite alternate, hit 3.5s ease-in-out infinite; }
@keyframes wander { 50% { transform: translate(14px, -12px); } 100% { transform: translate(-10px, 8px); } }
@keyframes hit { 0%, 55% { background: rgba(255,255,255,.95); color: var(--magenta); scale: 1; } 62% { scale: 1.25; background: #17b26a; color: #fff; } 75% { scale: 0; opacity: 0; } 76%, 100% { scale: 1; opacity: 1; background: rgba(255,255,255,.95); color: var(--magenta); } }
.tgt .cross { position: absolute; width: 46px; height: 46px; color: #fff; left: 54%; top: 48%; animation: aim 3.5s ease-in-out infinite; }
@keyframes aim { 0% { transform: translate(-60px, 30px); } 55%, 70% { transform: translate(6px, -32px); } 100% { transform: translate(-60px, 30px); } }
/* sort: a stream of words */
.srt { width: 100%; display: grid; gap: 10px; }
.srt div { display: flex; gap: 10px; width: max-content; animation: stream 9s linear infinite; }
.srt div:nth-child(2) { animation-direction: reverse; animation-duration: 11s; }
.srt i { padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.95); color: #8a5a00; font: 800 .85rem/1 var(--body); font-style: normal; }
.srt i.g { animation: goodword 3s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes stream { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes goodword { 0%, 40% { background: rgba(255,255,255,.95); color: #8a5a00; } 50%, 90% { background: #17b26a; color: #fff; } 100% { background: rgba(255,255,255,.95); color: #8a5a00; } }
/* honeycomb: cells lighting up in order */
.hive { position: relative; width: 168px; height: 150px; }
.hive i { position: absolute; width: 52px; height: 58px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #fff; color: #b37400; display: grid; place-items: center; font: 900 1.15rem/1 var(--display); font-style: normal; left: var(--x); top: var(--y); animation: cell 5s ease-in-out infinite; animation-delay: calc(var(--k) * .5s); }
.hive i.n { animation: none; opacity: .75; }
@keyframes cell { 0%, 8% { background: #fff; color: #b37400; transform: none; } 14%, 70% { background: var(--brand); color: #fff; transform: scale(1.06); } 80%, 100% { background: #fff; color: #b37400; transform: none; } }

.versus { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vs-card { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 20px 40px -26px rgba(10,37,48,.35); }
.vs-card .ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--paper-2); color: var(--brand); flex: none; }
.vs-card .ic .i { width: 26px; height: 26px; }
.vs-card p { color: var(--muted); }
.ad-note { margin-top: 22px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--paper-2); color: var(--ink-2); font-weight: 500; }
.ad-note .i { color: var(--brand); margin-top: 3px; }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }

/* ---------- heroes (avatar collections) ---------- */
.heroes { --c: #22b8cf; background: radial-gradient(70% 55% at 50% 35%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), var(--night); color: var(--on-dark); transition: background .8s; overflow: hidden; }
.heroes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.podium { position: relative; height: 520px; display: grid; place-items: end center; }
.podium::before { content: ''; position: absolute; bottom: 24px; width: 70%; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, transparent), transparent); filter: blur(4px); }
.podium::after { content: ''; position: absolute; bottom: 30px; width: 54%; height: 34px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.04)); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.podium img { position: absolute; bottom: 40px; height: 470px; width: auto; max-width: 100%; z-index: 1; opacity: 0; transform: translateY(30px) scale(.9); transition: opacity .5s var(--ease), transform .7s var(--spring); filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.podium img.on { opacity: 1; transform: none; animation: bob 5s ease-in-out infinite; }
.sparkles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px var(--c); left: var(--x); top: var(--y); animation: twinkle 3s ease-in-out infinite; animation-delay: var(--dl); opacity: 0; }
@keyframes twinkle { 50% { opacity: 1; transform: scale(1.4); } }
.heroes-copy { display: grid; gap: 24px; }
.heroes-copy .head { margin-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--on-dark-2); font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--spring); }
.tabs button i { width: 22px; height: 22px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--tc); }
.tabs button:hover { transform: translateY(-2px); color: #fff; }
.tabs button[aria-selected='true'] { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -8px var(--tc); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-stats div { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; gap: 4px; }
.hero-stats b { font: 800 1.35rem/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.hero-stats span { color: var(--on-dark-2); font-size: .85rem; font-weight: 600; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; color: var(--on-dark-2); font-size: .9rem; font-weight: 600; }
.slots span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); }
@media (max-width: 900px) { .heroes-grid { grid-template-columns: 1fr; } .podium { height: 420px; } .podium img { height: 380px; } }
@media (max-width: 480px) { .hero-stats { grid-template-columns: 1fr 1fr 1fr; } .hero-stats div { padding: 12px; } .hero-stats b { font-size: 1.1rem; } }

/* ---------- badge wall ---------- */
.badges { background: var(--night); color: var(--on-dark); padding-top: 40px; }
.wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; max-width: 980px; margin: 0 auto; }
.wall .b { position: relative; width: 88px; display: grid; justify-items: center; gap: 6px; }
.wall .emblem { width: 80px; height: 80px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); transition: transform .4s var(--spring); }
.wall .b:nth-child(4n+2) .emblem { animation: hover-y 5s ease-in-out infinite; }
.wall .b:nth-child(4n+3) .emblem { animation: hover-y 6s ease-in-out infinite reverse; }
@keyframes hover-y { 50% { translate: 0 -8px; } }
.wall .b:hover .emblem { transform: scale(1.18) rotate(-6deg); }
.wall .b span { font-size: .72rem; font-weight: 700; color: var(--on-dark-3); text-align: center; line-height: 1.2; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.wall .b:hover span { opacity: 1; transform: none; color: #fff; }
.tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 34px; color: var(--on-dark-2); font-weight: 700; }
.tiers span { display: inline-flex; align-items: center; gap: 10px; }
.tiers i { width: 18px; height: 20px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--tc); }
.unlock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; max-width: 980px; margin: 70px auto 0; padding: 30px; border-radius: 32px; background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.unlock .phone { --w: 230px; }
.unlock h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; }
.unlock p { color: var(--on-dark-2); margin-top: 12px; }
@media (max-width: 700px) { .unlock { grid-template-columns: 1fr; justify-items: center; text-align: center; } .wall .b { width: 72px; } .wall .emblem { width: 66px; height: 66px; } }

/* ---------- social ---------- */
.social { background: var(--paper); }
.social-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.feature-list { display: grid; gap: 18px; }
.fl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.fl .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c, var(--brand)); color: #fff; box-shadow: 0 12px 24px -12px var(--c, var(--brand)); }
.fl .ic .i { width: 24px; height: 24px; }
.fl p { color: var(--muted); margin-top: 4px; }
.mock { position: relative; display: grid; gap: 18px; }
.mock > * { min-width: 0; }
.chat { border-radius: 28px; padding: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 40px 70px -40px rgba(10,37,48,.45); display: grid; gap: 10px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chat-head .av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, #ff9fb3, #e5446d); display: grid; place-items: center; color: #fff; font: 800 1rem/1 var(--display); }
.chat-head small { display: block; color: #067647; font-weight: 700; }
.chat-head .calls { margin-left: auto; display: flex; gap: 8px; color: var(--brand); }
.chat-head .calls span { width: 38px; height: 38px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; }
.msgs { display: grid; gap: 8px; min-height: 230px; align-content: end; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-weight: 500; line-height: 1.35; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .35s var(--ease), transform .45s var(--spring); }
.msg.in { opacity: 1; transform: none; }
.msg.them { background: var(--paper-2); border-bottom-left-radius: 6px; justify-self: start; }
.msg.me { background: var(--brand); color: #fff; border-bottom-right-radius: 6px; justify-self: end; }
.msg.card { justify-self: stretch; max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: linear-gradient(120deg, #fff3d6, #ffe2a6); color: var(--gold-ink); font-weight: 700; }
.msg.card .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--gold); display: grid; place-items: center; flex: none; }
.msg.card button { margin-left: auto; border: 0; border-radius: 10px; padding: 8px 12px; background: var(--brand); color: #fff; font-weight: 800; }
.typing { justify-self: start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--paper-2); opacity: 0; transition: opacity .2s; }
.typing.in { opacity: 1; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }
.filter-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff4f5; color: #8a1730; font-size: .86rem; font-weight: 600; }
.league { border-radius: 28px; padding: 22px; background: linear-gradient(150deg, var(--brand), #0b5a70); color: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; box-shadow: 0 30px 60px -30px rgba(11,59,76,.7); }
/* gold, silver and bronze, each with its trophy, like the podium of a school’s best students in the app */
.podium-mini { display: flex; align-items: flex-end; gap: 6px; height: 128px; padding-top: 32px; }
.podium-mini i { position: relative; transform-origin: bottom; width: 34px; border-radius: 10px 10px 4px 4px; background: rgba(255,255,255,.2); display: grid; place-items: start center; padding-top: 6px; font: 900 .9rem/1 var(--display); font-style: normal; animation: grow 1.2s var(--spring) both; }
.podium-mini i .i { position: absolute; left: 50%; bottom: calc(100% + 5px); width: 22px; height: 22px; margin-left: -11px; }
.podium-mini i:nth-child(1) { height: 62%; background: #b9c3cc; color: #22313a; animation-delay: .1s; }
.podium-mini i:nth-child(1) .i { color: #d5dde3; }
.podium-mini i:nth-child(2) { height: 100%; background: var(--gold); color: var(--gold-ink); animation-delay: .3s; }
.podium-mini i:nth-child(2) .i { color: var(--gold); width: 28px; height: 28px; margin-left: -14px; }
.podium-mini i:nth-child(3) { height: 44%; background: #c8814a; color: #fff; animation-delay: .5s; }
.podium-mini i:nth-child(3) .i { color: #e09a62; }
@keyframes grow { from { transform: scaleY(0); } }
.league p { color: #d3eff4; font-size: .95rem; margin-top: 4px; }
@media (max-width: 520px) { .league { grid-template-columns: minmax(0, 1fr); gap: 14px; } .league .podium-mini { justify-self: center; } }
@media (max-width: 900px) { .social-grid { grid-template-columns: 1fr; } }

/* ---------- Premium ---------- */
.premium { background: radial-gradient(80% 60% at 85% 10%, rgba(255,107,87,.26), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(14,116,144,.5), transparent 60%), var(--night); color: var(--on-dark); overflow: hidden; }
.perks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.perk { grid-column: span 2; position: relative; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; gap: 10px; align-content: start; overflow: hidden; transition: transform .35s var(--spring), box-shadow .3s; }
.perk:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.perk .ic { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: var(--gold-2); }
.perk .ic .i { width: 24px; height: 24px; }
.perk .ic .coin { width: 20px; height: 20px; }
.perk .ic .coin + .coin { margin-left: -9px; }
.perk p { color: var(--on-dark-2); }
.perk.big { grid-column: span 3; grid-row: span 2; }
.perk.wide { grid-column: span 3; }
.scan { position: relative; height: 230px; margin-top: 8px; display: grid; place-items: center; }
.page { position: relative; width: 180px; height: 220px; border-radius: 10px; background: #fffdf6; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); padding: 18px 16px; display: grid; gap: 8px; align-content: start; transform: rotate(-4deg); overflow: hidden; }
.page b { font: 800 .82rem/1.2 var(--display); color: var(--ink); }
.page i { display: block; height: 6px; border-radius: 3px; background: #d9e7eb; }
.page i:nth-of-type(3n) { width: 70%; }
.page i:nth-of-type(4n) { width: 85%; }
.page .fig { height: 52px; border-radius: 8px; background: linear-gradient(120deg, #c7f0d8, #9ad8b5); }
.beam { position: absolute; left: 0; right: 0; height: 40px; top: 0; opacity: 0; background: linear-gradient(180deg, transparent, rgba(255,212,92,.7) 80%, #ffd45c); box-shadow: 0 2px 16px rgba(255,212,92,.9); animation: beam 3.2s ease-in-out infinite; }
@keyframes beam { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 55% { top: 190px; opacity: 1; } 65%, 100% { top: 190px; opacity: 0; } }
.viewfinder { position: absolute; inset: 6px 14px; pointer-events: none; }
.viewfinder i { position: absolute; width: 26px; height: 26px; border: 4px solid var(--gold-2); }
.viewfinder i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.viewfinder i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.viewfinder i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.viewfinder i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.made { position: absolute; right: 2%; bottom: 8%; display: grid; gap: 8px; }
.made span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 13px; background: #fff; color: var(--ink); font-weight: 700; font-size: .82rem; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); opacity: 0; animation: made 3.2s var(--spring) infinite; animation-delay: calc(1.6s + var(--k) * .25s); }
.made span .i { color: var(--brand); }
@keyframes made { 0% { opacity: 0; transform: translateX(20px) scale(.9); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.grade-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 6px; }
.grade-bars i { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); height: var(--h); transform-origin: bottom; animation: grow 1.4s var(--spring) both; animation-delay: calc(var(--k) * .12s); display: grid; place-items: start center; padding-top: 6px; font: 900 .78rem/1 var(--display); font-style: normal; color: var(--gold-ink); }
.price-line { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; border-radius: 24px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.price-line b { font: 800 1.6rem/1 var(--display); }
.price-line span { color: var(--on-dark-2); font-weight: 600; }
@media (max-width: 960px) { .perks { grid-template-columns: repeat(2, 1fr); } .perk, .perk.big, .perk.wide { grid-column: span 1; grid-row: auto; } .perk.big { grid-column: span 2; } }
@media (max-width: 600px) { .perks { grid-template-columns: 1fr; } .perk.big { grid-column: auto; } }

/* ---------- curriculum ---------- */
.curriculum { background: var(--paper); }
.curr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.curr-copy { display: grid; gap: 18px; }
.curr-copy p { color: var(--muted); font-size: 1.05rem; }
.curr-copy p strong { color: var(--ink); }
.board { padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 40px 70px -45px rgba(10,37,48,.5); display: grid; gap: 22px; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flag { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1.2 var(--display); }
.flag svg { width: 34px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.rung-row { display: grid; gap: 10px; }
.rung-row small { font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rungs { display: flex; flex-wrap: wrap; gap: 8px; }
.rung { min-width: 46px; height: 46px; padding: 0 12px; border-radius: 14px; display: grid; place-items: center; font: 800 1rem/1 var(--display); border: 2px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rung.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 18px -8px var(--brand); }
.rung.word { font: 700 .9rem/1 var(--body); }
/* six school years to a row, the chips shrinking to fit a narrow card */
.rungs.nums { display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); }
.rungs.nums .rung { min-width: 0; height: auto; aspect-ratio: 1; padding: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; color: var(--muted); font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--line); }
.legend i.on { background: var(--brand); border-color: var(--brand); }
.subj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.subj-cols div { padding: 16px; border-radius: 18px; background: var(--paper); display: grid; gap: 10px; align-content: start; }
.subj-cols b { font: 700 .9rem/1.2 var(--display); }
.subj-cols ul { list-style: none; display: grid; gap: 7px; }
.subj-cols li { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.subj-cols li .i { color: var(--brand); }
@media (max-width: 900px) { .curr-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .subj-cols { grid-template-columns: 1fr; } }

/* ---------- safety ---------- */
.safety { background: linear-gradient(180deg, var(--paper), #fff); }
.safe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.safe { padding: 26px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 24px 50px -34px rgba(10,37,48,.4); display: grid; gap: 10px; align-content: start; }
.safe .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: #e6f8ef; color: #0f9b5b; }
.safe .ic .i { width: 24px; height: 24px; }
.safe p { color: var(--muted); }
@media (max-width: 900px) { .safe-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .safe-grid { grid-template-columns: 1fr; } }
.more { margin-top: 30px; }

/* ---------- pricing ---------- */
.pricing { background: #fff; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; }
.plan { position: relative; padding: clamp(26px, 3vw, 36px); border-radius: 30px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.plan.pro { background: var(--night); color: var(--on-dark); box-shadow: none; isolation: isolate; }
.plan.pro::before { content: ''; position: absolute; inset: -2px; border-radius: 32px; padding: 2px; background: conic-gradient(from var(--ang, 0deg), var(--gold), #ff6b57, var(--brand-2), var(--gold)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; animation: spin-border 6s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin-border { to { --ang: 360deg; } }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 1.2rem/1 var(--display); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.price b { font: 900 clamp(2.6rem, 5vw, 3.4rem)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.price span { color: var(--muted); font-weight: 600; }
.plan.pro .price span { color: var(--on-dark-2); }
.plan > .btn { margin-top: auto; }
.offer { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-weight: 800; font-size: .9rem; }
.ticks { list-style: none; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 500; }
.ticks .i { width: 22px; height: 22px; margin-top: 1px; color: var(--green); }
.plan.pro .ticks .i { color: var(--gold-2); }
.plan .note { font-size: .9rem; color: var(--muted); }
.plan.pro .note { color: var(--on-dark-3); }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 26px auto 0; }
.pack { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.stack { position: relative; width: 44px; height: 40px; flex: none; }
.stack .coin { position: absolute; left: 2px; top: 0; width: 40px; height: 40px; }
.stack .coin + .coin { display: none; }
.pack b { display: block; font: 800 1.1rem/1.1 var(--display); }
.pack span { color: var(--muted); font-weight: 600; font-size: .92rem; }
.fine { max-width: 980px; margin: 22px auto 0; color: var(--muted); font-size: .92rem; text-align: center; }
@media (max-width: 820px) { .plans, .packs { grid-template-columns: 1fr; } }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; }
.compare-wrap { max-width: 980px; margin: 60px auto 0; overflow-x: auto; border-radius: 24px; box-shadow: inset 0 0 0 2px var(--line); }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare thead th { font: 800 .95rem/1.2 var(--display); background: var(--paper); position: sticky; top: 0; }
.compare thead th:nth-child(3) { color: var(--brand); }
.compare td:nth-child(n+2), .compare th:nth-child(n+2) { text-align: center; width: 22%; }
.compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--green); }
.compare .no { color: #b9cdd2; }
.compare .i { width: 22px; height: 22px; }
.compare small { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
@media (max-width: 560px) {
  .compare { table-layout: fixed; font-size: .9rem; }
  .compare th, .compare td { padding: 12px 8px; }
  .compare th:first-child, .compare td:first-child { width: 46%; padding-left: 14px; }
  .compare td:nth-child(n+2), .compare th:nth-child(n+2) { width: 27%; padding-inline: 4px; }
  .compare thead th { font-size: .8rem; hyphens: auto; overflow-wrap: break-word; }
  .compare small { font-size: .74rem; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.qa { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.qa details { border-radius: 20px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 16px 34px -28px rgba(10,37,48,.4); transition: box-shadow .2s; }
.qa details[open] { box-shadow: inset 0 0 0 2px var(--brand-3), 0 16px 34px -28px rgba(10,37,48,.4); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font: 700 1.04rem/1.35 var(--display); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%230e7490' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa .a { padding: 0 22px 22px; color: var(--muted); display: grid; gap: 10px; }
.qa .a a { color: var(--brand); font-weight: 600; }
.qa-group { max-width: 860px; margin: 0 auto 46px; }
.qa-group h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.qa-group h2 .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; }
.qa-group h2 .i { width: 22px; height: 22px; }

/* ---------- download ---------- */
.cta { background: var(--paper); padding-top: 40px; }
.cta-box { position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; padding: clamp(32px, 6vw, 70px); background: linear-gradient(135deg, #0e7490 0%, #0b5a70 45%, #0b3b4c 100%); color: #fff; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; box-shadow: 0 50px 90px -40px rgba(11,59,76,.8); }
.cta-box::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v30L28 61 2 46V16zM28 61v36' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.2'/%3E%3C/svg%3E"); }
.cta-box::after { content: ''; position: absolute; width: 500px; height: 500px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,176,32,.45), transparent 65%); z-index: -1; }
.cta-box h2 { color: #fff; }
.cta-box p { color: #d3eff4; font-size: 1.12rem; margin-top: 16px; max-width: 32rem; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.qr-card { justify-self: center; display: grid; justify-items: center; gap: 12px; padding: 18px 18px 14px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); transform: rotate(3deg); transition: transform .4s var(--spring); }
.qr-card:hover { transform: rotate(0) scale(1.04); }
.qr-card .qr { width: 170px; height: 170px; }
.qr-card span { font-weight: 700; font-size: .9rem; color: var(--muted); }
@media (max-width: 820px) { .cta-box { grid-template-columns: 1fr; } .qr-card { display: none; } }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--on-dark-2); padding-block: 70px 40px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 34px; }
.foot .brand { color: #fff; }
.foot-tag { margin-top: 14px; max-width: 18rem; }
.foot h4 { font: 800 .8rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 10px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .85rem; color: var(--on-dark-3); }
.mail { user-select: all; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- inner pages ---------- */
.page-hero { position: relative; padding-block: calc(140px + env(safe-area-inset-top, 0px)) clamp(60px, 8vw, 100px); overflow: hidden; isolation: isolate; background: var(--night); color: var(--on-dark); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); color: #fff; max-width: 18ch; }
.page-hero .lead { margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--on-dark-2); max-width: 40rem; }
.page-hero .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-hero .eyebrow { color: var(--gold-2); }
.page-hero .chip { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.page-hero .chips a { text-decoration: none; transition: background .2s, transform .2s var(--spring); }
.page-hero .chips a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.page-hero .hero-actions { margin-top: 30px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.row + .row { margin-top: clamp(70px, 9vw, 120px); }
.row.flip > :first-child { order: 2; }
.row .shots { display: flex; justify-content: center; align-items: flex-start; gap: 18px; position: relative; }
.row .shots .phone { --w: 250px; }
.row .shots .phone:nth-child(2) { margin-top: 60px; }
.row-copy { display: grid; gap: 18px; align-content: start; }
.row-copy p { color: var(--muted); font-size: 1.06rem; }
.dark .row-copy p { color: var(--on-dark-2); }
.bul { list-style: none; display: grid; gap: 12px; }
.bul li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.bul .i { width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.dark .bul .i { color: var(--gold-2); }
.bul b { display: block; }
.bul span { color: var(--muted); }
.dark .bul span { color: var(--on-dark-2); }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; } .row.flip > :first-child { order: 0; } .row .shots .phone { --w: 200px; } }
@media (max-width: 480px) { .row .shots .phone { --w: min(160px, calc(50vw - 25px)); } .row .shots .phone:nth-child(2) { margin-top: 40px; } }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { padding: 26px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 24px 50px -34px rgba(10,37,48,.4); display: grid; gap: 10px; align-content: start; }
.card .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--paper-2); color: var(--brand); }
.card .ic .i { width: 24px; height: 24px; }
.card p { color: var(--muted); }
.dark .card { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.dark .card p { color: var(--on-dark-2); }
.dark .card .ic { background: rgba(255,255,255,.1); color: var(--gold-2); }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards3 { grid-template-columns: 1fr; } }
.numbered { list-style: none; counter-reset: n; display: grid; gap: 16px; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px; border-radius: 22px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 20px 40px -32px rgba(10,37,48,.4); }
.numbered li::before { content: counter(n); width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--brand); color: #fff; font: 900 1.3rem/1 var(--display); }
.numbered p { color: var(--muted); margin-top: 4px; }
.ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.age { padding: 22px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 20px 40px -32px rgba(10,37,48,.4); display: grid; gap: 12px; align-content: start; }
.age .badge { justify-self: start; padding: 7px 12px; border-radius: 999px; font: 800 .85rem/1 var(--display); color: #fff; background: var(--c); }
.age ul { list-style: none; display: grid; gap: 8px; font-size: .95rem; color: var(--ink-2); }
.age li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.age li .i { width: 18px; height: 18px; margin-top: 3px; color: var(--green); }
.age li.off .i { color: #c9a227; }
.age li.off b { display: block; font-weight: 700; color: var(--ink); }
.age .need { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.age .need li { display: block; padding: 5px 11px; border-radius: 999px; background: #fff4cf; color: #6b5310; font-size: .85rem; font-weight: 700; }
@media (max-width: 960px) { .ages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ages { grid-template-columns: 1fr; } }
.email-mock { max-width: 460px; justify-self: center; width: 100%; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgba(10,37,48,.5), 0 0 0 1px var(--line); overflow: hidden; }
.email-mock .bar2 { padding: 14px 18px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); display: grid; gap: 2px; }
.email-mock .bar2 b { color: var(--ink); }
.email-mock .body2 { padding: 20px 18px; display: grid; gap: 12px; }
.email-mock table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.email-mock td, .email-mock th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.email-mock th { color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.email-mock td:last-child, .email-mock th:last-child { text-align: right; }
.email-mock .gr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--paper-2); color: var(--brand); font: 900 .85rem/1 var(--display); }
.sample { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* legal pages */
.legal-page { padding-top: calc(130px + env(safe-area-inset-top, 0px)); }
.legal { max-width: 780px; margin: 0 auto; font-size: 1.02rem; line-height: 1.7; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.legal h2 { font-size: 1.3rem; margin: 2.2em 0 .7em; padding-top: .6em; border-top: 1px solid var(--line); }
.legal h3 { font-size: 1.05rem; margin: 1.6em 0 .5em; }
.legal p, .legal ul, .legal ol { margin: 0 0 1em; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin-bottom: .45em; }
.legal a { color: var(--brand); font-weight: 600; }
.legal .updated { color: var(--muted); font-size: .95rem; margin-bottom: 28px; }
.legal .note { padding: 14px 18px; border-radius: 16px; background: var(--paper-2); color: var(--ink-2); font-size: .95rem; margin: 1.2em 0; }
.legal .card { display: block; padding: 18px 20px; margin: 1em 0; }
.legal footer { margin-top: 3em; color: var(--muted); font-size: .9rem; }
.legal .table { overflow-x: auto; margin: 0 0 1.2em; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.legal th { font-weight: 800; }
.legal-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.lost .big { font: 900 clamp(5rem, 18vw, 11rem)/1 var(--display); }

/* join (classroom invite) */
.join { min-height: 100svh; display: grid; place-items: center; padding: 110px 20px 60px; }
.join-card { width: 100%; max-width: 480px; text-align: center; display: grid; gap: 16px; justify-items: center; padding: 34px 26px; border-radius: 32px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.join-card .logo { width: 72px; height: 72px; }
.join-card p { color: var(--on-dark-2); }
.code { font: 900 2.3rem/1 var(--display); letter-spacing: .25em; padding: 16px 18px 16px 28px; border-radius: 18px; background: rgba(255,255,255,.1); color: #fff; }
.join-card .btn { width: 100%; }
.join-lang { width: 100%; display: grid; gap: 16px; justify-items: center; }
.join-card ol { text-align: start; color: var(--on-dark-2); padding-inline-start: 1.3em; display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .glyphs { display: none; }
  .beam { display: none; }
}
.plan.pro .plan-name .i { color: var(--gold-2); width: 26px; height: 26px; }

/* ---------- blog ---------- */
.blog-list { padding-block: clamp(48px, 6vw, 80px); }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
.post-card h2 { font-size: 1.25rem; line-height: 1.3; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--brand); }
.post-card .link-arrow { margin-top: 6px; }
.post-meta { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.post .post-meta { margin: 0 0 14px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.post-tags .chip { padding: 6px 12px; font-size: .82rem; }
.crumbs { margin: 0 0 12px; font-size: .9rem; }
.crumbs a { text-decoration: none; }
.post-toc { padding: 16px 20px; border-radius: 18px; background: var(--paper-2); margin: 0 0 1.6em; font-size: .95rem; }
.post-toc b { display: block; margin-bottom: 6px; font: 800 .8rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.post-toc ol { margin: 0; }
.post h2 { scroll-margin-top: 100px; }
.post blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--gold); color: var(--ink-2); font-size: 1.06rem; }
.post blockquote p { margin: 0; }
.post img { display: block; max-width: 100%; height: auto; border-radius: 18px; margin: 1.4em 0; }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--paper-2); }
.post .post-cta { display: grid; gap: 10px; justify-items: start; margin-top: 2.6em; padding: 24px; }
.post .post-cta h2 { margin: 0; padding: 0; border: 0; font-size: 1.3rem; }
.post .post-cta p { margin: 0; }
.more-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 22px; }
.blog-list .fine a { display: inline-flex; align-items: center; gap: 6px; }

.foot-credit { margin: 12px 0 0; font-size: 12px; line-height: 1.5; opacity: .75; }
.foot-credit a { color: inherit; text-decoration: underline; }