/*  TennisApp — the site, in the app's own tokens.
    Colours are uicomponents/ui/res/values/colors_primitives.xml by name; type is Poppins at the
    app's weights. One stylesheet, no framework: the page is one screen's worth of ideas. */

:root {
  --navy-900: #050C16;
  --navy-850: #0F172A;
  --navy-800: #0A1524;
  --navy-700: #111827;
  --navy-600: #1D2432;
  --navy-500: #232832;
  --slate-700: #1F2937;
  --lime-400: #B4CE14;
  --lime-600: #91A80F;
  --lime-900: #414E12;
  --ball: #B8E24A;
  --brass-300: #C4873A;
  --blue-500: #3B82F6;
  --off-white: #F7F7F7;
  --text: #FFFFFF;
  --text-2: rgba(255,255,255,.75);
  --text-3: rgba(255,255,255,.6);
  --hairline: rgba(255,255,255,.10);
  --red-500: #E5484D;
  --green-500: #17B26A;

  --bg: var(--navy-900);
  --surface: var(--navy-800);
  --card: var(--navy-700);
  --border: var(--slate-700);
  --accent: var(--lime-400);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 24px;
  --radius-sm: 14px;
  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --ease-emph: cubic-bezier(.16,.72,.28,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--navy-900); padding: 10px 14px; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: 16px; }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.display {
  margin: 0;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(42px, 7.2vw, 78px);
  text-wrap: balance;
}
.display--sm { font-size: clamp(34px, 5vw, 52px); }
.display > span { display: block; }
.display__accent { color: var(--accent); }
.h2 {
  margin: 0 0 18px;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(28px, 4.2vw, 46px);
  max-width: 22ch; text-wrap: balance;
}
.h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.link { color: var(--accent); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .18s, border-color .18s, color .18s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--accent); color: var(--navy-900); }
.btn--primary:hover { background: #C6E01C; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: rgba(255,255,255,.35); }
.btn--lg { padding: 18px 28px; font-size: 16px; }
.btn--sm { padding: 12px 20px; font-size: 14px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--navy-900) 72%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled, .nav--solid { border-bottom-color: var(--hairline); }
.nav__row { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand svg { width: 34px; height: 34px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; color: var(--text-2); }
.nav__links a { transition: color .15s; }
.nav__links a:hover { color: var(--text); }
.nav__lang { color: var(--text-3); padding-left: 22px; border-left: 1px solid var(--hairline); }
.nav__burger {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__mobile { display: none; }
.nav__mobile:not([hidden]) {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px var(--gutter) 20px; border-top: 1px solid var(--hairline);
}
.nav__mobile a { padding: 12px 4px; font-size: 17px; color: var(--text-2); }
.nav__mobile .btn { margin-top: 12px; color: var(--navy-900); padding: 16px 24px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 0; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(180,206,20,.16), transparent 60%),
    radial-gradient(40% 40% at 20% 80%, rgba(59,130,246,.10), transparent 60%);
  filter: blur(20px);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 5vw, 64px);
}
.hero__sub { margin: 26px 0 0; font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__note { margin: 18px 0 0; font-size: 14px; color: var(--text-3); }
.hero__visual { position: relative; display: grid; place-items: center; min-height: 560px; }
.hero__mark {
  position: absolute; width: min(64%, 390px); aspect-ratio: 1; z-index: 0;
  left: -26%; top: -10%; opacity: .95;
}
.hero__mark svg { width: 100%; height: 100%; overflow: visible; }

/* The phone: a device drawn in CSS, so a screenshot is the whole of the artwork. The screen, not
   the shell, carries the screenshot's exact proportions: with the ratio on the shell the bezel
   ate into it and the picture was cropped a few pixels at each side, which is why the app's
   own margins looked wrong here and right on the simulator. The screenshot already has the
   island in it, so none is drawn on top. */
.phone {
  position: relative; margin: 0; z-index: 1;
  width: min(300px, 78vw);
  border-radius: 48px; padding: 11px;
  background: linear-gradient(160deg, #1B2432, #0B1220);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 40px 90px -30px rgba(0,0,0,.8),
    0 0 120px -30px rgba(180,206,20,.28);
  transform-style: preserve-3d;
  will-change: transform;
}
.phone__screen { position: relative; width: 100%; aspect-ratio: 1206 / 2622; border-radius: 38px; overflow: hidden; background: var(--navy-900); }
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.phone__island { display: none; }
.phone--hero { transform: rotate(-4deg); transition: transform .5s var(--ease-out); }
.phone--hero:hover { transform: rotate(-2deg) translateY(-4px); }

.trust {
  position: relative; z-index: 1;
  list-style: none; margin: clamp(40px, 6vw, 72px) auto 0; padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 28px;
  border-top: 1px solid var(--hairline);
  color: var(--text-2); font-size: 14px;
}
.trust li { display: flex; align-items: center; gap: 10px; }
.trust svg { flex: none; width: 18px; height: 18px; color: var(--accent); }

/* ---------- Sections ---------- */
section { padding: clamp(64px, 9vw, 128px) 0; }
section[id] { scroll-margin-top: 72px; }

/* Showcase: sticky phone, scrolling chapters. */
.show { padding-bottom: 0; }
.show__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); margin-top: 24px; }
.show__steps { display: flex; flex-direction: column; }
.show__step {
  min-height: 80vh; display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0; opacity: .3; transition: opacity .5s var(--ease-out);
}
.show__step.is-active { opacity: 1; }
.show__step h3 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.show__step p { margin: 0; font-size: 17px; color: var(--text-2); max-width: 44ch; }
.show__num { display: inline-block; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
.show__sticky { position: sticky; top: 96px; height: calc(100vh - 120px); display: grid; place-items: center; }
.phone--show { width: min(320px, 36vh * 1206 / 2622 * 1.6, 80vw); }
.phone--show .phone__screen img { opacity: 0; transition: opacity .55s var(--ease-out); }
.phone--show .phone__screen img.is-active, .no-js .phone--show .phone__screen img:first-child { opacity: 1; }
.no-js .show__step { opacity: 1; }
.phone--inline { display: none; }
.show__dots { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.show__dots li { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .3s, transform .3s; }
.show__dots li.is-active { background: var(--accent); transform: scale(1.4); }

/* Feature cards */
.cards {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.card {
  position: relative; padding: 26px 24px 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .3s var(--ease-out), border-color .3s;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px 160px at var(--mx, 50%) var(--my, 0%), rgba(180,206,20,.14), transparent 70%);
}
.card:hover { transform: translateY(-3px); border-color: rgba(180,206,20,.35); }
.card:hover::after { opacity: 1; }
.card__icon { width: 44px; height: 44px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 12px; background: var(--navy-600); color: var(--accent); }
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.card p { margin: 0; color: var(--text-2); font-size: 15px; }

/* How it works */
.how { position: relative; overflow: hidden; }
/* The court sits under the three steps, not behind them: it starts where the text ends and
   fades in from the top, so nothing is read through its lines. */
.how__court {
  position: absolute; left: -2%; right: -2%; top: 58%; bottom: -6%; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 85%, transparent);
}
.how__court svg { width: 100%; height: 100%; }
.how .wrap { position: relative; }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { padding: 28px 0 0; border-top: 1px solid var(--hairline); }
.step__n { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent); margin-bottom: 14px; }
.step h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.step p { margin: 0; color: var(--text-2); font-size: 15px; }

/* Independence */
.independent { padding-top: 0; }
.independent__box {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.independent__mark { width: 48px; height: 48px; color: var(--accent); }
.independent p { margin: 0 0 12px; color: var(--text-2); }

/* Download */
.download__box {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 24px;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 32px; background: linear-gradient(135deg, #0F1B2E, var(--navy-800));
  border: 1px solid var(--border);
}
.download__box::before {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,206,20,.22), transparent 60%); filter: blur(10px); pointer-events: none;
}
.download__copy p { color: var(--text-2); margin: 0 0 24px; font-size: 17px; }
.download__art { position: relative; width: min(100%, 300px); justify-self: center; }
.download__art svg { width: 100%; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 14px;
  border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s var(--ease-out), border-color .18s;
}
.badge:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.badge svg { width: 26px; height: 26px; flex: none; }
.badge span { display: flex; flex-direction: column; line-height: 1.05; }
.badge small { font-size: 10px; letter-spacing: .02em; opacity: .8; }
.badge b { font-size: 16px; font-weight: 600; }
.badge--soon { opacity: .55; cursor: default; }
.badge--soon:hover { transform: none; border-color: rgba(255,255,255,.18); }

/* Contact */
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 6vw, 80px); align-items: start; }
.contact__copy p { color: var(--text-2); font-size: 17px; margin: 0 0 14px; }
.contact__privacy { font-size: 14px !important; color: var(--text-3) !important; }
.form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--text-2); }
.field input, .field textarea {
  width: 100%; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--navy-850); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180,206,20,.18); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--red-500); }
.form__status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--red-500); }
.form__status.is-ok { color: var(--green-500); }
.form__done { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius-sm); background: rgba(23,178,106,.12); border: 1px solid rgba(23,178,106,.4); }
.form__done[hidden] { display: none; }
.form__done strong { font-size: 18px; }
.form__done span { color: var(--text-2); }
.form.is-sent .field, .form.is-sent button, .form.is-sent .form__status { display: none; }

/* Footer */
.footer { border-top: 1px solid var(--hairline); padding: 56px 0 28px; color: var(--text-2); font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__grid a { display: block; padding: 5px 0; }
.footer__grid a:hover { color: var(--text); }
.footer__brand p { max-width: 36ch; margin: 14px 0 0; }
.footer__h { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.footer__h--gap { margin-top: 20px; }
.footer__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: 13px; }

/* Prose pages */
.prose-wrap { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }
.prose { max-width: 720px; }
.prose__head { margin-bottom: 32px; }
.prose__updated { margin: 12px 0 0; color: var(--text-3); font-size: 14px; }
.prose .lede { font-size: 20px; color: var(--text-2); }
.prose h2 { margin: 36px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.prose p, .prose li { color: var(--text-2); font-size: 16.5px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--accent); }
.prose .badges { margin-top: 28px; }

/* ---------- Motion ---------- */
/* Nothing is hidden until the script has measured it as below the fold — so a browser that never
   runs the observer, a page opened at an anchor, or a reader who arrives before the script, all
   see a finished page rather than an empty one. */
.reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.will-reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.will-reveal.is-in { opacity: 1; transform: none; }

/* The mark flying in: the app's own numbers — 0.95s, eased out, the trail after the ball. */
.js .mark-fly #ball, .js .mark-fly #silhouette_one, .js .mark-fly #silhouette_two, .js .mark-fly #silhouette_three {
  opacity: 0;
  offset-rotate: 0deg;
  animation: fly .95s var(--ease-out) forwards, fade .19s linear forwards;
}
.js .mark-fly #ball { offset-path: path("M-470 360 C-451.859 335.369 -434.56 313.231 -417.181 292.575 C-399.892 272.03 -383.388 253.99 -367.259 237.632 C-335.387 205.314 -305.636 180.287 -279.831 160.473 C-254.317 140.888 -230.385 124.7 -210.904 112.184 C-193.408 101.543 -175.912 90.901 -158.416 80.259 C-135.08 67.547 -111.745 54.836 -88.409 42.124 C-74.699 35.285 -60.989 28.447 -47.279 21.608 C-31.519 14.405 -15.76 7.203 0 0"); }
.js .mark-fly #silhouette_two { offset-path: path("M-470 365 C-451.86 340.028 -434.561 317.583 -417.182 296.64 C-399.893 275.809 -383.389 257.518 -367.26 240.933 C-335.388 208.166 -305.636 182.791 -279.831 162.702 C-254.318 142.845 -230.386 126.433 -210.904 113.743 C-193.408 102.953 -175.912 92.163 -158.416 81.374 C-135.08 68.486 -111.745 55.598 -88.409 42.709 C-74.699 35.776 -60.989 28.842 -47.279 21.908 C-31.519 14.605 -15.76 7.303 0 0"); animation-delay: .07s; }
.js .mark-fly #silhouette_one { offset-path: path("M-430 330 C-413.404 307.422 -397.577 287.129 -381.676 268.194 C-365.859 249.361 -350.761 232.825 -336.003 217.829 C-306.844 188.205 -279.624 165.263 -256.015 147.1 C-232.673 129.147 -210.778 114.309 -192.955 102.836 C-176.948 93.081 -160.941 83.326 -144.934 73.571 C-123.584 61.919 -102.235 50.266 -80.885 38.614 C-68.342 32.345 -55.798 26.076 -43.255 19.807 C-28.837 13.205 -14.418 6.602 0 0"); animation-delay: .13s; }
.js .mark-fly #silhouette_three { offset-path: path("M-510 400 C-490.315 372.632 -471.544 348.035 -452.686 325.084 C-433.926 302.257 -416.018 282.212 -398.516 264.035 C-363.931 228.128 -331.649 200.32 -303.646 178.304 C-275.962 156.542 -249.993 138.556 -228.853 124.649 C-209.868 112.825 -190.883 101.001 -171.898 89.177 C-157.524 80.963 -143.149 72.749 -128.775 64.535 C-117.828 58.625 -106.881 52.715 -95.934 46.805 C-81.057 39.206 -66.179 31.607 -51.302 24.009 C-34.202 16.006 -17.101 8.003 0 0"); animation-delay: .19s; }
@keyframes fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@supports not (offset-path: path("M0 0")) {
  .js .mark-fly #ball, .js .mark-fly #silhouette_one, .js .mark-fly #silhouette_two, .js .mark-fly #silhouette_three { animation: fade .6s var(--ease-out) forwards; }
}
.mark-fly.is-still #ball, .mark-fly.is-still #silhouette_one, .mark-fly.is-still #silhouette_two, .mark-fly.is-still #silhouette_three { animation: none; opacity: 1; offset-path: none; }

/* The court draws itself. */
.how__court path { stroke: rgba(180,206,20,.35); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .how__court.will-draw path { stroke-dashoffset: 1; }
.js .how__court.will-draw.is-in path { animation: draw 2.4s var(--ease-emph) forwards; }
.js .how__court.will-draw.is-in path:nth-child(n+2) { animation-delay: .25s; }
.js .how__court.will-draw.is-in path:nth-child(n+4) { animation-delay: .5s; }
.js .how__court.will-draw.is-in path:nth-child(n+6) { animation-delay: .75s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .mark-fly #ball, .js .mark-fly #silhouette_one, .js .mark-fly #silhouette_two, .js .mark-fly #silhouette_three { animation: none; opacity: 1; offset-path: none; }
  .how__court path { stroke-dashoffset: 0; animation: none !important; }
  .phone, .card, .btn, .badge { transition: none; }
  [data-parallax], [data-tilt] { transform: none !important; }
}

/* ---------- Ambient light ----------
   Two soft lime blooms drifting slowly behind the page, and on a pointer device a third that
   follows the hand. Fixed to the viewport, heavily blurred, and below everything else. */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient span {
  position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform;
  background: radial-gradient(circle, rgba(180,206,20,.30), rgba(180,206,20,0) 62%);
}
.ambient__a { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; animation: driftA 38s ease-in-out infinite alternate; }
.ambient__b { width: 48vmax; height: 48vmax; right: -14vmax; bottom: -20vmax; opacity: .7; animation: driftB 46s ease-in-out infinite alternate; }
.ambient__cursor { width: 44vmax; height: 44vmax; left: 0; top: 0; opacity: 0; transform: translate(-50%, -50%); transition: opacity 1.2s; background: radial-gradient(circle, rgba(180,206,20,.18), rgba(180,206,20,0) 60%); }
.ambient__cursor.is-on { opacity: 1; }
@keyframes driftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(22vmax, 26vmax) scale(1.15); } }
@keyframes driftB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-20vmax, -24vmax) scale(.9); } }
.nav, main, .footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .ambient__a, .ambient__b { animation: none; }
  .ambient__cursor { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero__grid { grid-template-columns: 1fr; text-align: left; }
  .hero__visual { min-height: 0; margin-top: 12px; }
  .hero__mark { width: 62%; left: -4%; top: -6%; }
  .show__grid { grid-template-columns: 1fr; }
  /* No pinned phone on a narrow screen — it floated over the words and read as broken. Each
     chapter carries its own phone instead, right under its text. */
  .show__sticky { display: none; }
  .show__step { min-height: 0; padding: 40px 0 8px; opacity: 1; }
  .phone--inline { display: block; width: min(240px, 62vw); margin: 28px auto 8px; }
  .steps { grid-template-columns: 1fr; }
  .download__box { grid-template-columns: 1fr; }
  .download__art { display: none; }
  .contact__grid { grid-template-columns: 1fr; }
  .independent__box { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn--lg { width: 100%; }
  .hero__actions { flex-direction: column; }
}

/* ---- Consent ----
   A small card in the corner, not a wall across the page: one question, two answers, a link. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 420px; padding: 18px 20px; display: grid; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.consent__t { margin: 0; font-weight: 600; font-size: 15px; }
.consent__b { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.consent__b a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.consent__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* `display: grid` above would otherwise beat the browser's own `[hidden] { display: none }`,
   and the card would keep drawing after the visitor had answered it. */
.consent[hidden] { display: none; }
@media (min-width: 640px) { .consent { left: 24px; right: auto; bottom: 24px; } }