/*
 * Хонх landing page (00 §2 D-30).
 *
 * The art direction: night outside, the school day inside. The page is the dark of a phone screen
 * at 7 a.m.; the product lives on a light «sheet» in the middle, in the app's own warm palette. One
 * accent — the app's coral — and the bell, lit as if it stood in the page's light.
 *
 * 🔴 Every colour is a token here, in :root. A component names a token, never a hex (tools/token_refs.py
 *    checks that every var() this file and the template call is defined).
 * 🔴 Every movement stops under prefers-reduced-motion — the last block of this file.
 * 🔴 Pictures are the app's real screens (10-05). A screenshot that shows a real school's name, a real
 *    phone number or a tester's gibberish does not go on this page (CLAUDE.md §5).
 */

/* Inter (OFL — assets/fonts/OFL-Inter.txt), three subsets. cyrillic-ext is the one that carries
   Ө ө Ү ү Ң ң — without it Mongolian falls back to the system face mid-word. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-cyrillic-ext.woff2?v=705d625066') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2?v=9f73b2f43e') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2?v=f11d729bb0') 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 {
  color-scheme: dark;

  /* night — the page */
  --night-0: #05060C;
  --night-1: #0A0B16;
  --night-2: #111229;
  --night-3: #1C1D3B;
  --night-4: #2A2B50;
  --night-ink: #F4F2FF;
  --night-sub: #A6A4C8;
  --night-mute: #7A789E;
  --night-line: rgba(255, 255, 255, .08);
  --night-line-2: rgba(255, 255, 255, .14);
  --night-glass: rgba(255, 255, 255, .04);
  --night-glass-2: rgba(255, 255, 255, .07);
  --night-veil: rgba(10, 11, 22, .72);
  --night-panel: rgba(10, 11, 22, .97);

  /* day — the sheet, in the app's light palette (design_handoff › tokens.json › color.light) */
  --day-0: #FFFFFF;
  --day-1: #F7F5F0;
  --day-2: #EEEAE2;
  --day-3: #E4DFD4;
  --day-ink: #1E1B2B;
  --day-sub: #6E6A7C;
  --day-line: rgba(30, 27, 43, .08);
  --day-shadow: rgba(30, 27, 43, .16);

  --white: #FFFFFF;
  --black: #000000;
  --shadow: rgba(0, 0, 0, .55);

  /* the one accent */
  --coral: #F2643C;
  --coral-hi: #FF7A59;
  --coral-deep: #D24A22;
  --coral-ink: #C2401B;
  --coral-soft: #FFE1D6;
  --coral-glow: rgba(242, 100, 60, .5);
  --coral-haze: rgba(242, 100, 60, .28);
  --violet: #6C4DFF;
  --violet-haze: rgba(108, 77, 255, .3);
  --orchid: #C04DD9;
  --pink: #FF6F91;

  /* the accent pairs the app's cards use (tokens.json › accent, light) */
  --mint-bg: #DCF3E5;  --mint-fg: #1C7A4C;
  --sun-bg: #FFF0C8;   --sun-fg: #8F5B08;
  --sky-bg: #DEEBFF;   --sky-fg: #2458B8;
  --grape-bg: #ECE4FF; --grape-fg: #5E3DBF;
  --rose-bg: #FFE1DC;  --rose-fg: #B8392A;

  /* glossy tiles — the same accents, saturated, lit from above */
  --tile-coral-1: #FF9B70; --tile-coral-2: #E2461D; --tile-coral-glow: rgba(226, 70, 29, .55);
  --tile-mint-1: #5BE3A6;  --tile-mint-2: #11905C;  --tile-mint-glow: rgba(17, 144, 92, .5);
  --tile-sun-1: #FFD866;   --tile-sun-2: #E98B00;   --tile-sun-glow: rgba(233, 139, 0, .5);
  --tile-sky-1: #84BBFF;   --tile-sky-2: #2457DE;   --tile-sky-glow: rgba(36, 87, 222, .5);
  --tile-grape-1: #B096FF; --tile-grape-2: #5631D8; --tile-grape-glow: rgba(86, 49, 216, .5);
  --tile-rose-1: #FF94A6;  --tile-rose-2: #D92F4C;  --tile-rose-glow: rgba(217, 47, 76, .5);

  /* phone frames */
  --frame-1: #4A4E70;
  --frame-2: #16172A;
  --frame-3: #2C2E4A;
  --lens-1: #3A3D5C;
  --lens-2: #05060C;

  /* the bell — tokens.json › color.mascot; the b3 stops are the same blue, lit */
  --bell-top: #9CC4FF;
  --bell-mid: #5B97F6;
  --bell-bottom: #2F67D8;
  --bell-knob-1: #8CBBFF;
  --bell-knob-2: #3C7BEA;
  --bell-rim-1: #4B88F2;
  --bell-rim-2: #2A5FCC;
  --bell-face: #1B2A5C;
  --bell-cheek: #FF9FB5;
  --bell-tongue: #FF7F9C;
  --bell-wave: #7FB2FF;
  --bell-shine: rgba(255, 255, 255, .55);
  --bell-rim-shine: rgba(255, 255, 255, .22);
  --b3-0: #E9F1FF;
  --b3-1: #A3C9FF;
  --b3-2: #5B97F6;
  --b3-3: #2F67D8;
  --b3-4: #1C45A3;
  --b3-ao: rgba(8, 18, 66, .42);
  --b3-edge: rgba(255, 160, 150, .95);
  --b3-ground: rgba(0, 0, 0, .5);
  --b3-gloss: rgba(255, 255, 255, .72);
  --clear: rgba(255, 255, 255, 0);

  --confetti-1: #FFD166;
  --confetti-2: #5FE3A8;
  --confetti-3: #74B9FF;
  --confetti-4: #B9A2FF;
  --confetti-5: #FF8FA3;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 72px;
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 12px);
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--night-1);
  color: var(--night-ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Film grain over everything: it keeps the large gradients from banding and takes the «rendered» edge off. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--coral); color: var(--white); }
:focus-visible { outline: 2px solid var(--coral-hi); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--coral); color: var(--white); font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-fill { fill: currentColor; stroke: none; }

/* the bell's paints */
.st-bell-top { stop-color: var(--bell-top); }
.st-bell-mid { stop-color: var(--bell-mid); }
.st-bell-bottom { stop-color: var(--bell-bottom); }
.st-bell-knob-1 { stop-color: var(--bell-knob-1); }
.st-bell-knob-2 { stop-color: var(--bell-knob-2); }
.st-bell-rim-1 { stop-color: var(--bell-rim-1); }
.st-bell-rim-2 { stop-color: var(--bell-rim-2); }
.st-b3-0 { stop-color: var(--b3-0); }
.st-b3-1 { stop-color: var(--b3-1); }
.st-b3-2 { stop-color: var(--b3-2); }
.st-b3-3 { stop-color: var(--b3-3); }
.st-b3-4 { stop-color: var(--b3-4); }
.st-b3-ao { stop-color: var(--b3-ao); }
.st-b3-edge { stop-color: var(--b3-edge); }
.st-b3-ground { stop-color: var(--b3-ground); }
.st-clear { stop-color: var(--clear); }
.b-shine { fill: var(--bell-shine); }
.b-gloss { fill: var(--b3-gloss); }
.b-glint { fill: var(--white); }
.b-face { fill: var(--bell-face); }
.b-cheek { fill: var(--bell-cheek); opacity: .85; }
.b-tongue { fill: var(--bell-tongue); }
.b-rimshine { fill: var(--bell-rim-shine); }

/* ── type ───────────────────────────────────────────────────────────────── */
.h2 {
  font-size: clamp(34px, 4.7vw, 62px);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 800px; margin: 0 auto 64px; text-align: center; }
.sec-head__lead { max-width: 600px; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.5; color: var(--day-sub); text-wrap: pretty; }
.sec-head--dark .sec-head__lead { color: var(--night-sub); }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--night-mute); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: -.004em; line-height: 1.2;
}
.pill--glass {
  background: var(--night-glass-2);
  box-shadow: inset 0 0 0 1px var(--night-line-2);
  color: var(--night-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pill__bell { width: 18px; height: 18px; flex: none; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 12px; border: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn__arrow { width: 17px; height: 17px; stroke-width: 2; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--sm { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; gap: 8px; }
.btn--lg { height: 56px; padding: 0 26px; border-radius: 14px; font-size: 16px; }
.btn--coral {
  background: var(--coral); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 30px -10px var(--coral-glow);
}
.btn--coral:hover { background: var(--coral-hi); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -12px var(--coral-glow); }
/* the light that runs across a primary button on hover */
.btn--coral::before, .btn--white::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -75%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-20deg); transition: left .8s var(--ease);
}
.btn--coral:hover::before, .btn--white:hover::before { left: 130%; }
.btn--ghost {
  background: var(--night-glass-2); color: var(--night-ink);
  box-shadow: inset 0 0 0 1px var(--night-line-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.btn--white { background: var(--white); color: var(--coral-ink); box-shadow: 0 14px 30px -14px rgba(90, 20, 0, .55); }
.btn--white::before { background: linear-gradient(100deg, transparent, rgba(242, 100, 60, .14), transparent); }
.btn--white:hover { transform: translateY(-1px); box-shadow: 0 20px 40px -16px rgba(90, 20, 0, .6); }
.btn--line { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.btn--line:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px var(--white); }

/* ── glossy tiles ───────────────────────────────────────────────────────── */
.tile {
  --s: 64px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3);
  color: var(--white);
  background:
    radial-gradient(95% 72% at 30% 14%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 52%),
    linear-gradient(155deg, var(--t1), var(--t2));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    inset 0 -4px 8px rgba(0, 0, 0, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    0 16px 30px -10px var(--tg),
    0 26px 50px -24px var(--shadow);
}
.tile .i { width: 46%; height: 46%; stroke-width: 2.2; filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .22)); }
.tile--sm { --s: 46px; }
.tile--lg { --s: 84px; }
.tile--coral { --t1: var(--tile-coral-1); --t2: var(--tile-coral-2); --tg: var(--tile-coral-glow); }
.tile--mint { --t1: var(--tile-mint-1); --t2: var(--tile-mint-2); --tg: var(--tile-mint-glow); }
.tile--sun { --t1: var(--tile-sun-1); --t2: var(--tile-sun-2); --tg: var(--tile-sun-glow); }
.tile--sky { --t1: var(--tile-sky-1); --t2: var(--tile-sky-2); --tg: var(--tile-sky-glow); }
.tile--grape { --t1: var(--tile-grape-1); --t2: var(--tile-grape-2); --tg: var(--tile-grape-glow); }
.tile--rose { --t1: var(--tile-rose-1); --t2: var(--tile-rose-2); --tg: var(--tile-rose-glow); }
.tile--glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .3), 0 14px 30px -14px rgba(120, 30, 0, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* depth of field: the tiles further back are softer */
.tile--far { --s: 50px; filter: blur(1.2px); opacity: .85; }
.tile--farther { --s: 40px; filter: blur(2.4px); opacity: .7; }

/* ── phones ─────────────────────────────────────────────────────────────── */
.phone {
  --w: 280px;
  position: relative; width: var(--w); flex: none;
  padding: calc(var(--w) * .032);
  border-radius: calc(var(--w) * .16);
  background: linear-gradient(150deg, var(--frame-1), var(--frame-2) 42%, var(--frame-3));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 0 0 3px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(0, 0, 0, .35),
    0 50px 90px -34px var(--shadow),
    0 30px 70px -36px var(--phone-glow, var(--coral-haze));
}
.phone__screen {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--w) * .128);
  background: var(--day-1);
}
.phone__screen img { width: 100%; }
/* the camera, over the app's header as on a real Android phone */
.phone__screen::before {
  content: ''; position: absolute; z-index: 2; left: 50%; top: calc(var(--w) * .026);
  width: calc(var(--w) * .038); height: calc(var(--w) * .038); translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--lens-1), var(--lens-2) 62%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .05);
}
/* the glass: a fixed reflection, plus a glare that follows the pointer where JS gives it one */
.phone__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%),
    linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 0 18px rgba(0, 0, 0, .08);
}
.phone__side {
  position: absolute; right: calc(var(--w) * -.011); top: 24%; width: calc(var(--w) * .013); height: 9%;
  border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--frame-2), var(--frame-1));
}
.phone__side::after {
  content: ''; position: absolute; left: 0; right: 0; top: 150%; height: 160%; border-radius: inherit; background: inherit;
}

/* ── browser frame ──────────────────────────────────────────────────────── */
.browser {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--night-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -40px var(--shadow);
}
.browser__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: var(--night-2); border-bottom: 1px solid var(--night-line); }
.browser__bar > i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.browser__url {
  display: flex; align-items: center; width: min(360px, 52%); height: 24px; margin-left: 14px; padding: 0 12px; border-radius: 7px;
  background: var(--night-glass-2); color: var(--night-sub); font-size: 12px; letter-spacing: 0; overflow: hidden; white-space: nowrap;
}
.browser img { width: 100%; }

/* ── header ─────────────────────────────────────────────────────────────── */
.top { position: fixed; inset: 0 0 auto; z-index: 60; transition: background-color .35s, box-shadow .35s; }
.top.is-scrolled, .top.is-open {
  background: var(--night-veil);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: 0 1px 0 var(--night-line);
}
.top__in { display: flex; align-items: center; gap: 20px; height: var(--top-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--night-ink); text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; transition: transform .6s var(--spring); }
.brand:hover .brand__mark { transform: rotate(-12deg); }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: -.035em; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a {
  padding: 8px 12px; border-radius: 9px; font-size: 15px; font-weight: 500; color: rgba(244, 242, 255, .76); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--night-ink); background: var(--night-glass-2); }
.nav__only-menu { display: none; }
.top__actions { display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-grid; place-items: center; height: 32px; min-width: 40px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .05em; color: var(--night-sub); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--night-line-2); transition: color .2s, box-shadow .2s;
}
.lang:hover { color: var(--night-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.top__link { padding: 8px 10px; font-size: 15px; font-weight: 500; color: var(--night-ink); text-decoration: none; opacity: .86; }
.top__link:hover { opacity: 1; }
.menu-btn { display: none; position: relative; width: 42px; height: 42px; border: 0; border-radius: 11px; background: var(--night-glass-2); cursor: pointer; }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 1.8px; border-radius: 2px; background: var(--night-ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn i:first-of-type { top: 16px; }
.menu-btn i:last-of-type { top: 24px; }
.menu-btn[aria-expanded='true'] i:first-of-type { top: 20px; transform: rotate(45deg); }
.menu-btn[aria-expanded='true'] i:last-of-type { top: 20px; transform: rotate(-45deg); }
.top__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0)); opacity: 0; transition: opacity .35s;
  background: linear-gradient(90deg, var(--coral), var(--pink));
}
.top.is-scrolled .top__progress { opacity: 1; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 940px); padding: calc(var(--top-h) + 64px) 0 96px; overflow: clip; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0; opacity: .55;
  background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
  background-size: 76px 76px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 72% 38%, black, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 72% 38%, black, transparent 72%);
}
.glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.glow--coral {
  width: 720px; height: 720px; right: -160px; top: -220px;
  background: radial-gradient(circle, var(--coral-glow), transparent 66%);
  animation: drift 16s ease-in-out infinite alternate;
}
.glow--violet {
  width: 600px; height: 600px; right: 20%; top: 34%;
  background: radial-gradient(circle, var(--violet-haze), transparent 66%);
  animation: drift 19s ease-in-out -6s infinite alternate-reverse;
}
/* the stage light: a cone from the upper right, the way the reference lights its hero */
.beam {
  position: absolute; right: -10%; top: -20%; width: 80%; height: 140%;
  background: conic-gradient(from 205deg at 88% 0%, transparent 0deg, rgba(255, 150, 120, .13) 14deg, rgba(255, 150, 120, .05) 28deg, transparent 42deg);
  filter: blur(18px);
}
.hero__in { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: center; gap: 24px; }
.hero__copy { position: relative; z-index: 2; }
.hero__pill { animation: fadeUp .9s var(--ease) .05s both; }
.hero__title {
  margin: 26px 0 26px;
  font-size: clamp(44px, 5.4vw, 78px);
  font-weight: 640;
  line-height: .98;
  letter-spacing: -.048em;
}
/* the overflow hides each line while it slides up; the padding keeps the marker's block from being clipped */
.hero__title .line { display: block; overflow: hidden; padding: .13em .14em; margin: -.13em -.14em; }
.hero__title .line__in { display: inline-block; animation: lineUp 1.1s var(--ease) .12s both; }
.hero__title .line--mark .line__in { animation-delay: .24s; }
/* the marker: a coral block wiped in behind the second line */
.mark {
  padding: 0 .12em .04em; margin-left: -.12em; color: var(--white);
  background: linear-gradient(var(--coral), var(--coral)) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: markIn 1s var(--ease) .75s forwards;
}
.hero__lead { max-width: 540px; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.55; color: var(--night-sub); text-wrap: pretty; animation: fadeUp 1s var(--ease) .5s both; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; animation: fadeUp 1s var(--ease) .62s both; }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; font-size: 13.5px; color: var(--night-mute); animation: fadeUp 1s var(--ease) .74s both; }
.stores__label { margin-right: 4px; }
.store {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--night-sub);
  background: var(--night-glass); box-shadow: inset 0 0 0 1px var(--night-line);
}
.store__glyph { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.store__glyph--fill { fill: currentColor; stroke: none; }
.soon {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--coral-hi); background: rgba(255, 122, 89, .12);
}
.soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blinkDot 2s ease-in-out infinite; }

/* the stage: a phone, the cards it is made of, the bell — each at its own depth */
.hero__stage { position: relative; height: 640px; }
.layer {
  position: absolute;
  transform: translate3d(calc(var(--mx, 0) * var(--d, 1) * -11px), calc(var(--my, 0) * var(--d, 1) * -11px + var(--sp, 0) * var(--d, 1) * -70px), 0);
}
.float { animation: bob var(--dur, 7s) ease-in-out var(--delay, 0s) infinite; }
.frag { width: 100%; border-radius: 18px; box-shadow: 0 26px 50px -20px var(--shadow), 0 0 0 1px rgba(255, 255, 255, .06); }
.layer--phone { left: calc(50% - 148px); top: 6px; z-index: 2; }
.phone--hero {
  --w: 296px;
  transform: perspective(1500px) rotateY(calc(-15deg + var(--mx, 0) * 7deg)) rotateX(calc(7deg - var(--my, 0) * 6deg)) rotateZ(2.5deg);
  animation: phoneIn 1.4s var(--ease) .2s both;
}
/* the glare on its glass moves against the tilt */
.phone--hero .phone__screen { --gx: calc(28% + var(--mx, 0) * 34%); --gy: calc(6% + var(--my, 0) * 24%); }
.layer--a { left: -24%; top: 61%; width: 296px; z-index: 4; }
.layer--a .frag { rotate: -4deg; animation: popIn 1s var(--ease) .75s both; }
.layer--b { right: -16%; top: 33%; width: 262px; z-index: 4; }
.layer--b .frag { rotate: 3deg; border-radius: 16px; animation: popIn 1s var(--ease) .9s both; }
.layer--c { left: -30%; top: 9%; width: 232px; z-index: 1; }
.layer--c .frag { rotate: -3deg; border-radius: 16px; animation: popIn 1s var(--ease) 1.05s both; }
.layer--t1 { right: 3%; top: 69%; z-index: 5; }
.layer--t1 .tile { rotate: 10deg; animation: popSoft .9s var(--spring) 1.2s both; }
.layer--t2 { left: -12%; top: 42%; z-index: 0; }
.layer--t2 .tile { rotate: -12deg; animation: popSoft .9s var(--ease) 1.3s both; }
.layer--t3 { right: 6%; top: 89%; z-index: 3; }
.layer--t3 .tile { rotate: -8deg; animation: popSoft .9s var(--spring) 1.35s both; }
.layer--t4 { left: 18%; top: -4%; z-index: 0; }
.layer--t4 .tile { rotate: 14deg; animation: popSoft .9s var(--ease) 1.45s both; }
.layer--bell { right: -2%; top: -6%; width: 158px; z-index: 5; }
.layer--bell .bell3d { animation: popSoft 1s var(--spring) 1s both; }

.scroll-cue {
  position: absolute; left: calc(50% - 20px); bottom: 26px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--night-sub); box-shadow: inset 0 0 0 1px var(--night-line-2);
  animation: fadeUp 1s var(--ease) 1.4s both;
}
.scroll-cue .i { width: 18px; height: 18px; animation: nudge 2.2s ease-in-out infinite; }
.scroll-cue:hover { color: var(--night-ink); }

/* ── the bell, lit ──────────────────────────────────────────────────────── */
.bell3d { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(10, 20, 80, .35)); }
.bell3d__swing { transform-box: view-box; transform-origin: 50px 7px; }
.bell3d__clapper { transform-box: fill-box; transform-origin: 50% 0; }
.bell3d__eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 4.6s infinite; }
.bell3d__ground { transform-box: fill-box; transform-origin: 50% 50%; }
.bell3d__wave { fill: none; stroke: var(--bell-wave); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.bell3d--ring .bell3d__swing { animation: swing 1.25s ease-in-out infinite; }
.bell3d--ring .bell3d__clapper { animation: clap 1.25s ease-in-out infinite; }
.bell3d--ring .bell3d__wave { animation: wave 1.25s ease-out infinite; }
.bell3d--ring .bell3d__wave--late { animation-delay: .32s; }
.bell3d--ring .bell3d__ground { animation: ground 1.25s ease-in-out infinite; }
.bell3d--celebrate .bell3d__swing { animation: jump 1.5s ease-in-out infinite; }
.bell3d--celebrate .bell3d__ground { animation: groundJump 1.5s ease-in-out infinite; }

/* ── gallery ────────────────────────────────────────────────────────────── */
.gallery { position: relative; padding: 104px 0 72px; overflow: clip; }
/* the light the sheet rises out of */
.gallery::after {
  content: ''; position: absolute; left: 15%; right: 15%; bottom: -160px; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, var(--coral-haze), transparent 70%); filter: blur(30px);
}
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--night-sub); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend__dot { width: 8px; height: 8px; border-radius: 50%; }
.legend__dot--student { background: var(--tile-sky-1); box-shadow: 0 0 12px var(--tile-sky-1); }
.legend__dot--parent { background: var(--coral-hi); box-shadow: 0 0 12px var(--coral-hi); }
.legend__dot--teacher { background: var(--tile-mint-1); box-shadow: 0 0 12px var(--tile-mint-1); }
.gallery__stage {
  position: relative; height: clamp(500px, 58vw, 760px); margin-top: 24px; perspective: 2200px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent), linear-gradient(transparent, black 16%, black 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent), linear-gradient(transparent, black 16%, black 82%, transparent);
  mask-composite: intersect;
}
.watermark { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; overflow: hidden; pointer-events: none; }
.watermark__track {
  --speed: 40;
  display: flex; align-items: center; gap: .3em; width: max-content; padding-right: .3em;
  font-size: clamp(130px, 19vw, 300px); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .075);
}
.watermark__track .i-fill { width: .32em; height: .32em; fill: rgba(255, 255, 255, .06); }
.gallery__plane {
  position: absolute; left: 50%; top: 50%; width: 170%;
  display: grid; gap: clamp(16px, 2vw, 28px);
  transform: translate(-50%, -50%) rotateX(24deg) rotateY(-6deg) rotateZ(-10deg);
  translate: calc((var(--p, .5) - .5) * -160px) 0;
}
.g-row { display: flex; }
.g-track { display: flex; gap: clamp(16px, 2vw, 28px); padding-right: clamp(16px, 2vw, 28px); width: max-content; }
.g-shot {
  position: relative; width: clamp(140px, 14.5vw, 214px); flex: none; overflow: hidden;
  border-radius: clamp(18px, 1.9vw, 28px); background: var(--night-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -24px var(--shadow);
}
.g-shot img { width: 100%; }
.g-shot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(130deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.g-row--student .g-shot { box-shadow: 0 0 0 1px rgba(132, 187, 255, .25), 0 30px 60px -24px var(--shadow); }
.g-row--parent .g-shot { box-shadow: 0 0 0 1px rgba(255, 122, 89, .28), 0 30px 60px -24px var(--shadow); }
.g-row--teacher .g-shot { box-shadow: 0 0 0 1px rgba(91, 227, 166, .22), 0 30px 60px -24px var(--shadow); }
.platforms { position: relative; z-index: 1; margin-top: 40px; text-align: center; }
.platforms__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 28px auto 0; }
.platforms__list li { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 15px; font-weight: 550; color: var(--night-ink); }
.platforms__list .i { width: 26px; height: 26px; stroke-width: 1.5; color: var(--night-sub); }

/* ── the sheet ──────────────────────────────────────────────────────────── */
.sheet {
  position: relative; z-index: 1; padding: 104px 0 128px;
  background: var(--day-1); color: var(--day-ink);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  box-shadow: 0 -30px 80px -40px var(--coral-haze);
}
.sheet :focus-visible { outline-color: var(--coral-deep); }

/* bento: one big coral card, six white ones */
.bento__hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 480px;
  border-radius: 32px; color: var(--white);
  background:
    radial-gradient(70% 90% at 78% 42%, rgba(255, 190, 160, .55), transparent 60%),
    radial-gradient(130% 140% at 100% 0%, var(--coral-hi), var(--coral) 45%, var(--coral-deep));
  box-shadow: 0 40px 80px -44px rgba(210, 74, 34, .75);
}
.bento__hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 74% 50%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 70% at 74% 50%, black, transparent 75%);
}
.bento__copy { display: flex; flex-direction: column; padding: clamp(32px, 4.6vw, 60px); }
.bento__copy .h2 { font-size: clamp(38px, 4.6vw, 64px); }
.bento__lead { max-width: 430px; margin-top: 18px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.bento__today { display: flex; align-items: flex-start; gap: 16px; margin-top: auto; padding-top: 40px; max-width: 440px; }
.bento__today h3 { margin-bottom: 4px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.bento__today p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.orbit { position: relative; min-height: 420px; perspective: 1100px; }
.orbit__plane {
  --r: 222px;
  position: absolute; left: 50%; top: 52%; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  transform-style: preserve-3d; transform: rotateX(66deg) rotateZ(-12deg);
}
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .42); box-shadow: 0 0 30px rgba(255, 255, 255, .12); }
.orbit__ring--inner { inset: 78px; border-color: rgba(255, 255, 255, .28); }
.orbit__spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: spin 30s linear infinite; }
.orbit__spin--inner { inset: 78px; animation-duration: 22s; animation-direction: reverse; }
.orbit__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--a, 0deg)) translateX(var(--rr, 222px)) rotateZ(calc(var(--a, 0deg) * -1)); }
.orbit__spin--inner .orbit__item { --rr: 144px; }
.orbit__face { transform-style: preserve-3d; animation: spin 30s linear infinite reverse; }
.orbit__spin--inner .orbit__face { animation-duration: 22s; animation-direction: normal; }
.orbit__bb { transform-style: preserve-3d; transform: rotateZ(12deg) rotateX(-66deg); }
.orbit__bb .tile { translate: -50% -50%; }
.orbit__center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(12deg) rotateX(-66deg); }
.orbit__core {
  position: absolute; left: -56px; top: -86px; width: 112px; height: 112px; border-radius: 32px;
  display: grid; place-items: center;
  background: linear-gradient(155deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .16));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 30px 60px -20px rgba(120, 30, 0, .55);
}
.orbit__bell { width: 78px; height: 78px; filter: drop-shadow(0 10px 14px rgba(20, 40, 120, .35)); animation: bellNod 3.2s ease-in-out infinite; transform-origin: 50% 10%; }

.bento__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--day-0);
  box-shadow: 0 1px 2px rgba(30, 27, 43, .04), 0 24px 50px -32px var(--day-shadow);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card:hover { box-shadow: 0 1px 2px rgba(30, 27, 43, .05), 0 40px 70px -34px rgba(30, 27, 43, .3); }
.card__art { position: relative; height: 272px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, var(--tint-a), var(--tint-b)); }
.card__art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(255, 255, 255, 0), var(--day-0)); pointer-events: none; z-index: 5; }
.card--mint { --tint-a: var(--mint-bg); --tint-b: var(--day-0); --label: var(--mint-fg); }
.card--rose { --tint-a: var(--rose-bg); --tint-b: var(--day-0); --label: var(--rose-fg); }
.card--sky { --tint-a: var(--sky-bg); --tint-b: var(--day-0); --label: var(--sky-fg); }
.card--sun { --tint-a: var(--sun-bg); --tint-b: var(--day-0); --label: var(--sun-fg); }
.card--grape { --tint-a: var(--grape-bg); --tint-b: var(--day-0); --label: var(--grape-fg); }
.card--teal { --tint-a: var(--sky-bg); --tint-b: var(--mint-bg); --label: var(--sky-fg); }
.card__body { padding: 22px 28px 30px; }
.card__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.card__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.card__body h3 { margin-bottom: 8px; font-size: 21px; font-weight: 650; line-height: 1.22; letter-spacing: -.025em; }
.card__body p { font-size: 15.5px; line-height: 1.5; color: var(--day-sub); }
.art {
  position: absolute; width: 84%; left: 8%; border-radius: 16px;
  filter: drop-shadow(0 16px 22px rgba(30, 27, 43, .14));
  transition: translate 1s var(--ease), scale 1s var(--ease), opacity .8s var(--ease), rotate 1s var(--ease);
}
.card:hover .art--1 { translate: 0 -4px; }
.card:hover .art--2 { translate: 0 -8px; }
.card:hover .art--3 { translate: 0 -12px; }
/* attendance — the register, every row ticked, and the count that pops */
.card__art--attendance .art--1 { top: 24px; }
.card__art--attendance .art--2 { top: 116px; }
.card__art--attendance .art--3 { width: 31%; left: auto; right: 3%; top: 160px; rotate: 8deg; filter: drop-shadow(0 18px 20px rgba(28, 122, 76, .28)); }
/* homework — the parent's view, the class check, the nudge */
.card__art--homework .art--1 { top: 22px; width: 80%; left: 6%; }
.card__art--homework .art--2 { top: 132px; width: 62%; left: auto; right: 4%; rotate: 3deg; }
.card__art--homework .art--3 { top: 196px; width: 46%; left: 7%; rotate: -4deg; filter: drop-shadow(0 16px 20px rgba(184, 57, 42, .32)); }
/* grades — the average and two subjects */
.card__art--grades .art--1 { top: 20px; width: 80%; left: 10%; }
.card__art--grades .art--2 { top: 150px; width: 74%; left: 4%; rotate: -2.5deg; }
.card__art--grades .art--3 { top: 204px; width: 74%; left: auto; right: 4%; rotate: 2deg; }
/* notices — a deck that fans out */
.card__art--notices .art--1 { top: 34px; z-index: 3; }
.card__art--notices .art--2 { top: 80px; z-index: 2; scale: .94; opacity: .92; }
.card__art--notices .art--3 { top: 124px; z-index: 1; scale: .88; opacity: .8; }
.card:hover .card__art--notices .art--2 { translate: 0 30px; scale: .98; opacity: 1; }
.card:hover .card__art--notices .art--3 { translate: 0 72px; scale: .96; opacity: 1; }
/* messages — a conversation that keeps going */
.card__art--messages .art--1 { top: 26px; width: 64%; left: 6%; }
.card__art--messages .art--2 { top: 110px; width: 66%; left: auto; right: 6%; }
.card__art--messages .art--3 { top: 180px; width: 56%; left: auto; right: 6%; }
.typing {
  position: absolute; left: 7%; top: 226px; display: flex; gap: 5px; padding: 12px 14px; border-radius: 16px 16px 16px 6px;
  background: var(--day-0); box-shadow: 0 10px 20px -12px var(--day-shadow);
  transition: opacity .6s var(--ease) 1s, translate .6s var(--ease) 1s;
}
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--grape-fg); opacity: .35; animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
/* location — the zones, a radar under them */
.card__art--location .art--1 { top: 34px; }
.card__art--location .art--3 { width: var(--s); height: var(--s); left: auto; right: 7%; top: 12px; z-index: 3; border-radius: calc(var(--s) * .3); animation: pinDrop 2.4s var(--ease) infinite; }
.radar { position: absolute; left: 50%; top: 54%; width: 0; height: 0; }
.radar i { position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%; border: 1.5px solid rgba(36, 88, 184, .25); animation: radar 3.6s ease-out infinite; }
.radar i:nth-child(2) { animation-delay: 1.2s; }
.radar i:nth-child(3) { animation-delay: 2.4s; }

/* steps */
.how { padding-top: 132px; }
.how__grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: start; }
.how__list { display: flex; flex-direction: column; gap: 10px; padding-top: 56px; }
.step {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 22px 22px 26px; overflow: hidden;
  border: 0; border-radius: 20px; background: transparent; text-align: left; cursor: pointer;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover { background: rgba(255, 255, 255, .55); }
.step.is-active { background: var(--day-0); box-shadow: 0 1px 2px rgba(30, 27, 43, .05), 0 22px 44px -28px rgba(30, 27, 43, .35); }
.step__num {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--day-2); color: var(--day-sub);
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.step.is-active .step__num { background: var(--coral); color: var(--white); box-shadow: 0 8px 18px -8px var(--coral-glow); }
.step__title { display: block; padding-top: 4px; font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; color: var(--day-ink); }
.step__body {
  display: block; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.5; color: var(--day-sub);
  transition: max-height .6s var(--ease), opacity .5s var(--ease), margin-top .6s var(--ease);
}
.step.is-active .step__body { max-height: 140px; margin-top: 8px; opacity: 1; }
.step__bar { position: absolute; left: 72px; right: 22px; bottom: 12px; height: 2px; border-radius: 2px; background: var(--day-2); opacity: 0; transition: opacity .3s; }
.step.is-active .step__bar { opacity: 1; }
.step__bar i { display: block; height: 100%; border-radius: inherit; background: var(--coral); transform-origin: 0 50%; transform: scaleX(1); }
.is-auto .step.is-active .step__bar i { animation: stepBar 7s linear both; }
.is-auto.is-paused .step.is-active .step__bar i { animation-play-state: paused; }
.how__stage {
  position: relative; height: 560px; overflow: hidden; border-radius: 32px;
  background:
    radial-gradient(70% 60% at 22% 18%, var(--coral-soft), transparent 70%),
    radial-gradient(60% 60% at 86% 92%, var(--grape-bg), transparent 70%),
    var(--day-2);
}
.how__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.how__panel.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease); }
.browser--how {
  position: absolute; left: 9%; top: 15%; width: 118%;
  transform: perspective(1800px) rotateY(-12deg) rotateX(5deg);
  transform-origin: 0 50%;
  box-shadow: 0 0 0 1px rgba(30, 27, 43, .08), 0 50px 90px -40px rgba(30, 27, 43, .55);
}
.how__chip {
  position: absolute; left: 5%; bottom: 13%; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--day-ink);
  background: var(--day-0); box-shadow: 0 20px 40px -18px rgba(30, 27, 43, .45);
  animation: bob 6s ease-in-out infinite;
}
.how__chip .i { color: var(--coral); stroke-width: 2.2; }
.duo, .trio { position: absolute; inset: 0; }
.duo .phone { --w: 236px; position: absolute; top: 9%; }
.duo .phone--back { left: calc(50% - 236px); rotate: -7deg; opacity: .95; }
.duo .phone--front { left: calc(50% - 10px); top: 14%; rotate: 5deg; }
.trio .phone { --w: 214px; position: absolute; top: 12%; left: calc(50% - 107px); }
.trio .phone--l { translate: -78% 6%; rotate: -11deg; }
.trio .phone--r { translate: 78% 6%; rotate: 11deg; }
.trio .phone--c { z-index: 2; top: 8%; }
.how__panel.is-active .browser--how { animation: slideIn 1s var(--ease) both; }
.how__panel.is-active .how__chip { animation: popSoft .8s var(--spring) .35s both, bob 6s ease-in-out 1.2s infinite; }
.how__panel.is-active .phone { animation: rise 1s var(--ease) both; }
.how__panel.is-active .phone--front, .how__panel.is-active .phone--c { animation-delay: .12s; }
.how__panel.is-active .phone--r { animation-delay: .2s; }

/* roles: the screen behind each one comes into focus under the pointer */
.roles { padding-top: 140px; }
.roles__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.role {
  grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--day-0);
  box-shadow: 0 1px 2px rgba(30, 27, 43, .04), 0 24px 50px -32px var(--day-shadow);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.role:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(30, 27, 43, .05), 0 40px 70px -36px rgba(30, 27, 43, .32); }
.role--wide { grid-column: span 3; }
.role__art { position: relative; display: grid; place-items: center; height: 220px; overflow: hidden; background: var(--day-2); }
.role__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  filter: blur(7px) saturate(1.15); scale: 1.12; opacity: .85;
  transition: filter .8s var(--ease), scale 1.2s var(--ease), opacity .8s var(--ease);
}
.role__bg--wide { object-position: 0 0; }
.role__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247, 245, 240, .1), rgba(247, 245, 240, .45)); transition: opacity .8s var(--ease); }
.role__art .tile { z-index: 1; transition: translate .8s var(--ease), scale .8s var(--ease), opacity .6s var(--ease); }
.role:hover .role__bg { filter: blur(0) saturate(1); scale: 1; opacity: 1; }
.role:hover .role__art::after { opacity: 0; }
.role:hover .role__art .tile { translate: 0 -14px; scale: .82; opacity: 0; }
.role__body { padding: 22px 26px 28px; }
.role__tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); background: var(--coral-soft);
}
.role__tag--web { color: var(--grape-fg); background: var(--grape-bg); }
.role__body h3 { margin: 12px 0 14px; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.ticks { display: grid; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--day-sub); }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint-bg);
}
.ticks li::after {
  content: ''; position: absolute; left: 6px; top: 5px; width: 6px; height: 9px; border: solid var(--mint-fg); border-width: 0 2px 2px 0; rotate: 45deg;
}
.ticks--dark { color: var(--night-sub); }
.ticks--dark li::before { background: rgba(91, 227, 166, .14); }
.ticks--dark li::after { border-color: var(--tile-mint-1); }

/* tools: sixteen small things, each icon draws itself in */
.tools { padding-top: 140px; }
.tools__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 34px; }
.tool { position: relative; padding-top: 22px; border-top: 1px solid var(--day-line); }
.tool__icon { width: 28px; height: 28px; margin-bottom: 16px; stroke-width: 1.6; color: var(--day-ink); }
.tool h3 { margin-bottom: 6px; font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; }
.tool p { font-size: 14.5px; line-height: 1.5; color: var(--day-sub); }
.tool::before { content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--coral); transition: width .9s var(--ease); }
.tool:hover::before { width: 100%; }

/* ── the band ───────────────────────────────────────────────────────────── */
.band { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; background: var(--coral); color: var(--white); box-shadow: 0 20px 60px -20px var(--coral-glow); }
.band__track {
  --speed: 90;
  display: flex; align-items: center; gap: .55em; width: max-content; padding-right: .55em; white-space: nowrap;
  font-size: clamp(26px, 3.3vw, 44px); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; text-transform: uppercase;
}
.band__track .i-fill { width: .62em; height: .62em; }

/* ── console ────────────────────────────────────────────────────────────── */
.console {
  position: relative; padding: 112px 0 120px; overflow: clip;
  background:
    radial-gradient(90% 55% at 50% 0%, var(--coral-haze), transparent 70%),
    radial-gradient(50% 40% at 0% 70%, var(--violet-haze), transparent 70%),
    var(--night-1);
}
.console__stage { position: relative; max-width: 1080px; margin: 0 auto; }
.browser--console {
  transform: perspective(2200px) rotateX(calc((1 - var(--p, 1)) * 24deg)) scale(calc(.9 + var(--p, 1) * .1));
  transform-origin: 50% 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px -40px var(--shadow), 0 40px 120px -50px var(--coral-glow);
}
.browser__screen { position: relative; }
.hot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; z-index: 2; }
.hot::before, .hot::after { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; }
.hot::before { background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 6px 14px -2px var(--coral-glow); }
.hot::after { background: var(--coral-glow); animation: ping 2.4s ease-out infinite; }
.hot__label {
  --at: 50%;
  position: absolute; bottom: 22px; left: 0; translate: calc(var(--at) * -1) 0; white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  color: var(--night-ink); background: rgba(17, 18, 41, .9);
  box-shadow: 0 14px 30px -10px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.hot__label::after { content: ''; position: absolute; left: var(--at); top: 100%; width: 1.5px; height: 12px; margin-left: -.75px; background: rgba(255, 255, 255, .55); }
.hot--read .hot__label { --at: 82%; }
.hot--remind .hot__label { --at: 12%; }
.hot--sched .hot__label { --at: 18%; bottom: auto; top: 22px; }
.hot--sched .hot__label::after { top: auto; bottom: 100%; }
.js .hot { opacity: 0; scale: .6; transition: opacity .6s var(--ease), scale .8s var(--spring); }
.js .console__stage.is-in .hot { opacity: 1; scale: 1; }
.js .console__stage.is-in .hot--remind { transition-delay: .2s; }
.js .console__stage.is-in .hot--sched { transition-delay: .4s; }
.console__points { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.console__points li {
  padding: 22px 20px 24px; border-radius: 20px; background: var(--night-glass); box-shadow: inset 0 0 0 1px var(--night-line);
  transition: background-color .4s, transform .5s var(--ease);
}
.console__points li:hover { background: var(--night-glass-2); transform: translateY(-3px); }
.console__points h3 { margin: 16px 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.console__points p { font-size: 14px; line-height: 1.5; color: var(--night-sub); }
.console__cta { margin-top: 48px; text-align: center; }

/* ── community ──────────────────────────────────────────────────────────── */
.community { padding-bottom: 120px; }
.comm {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); min-height: 580px;
  border-radius: 36px; background: linear-gradient(160deg, var(--night-3), var(--night-2) 60%);
  box-shadow: inset 0 0 0 1px var(--night-line);
}
.comm::before { content: ''; position: absolute; z-index: -1; right: -10%; bottom: -30%; width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(circle, var(--violet-haze), transparent 70%); filter: blur(40px); }
.comm__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: clamp(32px, 5vw, 64px); }
.comm .h2 { font-size: clamp(32px, 3.5vw, 50px); }
.comm__lead { max-width: 480px; font-size: 17.5px; line-height: 1.55; color: var(--night-sub); }
.comm .ticks { margin: 4px 0 12px; }
.comm__art { position: relative; min-height: 420px; }
.comm__art .phone { --w: 236px; position: absolute; bottom: 0; }
.phone--feed { left: 4%; bottom: -46%; rotate: -6deg; translate: 0 calc((1 - var(--p, 1)) * 140px); --phone-glow: var(--violet-haze); }
.phone--course { left: 46%; bottom: -26%; rotate: 5deg; z-index: 2; translate: 0 calc((1 - var(--p, 1)) * 220px); }

/* ── privacy ────────────────────────────────────────────────────────────── */
.privacy { padding-bottom: 120px; }
.privacy__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pcard { position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px 30px; border-radius: 24px; background: var(--night-glass); }
/* a border lit from where the pointer is */
.pcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 122, 89, .75), rgba(255, 255, 255, .09) 60%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}
.pcard::after {
  content: ''; position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .5s;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 122, 89, .1), transparent 60%);
}
.pcard:hover::after { opacity: 1; }
.pcard h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.pcard p { font-size: 15px; line-height: 1.55; color: var(--night-sub); }

/* ── questions ──────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; padding-bottom: 120px; }
.faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: sticky; top: calc(var(--top-h) + 32px); }
.faq__head .h2 { font-size: clamp(36px, 4.4vw, 58px); }
.faq__head .sec-head__lead { color: var(--night-sub); }
.qa { border-bottom: 1px solid var(--night-line); }
.qa:first-child { border-top: 1px solid var(--night-line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 2px; cursor: pointer; list-style: none;
  font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--coral-hi); }
.qa__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--night-line-2); transition: background-color .3s, box-shadow .3s; }
.qa__icon::before, .qa__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: currentColor; transition: rotate .4s var(--ease); }
.qa__icon::after { rotate: 90deg; }
.qa[open] .qa__icon { background: var(--coral); box-shadow: none; color: var(--white); }
.qa[open] .qa__icon::after { rotate: 0deg; }
.qa__a { padding: 0 52px 26px 2px; font-size: 16px; line-height: 1.6; color: var(--night-sub); }
.qa[open] .qa__a { animation: fadeUp .5s var(--ease) both; }

/* ── last call ──────────────────────────────────────────────────────────── */
.final { padding-top: 60px; padding-bottom: 120px; }
.final__card {
  position: relative; isolation: isolate; padding: 128px clamp(24px, 5vw, 64px) 64px; border-radius: 36px; text-align: center; color: var(--white);
  background: radial-gradient(120% 140% at 50% 0%, var(--coral-hi), var(--coral) 45%, var(--coral-deep));
  box-shadow: 0 50px 100px -50px var(--coral-glow);
}
.final__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.final__bg i { position: absolute; border-radius: 50%; }
.final__bg i:first-child { left: -20%; right: -20%; top: 54%; height: 120%; background: rgba(255, 255, 255, .08); }
.final__bg i:last-child { left: -30%; right: 10%; top: 72%; height: 120%; background: rgba(255, 255, 255, .06); }
.final__bell { position: absolute; left: 50%; top: -96px; width: 190px; translate: -50% 0; }
.confetti {
  position: absolute; left: 50%; top: 46%; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--confetti-1));
  opacity: 0; animation: confetti 2.6s var(--ease) var(--t, 0s) infinite;
}
.confetti--round { border-radius: 50%; width: 9px; height: 9px; }
.final__card .h2 { max-width: 760px; margin: 0 auto; }
.final__body { max-width: 560px; margin: 18px auto 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.final__note { margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .78); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { position: relative; overflow: hidden; padding-top: 72px; border-top: 1px solid var(--night-line); color: var(--night-sub); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__brand p { max-width: 300px; margin-top: 16px; font-size: 15px; line-height: 1.55; }
.foot__h { margin-bottom: 18px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--night-ink); }
.foot__col ul { display: grid; gap: 11px; font-size: 15px; }
.foot__col a { text-decoration: none; transition: color .2s; }
.foot__col a:hover { color: var(--night-ink); }
.foot__muted { color: var(--night-mute); }
.foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 64px; padding: 24px 0; border-top: 1px solid var(--night-line); font-size: 14px;
}
.foot__lang, .foot__up { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .2s; }
.foot__lang:hover, .foot__up:hover { color: var(--night-ink); }
.foot__lang .i, .foot__up .i { width: 16px; height: 16px; }
.foot__word {
  margin-top: 8px; font-size: clamp(110px, 25vw, 380px); font-weight: 800; line-height: .76; letter-spacing: -.07em; text-align: center;
  color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 82%);
  -webkit-background-clip: text; background-clip: text; user-select: none; translate: 0 10%;
}

/* ── reveal ─────────────────────────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; translate: 0 34px; filter: blur(6px); transition: opacity 1s var(--ease), translate 1.1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; translate: none; filter: none; }
/* a card's pictures arrive after the card, one by one */
.js .card .art, .js .card .typing { opacity: 0; translate: 0 26px; scale: .96; }
.js .card.is-in .art, .js .card.is-in .typing { opacity: 1; translate: none; scale: 1; }
.js .card.is-in .art--1 { transition-delay: .15s; }
.js .card.is-in .art--2 { transition-delay: .3s; }
.js .card.is-in .art--3 { transition-delay: .5s; }
.js .card.is-in .card__art--notices .art--2 { scale: .94; }
.js .card.is-in .card__art--notices .art--3 { scale: .88; }
.js .card.is-in:hover .card__art--notices .art--2 { scale: .98; }
.js .card.is-in:hover .card__art--notices .art--3 { scale: .96; }
.js .card.is-in .card__art--attendance .art--3 { transition: opacity .6s var(--ease) .65s, translate 1s var(--spring) .65s, scale 1s var(--spring) .65s; }
.js .card.is-in:hover .art--3 { transition-delay: 0s; }
/* the tools' icons draw their own lines */
.js .tool .tool__icon { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i, 0) * 60ms + .2s); }
.js .tool.is-in .tool__icon { stroke-dashoffset: 0; }

/* marquees: JS fills each track until it is wider than the screen and says how far one turn is */
.is-looping { animation: loop var(--dur, 60s) linear infinite; }
.is-looping.is-off { animation-play-state: paused; }
.g-track--rev.is-looping { animation-direction: reverse; }

/* ── keyframes ──────────────────────────────────────────────────────────── */
@keyframes lineUp { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes markIn { to { background-size: 100% 100%; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
/* popIn blurs in — only for things that carry no filter of their own (a fill-mode «both» would keep
   blur(0) and so erase a drop-shadow or a depth blur); popSoft is the same without the blur. */
@keyframes popIn { from { opacity: 0; scale: .7; filter: blur(8px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes popSoft { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes phoneIn { from { opacity: 0; translate: 0 110px; } to { opacity: 1; translate: 0 0; } }
@keyframes rise { from { opacity: 0; translate: 0 60px; } }
@keyframes slideIn { from { opacity: 0; translate: 60px 20px; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.12); } }
@keyframes nudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@keyframes blinkDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes loop { to { transform: translateX(var(--loop, -50%)); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes swing { 0%, 100% { rotate: -10deg; } 50% { rotate: 10deg; } }
@keyframes clap { 0%, 100% { translate: 4px 0; } 50% { translate: -4px 0; } }
@keyframes wave { 0% { opacity: 0; scale: .6; } 35% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }
@keyframes ground { 0%, 100% { scale: 1 1; opacity: .9; } 50% { scale: .82 1; opacity: .6; } }
@keyframes jump { 0%, 100% { translate: 0 0; scale: 1 1; } 30% { translate: 0 -12px; scale: .97 1.03; } 55% { translate: 0 0; scale: 1.05 .95; } 70% { scale: 1 1; } }
@keyframes groundJump { 0%, 100% { scale: 1 1; opacity: .9; } 30% { scale: .7 1; opacity: .45; } 55% { scale: 1.05 1; opacity: .95; } }
@keyframes blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes bellNod { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes typing { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
@keyframes pinDrop { 0%, 100% { translate: 0 0; } 18% { translate: 0 -10px; } 32% { translate: 0 0; } 40% { translate: 0 -3px; } 48% { translate: 0 0; } }
@keyframes radar { from { scale: .2; opacity: .9; } to { scale: 1; opacity: 0; } }
@keyframes ping { from { scale: 1; opacity: .8; } to { scale: 3.2; opacity: 0; } }
@keyframes stepBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes confetti {
  0% { opacity: 0; translate: 0 0; scale: .2; rotate: 0deg; }
  25% { opacity: 1; }
  70% { opacity: 1; translate: var(--x, 0px) var(--y, 0px); scale: 1; rotate: 160deg; }
  100% { opacity: 0; translate: calc(var(--x, 0px) * 1.15) calc(var(--y, 0px) + 30px); scale: .8; rotate: 220deg; }
}

/* ── narrower screens ───────────────────────────────────────────────────── */
@media (max-width: 1360px) {
  .layer--b { right: -6%; }
  .layer--bell { right: 0; }
}

@media (max-width: 1180px) {
  .layer--a { left: -6%; }
  .layer--b { right: -4%; }
  .console__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .console__points li:nth-child(n + 4) { grid-column: span 1; }
}

@media (max-width: 1020px) {
  .nav, .top__link { display: none; }
  .menu-btn { display: inline-block; }
  .top__actions { margin-left: auto; }
  /* Opaque, not glass: the header above it is already a backdrop-filter, and a backdrop-filter inside
     another one only sees its parent — the hero's words showed through, sharp, under the menu. */
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--gut) 18px;
    background: var(--night-panel);
    box-shadow: 0 1px 0 var(--night-line), 0 30px 40px -20px var(--shadow);
  }
  .top.is-open .nav { display: flex; animation: fadeUp .4s var(--ease) both; }
  .nav a { padding: 14px 4px; border-radius: 0; font-size: 17px; border-bottom: 1px solid var(--night-line); }
  .nav a:hover { background: none; }
  .nav__only-menu { display: block; }

  .hero { padding-bottom: 72px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero__copy { max-width: 720px; }
  .hero__stage { width: min(100%, 560px); height: 600px; margin-inline: auto; }
  .scroll-cue { display: none; }

  .bento__hero { grid-template-columns: minmax(0, 1fr); }
  .orbit { min-height: 380px; order: -1; }
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how__grid { grid-template-columns: minmax(0, 1fr); }
  .how__stage { height: 500px; }
  .roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role, .role--wide { grid-column: span 1; }
  .role--wide:last-child { grid-column: 1 / -1; }
  .tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comm { grid-template-columns: minmax(0, 1fr); }
  .comm__art { min-height: 440px; }
  .phone--feed { left: calc(50% - 250px); bottom: -40%; }
  .phone--course { left: calc(50% - 20px); bottom: -22%; }
  .privacy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq__head { position: static; }
  .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --top-h: 64px; }
  body { font-size: 16px; }
  .top__cta { display: none; }
  .hero { padding-top: calc(var(--top-h) + 40px); padding-bottom: 8px; min-height: 0; }
  .hero__title { margin: 22px 0 20px; font-size: clamp(40px, 11.4vw, 60px); }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__stage { height: 520px; }
  .layer--phone { left: calc(50% - 116px); }
  .phone--hero { --w: 232px; }
  .layer--a { left: -2%; top: 60%; width: 232px; }
  .layer--b { right: -3%; top: 25%; width: 200px; }
  .layer--c { left: -3%; top: 6%; width: 180px; }
  .layer--bell { right: -1%; top: -5%; width: 112px; }
  .layer--t2, .layer--t4 { display: none; }
  .layer--t1 { right: 2%; top: 74%; }
  .layer--t1 .tile { --s: 52px; }
  .layer--t3 { display: none; }

  .gallery { padding-top: 56px; }
  .gallery__stage { height: 440px; }
  .gallery__plane { width: 260%; transform: translate(-50%, -50%) rotateX(22deg) rotateZ(-10deg); }
  .g-row--teacher { display: none; }
  .platforms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }

  .sheet { padding: 72px 0 96px; }
  .bento__hero { border-radius: 26px; min-height: 0; }
  .orbit { min-height: 270px; }
  .orbit__plane { --r: 126px; }
  .orbit__ring--inner { inset: 46px; }
  .orbit__spin--inner { inset: 46px; }
  .orbit__item { --rr: 126px; }
  .orbit__spin--inner .orbit__item { --rr: 80px; }
  .orbit__core { left: -50px; top: -74px; width: 100px; height: 100px; border-radius: 30px; }
  .orbit__bell { width: 70px; height: 70px; }
  .orbit .tile { --s: 52px; }
  .orbit .tile--sm { --s: 40px; }
  .bento__grid { grid-template-columns: minmax(0, 1fr); }
  .card { border-radius: 24px; }
  .how { padding-top: 96px; }
  .how__stage { height: 440px; border-radius: 26px; }
  .duo .phone { --w: 184px; }
  .duo .phone--back { left: calc(50% - 184px); }
  .trio .phone { --w: 168px; left: calc(50% - 84px); }
  .trio .phone--l { translate: -62% 6%; }
  .trio .phone--r { translate: 62% 6%; }
  .roles { padding-top: 96px; }
  .roles__grid { grid-template-columns: minmax(0, 1fr); }
  .role--wide:last-child { grid-column: auto; }
  .tools { padding-top: 96px; }
  .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .band { padding: 14px 0; }
  .console { padding: 88px 0 96px; }
  .console__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
  .console__points li { padding: 18px 16px 20px; border-radius: 18px; }
  .console__points h3 { font-size: 15px; margin-top: 14px; }
  .console__points p { font-size: 13.5px; }
  .hot__label { display: none; }
  .comm { border-radius: 28px; }
  .comm__art { min-height: 380px; }
  .comm__art .phone { --w: 190px; }
  .phone--feed { left: calc(50% - 196px); }
  .phone--course { left: calc(50% - 8px); }
  .privacy__grid { grid-template-columns: minmax(0, 1fr); }
  .faq { padding-bottom: 96px; }
  .qa summary { font-size: 16.5px; padding: 20px 2px; }
  .qa__a { padding-right: 8px; }
  .final__card { padding-top: 104px; border-radius: 28px; }
  .final__bell { width: 150px; top: -78px; }
  .final__cta .btn { flex: 1 1 auto; }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .tools__grid { gap: 28px 16px; }
  .tool h3 { font-size: 15px; }
  .tool p { font-size: 13.5px; }
  .stores { gap: 8px; }
}

/* ── no movement for those who ask for none ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { filter: none; }
  /* what the loops would have shown, held still */
  .bell3d--ring .bell3d__wave { opacity: .85; }
  .confetti { opacity: 1; translate: var(--x, 0px) var(--y, 0px); }
}