/* Generated by tools/fetch-fonts.mjs — do not edit by hand.
   Self-hosted on purpose: linking the Google CDN would leak visitor IPs
   outside the EU before any interaction (TZ §5.3). */

/* Bebas Neue 400 — latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-400-latin-ext.a724a4b6.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bebas Neue 400 — latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-400-latin.441b026d.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Condensed 400 — cyrillic */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-400-cyrillic.b96fbbb3.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Roboto Condensed 400 — greek */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-400-greek.9b3a8cab.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Roboto Condensed 400 — latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-400-latin-ext.a0116a78.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Condensed 400 — latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-400-latin.718ced55.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Condensed 700 — cyrillic */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-700-cyrillic.b96fbbb3.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Roboto Condensed 700 — greek */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-700-greek.9b3a8cab.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Roboto Condensed 700 — latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-700-latin-ext.a0116a78.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Condensed 700 — latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-700-latin.718ced55.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Share Tech Mono 400 — latin */
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/share-tech-mono-400-latin.73b87eb7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand tokens — copied by value, not imported from the platform: the landing
   page is a standalone project (TZ Appendix B). */
:root {
  --bg-page:   #06080f;
  --bg-deep:   #0c1020;
  --bg-card:   #121826;
  --text:      #ffffff;
  --text-2:    #d9d9d9;
  --text-3:    #c8c8c8;
  /* Warm variants, used over the photographic hero. Neutral greys next to a
     sunset read as a different design pasted on top. */
  --text-warm:   #fff4e8;
  --text-warm-2: #e6d4c2;
  --accent:    #e84b0a;
  /* The wordmark and tagline use the loader's brighter orange, not the UI
     accent — matching the app's launch screen rather than its controls. */
  --logo-accent: #ff5500;
  --teal:      #00d496;
  --border:    rgba(232, 75, 10, 0.30);
  --border-on: rgba(232, 75, 10, 0.70);
  --border-n:  rgba(50, 85, 170, 0.28);

  /* No opacity below 0.7 for text or interactive borders — the site is read in
     sunlight, from a phone, wearing gloves. */

  /* One text face for every language, matching the platform — which imports
     Roboto Condensed for its whole UI (the variable there is still called
     --font-barlow-condensed, but Barlow is not the font behind it).
     --font-brand is Bebas, and it is used ONLY where the text is Latin by
     definition: the wordmark and the English tagline. Everything else, headings
     included, is one face, so Russian and Greek are not a different design. */
  --font-brand: 'Bebas Neue', 'Roboto Condensed', system-ui, sans-serif;
  --font-ui:    'Roboto Condensed', system-ui, sans-serif;
  --font-data:  'Share Tech Mono', 'Roboto Condensed', ui-monospace, monospace;

  --display-tracking: .02em;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(48px, 9vw, 96px);
  --radius: 12px;
  --maxw: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A long unbreakable word must wrap, not push the page sideways. Pseudo-locale
   testing produced horizontal overflow without this, and German compounds or a
   stray URL in a translation would do the same for real. */
h1, h2, h3, h4, p, li, summary, a, .price {
  overflow-wrap: break-word;
}

/* break-word alone is not enough: it wraps the text but does not shrink the
   element's min-content width, and grid/flex children default to
   min-width:auto — so the track kept the long word's full width and stretched
   the page to 1524px at a 390px viewport. */
.grid-2 > *, .grid-3 > *, .rows > *, .row > *,
.safety-inner > *, .download-inner > *, .footer-cols > *,
.faq summary {
  min-width: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  margin: 0;
}
h1, h2, .logo { text-transform: uppercase; }

h1 { font-size: clamp(40px, 8vw, 72px); }
h2 { font-size: clamp(30px, 5vw, 48px); }
h3 { font-size: clamp(20px, 2.4vw, 24px); text-transform: none; }
h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
p  { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: inherit; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}
.skip:focus {
  inset-inline-start: 8px;
  inset-block-start: 8px;
  z-index: 100;
  background: var(--accent);
  padding: 10px 16px;
  border-radius: 8px;
}

:focus-visible {
  outline: 2px solid var(--logo-accent);
  outline-offset: 3px;
}

section { padding-block: var(--gap); }
section > h2 { margin-block-end: 40px; text-align: center; }

.grid-3, .grid-2, .rows, .footer-cols, .safety-inner, .download-inner,
.hero-inner, .manifesto, .faq, .final, .pricing > .hint {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--pad);
  background: rgba(6, 8, 15, .97);
  border-block-end: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

/* The mark is the helmet plus the wordmark — the helmet is the base, the text
   the second half. Both taken from the app's loading screen (MEGA white, RIDER
   in the loader's orange, Bebas with wide tracking) so the site and the app
   read as one brand rather than two designs of the same name. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 22px;
  text-decoration: none;
  letter-spacing: .22em;
  /* Padding, not a fixed height: the wordmark alone is a small target for a
     link people reach for one-handed. */
  padding-block: 10px;
  white-space: nowrap;
}
.logo-helmet {
  /* Intrinsic 118×148; height drives it so the wordmark stays the anchor. */
  height: 34px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255, 85, 0, .35));
}
.logo-text  { display: inline-flex; }
.logo-mega  { color: var(--text); text-shadow: 0 0 30px rgba(255, 255, 255, .10); }
.logo-rider { color: var(--logo-accent); }

/* Larger in the footer, where it is the brand block rather than navigation. */
.footer-brand .logo { font-size: 26px; }
.footer-brand .logo-helmet { height: 42px; }

/* The tagline is a brand constant, never translated (see config.mjs). */
.tagline {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--logo-accent);
}
/* The motto as the hero heading. Smaller than a one-word headline would be —
   it is 27 characters, and at 72px it would wrap awkwardly on a laptop. */
.hero-motto {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: .06em;
  max-width: 18ch;
  margin-inline: auto;
  /* Warm white, not #fff. Pure white over a sunset frame reads as a screenshot
     pasted on top; a few degrees of warmth and the type belongs to the photo. */
  color: var(--text-warm);
  /* The photo has bright sky in it — the shadow keeps the type readable wherever
     the crop lands, without darkening the image further. */
  text-shadow: 0 2px 24px rgba(8, 4, 2, .55);
}

/* One word carries the colour, echoing the wordmark's MEGA/RIDER split — and
   set in exactly the orange RIDER uses, so the heading and the logo agree. */
.accent-word { color: var(--logo-accent); }

.hero-motto + .sub { margin-block-start: 22px; }

.site-nav { display: flex; gap: 22px; margin-inline-start: auto; }
.site-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 16px;
}
.site-nav a:hover { color: var(--text); }

.lang { display: flex; }

/* A disclosure widget, sized for a list that is meant to reach twenty entries.
   <details> is used rather than a scripted dropdown so the switcher survives
   with JS off — which matters here more than elsewhere, because someone who
   cannot read the current language has no other way out of the page. */
.lang-select { position: relative; }

.lang-select summary {
  display: flex;
  align-items: center;
  gap: 7px;
  /* ≥44px tall including padding. */
  padding: 11px 12px;
  border: 1px solid var(--border-n);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  color: var(--text-2);
  /* Language names are each written in their own script, so a webfont stack
     here would pull down the fonts of every writing system in the list. */
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.lang-select summary::-webkit-details-marker { display: none; }

/* Caret drawn in CSS rather than shipped as an icon or a glyph: one border
   triangle costs nothing and rotates on open. */
.lang-select summary::after {
  content: '';
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-block-start-color: currentColor;
  margin-block-start: 4px;
  transition: transform .15s;
}
.lang-select[open] summary::after { transform: rotate(180deg); margin-block: 0 4px; }

.lang-select summary:hover { color: var(--text); border-color: var(--border-on); }

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 60;
  display: grid;
  min-width: 100%;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-n);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  /* The list is expected to grow well past what fits on screen: cap it and
     scroll rather than letting it run off the viewport. */
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lang-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-2);
  font-size: 15px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.lang-menu a:hover { background: rgba(232, 75, 10, .16); color: var(--text); }
.lang-menu a.is-active { color: var(--logo-accent); }

/* Past roughly a dozen entries a single column becomes a long scroll; two
   columns keep it scannable without needing a search field yet. */
@media (min-width: 480px) {
  .lang-menu:has(a:nth-child(13)) { grid-template-columns: 1fr 1fr; }
}

/* In the footer the widget sits at the bottom of the page, so it opens upward. */
.lang-footer-select .lang-menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.burger, .lang-in-menu, .menu-close { display: none; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: var(--gap);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--bg-page);
}

/* The photo fills the band and is cropped by the viewport rather than letter-
   boxed — width and height are on the tag so it reserves its space and does not
   shift the layout while loading. */
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Everything that matters — the rider, the road's bend, the sun — sits right
     of centre. A 50% anchor would crop straight through it on a phone, leaving
     only the dark ridge on the left. */
  object-position: 58% 52%;
}

/* Two layers, and both far lighter than the stock photo needed. This frame
   arrives at 39/255 average luminance and already in the brand's palette, so
   heavy darkening would erase the sunset that makes it worth using. The radial
   only holds the type; the vertical pair seats the photo against the page.
   The warm wash is gone — the photograph supplies its own warmth. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(54% 48% at 50% 46%, rgba(10, 6, 4, .62) 0%, rgba(10, 6, 4, .40) 50%, rgba(10, 6, 4, .14) 80%, transparent 100%),
    linear-gradient(180deg, rgba(6, 8, 15, .68) 0%, transparent 22%, transparent 62%, rgba(6, 8, 15, .92) 100%);
}

.hero-inner { position: relative; text-align: center; }
.hero .sub {
  margin: 20px auto 0;
  max-width: 46ch;
  color: var(--text-warm-2);
  font-size: clamp(17px, 2.2vw, 21px);
  text-shadow: 0 1px 16px rgba(8, 4, 2, .6);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-block-start: 36px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 6vw, 64px);
  justify-content: center;
  margin-block-start: 48px;
}
.stats div { display: grid; gap: 2px; }
.stats b { font-family: var(--font-data); font-size: clamp(24px, 3.4vw, 32px); color: var(--logo-accent); }
.stats span { font-size: 14px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;           /* ≥44px touch target */
  padding-inline: 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  transition: background-color .15s, border-color .15s, filter .15s;
}
/* White on the brand orange measures 3.86:1 — short of the 4.5:1 AA needs for
   normal text. The accent colour is fixed by the brand, so the text is pushed
   into WCAG's "large text" class (≥18.66px bold), where the threshold is 3:1
   and 3.86 clears it. Shrinking this text later would silently break contrast. */
.btn-primary {
  background: var(--accent);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost {
  border: 1px solid var(--border-on);
  color: var(--text-warm);
  /* A tinted pane rather than clear glass: over the photo, a fully transparent
     button loses its label wherever the sky is bright behind it. */
  background: rgba(10, 6, 4, .42);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(232, 75, 10, .20); border-color: var(--logo-accent); }

/* Lifts the primary CTA off a photographic backdrop instead of letting it sit
   flat on the sunset it happens to match in hue. */
.hero .btn-primary { box-shadow: 0 8px 28px rgba(232, 75, 10, .38); }
.btn-disabled { border: 1px solid var(--border-n); color: var(--text-3); cursor: default; }
.btn-sm { min-height: 40px; padding-inline: 18px; font-size: 15px; }
.btn-lg { min-height: 56px; padding-inline: 40px; font-size: 19px; }

.link { color: var(--accent); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- manifesto */

/* ----------------------------------------------------------------- pillars */

.grid-3 { display: grid; gap: 20px; }
.grid-2 { display: grid; gap: 20px; }
@media (min-width: 760px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.pillar, .feature, .card {
  background: var(--bg-card);
  border: 1px solid var(--border-n);
  border-radius: var(--radius);
  padding: 24px;
}
.pillar p, .feature p, .card p { color: var(--text-2); margin-block-start: 8px; }

.pillar { border-block-start: 2px solid var(--accent); }

/* ---------------------------------------------------------------- platform */

.rows { display: grid; gap: clamp(40px, 7vw, 72px); }
.row { display: grid; gap: 24px; align-items: center; }
.row-text p { color: var(--text-2); margin-block: 10px 16px; }

@media (min-width: 900px) {
  .row { grid-template-columns: 1.1fr 1fr; }
  .row-flip .shot { order: 2; }
}

/* Placeholders until real screenshots arrive; swapping them in does not change
   the layout. */
.shot {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 1px solid var(--border-n);
  background:
    repeating-linear-gradient(135deg, rgba(232, 75, 10, .10) 0 12px, transparent 12px 24px),
    var(--bg-deep);
  position: relative;
}
.shot::after {
  content: attr(data-ph);
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 12px;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.shot-phone { aspect-ratio: 9 / 16; max-width: 300px; }

/* ------------------------------------------------------------------ safety */

.safety { background: var(--bg-deep); border-block: 1px solid var(--border); }
.safety-inner { display: grid; gap: 32px; align-items: center; }
.safety .lead { font-size: clamp(19px, 2.4vw, 23px); margin-block-start: 16px; }
.safety .muted { color: var(--text-2); margin-block-start: 14px; }
.safety .note {
  margin-block-start: 18px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--border-on);
  color: var(--text-3);
  font-size: 16px;
}
@media (min-width: 900px) { .safety-inner { grid-template-columns: 1.4fr 1fr; } }

/* ---------------------------------------------------- business & pricing --*/

.card .btn { margin-block-start: 18px; }
.hint { color: var(--text-3); font-size: 15px; margin-block-start: 12px; }
.hint.center { text-align: center; margin-block-start: 24px; }

.plan { text-align: center; }
.price {
  font-size: 28px;
  color: var(--logo-accent);
  margin-block: 10px;
}

/* ---------------------------------------------------------------- download */

.download { background: var(--bg-deep); border-block: 1px solid var(--border); }
.download-inner { display: grid; gap: 32px; align-items: center; justify-items: center; }
.bullets { margin: 20px 0 24px; padding-inline-start: 20px; color: var(--text-2); }
.bullets li { margin-block: 6px; }
.store { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .download-inner { grid-template-columns: 300px 1fr; justify-items: start; }
}

/* --------------------------------------------------------------------- faq */

.faq details {
  border-block-end: 1px solid var(--border-n);
  padding-block: 4px;
}
.faq summary {
  cursor: pointer;
  padding-block: 16px;
  font-size: 19px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--text-2); padding-block-end: 18px; max-width: 76ch; }

/* ------------------------------------------------------------------- final */

.final { text-align: center; }
.final h2 { margin-block-end: 28px; }
.final p { margin-block-start: 18px; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  background: rgba(6, 8, 15, .97);
  border-block-start: 1px solid var(--border);
  padding: 48px var(--pad) 24px;
}
.footer-cols {
  display: grid;
  gap: 32px;
  padding-inline: 0;
}
@media (min-width: 760px) {
  .footer-cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-cols nav { display: grid; gap: 10px; align-content: start; }
.footer-cols nav a { color: var(--text-2); text-decoration: none; font-size: 16px; }
.footer-cols nav a:hover { color: var(--text); }
.footer-brand .tagline { margin-block-start: 12px; }

.footer-bottom {
  max-width: var(--maxw);
  margin: 32px auto 0;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border-n);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.rights { color: var(--text-3); font-size: 14px; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 899px) {
  .burger {
    display: grid;
    gap: 5px;
    margin-inline-start: auto;
    padding: 14px 10px;  /* 44px tall including the three 2px bars and gaps */
    cursor: pointer;
    text-decoration: none;
  }
  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
  }

  .site-nav {
    position: fixed;
    inset: 56px 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background: var(--bg-page);
    border-block-end: 1px solid var(--border);
    transform: translateY(-120%);
    transition: transform .2s ease;
  }
  .site-nav a {
    padding: 16px var(--pad);
    border-block-end: 1px solid var(--border-n);
    font-size: 18px;
  }
  /* Opens with JS disabled and without depending on sibling order. */
  .site-nav:target { transform: translateY(0); }

  .menu-close {
    display: block;
    text-align: end;
    font-size: 28px;
    line-height: 1;
    padding: 16px var(--pad) !important;
    border-block-end: none !important;
  }

  /* The switcher does not fit beside a logo and a burger at 390px, so it moves
     into the menu rather than shrinking. */
  .lang-header, .header-cta { display: none; }
  .lang-in-menu {
    display: block;
    padding: 14px var(--pad);
  }
  /* Inside the burger panel there is nothing to overlay, and an absolutely
     positioned menu would spill past the panel's edge — so it expands in flow
     and pushes the panel taller instead. */
  .lang-in-menu .lang-menu {
    position: static;
    margin-block-start: 8px;
    max-height: 46vh;
  }
  .lang-in-menu summary { font-size: 17px; }

  .logo { font-size: 19px; }

  /* Full-width buttons: equal-width targets are easier to hit one-handed, and
     ragged button edges read as a layout bug on a narrow screen. */
  .cta { flex-direction: column; }
  .cta .btn, .store .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-tracks path { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------ notify */

/* Driven by :target so the dialog opens without JS — <dialog>.showModal() would
   leave a scripting-disabled visitor with a button that does nothing. */
.notify {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.notify:target { display: flex; }

/* A full-bleed link, so clicking outside closes the dialog the way people
   expect. Anchored to "#" rather than a page link: no navigation, just an
   empty target. */
.notify-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 2, .82);
  backdrop-filter: blur(4px);
}

.notify-box {
  position: relative;
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(24px, 5vw, 36px);
  background: var(--bg-card);
  border: 1px solid var(--border-on);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}

.notify-close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  /* ≥44px target, even though the glyph is small. */
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1;
  color: var(--text-3);
  text-decoration: none;
}
.notify-close:hover { color: var(--text); }

.notify h2 { font-size: clamp(24px, 4vw, 32px); }
.notify-body { margin-block: 14px 22px; color: var(--text-2); }

.notify-form { display: grid; gap: 16px; }

.notify-field { display: grid; gap: 7px; }
.notify-field span { font-size: 15px; color: var(--text-3); }
.notify-field input {
  min-height: 48px;
  padding-inline: 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-input, rgba(232, 75, 10, .40));
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
}
.notify-field input:focus { border-color: var(--logo-accent); outline: none; }
.notify-field input:user-invalid { border-color: var(--red, #ff3333); }

.notify-consent {
  display: flex;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  color: var(--text-2);
  cursor: pointer;
}
/* Never pre-ticked: a pre-ticked consent box is not consent under GDPR. */
.notify-consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  accent-color: var(--accent);
}
.notify-consent a { color: var(--logo-accent); }

/* Bait for bots, invisible to everyone else. Not display:none — some bots skip
   those; off-canvas with no tab stop is harder to detect. */
.notify-hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notify-status { font-size: 15px; min-height: 1.4em; }
.notify-status.is-ok { color: var(--teal); }
.notify-status.is-err { color: #ff6a4d; }
.notify-status a { color: var(--logo-accent); }

.notify-form.is-sent .notify-field,
.notify-form.is-sent .notify-consent,
.notify-form.is-sent button { display: none; }

/* ------------------------------------------------------------------- legal */

.legal { padding-block: clamp(40px, 7vw, 72px); }
.legal-doc {
  /* Reading measure, not the full grid: legal text is read line by line. */
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.legal-doc h1 { font-size: clamp(30px, 5vw, 44px); }
.legal-doc h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  text-transform: none;
  margin-block: 40px 12px;
}
.legal-doc h3 { font-size: 19px; margin-block: 28px 8px; }
.legal-doc p, .legal-doc li { color: var(--text-2); margin-block: 12px; }
.legal-doc ul, .legal-doc ol { padding-inline-start: 22px; }
.legal-doc a { color: var(--logo-accent); }
.legal-doc strong { color: var(--text); }

.legal-updated {
  color: var(--text-3);
  font-size: 15px;
  margin-block-start: 10px !important;
}

/* Wide content scrolls inside its own box rather than pushing the page. */
.table-wrap { overflow-x: auto; margin-block: 18px; }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.legal-doc th, .legal-doc td {
  text-align: start;
  padding: 10px 14px;
  border-block-end: 1px solid var(--border-n);
  vertical-align: top;
}
.legal-doc th { color: var(--text); white-space: nowrap; }
.legal-doc td { color: var(--text-2); }

/* Intro line under a section heading. Centred with the heading, and narrow
   enough to stay a readable measure rather than a full-width band. */
.section-lead {
  max-width: 60ch;
  margin: -24px auto 40px;
  padding-inline: var(--pad);
  text-align: center;
  color: var(--text-2);
  font-size: clamp(17px, 2vw, 19px);
}

/* ------------------------------------------------- tap targets on phones -- */

/* These are standalone calls to action, not links inside a sentence, so the
   44px rule applies to them. Measured on a phone: "Открыть" was 21px tall and
   the footer links 26px. Padding rather than a fixed height, so a wrapped label
   still grows the box instead of overflowing it. */
.row-text .link,
.final .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-cols nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The tighter gap compensates for the taller links, so the column does not
   suddenly read as double-spaced. */
.footer-cols nav { gap: 2px; }

.skip:focus { min-height: 44px; display: inline-flex; align-items: center; }

/* The header is sticky, so an anchor jump parks the section heading underneath
   it. Reserving the header's height plus a little air puts the heading back in
   view — visible on #faq, where "Вопросы" landed behind the bar. */
/* scroll-margin-top, not the logical variant: the logical property is not
   honoured everywhere yet, and here it silently resolved to 0. The value is the
   measured header height (79px) plus air. */
section[id] { scroll-margin-top: 96px; }

/* Smooth only when the visitor has not asked otherwise. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* -------------------------------------------------------------- tablets -- */

/* Between phone and laptop the page was behaving like a stretched phone: single
   column cards with a lot of empty margin, while the footer had already jumped
   to four cramped columns. Two columns in both places suits the width. */
@media (min-width: 600px) and (max-width: 899px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  /* Six feature cards split 2x3 evenly; three pillars leave one on its own
     row, so that one spans the full width rather than sitting half-empty. */
  .pillars .grid-3 > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 760px) and (max-width: 899px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================================== rhythm ==== */
/* The page read as one continuous stream: nothing told the eye where a topic
   started or ended. Four devices fix that, in order of how much work they do:
   an eyebrow that names the topic, alternating backgrounds, a divider borrowed
   from the app's loading screen, and heavier headings. */

/* --- 1. Eyebrow: names the topic before the heading states it ------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--maxw);
  margin: 0 auto 14px;
  padding-inline: var(--pad);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--logo-accent);
}
.eyebrow-num {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text-3);
}
/* A short rule between number and label — enough to read as a marker rather
   than as two stray words. */
.eyebrow-line {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--logo-accent), transparent);
  flex-shrink: 0;
}

/* Sections whose heading is centred keep the eyebrow centred with it. */
.pillars .eyebrow,
.features .eyebrow,
.business .eyebrow,
.pricing .eyebrow,
.faq .eyebrow { justify-content: center; }

/* --- 2. Alternating grounds ---------------------------------------------- */
/* Two tones, strictly alternating, so a scroll past a boundary is visible even
   without reading. */
.pillars, .download, .platform, .pricing { background: var(--bg-deep); }
.features, .safety, .business, .faq { background: var(--bg-page); }
.final { background: var(--bg-deep); }

/* --- 3. Divider ---------------------------------------------------------- */
/* The horizon line from the app's loading screen: bright in the middle, fading
   to nothing at the edges. Cheaper than a border and unmistakably ours. */
main > section + section::before {
  content: '';
  display: block;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 85, 0, .05) 8%,
    rgba(255, 85, 0, .42) 35%,
    rgba(255, 85, 0, .75) 50%,
    rgba(255, 85, 0, .42) 65%,
    rgba(255, 85, 0, .05) 92%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(255, 85, 0, .16);
}
main > section { position: relative; }

/* --- 4. Headings --------------------------------------------------------- */

section > h2 {
  margin-block-end: 16px;
  font-size: clamp(32px, 5.4vw, 52px);
}
/* The lead now sits under a heading that has its own bottom margin, so the old
   negative offset is gone. */
.section-lead { margin-block: 0 44px; }

/* Sections whose heading sits inside a two-column layout align left with it. */
.download .eyebrow, .safety .eyebrow { justify-content: flex-start; }

/* --- 5. Cards: visible edges, not floating rectangles --------------------- */

.pillar, .feature, .card {
  border-color: var(--border-n);
  transition: border-color .18s, transform .18s;
}
.pillar:hover, .feature:hover, .card:hover {
  border-color: var(--border-on);
  transform: translateY(-2px);
}
/* On the deep ground the cards need to be lighter than their surroundings, and
   on the page ground darker — otherwise one of the two disappears. */
.pillars .pillar { background: var(--bg-card); }
.features .feature { background: var(--bg-card); }

@media (prefers-reduced-motion: reduce) {
  .pillar:hover, .feature:hover, .card:hover { transform: none; }
}

/* The placeholders are empty elements sized by aspect-ratio, so they have no
   intrinsic width. Combined with the min-width:0 added for overflow safety and
   the centred grid in the download block, one of them collapsed to 2x4px. An
   explicit width gives them something to be. */
.shot { width: 100%; }
.shot-phone { width: min(300px, 100%); }

@media (max-width: 899px) {
  /* A 533px-tall placeholder pushed the heading and the install button below
     the fold — the visitor met a striped box instead of the offer. Text first,
     mockup after it and smaller. */
  .download-inner, .safety-inner { display: flex; flex-direction: column; }
  .download-inner > div:not(.shot), .safety-inner > div:not(.shot) { order: 1; }
  .download-inner .shot-phone, .safety-inner .shot-phone { order: 2; width: min(220px, 70%); }
}

/* ------------------------------------------------------- hero creed ------ */

.hero-creed {
  max-width: 54ch;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding-block-start: clamp(22px, 3vw, 30px);
  border-block-start: 1px solid rgba(255, 255, 255, .16);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.75;
  /* Lighter than the subtitle above: this is the quietest text in the hero,
     and it should read as an aside rather than as another sales line. */
  color: rgba(255, 244, 232, .82);
  text-shadow: 0 1px 14px rgba(8, 4, 2, .6);
  letter-spacing: .01em;
}

@media (max-width: 899px) {
  /* On a phone the buttons must stay reachable, so the creed gets less room
     above it and sits closer to the fold's edge. */
  .hero-creed { margin-block-start: 28px; padding-block-start: 18px; font-size: 15px; }
}

/* Eight feature cards, so four columns divide evenly where there is room. At
   three they left a single orphan on the last row, which reads as a card
   someone forgot to finish. */
@media (min-width: 1100px) {
  .features .grid-3 { grid-template-columns: repeat(4, 1fr); }
}