@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext.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;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin.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;
}

:root {
  --bg-solid: #f2f0e8;
  --bg-soft: #e9e6da;
  --paper: #fdfcf7;
  --paper-deep: #f0ede3;
  --ink: #0c1f1a;
  --ink-2: #45564f;
  --muted: #5e6f68;
  --accent: #14654f;
  --accent-2: #1f8367;
  --action-bg: #14654f;
  --action-hover: #1f8367;
  --brand-surface: #14654f;
  --accent-ink: #ffffff;
  --deep: #0f4c3b;
  --accent-soft: rgba(20, 101, 79, .1);
  --accent-rule: rgba(20, 101, 79, .22);
  --gold-2: #c2a268;
  --gold-3: #dfc894;
  --gold-text: #7c6021;
  --brand-mark: #14654f;
  --mark-band: #c2a268;
  --cash-light: #8fdcc0;
  --cash-mid: #2f9e7a;
  --cash-deep: #0f4c3b;
  --glass-light: #ffffff;
  --glass-shadow: #14654f;
  --vessel-shadow: #0c1f1a;
  --warn: #a8710c;
  --warn-soft: rgba(217, 144, 28, .14);
  --warn-rule: rgba(217, 144, 28, .34);
  --bad: #b8402c;
  --bad-soft: rgba(200, 69, 47, .14);
  --bad-rule: rgba(200, 69, 47, .34);
  --rule: rgba(12, 31, 26, .11);
  --rule-strong: rgba(12, 31, 26, .2);
  --on-brand: #ffffff;
  --on-brand-2: #cbe9dd;
  --shadow-card: 0 26px 58px -34px rgba(12, 31, 26, .44);
  --shadow-button: 0 14px 30px -18px rgba(20, 101, 79, .72);
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: min(1180px, calc(100% - 48px));
  --radius: 16px;
  --radius-large: 30px;
  --pill: 999px;
  color-scheme: light dark;
}

:root[data-theme="dark"] {
  --bg-solid: #0a1a14;
  --bg-soft: #0e2419;
  --paper: #122720;
  --paper-deep: #0e211a;
  --ink: #e9f1ec;
  --ink-2: #a6b8b0;
  --muted: #92a69d;
  --accent: #3fa184;
  --accent-2: #63c0a2;
  --action-bg: #216c58;
  --action-hover: #2a7a65;
  --brand-surface: #0f4c3b;
  --deep: #7fd3b6;
  --accent-soft: rgba(63, 161, 132, .16);
  --accent-rule: rgba(63, 161, 132, .32);
  --gold-2: #d9bc85;
  --gold-3: #ebd7ac;
  --gold-text: #dcc08a;
  --brand-mark: #3fa184;
  --cash-light: #9de7cc;
  --cash-mid: #4fbf9a;
  --cash-deep: #14654f;
  --glass-light: #dff8ef;
  --glass-shadow: #06110d;
  --vessel-shadow: #000000;
  --warn: #e0ae4e;
  --warn-soft: rgba(224, 174, 78, .16);
  --warn-rule: rgba(224, 174, 78, .36);
  --bad: #e8705a;
  --bad-soft: rgba(232, 112, 90, .16);
  --bad-rule: rgba(232, 112, 90, .36);
  --rule: rgba(170, 225, 205, .12);
  --rule-strong: rgba(170, 225, 205, .22);
  --on-brand: #e9f1ec;
  --on-brand-2: #a9d8c5;
  --shadow-card: 0 30px 64px -34px rgba(0, 0, 0, .74);
  --shadow-button: 0 16px 32px -20px rgba(0, 0, 0, .8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-solid: #0a1a14;
    --bg-soft: #0e2419;
    --paper: #122720;
    --paper-deep: #0e211a;
    --ink: #e9f1ec;
    --ink-2: #a6b8b0;
    --muted: #92a69d;
    --accent: #3fa184;
    --accent-2: #63c0a2;
    --action-bg: #216c58;
    --action-hover: #2a7a65;
    --brand-surface: #0f4c3b;
    --deep: #7fd3b6;
    --accent-soft: rgba(63, 161, 132, .16);
    --accent-rule: rgba(63, 161, 132, .32);
    --gold-2: #d9bc85;
    --gold-3: #ebd7ac;
    --gold-text: #dcc08a;
    --brand-mark: #3fa184;
    --cash-light: #9de7cc;
    --cash-mid: #4fbf9a;
    --cash-deep: #14654f;
    --glass-light: #dff8ef;
    --glass-shadow: #06110d;
    --vessel-shadow: #000000;
    --rule: rgba(170, 225, 205, .12);
    --rule-strong: rgba(170, 225, 205, .22);
    --on-brand: #e9f1ec;
    --on-brand-2: #a9d8c5;
    --shadow-card: 0 30px 64px -34px rgba(0, 0, 0, .74);
    --shadow-button: 0 16px 32px -20px rgba(0, 0, 0, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(80% 48% at 95% 5%, rgba(194, 162, 104, .17), transparent 70%),
    radial-gradient(66% 42% at 0 26%, rgba(20, 101, 79, .09), transparent 72%),
    var(--bg-solid);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--on-brand); background: var(--accent); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-solid); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 3px solid var(--bg-solid); border-radius: var(--pill); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 4px; }
img, svg { display: block; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.shell { width: var(--shell); margin-inline: auto; }
.section {
  position: relative;
  padding: clamp(96px, 11vw, 164px) 0;
  /* Telefony přijíždějí ze stran a během cesty přesahují mřížku. Bez zaříznutí
     jde stránka v tu chvíli posunout do strany. `clip` na rozdíl od `hidden`
     nevytváří scroll kontejner, takže sticky v jiné sekci drží. */
  overflow-x: clip;
}
.svg-library { position: absolute; pointer-events: none; }

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 11px 16px;
  border-radius: var(--pill);
  color: var(--on-brand);
  background: var(--accent);
  transform: translateY(-180%);
}

.skip:focus { transform: translateY(0); }

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-solid) 88%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(18px) saturate(120%);
}

.top-inner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand svg { width: 34px; height: 34px; color: var(--brand-mark); }
.brand span { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.top-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.top-nav a { color: var(--ink-2); font-size: 14px; font-weight: 650; text-decoration: none; }
.top-nav a:hover { color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.langs { display: inline-flex; padding-right: 6px; border-right: 1px solid var(--rule); }
.langs button { border: 0; padding: 8px 5px; color: var(--muted); background: transparent; font: 700 11px/1 var(--font); cursor: pointer; }
.langs button[aria-pressed="true"] { color: var(--accent); }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 19px;
  border: 0;
  border-radius: var(--pill);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.button svg { width: 19px; height: 19px; }
.button-primary { color: var(--accent-ink); background: var(--action-bg); box-shadow: var(--shadow-button); }
.button-primary:hover { background: var(--action-hover); transform: translateY(-1px); }
.button-quiet { color: var(--ink); background: transparent; }
.button-quiet:hover { background: var(--accent-soft); }
.button-large { min-height: 54px; padding-inline: 25px; font-size: 16px; }
.button-light { color: #0c1f1a; background: #fdfcf7; box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .52); }
.button-light:hover { background: #ffffff; transform: translateY(-1px); }

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 108px 0 72px;
  isolation: isolate;
  /* Zlatá koule v ::before přesahuje o 17 % doprava a rozšiřovala dokument
     o 218 px, takže celá stránka šla posunout do strany. `clip` na rozdíl od
     `hidden` nevytváří scroll kontejner, takže sticky v jiných sekcích drží. */
  overflow-x: clip;
}

.hero::before {
  content: "";
  position: absolute;
  width: min(68vw, 900px);
  aspect-ratio: 1;
  top: -35%;
  right: -17%;
  z-index: -1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold-3) 24%, transparent);
  filter: blur(3px);
}

.hero-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr); align-items: center; gap: clamp(24px, 5vw, 76px); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 28px; transform: translate3d(0, var(--hero-copy-y, 0), 0); }
.hero h1 { max-width: 10.8ch; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: .96; letter-spacing: -.04em; font-weight: 650; }
.hero h1 span { display: block; color: var(--accent); }
.hero-lead { max-width: 570px; margin-top: 28px; color: var(--ink-2); font-size: clamp(1.06rem, 1.55vw, 1.25rem); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin-top: 31px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--deep); font-weight: 700; text-decoration: none; }
.text-link svg { width: 20px; height: 20px; transition: transform 180ms ease; }
.text-link:hover svg { transform: translateX(4px); }
.hero-proof { margin-top: 18px; color: var(--muted); font-size: 13px; font-weight: 650; }
.hero-visual { position: relative; min-height: min(70vh, 680px); display: grid; place-items: center; }
.hero-visual .phone { position: relative; z-index: 2; }
.hero-halo { position: absolute; z-index: 0; width: 76%; aspect-ratio: 1; border-radius: 50%; background: rgba(20, 101, 79, .08); box-shadow: inset 0 0 0 1px var(--accent-rule); transform: scale(var(--hero-halo-scale, 1)) rotate(var(--hero-halo-rot, 0deg)); }
.hero-halo::before, .hero-halo::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--accent-rule); }
.hero-halo::before { inset: -11%; }
.hero-halo::after { inset: -23%; opacity: .54; }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; transform: translateX(-50%); }
.scroll-cue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.is-motion-active .hero-copy, .is-motion-active .hero-halo,
.is-motion-active .meaning-item, .is-motion-active .phone, .is-motion-active .flow-step-copy,
.is-motion-active .plan,
.is-motion-active .benefit, .is-motion-active .closing-halo,
.is-motion-active .control-row { will-change: transform, opacity, filter, clip-path; }

.about { background: var(--paper); border-block: 1px solid var(--rule); }
.about-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: clamp(40px, 8vw, 110px); align-items: end; }
.about-intro h2 { max-width: 18ch; font-size: clamp(2.55rem, 5vw, 4.7rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 620; }
.about-intro p { max-width: 48ch; color: var(--ink-2); font-size: 18px; }
.meaning-map { display: grid; grid-template-columns: 1fr 72px 1fr 72px 1fr; align-items: start; margin-top: clamp(70px, 9vw, 118px); }
.meaning-item { min-width: 0; padding-top: 24px; border-top: 1px solid var(--rule-strong); }
.motion-ready .meaning-item { opacity: var(--item-opacity, 1); filter: blur(var(--item-blur, 0)); transform: translate3d(0, var(--item-y, 0), 0); }
.icon-token { width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 50%; }
.icon-token svg { width: 23px; height: 23px; }
.meaning-item h3 { margin-top: 22px; font-size: 21px; line-height: 1.16; letter-spacing: -.02em; }
.meaning-item p { max-width: 34ch; margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.meaning-arrow { display: flex; align-items: center; margin: 45px 10px 0; color: var(--gold-text); }
.meaning-arrow span { width: 100%; border-top: 1px solid var(--gold-2); }
.motion-ready .meaning-arrow span { transform: scaleX(var(--arrow-scale, 1)); transform-origin: left center; }
.motion-ready .meaning-arrow svg { opacity: var(--arrow-opacity, 1); transform: translateX(var(--arrow-x, 0)); }
.meaning-arrow svg { flex: 0 0 18px; width: 18px; height: 18px; margin-left: -6px; }
.product-line { display: flex; justify-content: space-between; gap: 20px; margin-top: 90px; padding-top: 28px; border-top: 1px solid var(--rule); color: var(--muted); font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.product-line strong { color: var(--accent); font-weight: 650; }

.flow { overflow: clip; background: var(--bg-solid); }
.flow-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.flow-head h2 { max-width: 13ch; font-size: clamp(2.75rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.038em; font-weight: 620; }
.flow-head p { max-width: 38ch; padding-bottom: 7px; color: var(--ink-2); font-size: 18px; }
.flow-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; list-style: none;
}
.flow-step { display: flex; flex-direction: column; gap: 26px; }
/* Menší než jinde: vedle sebe jsou tři a k tomu popis, takže se celý krok
   musí vejít do jednoho pohledu. */
.flow-step .phone { width: min(232px, 100%); }
.motion-ready .flow-step .flow-step-copy {
  opacity: var(--step-opacity, 1);
  transform: translate3d(0, var(--step-y, 0), 0);
}
.flow-step-copy { display: grid; grid-template-columns: 36px 1fr; gap: 8px 16px; align-items: center; }
.step-number {
  grid-row: span 2; align-self: start;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  color: var(--on-brand); background: var(--accent);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.flow-step-copy h3 { font-size: 19px; line-height: 1.22; letter-spacing: -.018em; }
.flow-step-copy p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.flow-note {
  margin: clamp(30px, 4vw, 48px) 0 0; padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 13px; font-weight: 650;
}

.budget-story {
  position: relative;
  overflow-x: clip;
  height: 310vh;
  color: var(--on-brand);
  background:
    radial-gradient(70% 60% at 76% 48%, rgba(143, 220, 192, .13), transparent 70%),
    var(--brand-surface);
}

.budget-pin {
  position: sticky;
  top: 76px;
  min-height: calc(100svh - 76px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.budget-pin::before {
  content: "";
  position: absolute;
  width: min(68vw, 880px);
  aspect-ratio: 1;
  right: -22%;
  top: -22%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 0 0 120px rgba(255, 255, 255, .025), 0 0 0 240px rgba(255, 255, 255, .02);
  transform: scale(var(--budget-halo-scale, 1));
}

.budget-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .86fr) minmax(430px, 1.14fr); align-items: center; gap: clamp(44px, 8vw, 120px); }
.budget-copy h2 { max-width: 11ch; font-size: clamp(2.8rem, 5.5vw, 5rem); line-height: .98; letter-spacing: -.038em; font-weight: 620; }
.budget-copy > p { max-width: 48ch; margin-top: 24px; color: var(--on-brand-2); font-size: 18px; }
.budget-events { margin: 44px 0 0; padding: 0; list-style: none; }
.budget-events li { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 14px; min-height: 48px; color: var(--on-brand-2); }
.budget-events li span { width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--gold-3); transform: scale(.72); transition: background-color 180ms ease, transform 180ms ease; }
.budget-events li strong { font-size: 15px; font-weight: 650; }
.budget-events li.active { color: var(--on-brand); }
.budget-events li.active span { background: var(--gold-3); transform: scale(1); }
.budget-visual { position: relative; min-height: min(72vh, 690px); display: grid; place-items: center; }

/* ==========================================================================
   TELEFON SE SKUTEČNOU OBRAZOVKOU
   Jedna komponenta pro celou stránku. Uvnitř je snímek z demo účtu, ne
   překreslené rozhraní — návštěvník má vidět přesně to, co po přihlášení
   dostane. Poměr 390/844 odpovídá snímkům (780×1688, tedy 2×).
   ========================================================================== */
.phone {
  position: relative;
  width: min(340px, 100%);
  margin: 0 auto;
  padding: 12px;
  border-radius: 38px;
  background: #e7e4d9;
  box-shadow:
    0 42px 74px -30px rgba(0, 0, 0, .52),
    inset 0 0 0 1px rgba(255, 255, 255, .5);
  transform: translate3d(var(--phone-x, 0), var(--phone-y, 0), 0) rotate(var(--phone-rot, 0deg));
  opacity: var(--phone-opacity, 1);
}
/* Sluchátko. Kreslí se jako proužek, ne jako výřez — výřez by na snímku
   obrazovky ukousl kus skutečného rozhraní. */
.phone::before {
  content: "";
  position: absolute; top: 6px; left: 50%;
  width: 72px; height: 4px; border-radius: var(--pill);
  background: rgba(12, 31, 26, .16);
  transform: translateX(-50%);
}
.phone-screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 28px;
  background: var(--bg-solid);
}
.phone-screen img { display: block; width: 100%; height: auto; }
.phone-note {
  /* U spodní hrany, ne v ploše obrazovky: uvnitř přístroje překrýval spodní
     lištu appky, což je právě ta část, kterou má návštěvník vidět. */
  position: absolute; right: -22px; bottom: -16px;
  padding: 9px 14px; border-radius: var(--pill);
  color: #0c1f1a; background: #fdfcf7;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .46);
  font-size: 12px; font-weight: 700;
  transform: rotate(2.2deg);
}

/* Hero má telefon největší, sticky kapitola o kus menší, aby vedle něj zbylo
   místo na text. */
.phone-hero {
  width: min(304px, 78%);
  animation: phone-enter 980ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes phone-enter {
  from { translate: 96px 20px; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}
.phone-big { width: min(330px, 100%); }

/* Sekvence obrazovek v jednom přístroji: snímky leží přes sebe a scroll
   přepíná krytí. Výchozí (bez JS) je první z nich. */
.phone[data-screens] .phone-screen > .phone-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0;
}
.phone[data-screens] .phone-screen > .phone-frame.is-on { opacity: 1; }
.motion-ready .phone[data-screens] .phone-screen > .phone-frame {
  transition: opacity 260ms ease;
}

.inside { color: var(--on-brand); background: var(--brand-surface); overflow: hidden; }
.inside::after { content: ""; position: absolute; width: 580px; aspect-ratio: 1; right: -180px; bottom: -360px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 0 0 110px rgba(255, 255, 255, .025), 0 0 0 220px rgba(255, 255, 255, .025); }
.inside-layout { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(70px, 10vw, 150px); }
.inside-copy { position: relative; z-index: 2; }
.inside-copy h2 { max-width: 11ch; font-size: clamp(2.85rem, 5.5vw, 5rem); line-height: .98; letter-spacing: -.038em; font-weight: 620; }
.inside-lead { max-width: 48ch; margin-top: 24px; color: var(--on-brand-2); font-size: 18px; }
.control-path { margin-top: 45px; }
.control-row { display: flex; align-items: center; gap: 18px; }
.motion-ready .control-row { opacity: var(--control-opacity, 1); transform: translate3d(var(--control-x, 0), 0, 0); }
.control-icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: #fdfcf7; }
.control-icon svg { width: 24px; height: 24px; }
.control-row strong { display: block; font-size: 18px; line-height: 1.2; }
.control-row small { display: block; margin-top: 4px; color: var(--on-brand-2); font-size: 14px; }
.control-arrow { width: 48px; height: 56px; margin: 4px 0 4px 25px; fill: none; stroke: var(--gold-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.motion-ready .control-arrow path { stroke-dasharray: 90; stroke-dashoffset: var(--control-dash, 0); }

.benefits { background: var(--paper); }
.benefits-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 90px); align-items: center; }
.benefits-head h2 { max-width: 19ch; font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1; letter-spacing: -.036em; font-weight: 620; }
.benefits-lead { max-width: 44ch; margin-top: 20px; color: var(--ink-2); font-size: 17px; }
.benefits-head .phone { width: min(250px, 100%); }
.benefit-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; margin-top: 72px; }
.benefit { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 46px); border-radius: var(--radius); background: var(--paper-deep); }
.benefit:nth-child(2), .benefit:nth-child(3) { background: var(--bg-solid); }
.benefit-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--paper); box-shadow: var(--shadow-card); }
.benefit-icon svg { width: 22px; height: 22px; }
.benefit h3 { max-width: 18ch; font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height: 1.08; letter-spacing: -.025em; }
.benefit p { max-width: 43ch; margin-top: 12px; color: var(--ink-2); }
.benefit > div:first-of-type { position: relative; z-index: 2; margin-top: auto; padding-top: 40px; }
.calendar-visual { position: absolute; top: 34px; right: 34px; display: grid; grid-template-columns: repeat(2, 56px); gap: 8px; transform: rotate(5deg); }
.calendar-visual span, .calendar-visual b { height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--paper); color: var(--muted); font-size: 13px; font-style: normal; font-weight: 700; box-shadow: var(--shadow-card); }
.calendar-visual b { color: var(--on-brand); background: var(--accent); }
.category-visual { position: absolute; right: 28px; bottom: 27px; display: flex; align-items: end; flex-direction: column; gap: 8px; }
.category-visual span { padding: 9px 13px; border-radius: var(--pill); color: var(--deep); background: var(--accent-soft); font-size: 12px; font-weight: 700; }
.bars-visual { position: absolute; top: 42px; right: 36px; height: 110px; display: flex; align-items: end; gap: 8px; }
.bars-visual i { width: 13px; height: 36%; border-radius: 8px 8px 2px 2px; background: var(--gold-2); }
.bars-visual i:nth-child(2) { height: 61%; }.bars-visual i:nth-child(3) { height: 45%; }.bars-visual i:nth-child(4) { height: 88%; background: var(--accent); }.bars-visual i:nth-child(5) { height: 70%; }
.sheet-visual { position: absolute; top: 30px; right: 35px; width: 132px; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 12px; overflow: hidden; transform: rotate(3deg); box-shadow: var(--shadow-card); }
.sheet-visual span { height: 38px; background: var(--paper); box-shadow: inset -1px -1px 0 var(--rule); }
.sheet-visual span:nth-child(1), .sheet-visual span:nth-child(2) { background: var(--accent-soft); }

.privacy { padding-block: 88px; border-top: 1px solid var(--rule); }
.privacy-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 9vw, 120px); align-items: center; }
.privacy-title-wrap { display: flex; align-items: center; gap: 22px; }
.privacy-lock { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.privacy-lock svg { width: 26px; height: 26px; }
.privacy h2 { max-width: 13ch; font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.032em; font-weight: 620; }
.privacy-copy p { max-width: 56ch; color: var(--ink-2); }
.privacy-copy a { display: inline-block; margin-top: 18px; color: var(--deep); font-weight: 700; }

.closing { padding-block: clamp(84px, 10vw, 130px); color: var(--on-brand); background: #0f4c3b; }
.closing-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.closing h2 { max-width: 15ch; font-size: clamp(2.7rem, 5.5vw, 5rem); line-height: .98; letter-spacing: -.038em; font-weight: 620; }
.closing p { max-width: 52ch; margin-top: 20px; color: #cbe9dd; font-size: 17px; }

.footer { padding: 36px 0; border-top: 1px solid var(--rule); background: var(--bg-solid); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer .brand svg { width: 29px; height: 29px; }
.footer .brand span { font-size: 22px; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; }
.footer nav a { color: var(--ink-2); font-size: 13px; font-weight: 650; }

@media (max-width: 1040px) {
  .top-nav { display: none; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr); gap: 12px; }
  .hero h1 { font-size: clamp(3.1rem, 6.8vw, 4.6rem); }
  .meaning-map { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .meaning-arrow { display: none; }
  .inside-layout { grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr); gap: 64px; }
  .budget-layout { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); gap: 36px; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 32px, 640px); }
  html { scroll-padding-top: 72px; }
  .section { padding-block: 88px; }
  .top-inner { min-height: 68px; gap: 10px; }
  .brand svg { width: 30px; height: 30px; }
  .brand span { font-size: 23px; }
  .langs { margin-left: auto; }
  .sign-in { display: none; }
  .top .button-primary { min-height: 40px; padding-inline: 14px; font-size: 13px; }
  .hero { min-height: auto; padding: 116px 0 76px; }
  .hero::before { width: 130vw; top: 4%; right: -70%; }
  .hero-layout { grid-template-columns: 1fr; gap: 22px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { max-width: 11ch; font-size: clamp(3rem, 14.8vw, 4.55rem); }
  .hero-lead { margin-top: 22px; font-size: 17px; }
  .hero-actions { margin-top: 25px; gap: 15px; }
  .hero-visual { min-height: 370px; margin-top: -10px; }
  .hero-halo { width: 72%; }
  .scroll-cue { display: none; }
  .about-intro, .privacy-layout, .closing-layout { grid-template-columns: 1fr; }
  .about-intro { gap: 24px; }
  .about-intro h2 { font-size: clamp(2.45rem, 12vw, 3.7rem); }
  .about-intro p, .flow-head p { font-size: 16px; }
  .meaning-map { grid-template-columns: 1fr; gap: 0; margin-top: 60px; }
  .meaning-item { display: grid; grid-template-columns: 48px 1fr; gap: 4px 17px; padding: 25px 0; }
  .meaning-item .icon-token { grid-row: 1 / 3; }
  .meaning-item h3 { margin-top: 1px; font-size: 19px; }
  .meaning-item p { margin-top: 3px; }
  .product-line { display: block; margin-top: 48px; padding-top: 23px; }
  .product-line strong { display: block; margin-top: 4px; }
  .flow-head { display: block; }
  .flow-head p { margin-top: 20px; padding-bottom: 0; }
  .flow-head h2 { font-size: clamp(2.55rem, 12vw, 3.8rem); }
  /* Na mobilu jdou kroky pod sebe a telefon se zmenší, ať se vejde
     obrazovka i její popis do jednoho pohledu. */
  .flow-steps { grid-template-columns: 1fr; gap: 44px; margin-top: 34px; }
  .flow-step { gap: 20px; }
  .phone { width: min(268px, 74vw); }
  .phone-hero { width: min(280px, 76vw); }
  .phone-big { width: min(258px, 70vw); }
  .phone-note { right: -8px; bottom: -14px; font-size: 11px; padding: 7px 12px; }
  .budget-story { height: 280vh; }
  .budget-pin { top: 68px; min-height: calc(100svh - 68px); }
  .budget-layout { grid-template-columns: 1fr; gap: 10px; padding-block: 28px; }
  .budget-copy h2 { max-width: 12ch; font-size: clamp(2.2rem, 9.6vw, 3.3rem); }
  .budget-copy > p { margin-top: 16px; font-size: 15px; }
  .budget-events { display: none; }
  .budget-visual { min-height: 390px; }
  /* Na mobilu je nad mincí jen pár desítek pixelů volných, takže se musí
     zmenšit obojí — jinak účtenka vyjede přes odstavec nad sebou. */
  .inside-layout { grid-template-columns: 1fr; gap: 70px; }
  .inside-copy { grid-row: 1; }
  .inside-copy h2 { font-size: clamp(2.7rem, 12.5vw, 4rem); }
  .shot-note { right: -12px; }
  .benefits-head { grid-template-columns: 1fr; gap: 34px; }
  .benefits-head h2 { font-size: clamp(2.5rem, 11vw, 3.65rem); }
  .benefits-head .phone { width: min(250px, 68vw); }
  .benefit-grid { grid-template-columns: 1fr; margin-top: 52px; }
  .benefit { min-height: 300px; }
  .privacy-layout { gap: 30px; }
  .privacy-title-wrap { align-items: flex-start; }
  .closing-layout { gap: 34px; }
  .closing h2 { font-size: clamp(2.55rem, 11.5vw, 3.8rem); }
  .closing .button { justify-self: start; }
  .footer-inner { align-items: flex-start; }
  .footer nav { max-width: 190px; gap: 13px 20px; }
}

@media (max-width: 430px) {
  .langs { display: none; }
  .hero h1 { font-size: clamp(2.85rem, 14.7vw, 4rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 330px; }
  .benefit { min-height: 315px; }
  .calendar-visual { opacity: .72; transform: scale(.82) rotate(5deg); transform-origin: top right; }
  .footer-inner { flex-direction: column; }
  .footer nav { max-width: none; justify-content: flex-start; }
}

@media (min-width: 769px) and (max-height: 700px) {
  .budget-pin { top: 76px; min-height: calc(100svh - 76px); }
  .budget-layout { grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(28px, 5vw, 72px); }
  .budget-copy h2 { font-size: clamp(2.35rem, 4.4vw, 3.9rem); }
  .budget-copy > p { margin-top: 14px; font-size: 15px; }
  .budget-events { display: none; }
  .budget-visual { min-height: calc(100svh - 88px); }
}

@media (max-width: 768px) and (max-height: 700px) {
  .budget-layout { gap: 2px; padding-block: 14px; }
  .budget-copy h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .budget-copy > p { margin-top: 10px; font-size: 14px; }
  .budget-visual { min-height: 285px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone-hero { animation: none; translate: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-copy, .hero-halo, .meaning-item, .meaning-arrow span, .meaning-arrow svg, .phone, .flow-step-copy, .plan, .control-row { transform: none !important; clip-path: none !important; filter: none !important; opacity: 1 !important; }
  .budget-story { height: auto; padding-block: 88px; }
  .budget-pin { position: static; min-height: 0; overflow: visible; }
  /* Účtenka a hladina si schválně SVOJI transformaci nechávají: klidový stav
     je ten koncový, tedy nádoba naplněná a přehled venku a čitelný. */
  .control-arrow path { stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   PARALLAX — vrstvy, které jedou jinou rychlostí než stránka
   ========================================================================== */

/* Globální drift. Leží pod vším; sekce s vlastním pozadím ho zakryjí, takže
   se ukazuje jen na papírových pásmech — přesně tam, kde by jinak nebyla
   žádná hloubka. Animuje se výhradně translate: u rozostřeného prvku nutí
   scale Safari přerastrovat celou plochu v každém snímku. */
.page-drift { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.drift { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.drift-1 { width: 44vmax; height: 44vmax; left: -12vmax; top: 4vh;
           background: rgba(20, 101, 79, .14); transform: translate3d(0, var(--drift-1, 0), 0); }
.drift-2 { width: 34vmax; height: 34vmax; right: -10vmax; top: 44vh;
           background: rgba(194, 162, 104, .18); transform: translate3d(0, var(--drift-2, 0), 0); }
.drift-3 { width: 38vmax; height: 38vmax; left: 34vw; top: 88vh;
           background: rgba(143, 220, 192, .16); transform: translate3d(0, var(--drift-3, 0), 0); }
:root[data-theme="dark"] .drift-1 { background: rgba(63, 161, 132, .14); }
:root[data-theme="dark"] .drift-2 { background: rgba(194, 162, 104, .1); }
:root[data-theme="dark"] .drift-3 { background: rgba(47, 158, 122, .12); }

/* Hero: pět vrstev, pět rychlostí. Ukazatel myši přidává poslední, nejjemnější
   posun, takže obraz reaguje ještě dřív, než člověk začne scrollovat. */
.motion-ready .hero-halo {
  transform:
    translate3d(calc(var(--hero-px, 0px) * -.45), calc(var(--hero-py, 0px) * -.45), 0)
    scale(var(--hero-halo-scale, 1)) rotate(var(--hero-halo-rot, 0deg));
}

/* Užitky: karta stoupá, obrázek uvnitř ní jede pomaleji. Rozdíl uvnitř jedné
   karty dělá hloubku levněji než cokoli, co by se muselo překreslovat. */
.motion-ready .benefit {
  opacity: var(--benefit-opacity, 1);
  transform: translate3d(0, var(--benefit-y, 0), 0);
}
.motion-ready .benefit > div:last-child {
  transform: translate3d(0, var(--benefit-inner-y, 0), 0);
}

/* Soukromí: mosazná linka se dokresluje ve směru čtení. */
.privacy-layout { position: relative; }
/* Linka bydlí uvnitř textového sloupce. Jako přímý potomek .privacy-layout
   si brala buňku gridu a rozhodila dvousloupcové rozvržení. */
.privacy-rule {
  display: block; height: 1px; margin: 0 0 22px;
  background: var(--gold-2); opacity: .55;
  transform: scaleX(var(--privacy-rule, 1)); transform-origin: left center;
}
.motion-ready .privacy-lock {
  transform: translate3d(0, var(--privacy-lock-y, 0), 0) rotate(var(--privacy-lock-rot, 0deg));
}
.motion-ready .privacy-copy { transform: translate3d(0, var(--privacy-copy-y, 0), 0); }

/* Závěr: halo za výzvou roste s příjezdem sekce. */
.closing { position: relative; overflow: hidden; }
.closing-halo {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: min(58vw, 760px); aspect-ratio: 1; border-radius: 50%;
  /* Zelená plocha pod tím je značková, takže akcentní barvy by na ní zmizely.
     Kroužky proto stojí na bílé s velmi nízkou průhledností, stejně jako
     v ostatních zelených pásmech. */
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 90px rgba(255, 255, 255, .028), 0 0 0 190px rgba(255, 255, 255, .022);
  transform: translate(-50%, -50%) scale(var(--closing-halo, 1));
  pointer-events: none;
}
.closing-layout { position: relative; z-index: 1; }
.motion-ready .closing-layout > div { transform: translate3d(0, var(--closing-copy-y, 0), 0); }
.motion-ready .closing-layout .button {
  transform: translate3d(0, var(--closing-cta-y, 0), 0) scale(var(--closing-cta-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
  .drift, .page-drift { display: none; }
  .privacy-rule { transform: none; }
  .closing-halo { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   CENÍK
   Dvě karty vedle sebe. Placená stojí na značkové zeleni, protože je to ta,
   kterou má člověk vidět první — barva nese doporučení, ne štítek navíc.
   ========================================================================== */
.pricing { background: var(--paper); border-block: 1px solid var(--rule); }
.pricing-head { max-width: 52ch; }
.pricing-head h2 {
  font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1;
  letter-spacing: -.036em; font-weight: 620;
}
.pricing-head p { margin-top: 20px; color: var(--ink-2); font-size: 17px; }

.plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(40px, 5vw, 64px);
  /* Stejná výška obou karet: výzva k akci pak sedí na stejné lince a placená
     varianta nevypadá jako by jí něco chybělo. */
  align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-large);
  background: var(--bg-solid);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.plan-paid {
  color: var(--on-brand);
  background: var(--brand-surface);
  box-shadow: var(--shadow-card);
}
.plan-head h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.plan-paid .plan-head h3 { color: var(--gold-3); }
.plan-price { display: flex; align-items: baseline; gap: 9px; margin-top: 14px; }
.plan-price strong {
  font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1;
  letter-spacing: -.04em; font-weight: 700;
}
.plan-price span { font-size: 15px; font-weight: 650; color: var(--ink-2); }
.plan-paid .plan-price span { color: var(--on-brand-2); }
.plan-note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.plan-paid .plan-note { color: var(--gold-3); font-weight: 650; }
.plan-plus { margin-top: 26px; font-size: 14px; font-weight: 650; color: var(--on-brand-2); }

/* Řádky oddělené vlasovou linkou — stejný vzor, jaký má appka v nastavení. */
.plan-list { margin: 22px 0 0; padding: 0; list-style: none; }
.plan-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 13px 0; font-size: 15px; line-height: 1.45;
}
.plan-list li + li { box-shadow: inset 0 1px 0 var(--rule); }
.plan-paid .plan-list li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.plan-list svg {
  width: 20px; height: 20px; margin-top: 1px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent);
}
.plan-paid .plan-list svg { color: var(--gold-3); }
.plan .button, .plan-soon { margin-top: auto; }
.plan .button { align-self: start; margin-top: 30px; }
.plan-soon {
  margin-top: 30px; padding: 13px 20px; border-radius: var(--pill);
  font-size: 14px; font-weight: 650; text-align: center;
  color: var(--on-brand-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
  .pricing-head h2 { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .plan-list li { font-size: 14.5px; }
}

.motion-ready .plan {
  opacity: var(--plan-opacity, 1);
  transform: translate3d(0, var(--plan-y, 0), 0);
}