/* BaLogic – spoločné štýly všetkých stránok.
   Vizuálna téza: mapa rozvozu, na ktorej sa trasy samy zoradia. Navy nesie značku a akcie,
   tyrkysová patrí algoritmu, postupu a fokusu. Pohyb vysvetľuje poradie a stav: mapa sa poskladá,
   trasa sa nakreslí, zastávky sa rozsvietia, číslo sa dopočíta. Nič nebeží donekonečna a všetko
   rešpektuje prefers-reduced-motion. Písmo je v assets/fonts.css, logá referencií v assets/logos.css. */

:root {
  --bg: #F3F6F8;
  --bg-tint: #E9F0F4;
  --surface: #FFFFFF;
  --ink: #10243A;
  --muted: #52667A;
  --line: #D6DFE6;
  --line-strong: #C3CFD9;
  --navy: #15314E;
  --cyan: #03A9C9;
  --cyan-ink: #027A92;
  --cyan-wash: #E2F4F8;
  --tick-ink: #FFFFFF;
  --map: #E8EFF3;
  --street: #D9E3EA;
  --street-main: #CAD7E0;
  --alt-route: #8394A5;
  --user-route: #15314E;
  --stop-fill: #FFFFFF;
  --stop-ink: #15314E;
  --pie: #15314E;
  --depot-bg: #15314E;
  --depot-ink: #FFFFFF;
  --v1: #a85c00; --v1-ink: #FFFFFF;
  --v2: #97064f; --v2-ink: #FFFFFF;
  --v3: #138db1; --v3-ink: #0B1622;
  --v4: #4f30b9; --v4-ink: #FFFFFF;
  --band-bg: #15314E;
  --band-bg-deep: #0E2540;
  --band-ink: #EEF4F8;
  --band-muted: #AFC3D3;
  --band-line: #2D4D6E;
  --btn-bg: #15314E;
  --btn-ink: #FFFFFF;
  --btn-hover: #0C2034;
  --plate: #FFFFFF;
  --plate-ink: #52667A;
  --ref-ink: #6B7B8B;
  --cta-btn-bg: #FFFFFF;
  --cta-btn-ink: #10243A;
  --cta-btn-hover: #E8EFF3;
  --focus: #03A9C9;
  --danger: #B42318;
  --logo-ink: #15314E;
  --logo-accent: #03A9C9;
  --shadow-sm: 0 1px 2px rgb(16 36 58 / 6%), 0 8px 18px -12px rgb(16 36 58 / 22%);
  --shadow: 0 1px 2px rgb(16 36 58 / 6%), 0 18px 40px -18px rgb(16 36 58 / 28%);
  --shadow-lg: 0 2px 4px rgb(16 36 58 / 5%), 0 34px 70px -30px rgb(16 36 58 / 36%);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  /* Motion tokens: one ease for entrances, one for drawn lines; micro 180 ms, UI 240 ms, sections 800 ms. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-micro: .18s;
  --t-ui: .24s;
  --t-enter: .8s;
  --font: 'Overpass Web', 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-small: .875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-h3: 1.5rem;
  --fs-h2: clamp(1.9rem, 1.25rem + 2.2vw, 3rem);
  --fs-h1: clamp(2.4rem, 1.2rem + 3.6vw, 4.25rem);
  --wrap: 1180px;
  --wrap-wide: 1320px;
  --gutter: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1622; --bg-tint: #0E1C2B; --surface: #102030; --ink: #E5EEF5; --muted: #9DB1C3; --line: #22374B; --line-strong: #2E465D;
    --navy: #15314E; --cyan: #1FB9DB; --cyan-ink: #62CFE7; --cyan-wash: #0F2C3A; --tick-ink: #06121C;
    --map: #0E1C2B; --street: #172A3D; --street-main: #1E3449; --alt-route: #7489A0; --user-route: #E5EEF5;
    --stop-fill: #102030; --stop-ink: #E5EEF5; --pie: #E5EEF5;
    --depot-bg: #E5EEF5; --depot-ink: #0B1622;
    --v1: #d87a09; --v1-ink: #06121C; --v2: #c63170; --v2-ink: #FFFFFF; --v3: #0da4cf; --v3-ink: #06121C; --v4: #6e5bdd; --v4-ink: #FFFFFF;
    --band-bg: #122A42; --band-bg-deep: #0D2034; --band-ink: #EEF4F8; --band-muted: #A3B9CC; --band-line: #2B4A68;
    --btn-bg: #1FB9DB; --btn-ink: #06121C; --btn-hover: #56CBE6;
    --focus: #62CFE7; --danger: #FDA29B; --logo-ink: #EEF4F8; --logo-accent: #1FB9DB;
    --cta-btn-bg: #1FB9DB; --cta-btn-ink: #06121C; --cta-btn-hover: #56CBE6; --ref-ink: #8FA4B8;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 18px -12px rgb(0 0 0 / 55%);
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 18px 40px -18px rgb(0 0 0 / 60%);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 34px 70px -30px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1622; --bg-tint: #0E1C2B; --surface: #102030; --ink: #E5EEF5; --muted: #9DB1C3; --line: #22374B; --line-strong: #2E465D;
  --navy: #15314E; --cyan: #1FB9DB; --cyan-ink: #62CFE7; --cyan-wash: #0F2C3A; --tick-ink: #06121C;
  --map: #0E1C2B; --street: #172A3D; --street-main: #1E3449; --alt-route: #7489A0; --user-route: #E5EEF5;
  --stop-fill: #102030; --stop-ink: #E5EEF5; --pie: #E5EEF5;
  --depot-bg: #E5EEF5; --depot-ink: #0B1622;
  --v1: #d87a09; --v1-ink: #06121C; --v2: #c63170; --v2-ink: #FFFFFF; --v3: #0da4cf; --v3-ink: #06121C; --v4: #6e5bdd; --v4-ink: #FFFFFF;
  --band-bg: #122A42; --band-bg-deep: #0D2034; --band-ink: #EEF4F8; --band-muted: #A3B9CC; --band-line: #2B4A68;
  --btn-bg: #1FB9DB; --btn-ink: #06121C; --btn-hover: #56CBE6;
  --focus: #62CFE7; --danger: #FDA29B; --logo-ink: #EEF4F8; --logo-accent: #1FB9DB;
  --cta-btn-bg: #1FB9DB; --cta-btn-ink: #06121C; --cta-btn-hover: #56CBE6; --ref-ink: #8FA4B8;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 18px -12px rgb(0 0 0 / 55%);
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 18px 40px -18px rgb(0 0 0 / 60%);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 34px 70px -30px rgb(0 0 0 / 70%);
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
main { overflow-x: clip; } /* folded 3D windows reach past the edge; clip (unlike hidden) keeps sticky working */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--cyan-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
sup { font-size: .62em; line-height: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.wrap-wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* Motion system.
   [data-reveal] fades and rises once when it enters the viewport; [data-inview] only receives .is-in
   so a component can choreograph its own beats. Hiding happens only under .js, which a head script sets
   and removes again if assets/site.js never starts, so content is never stuck invisible. */
.js [data-reveal] {
  opacity: 0; translate: 0 var(--reveal-y, 22px);
  transition: opacity var(--t-enter) var(--ease-out), translate var(--t-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger, 70ms) + var(--delay, 0ms));
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.js [data-word-reveal]:not(.is-ready) { opacity: 0; }
.wr-word {
  display: inline-block; opacity: 0; transform: translate3d(0, .32em, 0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--w) * 70ms + var(--wr-delay, 0ms));
}
[data-word-reveal].is-visible .wr-word { opacity: 1; transform: none; }

/* 3D windows.
   The page behaves like a sheet of paper in a pop-up book: [data-window] panels lie folded in it and
   unfold towards the reader while they scroll in, then fold back while they leave at the top.
   site.js writes --e (enter, 0→1) and --x (exit, 0→1) from the scroll position. .has-3d exists only
   while that engine runs, so without JavaScript or with reduced motion every window is simply flat.
   The variants share one transform and differ in the hinge and the distances:
   pop (default) stands up from its bottom edge, hang unfolds downwards from a route line,
   rise lifts a large block out of depth and swing opens a side panel like a casement window. */
.window { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.has-3d [data-window] {
  --e: 0; --x: 0;
  --k: calc(1 - var(--e));
  transform-origin: var(--wo, 50% 100%);
  transform:
    perspective(var(--wp, 1000px))
    translate3d(calc(var(--k) * var(--wx, 0px)), calc(var(--k) * var(--wy, 34px)), calc(var(--k) * var(--wz, -60px) + var(--x) * var(--xz, 0px)))
    rotateX(calc(var(--k) * var(--wrx, 80deg) + var(--x) * var(--xrx, 46deg)))
    rotateY(calc(var(--k) * var(--wry, 0deg)));
  opacity: calc(min(1, var(--e) * 2.2) * (1 - var(--x) * .6));
  backface-visibility: hidden;
}
.has-3d [data-window].is-moving { will-change: transform, opacity; }
.has-3d [data-window].is-flat, .has-3d [data-window]:focus-within, .has-3d :focus-visible [data-window] { transform: none; opacity: 1; }
.has-3d :is(.role-card, .step-body)[data-window] { --wo: 50% 0%; --wp: 900px; --wy: -10px; --wz: -40px; --wrx: -84deg; --xrx: -40deg; }
.has-3d :is(.offer-card, .cta-card, .faq)[data-window] { --wo: 50% 40%; --wp: 1800px; --wy: 140px; --wz: -320px; --wrx: 26deg; --xz: -180px; --xrx: 12deg; }
.has-3d :is(.number-card, .lead-form, .plate, .fit-check, .panel, .roi)[data-window] { --wo: 100% 50%; --wp: 1500px; --wx: 70px; --wy: 0px; --wz: -140px; --wrx: 0deg; --wry: -64deg; --xz: -80px; --xrx: 10deg; }
.has-3d .ref-logos > [data-window] { --wp: 420px; --wy: 16px; --wz: -16px; }

/* Stacked windows: each card sticks under the header a little lower than the one before it, the next
   card slides over it and the covered card recedes into the page (--s from site.js). Cards are made
   equally tall so a short card never leaves the edge of a longer one sticking out below it. */
.window-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(18px, 2.5vw, 26px); }
.stack-card { min-width: 0; }
@media (min-height: 620px) {
  .has-3d .window-stack::after { content: ""; height: 12vh; } /* sticky cards stay inside the content box: this keeps the full stack in view a moment longer */
  .has-3d .stack-card { position: sticky; top: calc(var(--hdr-h-compact) + 18px + var(--n, 0) * 16px); }
  .has-3d .stack-card > .window {
    min-height: var(--stack-min, 0px);
    transform-origin: 50% 0;
    transform: perspective(1400px) translate3d(0, 0, calc(var(--s, 0) * -120px)) rotateX(calc(var(--s, 0) * -6deg));
  }
  .has-3d .stack-card > .window::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: var(--bg); opacity: calc(var(--s, 0) * .6);
  }
  .has-3d .stack-card.is-covered > .window { will-change: transform; }
}

/* The game card lies back like a map on a table and stands up once, on load */
.js .game-stage[data-reveal] {
  transform: perspective(2000px) rotateX(24deg) translateZ(-60px);
  transform-origin: 50% 100%;
  transition: opacity var(--t-enter) var(--ease-out), translate var(--t-enter) var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js .game-stage[data-reveal].is-in { transform: none; }

/* Page transitions between the home page and the detail pages (supported browsers only). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.vt-rinkai { view-transition-name: vt-rinkai; }
.vt-algo { view-transition-name: vt-algo; }
.vt-analyza { view-transition-name: vt-analyza; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: .22s ease-in both vt-fade-out; }
::view-transition-new(root) { animation: .45s var(--ease-out) both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; translate: 0 14px; } }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 3px 22px 0; border-radius: 12px; border: 2px solid transparent;
  font: 700 1rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-micro) ease, border-color var(--t-micro) ease, color var(--t-micro) ease, opacity var(--t-micro) ease, box-shadow var(--t-ui) ease, transform var(--t-micro) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; margin-top: -3px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); box-shadow: 0 10px 22px -12px rgb(16 36 58 / 55%); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-text { background: transparent; color: var(--cyan-ink); padding-inline: 8px; min-height: 40px; }
.btn-text:hover { text-decoration: underline; transform: none; }
.btn-light { background: var(--cta-btn-bg); color: var(--cta-btn-ink); }
.btn-light:hover { background: var(--cta-btn-hover); }
.btn-ghost-light { background: transparent; color: var(--band-ink); border-color: var(--band-line); }
.btn-ghost-light:hover { border-color: var(--band-ink); }
.btn-sm { min-height: 42px; padding: 3px 15px 0; font-size: .9375rem; border-radius: 10px; }
.btn-block { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn-primary:disabled:hover { background: var(--btn-bg); }

.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 800; text-decoration: none; padding-top: 2px;
}
.link-more span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size var(--t-ui) var(--ease-out);
}
.link-more svg { width: 20px; height: 20px; margin-top: -3px; flex: none; color: var(--cyan-ink); transition: transform var(--t-ui) var(--ease-out); }
.link-more:hover span { background-size: 100% 2px; }
.link-more:hover svg { transform: translateX(4px); }
.link-more-light { color: var(--band-ink); }
.link-more-light svg { color: var(--cyan); }

/* Header: fixed; large logo with the slogan at the top of the page, compact once the page scrolls */
:root { --hdr-h: 124px; --hdr-h-compact: 76px; --logo-h: 80px; --logo-h-compact: 46px; }
@media (max-width: 1180px) { :root { --hdr-h: 112px; --logo-h: 70px; } }
@media (max-width: 560px) { :root { --hdr-h: 94px; --hdr-h-compact: 62px; --logo-h: 52px; --logo-h-compact: 36px; } }
html { scroll-padding-top: calc(var(--hdr-h-compact) + 16px); }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-spacer { height: var(--hdr-h); }
.header-inner { position: relative; display: flex; align-items: center; gap: 26px; height: var(--hdr-h); transition: height .25s ease; }
.site-header.scrolled .header-inner { height: var(--hdr-h-compact); }
.brand { display: inline-flex; flex: none; border-radius: 8px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.brand-lockup { display: grid; justify-items: start; }
.brand-logo { display: block; height: var(--logo-h); width: auto; aspect-ratio: 955 / 381; overflow: visible; transition: height .25s ease; }
.site-header.scrolled .brand-logo { height: var(--logo-h-compact); }
.brand-slogan {
  margin-top: 5px; max-height: 1.3em; overflow: hidden;
  font-size: .9rem; font-weight: 700; line-height: 1.15; letter-spacing: .005em; color: var(--muted); white-space: nowrap;
  transition: max-height .25s ease, margin-top .25s ease, opacity .2s ease;
}
.site-header.scrolled .brand-slogan { max-height: 0; margin-top: 0; opacity: 0; }
.brand-mark { transform-box: fill-box; transform-origin: 50% 50%; }
.brand-mark.spin { animation: brand-spin .9s var(--ease-io); }
@keyframes brand-spin { to { transform: rotate(360deg); } }
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-nav a {
  position: relative; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9688rem; padding-block: 8px 5px; white-space: nowrap;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-ui) var(--ease-out);
}
.site-nav a:hover { color: var(--cyan-ink); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--cyan-ink); }
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border-radius: 10px; flex: none;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; margin: 0 auto; position: relative; transition: transform .2s ease, background-color .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.read-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .read-progress { animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}
@media (max-width: 1180px) {
  .header-inner { gap: 12px; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px max(var(--gutter), env(safe-area-inset-right, 0px)) 14px max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--surface); border-block: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .site-nav.open {
    display: flex; opacity: 1; transform: none;
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
  }
  @starting-style { .site-nav.open { opacity: 0; transform: translateY(-8px); } }
  .site-nav a { padding: 15px 0 12px; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .site-nav a::after { display: none; }
  .site-nav a:last-child { border-bottom: 0; }
  .header-actions { margin-left: auto; }
  .nav-toggle { display: inline-grid; place-items: center; }
}
@media (max-width: 560px) {
  .header-inner { gap: 10px; }
  .brand-slogan { margin-top: 4px; font-size: .75rem; }
  .site-header:not(.scrolled) .header-cta { display: none; }
  .header-cta { padding-inline: 12px; font-size: .875rem; }
}

/* Map-paper backdrop shared by the home hero and the detail-page heroes */
.hero, .page-hero { position: relative; isolation: isolate; }
.hero-map {
  position: absolute; inset: 0 0 auto; height: clamp(380px, 52vw, 620px); z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(var(--bg-tint), var(--bg));
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .5; }
.hero-map .st { stroke: var(--street); stroke-width: 5; stroke-linecap: round; fill: none; }
.hero-map .st-main { stroke: var(--street-main); stroke-width: 12; }

/* Home hero with the game */
.hero { padding-block: clamp(26px, 4vw, 56px) clamp(36px, 4vw, 56px); }
.hero-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(24px, 3vw, 38px); }
.hero-head > * { min-width: 0; }
.partner-badge {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 5px 16px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-sm); transition: border-color var(--t-micro) ease, transform var(--t-micro) var(--ease-out);
}
.partner-badge:hover { border-color: var(--ink); transform: translateY(-1px); }
.partner-badge svg { width: 30px; height: 30px; flex: none; }
.partner-badge span { padding-top: 2px; }
.hero h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.04em; margin-top: 22px; }
.hero-intro { display: grid; gap: 16px; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 34em; }
.howto { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; counter-reset: howto; font-weight: 600; font-size: .9688rem; }
.howto li { counter-increment: howto; display: flex; align-items: center; gap: 8px; }
.howto li::before {
  content: counter(howto); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px solid var(--ink); font-size: .75rem; font-weight: 800; padding-top: 2px;
}
@media (max-width: 960px) { .hero-head { grid-template-columns: minmax(0, 1fr); } }

/* Game card */
.game {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "fleet" "map" "side" "facts";
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(12px, 1.6vw, 22px);
}
@media (min-width: 1000px) {
  .game { grid-template-columns: minmax(0, 1fr) minmax(340px, 470px); grid-template-rows: auto auto 1fr; grid-template-areas: "map fleet" "map side" "map facts"; column-gap: 24px; row-gap: 18px; }
  .facts { align-self: end; }
}
@media (max-width: 560px) {
  .game {
    border-radius: 0; border-inline: 0; box-shadow: none; padding-inline: 0; padding-block: 16px;
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
  }
  .game-fleet, .game-side, .facts, .map-legend { margin-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .map { border-radius: 0; }
}
.game-map { grid-area: map; min-width: 0; display: grid; gap: 10px; align-content: start; }
.game-fleet { grid-area: fleet; min-width: 0; }
.game-side { grid-area: side; min-width: 0; display: grid; gap: 16px; align-content: start; }
.facts { grid-area: facts; min-width: 0; }

.map-box { width: min(100%, calc(100vh - 150px)); width: min(100%, calc(100svh - 150px)); margin-inline: auto; display: grid; gap: 10px; }
.map { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--map); touch-action: manipulation; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.streets line { stroke: var(--street); stroke-width: 5; stroke-linecap: round; }
.streets line.main { stroke: var(--street-main); stroke-width: 10; }
.rt { fill: none; stroke-width: 3.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rt-0 { stroke: var(--v1); } .rt-1 { stroke: var(--v2); } .rt-2 { stroke: var(--v3); } .rt-3 { stroke: var(--v4); }
.rt.is-active { stroke-width: 5px; }
.rt-back.is-open { stroke-dasharray: 2 7; stroke-width: 2.5px; }
.ghost { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; opacity: .55; }
.stops { position: absolute; inset: 0; }
.stop, .depot { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; }
.stop {
  --q: 1; --vc: var(--ink); --vi: var(--surface);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--stop-ink); color: var(--stop-ink);
  background: conic-gradient(var(--pie) calc(var(--q) * 25%), var(--stop-fill) 0);
  font: 800 .78rem/1 var(--font); font-variant-numeric: tabular-nums;
  transition: transform .12s ease, background-color var(--t-micro) ease, border-color var(--t-micro) ease;
}
.stop span { padding-top: 2px; }
.stop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.stop[data-v="0"] { --vc: var(--v1); --vi: var(--v1-ink); }
.stop[data-v="1"] { --vc: var(--v2); --vi: var(--v2-ink); }
.stop[data-v="2"] { --vc: var(--v3); --vi: var(--v3-ink); }
.stop[data-v="3"] { --vc: var(--v4); --vi: var(--v4-ink); }
.stop.on { background: var(--vc); border-color: var(--vc); color: var(--vi); }
.stop.last { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--vc); }
.game:not(.is-playing) .stop { cursor: default; }
.game.is-playing .stop:hover { transform: translate(-50%, -50%) scale(1.14); }
.stop.nope { animation: nope .32s ease; }
@keyframes nope { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-62%, -50%); } 75% { transform: translate(-38%, -50%); } }
.depot { width: 34px; height: 34px; border-radius: 8px; background: var(--depot-bg); color: var(--depot-ink); z-index: 1; }
.depot svg { width: 21px; height: 21px; }
.depot-label {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font: 700 .6875rem/1.2 var(--font); color: var(--ink); background: var(--surface); padding: 2px 6px 1px; border-radius: 5px; white-space: nowrap;
}
/* A new assignment assembles itself: streets are drawn, the warehouse appears and the stops pop in
   by distance from it, so the eye lands on the depot first and reads the task outwards. */
.map.is-intro .streets line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: street-draw 1s var(--ease-out) var(--intro-delay, 0s) forwards; }
.map.is-intro .streets line:nth-child(odd) { animation-delay: calc(var(--intro-delay, 0s) + .08s); }
.map.is-intro .streets line.main { animation-duration: 1.2s; }
.map.is-intro .depot { animation: depot-in .5s var(--ease-out) calc(var(--intro-delay, 0s) + .2s) backwards; }
.map.is-intro .stop { animation: stop-in .5s var(--ease-out) backwards; animation-delay: calc(var(--intro-delay, 0s) + .35s + var(--d, 0) * 26ms); }
@keyframes street-draw { to { stroke-dashoffset: 0; } }
@keyframes depot-in { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
@keyframes stop-in { from { transform: translate(-50%, -50%) scale(0); opacity: 0; } }
.map-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: .8125rem; color: var(--muted); padding-inline: 2px; }
.legend-pies { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.legend-pies span { display: inline-flex; align-items: center; gap: 5px; }
.mini-pie { --q: 1; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--stop-ink); background: conic-gradient(var(--pie) calc(var(--q) * 25%), var(--stop-fill) 0); flex: none; }
@media (max-width: 560px) {
  .stop { width: 25px; height: 25px; font-size: .6875rem; border-width: 1.5px; }
  .stop.last { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--vc); }
  .depot { width: 28px; height: 28px; }
  .depot svg { width: 17px; height: 17px; }
}

/* Fleet */
.fleet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.veh {
  --vc: var(--v1); min-width: 0; display: grid; gap: 7px; text-align: left; cursor: pointer;
  padding: 11px 12px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; transition: border-color var(--t-micro) ease, background-color var(--t-micro) ease, transform var(--t-micro) var(--ease-out);
}
.veh[data-k="1"] { --vc: var(--v2); } .veh[data-k="2"] { --vc: var(--v3); } .veh[data-k="3"] { --vc: var(--v4); }
.veh:hover { border-color: color-mix(in srgb, var(--vc) 55%, var(--line)); transform: translateY(-1px); }
.veh[aria-checked="true"] { border-color: var(--vc); background: color-mix(in srgb, var(--vc) 9%, var(--surface)); }
.veh:disabled { cursor: default; }
.veh:disabled:hover { border-color: var(--line); transform: none; }
.veh-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.veh-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--vc); flex: none; margin-top: -2px; }
.veh-cap { font-weight: 800; font-size: 1rem; line-height: 1.2; white-space: nowrap; }
.veh-km { font-weight: 700; font-size: .8125rem; color: var(--ink); white-space: nowrap; }
.veh-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.veh-name { font-size: .8125rem; color: var(--muted); line-height: 1.2; margin-top: -3px; }
.veh-bar {
  --cap: 4; --load: 0; position: relative; height: 9px; width: calc(var(--cap) / 16 * 100%); border-radius: 3px; overflow: hidden;
  background: var(--line);
}
.veh-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--load) / var(--cap) * 100%); background: var(--vc); border-radius: 3px 0 0 3px; transition: width .25s var(--ease-out); }
.veh-bar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cap) - 2px), var(--surface) calc(100% / var(--cap) - 2px) calc(100% / var(--cap)));
}
.veh-load { font-size: .8125rem; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 560px) { .veh { padding: 9px 10px 8px; gap: 6px; } .veh-name { display: none; } .fleet { gap: 8px; } }

/* Side: play panel */
.score { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 10px; padding: 12px 14px 10px; border-radius: 12px; background: var(--bg); }
.score div { display: grid; gap: 2px; min-width: 0; }
.score span { font-size: .8125rem; color: var(--muted); }
.score strong { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.game-status { min-height: 4.8em; font-size: .9688rem; line-height: 1.5; }
.game-status strong { font-weight: 800; }
.play-actions { display: grid; gap: 10px; }
.play-actions .row { display: flex; flex-wrap: wrap; gap: 8px; }
.play-actions .row .btn-ghost { flex: 1 1 0; }
.progress { height: 6px; border-radius: 3px; background: var(--map); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--cyan); }

/* Side: result panel */
.result { display: grid; gap: 16px; animation: panel-in .5s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; translate: 0 10px; } }
.verdict { display: grid; gap: 6px; }
.verdict h3 { font-size: 1.625rem; }
.verdict p { color: var(--muted); }
.replay { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 8px 14px; border-radius: 10px; background: var(--bg); font-size: .875rem; }
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 7.6em minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .875rem; }
.bar-row > span:first-child { line-height: 1.2; }
.bar-track { height: 12px; min-width: 0; }
.bar-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: 0 4px 4px 0; background: var(--alt-route); transition: width .35s var(--ease-out); }
.bar-row[data-b="you"] .bar-track i { background: var(--user-route); }
.bar-row[data-b="algo"] .bar-track i { background: var(--cyan); }
.bar-row strong { font-weight: 800; white-space: nowrap; }
.views { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: var(--bg); }
.views button {
  flex: 1 1 auto; min-height: 38px; padding: 3px 10px 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font: 700 .84rem/1.15 var(--font); cursor: pointer; transition: background-color var(--t-micro) ease, color var(--t-micro) ease;
}
.views button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.insights { list-style: none; padding: 0; display: grid; gap: 10px; font-size: .9375rem; line-height: 1.5; }
.insights li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; animation: panel-in .45s var(--ease-out) backwards; }
.insights li:nth-child(2) { animation-delay: .08s; }
.insights li:nth-child(3) { animation-delay: .16s; }
.insights li:nth-child(4) { animation-delay: .24s; }
.insights li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-top: .5em; }
.result-cta { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--band-bg); color: var(--band-ink); }
.result-cta p { font-weight: 700; line-height: 1.4; }
.result-cta .btn-primary { background: var(--cta-btn-bg); color: var(--cta-btn-ink); }
.result-cta .btn-primary:hover { background: var(--cta-btn-hover); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result-actions .btn { flex: 1 1 0; }

/* Facts */
.facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 14px 16px 16px; border-radius: 14px; background: var(--bg); }
.facts ol { grid-column: 1 / -1; grid-row: 2; list-style: none; padding: 0; margin: 0; }
.facts-label { font-weight: 800; font-size: 1rem; white-space: nowrap; }
.facts li { font-size: .9688rem; line-height: 1.5; max-width: 62em; animation: fact-in .4s var(--ease-out); }
@keyframes fact-in { from { opacity: 0; translate: 6px 0; } }
.facts-nav { display: flex; align-items: center; gap: 6px; }
.facts-nav button {
  width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color var(--t-micro) ease;
}
.facts-nav button:hover { border-color: var(--ink); }
.facts-nav svg { width: 16px; height: 16px; }
.facts-count { min-width: 3.4em; text-align: center; font-size: .8125rem; color: var(--muted); }

/* Sections */
.section { padding-block: clamp(72px, 9vw, 128px); }
.section-tight { padding-block: clamp(24px, 4vw, 48px); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 47rem; display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head-split { max-width: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; column-gap: clamp(28px, 6vw, 88px); }
.section h2 { font-size: var(--fs-h2); }
.section-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.sub-head { display: grid; gap: 10px; max-width: 44rem; margin-bottom: 26px; }
.sub-head h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); }
.sub-head p { color: var(--muted); }
@media (max-width: 860px) { .section-head-split { grid-template-columns: minmax(0, 1fr); } }

/* Home: references directly under the game */
.trust { padding-block: clamp(20px, 3vw, 36px) clamp(56px, 7vw, 96px); }
.trust-inner { display: grid; gap: 26px; justify-items: center; }
.trust-label { font-weight: 700; color: var(--muted); font-size: .9688rem; text-align: center; }
.ref-logos { --s: 1; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 36px; max-width: 100%; }
.ref-logos li { display: flex; }
.ref-logos a { display: flex; transition: transform var(--t-ui) var(--ease-out); }
.ref-logos a:hover { transform: translateY(-3px); }
.ref-logos a .ref-logo { transition: background-color var(--t-micro) ease; }
.ref-logos a:hover .ref-logo, .ref-logos a:focus-visible .ref-logo { background: var(--ink); }
.ref-logo {
  display: block; flex: none; width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); max-width: 100%;
  background: var(--ref-ink);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
@media (max-width: 860px) { .ref-logos { --s: .78; gap: 22px 34px; } }
@media (max-width: 520px) { .ref-logos { --s: .6; gap: 18px 26px; } }

/* Home: what Rinkai does, as a route through the four people it serves */
.role-route { --mark: 34px; --seg: .42s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.role-route li { position: relative; min-width: 0; }
/* One segment per stop, from its marker to the next one; the cyan fill runs segment after segment. */
.role-route li:not(:last-child)::before, .role-route li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--mark) / 2); top: calc(var(--mark) / 2 - 1.5px); width: 100%; height: 3px;
}
.role-route li:not(:last-child)::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px); }
.role-route li:not(:last-child)::after {
  background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--seg) linear; transition-delay: calc(.15s + var(--i, 0) * var(--seg));
}
.role-route.is-in li::after { transform: scaleX(1); }
.role-link { display: grid; gap: 16px; align-content: start; height: 100%; padding: 0 16px 6px 0; color: inherit; text-decoration: none; border-radius: 14px; }
.role-card {
  display: grid; gap: 6px; align-content: start; padding: 18px 18px 16px;
  transition: translate var(--t-ui) var(--ease-out), border-color var(--t-micro) ease, box-shadow var(--t-ui) ease;
}
.role-link:hover .role-card { translate: 0 -4px; border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.role-marker {
  position: relative; z-index: 1; width: var(--mark); height: var(--mark); border-radius: 50%;
  background: var(--surface); border: 3px solid var(--navy); display: grid; place-items: center;
  transition: background-color .35s ease, border-color .35s ease, transform var(--t-ui) var(--ease-out);
  transition-delay: calc(.15s + var(--i, 0) * var(--seg)), calc(.15s + var(--i, 0) * var(--seg)), 0s;
}
.role-marker::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); transition: background-color .35s ease; transition-delay: inherit; }
.role-route.is-in .role-marker { border-color: var(--cyan); }
.role-route.is-in .role-marker::after { background: var(--cyan); }
.role-who { font-size: .9375rem; font-weight: 700; color: var(--cyan-ink); }
.role-title { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.45rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.role-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .9375rem; font-weight: 700; color: var(--muted); transition: color var(--t-micro) ease; }
.role-go svg { width: 18px; height: 18px; margin-top: -2px; transition: transform var(--t-ui) var(--ease-out); }
.role-link:hover .role-marker { transform: scale(1.12); }
.role-link:hover .role-go { color: var(--cyan-ink); }
.role-link:hover .role-go svg { transform: translateX(4px); }
.role-link:hover .role-title { color: var(--cyan-ink); }
@media (max-width: 860px) {
  .role-route { --gap: 26px; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
  .role-route li:not(:last-child)::before, .role-route li:not(:last-child)::after { left: calc(var(--mark) / 2 - 1.5px); top: calc(var(--mark) / 2); width: 3px; height: calc(100% + var(--gap)); }
  .role-route li:not(:last-child)::before { background: repeating-linear-gradient(180deg, var(--line-strong) 0 8px, transparent 8px 16px); }
  .role-route li:not(:last-child)::after { transform: scaleY(0); transform-origin: 50% 0; }
  .role-route.is-in li::after { transform: scaleY(1); }
  .role-link { grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: 18px; padding-right: 0; }
}
.brief-foot { margin-top: clamp(44px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; }
.brief-foot > div { flex: 1 1 520px; max-width: 800px; }
.brief-label { font-weight: 800; margin-bottom: 14px; }
.sectors { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sectors li { padding: 9px 15px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-weight: 600; font-size: .9688rem; }

/* Home: the offer, in one dark contrast block */
.offer-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: clamp(30px, 4vw, 46px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--band-bg), var(--band-bg-deep));
  color: var(--band-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), var(--shadow-lg);
}
#ponuka { padding-block: clamp(48px, 6vw, 88px); }
.offer-head { display: grid; gap: 14px; max-width: 46rem; }
.offer-head h2 { color: var(--band-ink); font-size: var(--fs-h2); }
.offer-head p { color: var(--band-muted); font-size: var(--fs-lead); line-height: 1.5; }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.offer-actions .link-more { margin-left: auto; }
@media (max-width: 760px) { .offer-actions .link-more { margin-left: 0; } }

/* Numbered steps joined by a route; the line is drawn and every stop lights up as it is reached */
.steps { --gap: clamp(24px, 3.5vw, 48px); --mark: 46px; --seg: .62s; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.step { position: relative; min-width: 0; display: grid; gap: 12px; align-content: start; }
.step:not(:last-child)::before, .step:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--mark) / 2 - 2px); left: calc(var(--mark) / 2); width: calc(100% + var(--gap)); height: 4px;
}
.step:not(:last-child)::before { background: var(--line); }
.step:not(:last-child)::after {
  background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--seg) linear; transition-delay: calc(.2s + var(--i, 0) * var(--seg));
}
.js .steps.is-in .step::after, .no-js .steps .step::after { transform: scaleX(1); }
.step-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.step-body.window { padding: 20px 20px 18px; }
.section-alt .step-body.window { background: var(--bg); }
.step h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.5rem); }
.step p { color: var(--muted); max-width: 30em; }
.step-marker {
  position: relative; z-index: 1; width: var(--mark, 46px); height: var(--mark, 46px); border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 4px solid var(--cyan);
  font-weight: 800; font-size: 1.0625rem; padding-top: 3px; color: var(--ink);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.steps .step-marker { border-color: var(--line-strong); transition-delay: calc(.2s + var(--i, 0) * var(--seg)); }
.js .steps.is-in .step-marker, .no-js .steps .step-marker { border-color: var(--cyan); }
.js .steps.is-in .step:last-child .step-marker, .no-js .steps .step:last-child .step-marker { background: var(--cyan); color: var(--tick-ink); }
.steps-dark .step:not(:last-child)::before { background: var(--band-line); }
.steps-dark .step h3 { color: var(--band-ink); }
.steps-dark .step p { color: var(--band-muted); }
.steps-dark .step-marker { background: var(--band-bg); color: var(--band-ink); border-color: var(--band-line); }
.steps-dark .step-body.window { background: rgb(255 255 255 / 5%); border-color: var(--band-line); box-shadow: 0 22px 40px -26px rgb(0 0 0 / 60%); }
@media (max-width: 860px) {
  .steps { --gap: 30px; grid-template-columns: minmax(0, 1fr); }
  .step:not(:last-child)::before, .step:not(:last-child)::after { top: calc(var(--mark) / 2); left: calc(var(--mark) / 2 - 2px); width: 4px; height: calc(100% + var(--gap)); }
  .step:not(:last-child)::after { transform: scaleY(0); transform-origin: 50% 0; }
  .js .steps.is-in .step::after, .no-js .steps .step::after { transform: scaleY(1); }
  .step { grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
}

/* Home: teaser for the algorithm page */
.teaser-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.teaser-grid > * { min-width: 0; }
.teaser-copy { display: grid; gap: 20px; }
.teaser-copy h2 { font-size: var(--fs-h2); }
.teaser-links { list-style: none; padding: 0; display: grid; justify-items: start; gap: 14px; margin-top: 8px; }
.number-card {
  display: grid; gap: 14px; padding: clamp(24px, 3.6vw, 44px);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.number-card-label { font-weight: 800; font-size: var(--fs-lead); }
.number-card .num-20 { font-size: clamp(1.7rem, .8rem + 3.2vw, 3.2rem); }
.number-card-note { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.number-card-note strong { color: var(--ink); }
@media (max-width: 960px) { .teaser-grid { grid-template-columns: minmax(0, 1fr); } }

/* Detail pages */
.page-hero { padding-block: clamp(30px, 5vw, 72px) clamp(40px, 5vw, 72px); }
:where(.page-section) h2 { font-size: var(--fs-h2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; color: var(--muted); }
.crumbs a { color: var(--ink); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crumbs a svg { width: 16px; height: 16px; margin-top: -2px; transform: rotate(180deg); transition: transform var(--t-ui) var(--ease-out); }
.crumbs a:hover { color: var(--cyan-ink); }
.crumbs a:hover svg { transform: rotate(180deg) translateX(3px); }
.page-hero h1 { margin-top: 18px; max-width: 18em; font-size: clamp(2.2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -0.035em; }
.page-hero .section-lead { margin-top: 20px; max-width: 40em; }
.toc { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.toc a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: .9375rem; text-decoration: none;
  transition: border-color var(--t-micro) ease, transform var(--t-micro) var(--ease-out);
}
.toc a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cyan); flex: none; margin-top: -2px; }
.toc a:hover { border-color: var(--ink); transform: translateY(-1px); }
.page-section { padding-block: clamp(56px, 7vw, 104px); }
.page-hero + .page-section { padding-top: clamp(12px, 2vw, 28px); }
.page-section + .page-section { border-top: 1px solid var(--line); }
.page-section.section-alt + .page-section, .page-section + .page-section.section-alt { border-top: 0; }

/* Algorithm page: 20 vs 200 */
.scale-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); border-top: 2px solid var(--ink); }
.scale { min-width: 0; display: grid; gap: 16px; align-content: start; padding-block: 30px 8px; }
.scale-small { padding-right: clamp(24px, 4vw, 56px); }
.scale-big { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); }
.scale-title { font-size: var(--fs-lead); }
.scale p { max-width: 38em; }
.num-20 {
  display: block; font-size: clamp(1.5rem, 0.85rem + 2.5vw, 2.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--ink); text-wrap: balance;
}
.num-caption { font-weight: 700; }
.digit-wall {
  padding: 16px 18px 14px; border-radius: 12px; background: var(--map);
  font-size: .8125rem; line-height: 1.5; letter-spacing: .03em; font-variant-numeric: tabular-nums;
  color: var(--muted); overflow-wrap: anywhere;
}
.digit-wall.is-ready span { opacity: .12; transition: opacity .5s ease; transition-delay: calc(var(--i, 0) * 9ms); }
.digit-wall.is-ready.is-in span { opacity: 1; }
.scale .digit-wall { max-width: none; }
.footnote { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 860px) {
  .scale-grid { grid-template-columns: minmax(0, 1fr); }
  .scale-small { padding-right: 0; padding-bottom: 36px; }
  .scale-big { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
.algo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.algo-grid > * { min-width: 0; }
.algo-grid h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: 20px; }
.methods { display: grid; gap: 14px; }
.methods p { max-width: 38em; }
@media (max-width: 860px) { .algo-grid { grid-template-columns: minmax(0, 1fr); } }

/* Vertical rails: a base line, a progress line driven by scroll, and stops that light up when passed */
[data-rail] { position: relative; }
[data-rail]::before, [data-rail]::after {
  content: ""; position: absolute; left: var(--rail-x); top: var(--rail-top, 0); height: var(--rail-h, 0); width: 4px; margin-left: -2px; border-radius: 2px;
}
[data-rail]::before { background: var(--line); }
[data-rail]::after { background: var(--cyan); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.no-js [data-rail]::after { transform: none; }

.timeline { --rail-x: 7px; list-style: none; padding: 0; display: grid; }
.timeline li { position: relative; display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 14px; padding: 0 0 22px 36px; font-size: .9688rem; line-height: 1.5; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: .28em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--line-strong); transition: background-color .3s ease, border-color .3s ease;
}
.timeline li.is-reached::before, .no-js .timeline li::before { background: var(--cyan); border-color: var(--cyan); }
.timeline b { align-self: start; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cyan-ink); }

/* Rinkai page: roles as a stack of windows, onboarding, who it is for, why BaLogic */
.role { min-width: 0; display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3.5vw, 40px); scroll-margin-top: calc(var(--hdr-h-compact) + 18px); }
.role-who { display: flex; align-items: center; gap: 10px; }
.role .role-who::before { content: ""; width: 12px; height: 12px; flex: none; margin-top: -2px; border-radius: 50%; border: 3px solid var(--cyan); }
.role h2 { font-size: var(--fs-h3); }
.role p:last-child { color: var(--muted); max-width: 46em; }
.role:target { animation: target-flash 1.6s ease; }
@keyframes target-flash { 0%, 40% { background: var(--cyan-wash); } }
.onboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px clamp(36px, 6vw, 88px); align-items: start; }
.onboard > * { min-width: 0; }
.onboard h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); }
.onboard-head { display: grid; gap: 12px; }
.onboard-head p { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.days { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.day { display: grid; gap: 8px; align-content: start; padding: 18px 18px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.day b { font-size: 1.125rem; font-weight: 800; }
.day p { color: var(--muted); }
.app-help { grid-column: 1 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.app-help li { display: grid; gap: 4px; padding-top: 14px; border-top: 3px solid var(--cyan); }
.app-help strong { font-weight: 800; }
.app-help span { color: var(--muted); }
@media (max-width: 860px) {
  .onboard { grid-template-columns: minmax(0, 1fr); }
  .app-help { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) { .days { grid-template-columns: minmax(0, 1fr); } }
.fit-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.fit-grid > * { min-width: 0; }
.fit-grid h2 { margin-bottom: 18px; }
.fit-grid .sectors { margin-top: 30px; }
.fit-grid .sectors li { background: var(--surface); }
.fit-check { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); }
.fit-check h3 { font-size: var(--fs-h3); }
.fit-check .ticks { margin-top: 20px; }
@media (max-width: 860px) { .fit-grid { grid-template-columns: minmax(0, 1fr); } }
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.about-grid > * { min-width: 0; }
.about-grid h2 { margin-bottom: 18px; }
.facts-list { display: grid; gap: 22px; margin-top: 34px; }
.facts-list div { display: grid; gap: 4px; }
.facts-list dt { font-weight: 800; font-size: var(--fs-lead); }
.facts-list dd { color: var(--muted); max-width: 32em; }
.plate {
  display: grid; gap: 24px; justify-items: center; text-align: center;
  padding: clamp(30px, 5vw, 60px) clamp(22px, 4vw, 48px); border-radius: 20px; background: var(--plate); border: 1px solid var(--line);
}
.plate-logo { display: block; width: min(230px, 72%); transition: transform var(--t-ui) var(--ease-out); }
.plate-logo:hover { transform: scale(1.03); }
.plate svg { display: block; width: 100%; height: auto; aspect-ratio: 304 / 297; }
.plate figcaption { color: var(--plate-ink); font-size: .9375rem; max-width: 24em; }
@media (max-width: 860px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* Analysis page */
.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.analysis-grid > * { min-width: 0; }
.vsteps { --rail-x: 23px; list-style: none; padding: 0; display: grid; gap: 26px; }
.vstep { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; }
.vstep .step-marker { grid-row: span 2; border-color: var(--line-strong); }
.vstep.is-reached .step-marker, .no-js .vstep .step-marker { border-color: var(--cyan); }
.vstep:last-child.is-reached .step-marker, .no-js .vstep:last-child .step-marker { background: var(--cyan); color: var(--tick-ink); }
.vstep h3 { font-size: 1.25rem; margin-top: 10px; }
.vstep p { color: var(--muted); max-width: 34em; }
.panels { display: grid; gap: 16px; position: sticky; top: calc(var(--hdr-h-compact) + 24px); }
.panel { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 14px; }
.panel h3 { font-size: 1.25rem; }
.roi { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-md); background: var(--band-bg); color: var(--band-ink); display: grid; gap: 8px; }
.roi strong { font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.roi p { color: var(--band-muted); }
@media (max-width: 860px) { .analysis-grid { grid-template-columns: minmax(0, 1fr); } .panels { position: static; } }
.terms {
  margin-top: clamp(32px, 4vw, 48px); max-width: 52rem; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .9688rem; color: var(--muted);
}
.terms strong { color: var(--ink); }
.terms-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-size: .8125rem; font-weight: 800; color: var(--muted); margin-top: 1px; padding-top: 2px; }
.after-steps { margin-top: 32px; }

/* End of every detail page: the next topics and the call to action */
.next-title { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); margin-bottom: 22px; }
.next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.next-grid > * { display: grid; min-width: 0; }
.next-card {
  display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) ease, border-color var(--t-micro) ease;
}
.next-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.next-kicker { font-size: .875rem; font-weight: 700; color: var(--cyan-ink); }
.next-card strong { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.next-card p { color: var(--muted); }
.next-card .link-more { margin-top: 6px; }
.next-card:hover .link-more span { background-size: 100% 2px; }
.next-card:hover .link-more svg { transform: translateX(4px); }
@media (max-width: 760px) { .next-grid { grid-template-columns: minmax(0, 1fr); } }
.cta-card {
  margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px;
  padding: clamp(26px, 4vw, 52px); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--band-bg), var(--band-bg-deep)); color: var(--band-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), var(--shadow-lg);
}
.cta-card h2 { color: var(--band-ink); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
.cta-card p { color: var(--band-muted); margin-top: 10px; max-width: 36em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .cta-card { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-grid > * { min-width: 0; }
.faq-intro { display: grid; gap: 16px; }
.faq-intro p { color: var(--muted); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 21px 44px 17px 0;
  font-weight: 700; font-size: 1.1875rem; line-height: 1.35; transition: color var(--t-micro) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--cyan-ink); border-bottom: 2.5px solid var(--cyan-ink);
  transform: translateY(-75%) rotate(45deg); transition: transform var(--t-ui) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: var(--cyan-ink); }
.faq .answer { padding-bottom: 22px; color: var(--muted); max-width: 42em; }
@supports selector(::details-content) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .38s var(--ease-out), content-visibility .38s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* Contact band */
.contact { background: linear-gradient(170deg, var(--band-bg), var(--band-bg-deep)); color: var(--band-ink); border: 0; }
.contact h2 { color: var(--band-ink); }
.contact .section-lead { color: var(--band-muted); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.contact-grid > * { min-width: 0; }
.contact-copy { display: grid; gap: 18px; }
.contact-items { display: grid; gap: 12px; margin-top: 18px; }
.contact-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px;
  padding: 15px 16px 13px 18px; border: 1px solid var(--band-line); border-radius: 13px;
  transition: border-color var(--t-micro) ease, background-color var(--t-micro) ease;
}
.contact-item:hover { border-color: color-mix(in srgb, var(--band-ink) 45%, var(--band-line)); background: rgb(255 255 255 / 3%); }
.ci-label { grid-column: 1 / -1; font-size: .8125rem; color: var(--band-muted); }
.ci-value { color: var(--band-ink); text-decoration: none; font-size: clamp(1.125rem, .95rem + .8vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ci-value:hover { text-decoration: underline; }
.copy-btn {
  min-height: 38px; padding: 3px 13px 0; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--band-line); background: transparent; color: var(--band-ink); font: 700 .8125rem/1 var(--font);
  transition: border-color var(--t-micro) ease;
}
.copy-btn:hover { border-color: var(--band-ink); }
.contact-addr { font-size: .9375rem; color: var(--band-muted); }
.lead-form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 34px); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.lead-form h3 { font-size: var(--fs-h3); }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 700; font-size: .9375rem; }
.field label small { font-weight: 500; color: var(--muted); font-size: inherit; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 13px 14px 11px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: 400 1rem/1.4 var(--font);
  transition: border-color var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent); }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-note { font-size: .8438rem; color: var(--muted); }
.form-result { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .9375rem; }
.form-result textarea { width: 100%; min-height: 150px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 .875rem/1.45 var(--font); }
.form-result .btn { justify-self: start; }
@media (max-width: 520px) { .row-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* E-mail gate after the first game (assets/game.js): the first game is free, the next attempts need an e-mail */
.lead-gate, .lead-best {
  display: grid; gap: 12px; padding: 16px; border-radius: 14px;
  border: 1.5px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 6%, var(--surface));
  animation: panel-in .5s var(--ease-out);
}
.lead-gate-title { font-weight: 800; font-size: 1.0625rem; line-height: 1.35; }
.lead-gate .row-2 { gap: 12px; }
.lead-gate .field input, .lead-gate .field select { background: var(--surface); }
.lead-gate .field input[aria-invalid="true"] { border-color: var(--danger); }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9063rem; line-height: 1.45; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--danger); font-weight: 700; font-size: .9063rem; }
.lead-best-who { font-size: .9375rem; line-height: 1.5; }
.btn-inline { padding: 0; border: 0; background: none; color: var(--cyan-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-inline:hover { text-decoration-thickness: 2px; }
.lead-gate-done { padding: 14px 16px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); font-weight: 700; line-height: 1.45; animation: panel-in .5s var(--ease-out); }

/* Cookie consent (assets/consent.js): "Odmietnuť" and "Súhlasím" carry the same weight on purpose */
.consent {
  position: fixed; z-index: 70; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100% - 32px)); display: grid; gap: 10px; padding: 18px 18px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  opacity: 0; translate: 0 16px; transition: opacity var(--t-ui) var(--ease-out), translate var(--t-ui) var(--ease-out);
}
.consent.is-open { opacity: 1; translate: 0 0; }
.consent-title { font-weight: 800; }
.consent-text { font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.consent-state { font-size: .875rem; font-weight: 700; }
.consent-actions { display: flex; gap: 10px; margin-top: 4px; }
.consent-actions .btn { flex: 1 1 0; }
@media (max-width: 560px) {
  .consent {
    left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--r-md) var(--r-md) 0 0; border-inline: 0; border-bottom: 0;
    padding: 16px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
}

/* Footer */
.site-footer { padding-block: 56px 40px; background: var(--bg); color: var(--muted); font-size: .9375rem; border-top: 1px solid var(--line); }
.contact + .site-footer, main:has(> .contact:last-child) + .site-footer { border-top: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.footer-grid > * { min-width: 0; display: grid; gap: 10px; align-content: start; }
.footer-brand svg { height: 44px; width: auto; aspect-ratio: 955 / 381; }
.slogan { font-weight: 700; color: var(--ink); }
.site-footer strong { color: var(--ink); }
.footer-links { display: grid; gap: 6px; }
.footer-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--cyan-ink); text-decoration: underline; }
.footer-links button { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink); font: 600 .9375rem/1.6 var(--font); text-align: left; cursor: pointer; }
.footer-links button:hover { color: var(--cyan-ink); text-decoration: underline; }
.privacy { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 18px; }
.privacy summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.privacy-body { display: grid; gap: 10px; margin-top: 14px; max-width: 52em; }
.copyright { margin-top: 26px; font-size: .875rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Reduced motion: every animated component shows its finished state at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; translate: none; }
  .js [data-word-reveal]:not(.is-ready), .wr-word { opacity: 1; transform: none; }
  .role-route li::after, .js .steps .step::after { transform: none; }
  .role-route .role-marker { border-color: var(--cyan); }
  .role-route .role-marker::after { background: var(--cyan); }
  .js .steps .step-marker { border-color: var(--cyan); }
  .js .steps .step:last-child .step-marker { background: var(--cyan); color: var(--tick-ink); }
  [data-rail]::after { transform: none; }
  .digit-wall.is-ready span { opacity: 1; }
  .js .game-stage[data-reveal] { transform: none; }
  @view-transition { navigation: none; }
}
@media print {
  .js [data-reveal], .wr-word { opacity: 1 !important; translate: none !important; transform: none !important; }
  .has-3d [data-window], .has-3d .stack-card > .window { opacity: 1 !important; transform: none !important; }
  .has-3d .stack-card { position: static !important; }
  .site-header { position: static; }
  .header-spacer, .nav-toggle, .read-progress { display: none; }
}