/* Era public pages: website, login, sign-up, set password. Pure black, white type, one glowing blue. */
/* Two themes. Dark is the default look; light is chosen by prefers-color-scheme or the toggle (data-theme on <html>).
   The 3D hero follows the theme (hero3d.js draws it in dark ink on light); only the mascot side panel of the
   login / sign-up pages stays dark in both themes. */
:root, [data-theme="light"] .auth-side {
  --bg: #000;
  --bg-2: #0b0d12;
  --ink: #f5f7fb;
  --ink-2: #c9cfdb;
  --muted: #8a93a6;
  --faint: #7d8699;                 /* 4.5:1 on the dark background (WCAG AA) */
  --line: rgb(255 255 255 / .10);
  --line-2: rgb(255 255 255 / .18);
  --hover-line: rgb(255 255 255 / .3);
  --glass: rgb(255 255 255 / .04);
  --glass-2: rgb(255 255 255 / .07);
  --blue: #7aa7ff;
  --blue-2: #4d7fff;
  --blue-glow: rgb(96 140 255 / .45);
  --ok: #57d9a3;
  --err: #ff7a85;
  --bar-bg: rgb(0 0 0 / .55);
  --pill-bg: rgb(12 14 20 / .7);
  --sheet-bg: rgb(10 12 18 / .96);
  --card-a: rgb(255 255 255 / .045);
  --card-b: rgb(255 255 255 / .015);
  --card-shadow: none;
  --field-bg: rgb(255 255 255 / .03);
  --alert-ink: #ffc2c7;
  --ok-ink: #b9f3da;
  --warn-ink: #ffd98a;
  --logo-filter: grayscale(1) brightness(1.6);
  --glow-a: rgb(60 100 255 / .20);
  --glow-b: rgb(130 90 255 / .14);
  --halo-a: rgb(0 0 0 / .62);
  --halo-b: rgb(0 0 0 / .35);
  --dot: rgb(255 255 255 / .45);
  color-scheme: dark;
}
:root {
  --radius: 22px;
  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, .9, .25, 1);
}
[data-theme="light"] {
  --bg: #f5f7fc;
  --bg-2: #ffffff;
  --ink: #0b1220;
  --ink-2: #36415a;
  --muted: #566079;
  --faint: #626c84;                 /* >= 4.5:1 on the light background */
  --line: rgb(15 25 60 / .12);
  --line-2: rgb(15 25 60 / .22);
  --hover-line: rgb(15 25 60 / .38);
  --glass: rgb(15 25 60 / .035);
  --glass-2: rgb(15 25 60 / .07);
  --blue: #2756d8;
  --blue-2: #3466ee;
  --blue-glow: rgb(52 102 238 / .30);
  --ok: #138a5b;
  --err: #c4283a;
  --bar-bg: rgb(245 247 252 / .8);
  --pill-bg: rgb(255 255 255 / .82);
  --sheet-bg: rgb(255 255 255 / .97);
  --card-a: rgb(255 255 255 / .96);
  --card-b: rgb(255 255 255 / .62);
  --card-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 14px 40px -26px rgb(30 50 110 / .38);
  --field-bg: rgb(255 255 255 / .92);
  --alert-ink: #8f1d2b;
  --ok-ink: #0b6b45;
  --warn-ink: #7a5000;
  --logo-filter: grayscale(1) brightness(.55);
  --glow-a: rgb(52 102 238 / .20);
  --glow-b: rgb(140 90 255 / .15);
  --halo-a: rgb(245 247 252 / .78);
  --halo-b: rgb(245 247 252 / .42);
  --dot: rgb(20 40 110 / .45);
  color-scheme: light;
}
.hero-scroll, .auth-side { color: var(--ink); background-color: var(--bg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 99px; }
.skip:focus { left: 16px; }

/* ------------------------------------------------------------------ type */
.eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.h-split { font-weight: 300; letter-spacing: -.025em; line-height: 1.06; margin: 0; font-size: clamp(34px, 5.4vw, 64px); }
.h-split b, .h-split strong { display: block; font-weight: 700; }
.h-split.sm { font-size: clamp(28px, 3.8vw, 46px); }
.lead { color: var(--ink-2); font-size: clamp(15px, 1.4vw, 17.5px); max-width: 560px; margin: 18px auto 0; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }

/* --------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 99px; padding: 11px 20px; font: 600 14.5px/1.21 var(--font);
  text-decoration: none; cursor: pointer; border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  transition: background .25s var(--ease), border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover { background: var(--glass-2); border-color: var(--hover-line); }
.btn:active { transform: scale(.98); }
.btn-white { background: var(--ink); color: var(--bg); border-color: transparent; padding: 6px 6px 6px 20px; box-shadow: 0 0 0 4px var(--glass-2), 0 10px 40px -10px var(--blue-glow); }
.btn-white:hover { background: var(--ink); filter: brightness(1.12); }
.btn-white .arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--ink); display: grid; place-items: center; transition: transform .3s var(--ease); }
.btn-white:hover .arrow { transform: translateX(2px); }
.btn-blue { background: linear-gradient(180deg, #6f9cff, #3f6ff0); border-color: transparent; color: #fff; box-shadow: 0 12px 34px -12px var(--blue-glow); }
.btn-blue:hover { background: linear-gradient(180deg, #82aaff, #4b7af5); }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------ top bar */
.topbar { position: fixed; inset: 0 0 auto; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 18px max(16px, 4vw); transition: background .3s, backdrop-filter .3s; }
.topbar.scrolled, body:not(.site) .topbar { background: var(--bar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; }
.logo-mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #e8f0ff 0 12%, #8fb2ff 28%, #2e5be0 62%, transparent 70%);
  box-shadow: 0 0 18px var(--blue-glow); }
.pillnav { display: flex; gap: 2px; padding: 5px; border-radius: 99px; border: 1px solid var(--line); background: var(--pill-bg); backdrop-filter: blur(10px); }
.pillnav a { padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.pillnav a:hover, .pillnav a[aria-current="true"] { color: var(--ink); background: var(--glass-2); }
.top-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.lang { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 600 13px/1.21 var(--font); cursor: pointer; text-decoration: none; }
.lang:hover { background: var(--glass-2); }
.lang svg { width: 15px; height: 15px; }
.menu-btn { display: none; }

/* ---------------------------------------------------------------- auth pages */
.auth { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-side { position: relative; display: grid; place-items: center; padding: 96px 32px 48px; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 55%, rgb(60 100 255 / .16), transparent 70%), #000; border-right: 1px solid var(--line); }
.auth-side .stars { position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff8, transparent), radial-gradient(1px 1px at 78% 14%, #fff6, transparent),
    radial-gradient(1px 1px at 32% 78%, #fff5, transparent), radial-gradient(1px 1px at 88% 66%, #fff7, transparent),
    radial-gradient(1px 1px at 56% 40%, #fff4, transparent), radial-gradient(1.5px 1.5px at 22% 56%, #9bb8ff, transparent),
    radial-gradient(1.5px 1.5px at 66% 86%, #9bb8ff, transparent), radial-gradient(1px 1px at 44% 10%, #fff6, transparent); }
.auth-main { display: grid; align-content: center; padding: 96px max(24px, 6vw) 48px; }
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-card h1 { font-size: clamp(30px, 3.2vw, 40px); }
.auth-card .lead { margin: 12px 0 26px; font-size: 15px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field small { color: var(--muted); font-size: 12.5px; }
.input, .field input, .field select, .field textarea { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--field-bg); color: var(--ink); font: 500 15.5px/1.21 var(--font); transition: border-color .2s, box-shadow .2s, background .2s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 22px, calc(100% - 16px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { background: var(--bg-2); color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); background: rgb(122 167 255 / .06); box-shadow: 0 0 0 4px rgb(122 167 255 / .14); }
.field input::placeholder { color: var(--faint); }
/* show / hide password: ONE rule set for every page (also in style.css). The eye sits in the same grid cell as the input and is
   centred by the grid, so it stays vertically centred whatever the input height, a value, a hint or autofill do. */
.pw { position: relative; display: grid; align-items: center; }
.pw > input { grid-area: 1 / 1; width: 100%; margin: 0; padding-right: 52px; }
.pw > .pw-toggle, .auth-form .pw > .pw-toggle { grid-area: 1 / 1; justify-self: end; align-self: center; position: static; transform: none;
  margin: 0 5px 0 0; width: 40px; height: 40px; min-width: 0; padding: 0; font-size: 0; line-height: 0; border-radius: 10px; border: 0;
  background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; box-shadow: none; transition: background .2s, color .2s; }
.pw-toggle:hover { background: var(--glass-2); color: var(--ink); }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle .ic-hide { display: none; }
.pw-toggle[aria-pressed="true"] .ic-show { display: none; }
.pw-toggle[aria-pressed="true"] .ic-hide { display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 6px 0 18px; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue-2); }
.auth-card .btn-blue { width: 100%; justify-content: center; height: 50px; font-size: 15px; }
.auth-alt { margin-top: 22px; font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--blue); font-weight: 600; text-decoration: none; }
.alert { border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; font-size: 14px; border: 1px solid rgb(255 122 133 / .35); background: rgb(255 122 133 / .08); color: var(--alert-ink); }
.alert.ok { border-color: rgb(87 217 163 / .35); background: rgb(87 217 163 / .08); color: var(--ok-ink); }
.form-group { border: 0; padding: 0; margin: 0 0 6px; }
.form-group legend { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); font-weight: 600; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.doc { max-width: 760px; margin: 0 auto; padding: 120px 20px 80px; }
.doc h2 { font-size: 20px; margin-top: 32px; }
.doc p, .doc li { color: var(--ink-2); }
.draft { display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1px solid rgb(255 200 90 / .4); color: var(--warn-ink); background: rgb(255 200 90 / .08); font-size: 13px; }

/* ------------------------------------------------------------------ mascot */
.mascot-wrap { position: relative; display: grid; justify-items: center; gap: 18px; z-index: 1; }
.mascot { width: min(360px, 70vw); height: auto; overflow: visible; filter: drop-shadow(0 30px 60px rgb(40 80 255 / .25)); }
.mascot .float { animation: m-float 5s ease-in-out infinite; transform-origin: 200px 210px; }
@keyframes m-float { 50% { transform: translateY(-9px); } }
.mascot .pupil { transition: none; }          /* moved by mascot.js (eased there) */
.mascot .lid { transform-origin: 50% 0; transform-box: fill-box; transform: scaleY(0); transition: transform .28s var(--ease); }
.mascot .blink .lid { animation: m-blink 5.5s infinite; }
@keyframes m-blink { 0%, 95%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }
/* the hands rest low at the sides; they rise to the eyes (their origin is the centre of each eye) */
.mascot .hand { transition: transform .5s var(--ease); }
.mascot .hand-l { transform: translate(-56px, 104px) rotate(0deg); }
.mascot .hand-r { transform: translate(56px, 104px) rotate(0deg); }
.mascot .finger { transition: transform .12s linear; }
.mascot .mouth { transition: d .3s var(--ease); }
.mascot .cheek { opacity: .0; transition: opacity .3s; }
.mascot .ring { animation: m-spin 18s linear infinite; transform-origin: 200px 200px; }
@keyframes m-spin { to { transform: rotate(360deg); } }
/* peek: both hands over the eyes; the left one parts two fingers (mascot.js opens the gap) and that eye squints through */
.mascot.is-peek .hand-l { transform: translate(0, 0) rotate(5deg); }
.mascot.is-peek .hand-r { transform: translate(0, 0) rotate(-5deg); }
.mascot.is-peek .lid-l { transform: scaleY(.34); animation: none; }
.mascot.is-peek .lid-r { transform: scaleY(1); animation: none; }
.mascot.is-peek.is-blink .lid-l { transform: scaleY(1); transition-duration: .09s; }
.mascot.is-peek .cheek { opacity: .7; }
/* cover: both hands shut tight over closed eyes */
.mascot.is-cover .hand-l { transform: translate(0, 0) rotate(5deg); }
.mascot.is-cover .hand-r { transform: translate(0, 0) rotate(-5deg); }
.mascot.is-cover .lid { transform: scaleY(1); animation: none; }
.mascot.is-cover .cheek { opacity: 1; }
.mascot.is-happy .cheek { opacity: .6; }
.bubble { position: relative; padding: 10px 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line-2);
  font-size: 14px; color: var(--ink-2); min-height: 44px; display: grid; place-items: center; text-align: center; max-width: 280px; transition: opacity .25s; }
.bubble::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: #0f1218; border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2); transform: translateX(-50%) rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .mascot .float, .mascot .ring, .mascot .blink .lid { animation: none; }
  .mascot .hand, .mascot .lid, .mascot .pupil, .mascot .finger { transition: none; }
}

@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 84px 16px 8px; border-right: 0; background: radial-gradient(70% 60% at 50% 60%, rgb(60 100 255 / .16), transparent 70%), #000; }
  .mascot { width: 170px; }
  .bubble { font-size: 13px; min-height: 0; padding: 7px 12px; }
  .auth-main { padding: 18px 16px 48px; align-content: start; }
  .grid-2 { grid-template-columns: 1fr; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 12px 16px; }
  .topbar .pillnav { display: none; }
  .topbar .pillnav.open { display: flex; flex-direction: column; position: fixed; top: 64px; left: 16px; right: 16px; padding: 10px; border-radius: 20px; background: var(--sheet-bg); }
  .topbar .pillnav.open a { padding: 12px 14px; font-size: 15px; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
}

/* ================================================================== public website */
.site .topbar { grid-template-columns: 1fr auto 1fr; }
.login-pill { padding: 0 18px; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
.wrap.narrow { width: min(780px, 100% - 32px); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.lead.left { margin-left: 0; }
.sec { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.sec h2 { margin-bottom: 36px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.cta .btn { min-height: 44px; }
.card-x { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: var(--card-shadow);
  padding: 24px; transition: border-color .3s, box-shadow .3s; }
.card-x:hover { border-color: var(--line-2); }
.card-x h3 { margin: 10px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.card-x p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* hero: a tall scroll area with a sticky stage; the particles morph with the scroll */
.hero-scroll { position: relative; height: 560vh; }      /* pinned for ~460vh of scroll */
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.hero-canvas.ready { opacity: 1; }
.hero-copy { position: absolute; left: 50%; top: 20vh; transform: translateX(-50%); width: min(760px, 100% - 32px); text-align: center; z-index: 2; }
.hero-copy .lead { margin-top: 16px; }
/* a soft dark halo behind the headline: the big hands never cut into the text */
.hero-copy::before { content: ""; position: absolute; inset: -70px -110px -50px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo-a), var(--halo-b) 60%, transparent); }
.scroll-hint { position: absolute; left: 0; right: 0; top: calc(78svh - 20vh); text-align: center; font-size: 12px; letter-spacing: .4em; color: var(--muted); text-transform: uppercase; }
.hero-core { position: absolute; left: max(16px, 10vw); top: 14vh; z-index: 2; opacity: 0; max-width: 560px; pointer-events: none; }
.core-steps { position: absolute; right: max(16px, 10vw); bottom: 12vh; width: min(340px, 100% - 32px); z-index: 2; opacity: 0;
  border-left: 1px solid var(--blue); padding-left: 22px; pointer-events: none; }
.steps-label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; font-weight: 600; }
.steps-label span { transition: color .3s; }
.steps-label span.on { color: var(--blue); }
.step-text { margin: 0; color: var(--ink-2); font-size: 15px; display: none; }
.step-text.on { display: block; animation: fade-in .4s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
.hero-fallback { display: none; }
/* static hero: reduced motion or no WebGL */
.hero-static .hero-scroll { height: auto; }
.hero-static .hero-sticky { position: relative; height: auto; overflow: visible; padding: 140px 0 60px; }
.hero-static .hero-canvas { display: none; }
.hero-static .hero-fallback { display: block; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1px 1px at 10% 20%, var(--dot), transparent), radial-gradient(1px 1px at 80% 30%, var(--dot), transparent),
    radial-gradient(1px 1px at 30% 80%, var(--dot), transparent), radial-gradient(1px 1px at 70% 75%, var(--dot), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--dot), transparent), radial-gradient(1px 1px at 90% 85%, var(--dot), transparent); }
.fb-orb { position: absolute; left: 50%; top: 640px; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #f2f6ff 0 4%, #9ab9ff 18%, #3a63d9 42%, rgb(30 60 180 / .25) 60%, transparent 72%);
  box-shadow: 0 0 120px 40px rgb(70 110 255 / .25); }
.hero-static .hero-copy, .hero-static .hero-core, .hero-static .core-steps { position: relative; left: auto; right: auto; top: auto; bottom: auto;
  transform: none; opacity: 1; margin: 0 auto; }
.hero-static .hero-core { margin-top: 300px; text-align: center; }
.hero-static .core-steps { margin-top: 28px; }
.hero-static .step-text { display: block; margin-bottom: 10px; }
.hero-static .scroll-hint { display: none; }

/* sections */
.how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.how .num { font-size: 13px; color: var(--blue); font-weight: 600; letter-spacing: .1em; }
.types { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.types li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); font-weight: 500; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.features .ico { font-size: 26px; }
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.cities { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cities li { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.cities li.more { border-style: dashed; color: var(--muted); }
.counter { margin-top: 30px; display: grid; gap: 10px; }
.counter p { margin: 0; color: var(--ink-2); }
.counter .big { font-size: 40px; font-weight: 700; color: var(--ink); margin-right: 8px; }
.counter .invite { font-size: 18px; color: var(--ink); max-width: 460px; }
.counter .btn { justify-self: start; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; }
/* the recommended plan (Standard): a lit frame and glow, like the A4 sheet; `.below` so the card-x defaults don't win */
.plan.hot, .below .plan.hot { border-color: rgb(122 167 255 / .8);
  box-shadow: 0 0 0 1px rgb(122 167 255 / .45), 0 0 0 5px rgb(91 140 255 / .12), 0 30px 80px -30px var(--blue-glow); }
.plan .badge { position: absolute; top: -12px; left: 24px; background: var(--blue-2); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 99px; }
.plan .price { margin: 0; }
.plan .price strong { font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.plan ul { list-style: none; padding: 0; margin: 10px 0 22px; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; flex: 1; }
.plan li::before { content: "✓"; color: var(--blue); margin-right: 10px; font-weight: 700; }
.plan .btn { justify-content: center; min-height: 44px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 22px; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--ink-2); }
.footer { border-top: 1px solid var(--line); padding: 36px 0 48px; }
.foot { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 12px 0; }
.foot-links a:hover { color: var(--ink); }

/* showcase + testimonials (only rendered when the admin published something) */
.logos { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-bottom: 30px; }
.logos img { height: 48px; width: auto; filter: var(--logo-filter); opacity: .8; transition: filter .3s, opacity .3s; }
.logos img:hover { filter: none; opacity: 1; }
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.biz-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: #111; aspect-ratio: 4 / 3; }
.biz-photo img { width: 100%; height: 100%; object-fit: cover; }
.biz-photo .count { position: absolute; right: 10px; bottom: 10px; background: rgb(0 0 0 / .7); color: #fff; border-radius: 99px; padding: 3px 10px; font-size: 13px; }
.carousel { position: relative; outline: none; }
.carousel .track { display: grid; grid-auto-flow: column; grid-auto-columns: min(460px, 86%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.carousel .track::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); }
.quote figcaption { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.quote figcaption img { border-radius: 50%; object-fit: cover; }
.stars { margin: 0; color: var(--faint); letter-spacing: 2px; }
.stars .on { color: #ffcf5c; }
.car-nav { display: flex; gap: 8px; margin-top: 16px; }
.car-nav .btn, .lb-nav .btn { min-width: 44px; min-height: 44px; justify-content: center; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
.lightbox::backdrop { background: rgb(0 0 0 / .88); }
.lb-stage img { max-width: 92vw; max-height: 78vh; width: auto; height: auto; border-radius: 12px; }
.lb-nav { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

@media (max-width: 980px) {
  .how, .features, .showcase { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .site .topbar { grid-template-columns: auto 1fr; }
  .site .top-right { gap: 8px; }
  .hero-copy { top: 14vh; }
  .hero-core { top: 11vh; left: 16px; right: 16px; }
  .core-steps { bottom: 7vh; left: 16px; right: 16px; width: auto; }
}
@media (max-width: 600px) {
  .how, .features, .showcase { grid-template-columns: 1fr; }
  .login-pill { padding: 0 14px; }
  .lang { padding: 0 12px; }
  .counter .big { font-size: 32px; }
  .hero-static .hero-core { margin-top: 260px; }
  .fb-orb { top: 600px; width: 180px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-text.on { animation: none; }
}

.preview-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 10px 16px; text-align: center; font-size: 13px; font-weight: 600;
  background: #ffcf5c; color: #1a1300; }
.draft-tag { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
  border: 1px dashed #ffcf5c; color: #ffcf5c; vertical-align: middle; }

/* reduced motion with WebGL: one still frame of the touch, no pinning */
.hero-still .hero-scroll { height: auto; }
.hero-still .hero-sticky { position: relative; height: auto; overflow: hidden; padding-bottom: 60px; }
.hero-still .hero-canvas { height: 100svh; bottom: auto; }
.hero-still .hero-copy { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; padding-top: 20vh; }
.hero-still .scroll-hint { display: none; }
.hero-still .hero-core, .hero-still .core-steps { position: relative; left: auto; right: auto; top: auto; bottom: auto; opacity: 1;
  margin: 46svh auto 0; text-align: center; }
.hero-still .core-steps { margin-top: 28px; text-align: left; }
.hero-still .step-text { display: block; margin-bottom: 10px; }

.plan-extras { margin: 0 0 4px; }

/* legal footer + cookie notice */
.foot-legal { display: grid; gap: 4px; margin-top: 18px; color: var(--faint); font-size: 12.5px; }
.foot-legal p { margin: 0; }
.foot-legal a { color: var(--muted); }
.auth + .footer { border-top: 1px solid var(--line); }
.cookie-note { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 55; max-width: 560px; margin: 0 auto; display: flex; gap: 12px;
  align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--sheet-bg); font-size: 13.5px; color: var(--ink-2); }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; flex: 1; }
.cookie-note a { color: var(--blue); }
.cookie-note .btn { min-height: 44px; min-width: 64px; justify-content: center; }

/* free-month promo label next to a plan price */
.free-month { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(60, 200, 130, .16); color: var(--ok); vertical-align: middle; white-space: nowrap; }


/* ================================================================== light / dark toggle */
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink); cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.theme-toggle:hover { background: var(--glass-2); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }
/* the light / dark switch: one cross-fade of the whole page (public.js, View Transitions), composited on the GPU */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }

/* ================================================================== below the hero: calm depth */
.below { position: relative; isolation: isolate; }
/* a quiet starfield (canvas, paused off-screen) that stays in view while you scroll through this area */
.stars-canvas { position: sticky; top: 0; display: block; width: 100%; height: 100svh; margin-bottom: -100svh; z-index: -1; pointer-events: none; }
#how { background: radial-gradient(60% 55% at 15% 0%, var(--glow-a), transparent 70%); }
#for { background: radial-gradient(45% 50% at 90% 50%, var(--glow-b), transparent 70%); }
#features { background: radial-gradient(55% 45% at 80% 20%, var(--glow-a), transparent 70%); }
#pricing { background: radial-gradient(65% 55% at 50% 35%, var(--glow-a), transparent 72%), radial-gradient(40% 40% at 10% 90%, var(--glow-b), transparent 70%); }
#faq { background: radial-gradient(50% 50% at 50% 100%, var(--glow-b), transparent 70%); }
.footer { background: linear-gradient(180deg, transparent, var(--glass)); }
/* section headings get a thin accent line */
.below .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--blue); opacity: .7; }
/* scroll reveal (only when JS runs and motion is allowed; removed again after the animation) */
.fx-reveal .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.fx-reveal .rv.in { opacity: 1; transform: none; }
/* cards: lift + a soft blue edge on hover; a gentle 3D tilt follows the mouse on desktop (fx.js), a press on touch */
.below .card-x, .below .plan { transform-style: preserve-3d; will-change: auto; }
.below .card-x.tilting { transform: perspective(900px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: var(--line-2);
  box-shadow: 0 26px 60px -34px var(--blue-glow); transition: transform .12s linear, box-shadow .3s, border-color .3s; }
.below .card-x:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .below .card-x:not(.tilting) { transition: transform .5s var(--ease), border-color .3s, box-shadow .3s; } }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal .rv { opacity: 1; transform: none; transition: none; }
  .below .card-x.tilting { transform: none; }
}

/* the other public pages (legal, login, sign-up, errors): the same quiet depth, a little lighter */
body:not(.site) .below { min-height: 100svh; background: radial-gradient(70% 42% at 50% 0%, var(--glow-a), transparent 72%),
  radial-gradient(40% 40% at 92% 88%, var(--glow-b), transparent 70%); }
body:not(.site) .doc { position: relative; }
body:not(.site) .doc h1 { margin-bottom: 8px; }
/* the form side of login / sign-up is a card on the page, not bare text on a flat colour */
body:not(.site) .auth-card { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: var(--card-shadow); }
@media (max-width: 880px) { body:not(.site) .auth-card { padding: 16px; } }
/* login / sign-up on a wide screen in light mode: the bar sits over the dark mascot panel (left) and the light form (right):
   no grey slab, the logo stays light over the panel */
@media (min-width: 881px) {
  [data-theme="light"] body:has(.auth) .topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-theme="light"] body:has(.auth) .topbar .logo { color: #f5f7fb; }
}

.cta.left { justify-content: flex-start; }