/* ============================================================
   Rychlá Hypo — bespoke design system (redesign „Vojta")
   Jeden čistý token set. Paper & ink editorial + datové napětí
   zelená (levné/úspora) → oranžová (drahé/akce). Žádné !important,
   žádné override vrstvy, žádné duplicitní fonty.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* Papír & inkoust */
  --paper:#FBF4E9;
  --paper-2:#F6ECDC;      /* alternující sekce */
  --surface:#FFFCF6;      /* karty */
  --ink:#241A12;
  --ink-muted:#5A4228;
  --ink-dim:#775F44;      /* AA i na nejtmavším papíru: 5,1:1 (dřív 3,9) */
  --hairline:#E7DAC6;
  --hairline-strong:#D8C6AC;

  /* Datové napětí (jádro identity) — MODRÁ, natvrdo (25.8., forknuto z
     hypoagent-vojta jako samostatný projekt „hypoagent-vojta-modra").
     Pár oranžová+modrá: skutečný komplementární doplněk (~195-200°),
     ne fialová/indigová "AI SaaS" modrá (~230-250°). */
  /* --brand-green: NEkoliduje jménem s ničím jiným na webu. Konfigurátor
     má svou vlastní starší [data-theme="light"/"dark"] vrstvu (běžící za
     runtime), co definuje VLASTNÍ --green (starý tyrkysový), a ta díky
     specifičtějšímu selektoru přebíjí tenhle prostý :root -- proto na
     --green samotné nejde spolehnout kdekoliv na webu, jen tady a v
     konfigurator.css remapu, co čte právě --brand-green. */
  /* 26.8. noc, třetí kolo (Jeňa: "chci ty barvy víc jako z videí, co nejvíc
     letí — modrá a oranžová, ať to lákalo na oči"): stejná dvojice, posazená
     sytěji a jasněji, ne nová paleta. Tmavší tóny (deep/btn) drží podobný
     jas jako předtím kvůli kontrastu bílého textu, punč je hlavně na hlavní
     a světlé variantě. */
  --brand-green:#1B6FA8;
  --brand-green-rgb:27,111,168;
  --green:#1B6FA8;
  --green-rgb:27,111,168;  /* pro rgba(var(--green-rgb), N) zápisy; drž v páru se --green */
  --green-deep:#0E5A88;
  --green-soft:#E1EDFB;
  --green-bright:#6EC3F0;  /* na tmavém heru: trust tečka, čísla úspor, CTA */
  --green-bright-rgb:110,195,240;
  --green-pale:#9ED8F2;    /* na tmavém heru: eyebrow, focus, "levnější" štítky */
  --green-pale-rgb:158,216,242;
  --sage-soft:#E1EDFB;     /* konfigurátor: pozadí "výhodnější" karty */
  --sage-tint:#E9F3FA;     /* amortizační graf: výplň pásma jistiny */
  --amber:#C9A21E;
  --orange:#F2500E;
  --orange-btn:#D8440A;   /* podklad tlačítek: bílý text 4,9:1 (na --orange jen 3,8) */
  --orange-btn-h:#B33607;
  --orange-deep:#D8440A;
  --orange-soft:#FCE2CB;
  --red:#C0341A;          /* jen validace / chyby */

  /* Plochy pozadí sekcí (26.8.) — pojmenovaná stupnice, ne barva ad hoc
     u každé sekce. Jen dva tónované stupně navíc ke krémové, oba odvozené
     z už existujících brand tintů (--green-soft, --orange-soft), jen o kus
     světlejší, protože na ploše celé sekce čtou silněji než v kartě. */
  --plocha-modra:#E6EFF8;
  --plocha-tepla:#FAE8D6;

  /* Datová rampa (levné → drahé), 6 stopů pro 6 bank */
  --ramp-1:#1B6FA8;
  --ramp-2:#4A8FA8;  /* přechodová modro-teal místo olivové, ať žebříček nemá modrou #1 a zelenou #2 vedle sebe */
  --ramp-3:#A79A1F;
  --ramp-4:#C9A21E;
  --ramp-5:#DC7A18;
  --ramp-6:#F2500E;

  /* Typografie — 26.8. noc, třetí výměna (Jeňa přímo, po nasazení druhé výměny:
     "je to hrozně AI, chci to jako na suoriga.cz" — druhá výměna zkoušela vzít
     jen DUCH Suoriga (Bricolage Grotesque + Hanken Grotesk), ale živě to nesedlo.
     Ověřeno přímo v CSS na suorigo.cz: tam NENÍ Anton na těle textu, jede čistě
     Geist (+ Geist Mono), Anton je jen ozdobný akcent na jednom místě. Takže
     tentokrát LITERA, ne jen duch: Geist všude, žádné druhé písmo navíc. */
  --font-display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* --font-mono zůstává jako název kvůli desítkám volání, ale je to LABEL font
     (Geist, prostrkané verzálky) — čísla mají vlastní token níž. */
  --font-mono:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Čísla = Geist Mono (přesně jako na suorigo.cz) — tabulkové číslice, dobře
     drží sloupce i velké částky v heru. Rozšířeno i na .hcf-num/.gap-num/.hs-num/
     .cta-total .t-num/.faq-mini .m-val apod. */
  --font-num:'Geist Mono','Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Fluid type scale */
  --fs-display:clamp(3.4rem,8vw,7.5rem);
  --fs-h1:clamp(2.3rem,4.6vw,3.8rem);
  --fs-h2:clamp(1.7rem,3vw,2.5rem);
  --fs-h3:1.25rem;
  --fs-body:1.125rem;
  --fs-small:0.9rem;
  --fs-micro:0.78rem;

  /* Spacing (8px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;

  /* Radius (tři, konec pill-mánie) */
  --r-sm:10px; --r-md:16px; --r-lg:24px;

  /* Stíny (jemné, hairline-first) */
  --shadow-1:0 1px 2px rgba(36,26,18,.05), 0 4px 14px rgba(36,26,18,.06);
  --shadow-2:0 2px 6px rgba(36,26,18,.06), 0 18px 44px -18px rgba(36,26,18,.22);

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  /* fluidní, ne skokové — Jeňa na velkém externím monitoru viděl web
     „sražený" doprostřed s prázdnými okraji (25.8.). Do ~1540px se nic
     nemění (běžný notebook), pak roste plynule s šířkou okna až do
     stropu na velkých monitorech, místo aby zůstal zamrzlý na jedné
     hodnotě mezi skokovými breakpointy. */
  --container:clamp(1200px, 84vw, 2160px);
}


/* ---------- RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  overflow-x:clip;   /* clip místo hidden: brání vodorovnému scrollu, ale NEROZBÍJÍ position:sticky hlavičky na obsahových stránkách */
  overflow-wrap:break-word;
  /* jemná papírová záře horizontu — jedna linka, ne radiální prasátka */
  background-image:linear-gradient(180deg,#FFF8EE 0%,var(--paper) 24%);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--green); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.015em; margin:0; color:var(--ink); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-.01em; }
p{ margin:0; }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,4vw,40px); }
.section{ padding:var(--s24) 0; position:relative; }
.section--tight{ padding:var(--s16) 0; }
.section--paper2{ background:var(--paper-2); }
.prose{ max-width:64ch; }

/* Zábrana proti grid/flex „blowout" (min-content roztahující layout přes viewport) */
.hero-grid > *, .trust > *, .advisor > *, .faq > *, .cta-card > *,
.lrow, .lrow-main, .lrow-bank, .section-head-body, .footer-col, .strip-bank{ min-width:0; }

/* Eyebrow (mikro label) — jeden konzistentní styl, ne pill */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep);
  margin:0 0 var(--s4);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--green); }

/* Ghost numeral — editoriální kotva sekcí v levém marginu */
.ghost-num{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.5rem,6vw,5rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--hairline-strong);
  letter-spacing:-.02em; user-select:none;
}
.section-head{ display:flex; align-items:baseline; gap:clamp(16px,3vw,40px); margin-bottom:var(--s12); flex-wrap:wrap; }
.section-head .section-head-body{ flex:1; min-width:260px; }
.section-lead{ color:var(--ink-muted); font-size:1.15rem; max-width:56ch; margin-top:var(--s4); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:1rem; line-height:1;
  padding:15px 24px; border-radius:var(--r-sm); border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease), border-color .2s;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
/* Oranžová = akce (vyhrazená energie) */
.btn-primary{ background:var(--orange-btn); color:#fff; box-shadow:0 8px 20px -10px rgba(196,71,15,.55); }
.btn-primary:hover{ background:var(--orange-btn-h); transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(196,71,15,.65); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--hairline-strong); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(36,26,18,.03); }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 8px 20px -12px rgba(78,125,27,.7); }
.btn-green:hover{ background:var(--green-deep); transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{
  background:rgba(251,244,233,.85); backdrop-filter:blur(12px) saturate(1.1);
  border-bottom-color:var(--hairline); box-shadow:0 6px 24px -16px rgba(36,26,18,.3);
}
/* obsahové stránky (bez tmavého hero): hlavička vždy plná, v toku (sticky) */
.site-header.is-solid{ position:sticky; }
/* obsahová stránka: úvodní editoriální hlavička sekce */
.page-hero{ padding:clamp(48px,7vw,88px) 0 clamp(24px,4vw,44px); border-bottom:1px solid var(--hairline); }
.page-hero .eyebrow{ margin-bottom:var(--s6); }
.page-hero h1{ font-size:var(--fs-h1); font-weight:500; letter-spacing:-.02em; line-height:1.04; max-width:20ch; }
.page-hero .lead{ color:var(--ink-muted); font-size:1.2rem; line-height:1.55; max-width:52ch; margin-top:var(--s6); }
/* nahoře (průhledná přes tmavý hero) → světlý text */
.site-header:not(.scrolled) .logo .lo-rychla{ color:#fff; }
.site-header:not(.scrolled) .logo .lo-hypo{ color:var(--green-pale); }
.site-header:not(.scrolled) .brand-sub{ color:rgba(255,248,240,.74); border-left-color:rgba(255,255,255,.22); }
body:not(.menu-open) .site-header:not(.scrolled) .nav > a:not(.btn-primary){ color:rgba(255,248,240,.9); }
body:not(.menu-open) .site-header:not(.scrolled) .nav > a:not(.btn-primary):hover{ color:#fff; }
body:not(.menu-open) .site-header:not(.scrolled) .hamburger span{ background:#fff; }
body.menu-open .hamburger span{ background:var(--ink); }
body.menu-open .nav > a:not(.btn-primary){ color:var(--ink); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:baseline; gap:14px; }
.logo{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.32em; }
.logo .lo-rychla{ color:var(--ink); }
.logo .lo-hypo{ color:var(--green); }
/* 26.8. noc: značka dostala vlastní ikonu (dům + R jedním tahem, Nano Banana 2
   + přebarveno na brand tokeny) — dřív byl jen dvoubarevný nápis bez znaku. */
.logo-icon{ height:1.6em; width:auto; display:block; flex:none; }
.brand-sub{ font-size:var(--fs-small); color:var(--ink-dim); border-left:1px solid var(--hairline-strong); padding-left:14px; }
.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.nav a{ font-weight:500; color:var(--ink-muted); font-size:.98rem; transition:color .18s; }
.nav a:hover{ color:var(--ink); }
.nav .btn-primary{ padding:11px 18px; font-size:.95rem; color:#fff; }
.nav .btn-primary:hover{ color:#fff; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.hamburger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s var(--ease); }
.nav-scrim{ display:none; }

/* ---------- HERO ---------- */
.hero{ padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px); position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-eyebrow{ margin-bottom:var(--s6); }
.hero h1{
  font-size:var(--fs-h1); font-weight:500; letter-spacing:-.02em; line-height:1.04;
  max-width:17ch;
}
.hero h1 .accent{ color:var(--green); font-style:italic; font-weight:400; }
.hero-sub{ color:var(--ink-muted); font-size:1.2rem; line-height:1.55; max-width:46ch; margin-top:var(--s6); }
.hero-cta{ display:flex; gap:12px; margin-top:var(--s8); flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:var(--s8); flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink-dim); }
.hero-trust .dot{ width:5px; height:5px; border-radius:50%; background:var(--green); }
.hero-trust strong{ color:var(--ink-muted); font-weight:600; }

/* ---- Signature: „Mezera mezi bankami" (bar-race) ---- */
.ladder{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  padding:clamp(20px,2.4vw,30px); position:relative; overflow:hidden;
}
.ladder-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-bottom:var(--s6); }
.ladder-cap{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.ladder-live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--green-deep); letter-spacing:.06em; }
.ladder-live .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }

.ladder-rows{ display:flex; flex-direction:column; gap:9px; }
.lrow{ display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:12px; }
.lrow-rank{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dim); text-align:right; }
.lrow-main{ position:relative; }
.lrow-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.lrow-bank{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:.95rem; color:var(--ink); }
.lrow-bank img{ width:20px; height:20px; object-fit:contain; border-radius:5px; }
.lrow-rate{ font-family:var(--font-mono); font-size:.98rem; font-weight:500; color:var(--ink); }
.lrow-track{ height:9px; background:rgba(36,26,18,.06); border-radius:6px; overflow:hidden; }
/* 26.8.: pryč s duhou přes 6 hodnocení (--ramp-1..6 na každý řádek) — čte se jako
   generovaný infografický graf, ne jako fintech srovnání. Zůstává neutrální dráha,
   akcent jen na nejlevnější (brand modrá) a nejdražší (tlumená oranžová, stejná
   sémantika jako štítky .lrow-tag). Spektrum --ramp-* žije dál na ose ve scéně 02
   a na mobilní svislé ose (tam je to spojitý gradient podél jedné škály, ne barva
   na řádek — jiný, oprávněný účel, proto se tam nesahalo). */
.lrow-bar{ display:block; height:100%; width:var(--w,0); border-radius:6px; transform-origin:left; animation:barGrow .85s var(--ease) both; background:rgba(36,26,18,.16); }
.lrow.is-best .lrow-bar{ background:var(--green); }
.lrow.is-worst .lrow-bar{ background:rgba(242,80,14,.5); }
@keyframes barGrow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.ladder-rows .lrow:nth-child(1) .lrow-bar{ animation-delay:.05s }
.ladder-rows .lrow:nth-child(2) .lrow-bar{ animation-delay:.14s }
.ladder-rows .lrow:nth-child(3) .lrow-bar{ animation-delay:.23s }
.ladder-rows .lrow:nth-child(4) .lrow-bar{ animation-delay:.32s }
.ladder-rows .lrow:nth-child(5) .lrow-bar{ animation-delay:.41s }
.ladder-rows .lrow:nth-child(6) .lrow-bar{ animation-delay:.50s }
@media (prefers-reduced-motion:reduce){ .lrow-bar{ animation:none } }
/* 26.8.: nejlevnější nabídka dostala vlastní tělo (tinted pill kolem celého řádku),
   ne jen barevný text — na první pohled je jasné, která banka je "ta správná
   volba", ne jen jedna z šesti stejně těžkých položek. */
.lrow.is-best{ background:var(--green-soft); border-radius:12px; padding:6px 8px; margin:-6px -8px; }
.lrow.is-best .lrow-bank{ color:var(--green-deep); }
.lrow.is-best .lrow-rate{ color:var(--green-deep); font-weight:700; }
.lrow-tag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px; margin-left:8px; }
.lrow-tag.best{ background:var(--green-soft); color:var(--green-deep); }
.lrow-tag.worst{ background:var(--orange-soft); color:#A8380C; }
/* živý hero: plynulá změna délky baru při přepnutí fixace (bar-race) */
.lrow-bar{ transition:width .55s cubic-bezier(.16,1,.3,1), background .4s ease; }
.lrow-rate, .lrow-rank{ transition:color .4s ease; }
/* mobil: garantovaný odstup mezi (jméno banky + badge) a sazbou — badge se už nelepí na % u dvouřádkových názvů */
@media (max-width:640px){
  .lrow-head{ display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center; }
  .lrow-bank{ flex-wrap:wrap; row-gap:2px; }
  .lrow-tag{ margin-left:0; }
}

/* ---- ŽIVÝ HERO — ovládání (slider výše úvěru + přepínač fixace) ---- */
.hc-controls{ display:flex; flex-direction:column; gap:13px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--hairline); }
.hcc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hcc-lab{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.hcc-val{ font-family:var(--font-num); font-weight:500; font-size:1.24rem; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.hcc-slider{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin-top:10px; border-radius:999px;
  background:linear-gradient(90deg,var(--ramp-1),var(--ramp-3) 55%,var(--ramp-5)); accent-color:var(--green-deep); cursor:pointer; }
.hcc-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:2px solid var(--green-deep); box-shadow:0 2px 8px rgba(36,26,18,.22); cursor:grab; transition:transform .12s; }
.hcc-slider::-webkit-slider-thumb:active{ transform:scale(1.12); cursor:grabbing; }
.hcc-slider::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--surface); border:2px solid var(--green-deep); box-shadow:0 2px 8px rgba(36,26,18,.22); cursor:grab; }
.hcc-slider:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }
.hcc-fix{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hcc-chip{ font-family:var(--font-mono); font-size:.82rem; min-width:30px; padding:5px 9px; border-radius:8px;
  border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink-muted); cursor:pointer; transition:.15s; }
.hcc-chip:hover{ border-color:var(--green-deep); color:var(--ink); }
.hcc-chip.is-on{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
.hcc-unit{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); margin-left:2px; }
@media (prefers-reduced-motion:reduce){ .lrow-bar{ transition:none; } }

.ladder-gap{
  margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--hairline);
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.gap-label{ font-size:var(--fs-small); color:var(--ink-muted); max-width:22ch; }
.gap-label strong{ color:var(--green-deep); }
.gap-figure{ text-align:right; }
.gap-figure .gap-num{ font-family:var(--font-num); font-weight:500; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:.95; color:var(--green-deep); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.gap-figure .gap-sub{ font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--ink-dim); letter-spacing:.04em; margin-top:6px; }

/* ---------- CINEMATIC HERO (tmavý) + 3D TELEFON ---------- */
.hero--cinematic{ position:relative; color:#F7ECDD; background:#160F09; overflow:hidden;
  padding:clamp(92px,9vw,124px) 0 clamp(56px,7vw,104px); }

/* Vodoznak (26.8., inspirace Trajekt) — velké, skoro neviditelné opakování
   loga v pozadí tmavých sekcí, tiché značkové "ražení", ne dekorace navíc.
   Sedí nízko vlevo, částečně uteklé mimo okraj, za skutečným obsahem.

   ODVÁŽNÝ OŘEZ (26.8. odpoledne): první verze utíkala z plochy jen o 30 px
   do stran a 56 px dolů, což je nejhorší možná míra — málo na to, aby to
   bylo čitelné jako záměrný přesah, a moc na to, aby to působilo celistvě
   (řez šel přesně přes bříška "y" a "p", oko to četlo jako chybu). Řešení
   není vrátit slovo celé — z toho by se stalo obyčejné vybledlé logo
   v pozadí, obehraný trik. Řešení je ořezat pořádně: písmo skoro 2x větší,
   slovo utíká mimo plochu na OBOU stranách, přestane být čitelné jako logo
   a stane se z něj typografická textura. Odsazení v vw (ne px), aby poměr
   ořezu zůstal stejný na 1024 i na 2560 px. */
.hero-wordmark{
  position:absolute; z-index:1; left:-16vw; bottom:-9vw;
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(220px,30vw,760px); line-height:.9; white-space:nowrap;
  color:rgba(247,236,221,.055); pointer-events:none; user-select:none;
}
@media (max-width:1000px){ .hero-wordmark{ display:none; } }

.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg video, .hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-bg-scrim{ position:absolute; inset:0;
  /* 25.8. noc: barvy `.hbg-wave` už jsou samy o sobě dost tmavé (vinětovaná
     oranžová + tmavě modrá), stačí jen jemná vinětace nahoře/dole kvůli
     hlavičce a patě karty — žádné boční ztmavování navíc. */
  background: linear-gradient(180deg, rgba(8,6,4,.4) 0%, rgba(8,6,4,.05) 22%, rgba(8,6,4,.08) 70%, rgba(8,6,4,.46) 100%);
}
.hero-grain{ position:absolute; inset:0; opacity:.13; mix-blend-mode:soft-light; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-haze{ position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
  background-size:cover; background-position:center;
  /* Tmavé rozostřené organické stíny (echo "stébel" u hypoteka2026), teď
     přes celou plochu rovnoměrně — `.hbg-blend` nemá žádnou vodorovnou
     hranici, kterou by maska měla respektovat. Barva NENÍ černá, je tmavě
     modrá, takže tohle je zároveň další vrstva skutečného prolnutí barev.
     background-size:cover (ne dlaždice) — při tiling na nízké frekvenci
     byl vidět švy jako mřížka. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.05  0 0 0 0 0.09  0 0 0 0 0.18  0 0 0 3.4 -1.35'/%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"); }
.hero--cinematic .container{ position:relative; z-index:2; }
.hero--cinematic .hero-grid{ grid-template-columns:1.02fr .98fr; align-items:center; }
.hero--cinematic .eyebrow{ color:var(--green-pale); }
.hero--cinematic .eyebrow::before{ background:var(--green-pale); }
.hero--cinematic h1{ color:#fff; }
.hero--cinematic h1 .accent{ color:var(--green-pale); }
.hero--cinematic .hero-sub{ color:rgba(247,236,221,.82); }
.hero--cinematic .hero-trust{ color:rgba(247,236,221,.6); }
.hero--cinematic .hero-trust strong{ color:rgba(247,236,221,.88); }
.hero--cinematic .hero-trust .dot{ background:var(--green-bright); }
.hero--cinematic .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.32); }
.hero--cinematic .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.hero-save{ display:flex; align-items:baseline; gap:12px; margin-top:var(--s8); }
.hero-save .hs-num{ font-family:var(--font-num); font-weight:500; font-size:clamp(1.9rem,3vw,2.7rem); line-height:1; color:var(--green-bright); letter-spacing:-.02em; }
.hero-save .hs-lab{ font-size:.9rem; color:rgba(247,236,221,.7); max-width:22ch; }

/* ---- Signature: skleněná srovnávací karta (nahradila 3D telefon) ---- */
.hero-card{
  /* 27.8.: Jeňa — "ty procenta a ty nuly vypadají špatně, chci to přirozenější".
     --font-num je Geist Mono: každý znak (i čárka/mezera) má stejnou šířku,
     na velkém sebevědomém čísle to dělá nepřirozené mezery a "0" má technický,
     kódovací nádech. V celé kartě proto čísla přepnuta na proporční Geist —
     jen tady, ne v --font-num globálně (jinde na webu se ho zrovna dotýká
     jiná souběžná session). */
  --font-num:var(--font-display);
  width:min(430px, 100%);
  background:rgba(255,252,246,.82);
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.62);
  /* 27.8.: rohy záměrně nestejné — pravý horní ostrý, ostatní plné — echo
     úhlu značky (R + dům v logu), ať karta není další univerzální
     "rounded-24px" krabička jako všude jinde na internetu. */
  border-radius:28px 6px 28px 28px;
  /* poslední hodnota = jemný zelený stín zleva dole, ať karta působí jako
     osvícená scénou (rohový svit), ne jen nalepená navrch */
  box-shadow:0 34px 80px -34px rgba(18,10,4,.62), 0 2px 8px rgba(18,10,4,.16), -18px 22px 60px -30px rgba(var(--green-bright-rgb),.35);
  padding:26px 24px 20px; color:var(--ink);
}
/* karta statická — bez perpetuálního floatu (ambientní loop = šablonový tell) */

/* 27.8.: pryč žebříček šesti stejně těžkých řádků s číslovanými štítky a
   barevnými pruhy (čte se jako generovaný dashboard). Nejlevnější nabídka je
   teď jedno velké, sebevědomé číslo (jako sazba na tickeru) — zbylých pět
   bank je tichý jednořádkový seznam, rozdíl proti vítězi v Kč/měs místo
   dekorativní barvy podle pořadí. */
.hc-winner{ display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.hcw-logo{ width:50px; height:50px; object-fit:contain; border-radius:13px; flex:none;
  transform:rotate(-4deg); box-shadow:0 8px 18px -9px rgba(36,26,18,.4); background:var(--surface); }
.hcw-figure{ min-width:0; }
.hcw-rate{ display:flex; align-items:flex-start; gap:3px; font-family:var(--font-num); font-weight:700;
  line-height:.9; letter-spacing:-.03em; color:var(--green-deep); }
.hcw-int{ font-size:clamp(3rem,10.5vw,4.2rem); }
.hcw-unit{ font-size:clamp(1.25rem,3.2vw,1.55rem); margin-top:.32em; opacity:.7; }
.hcw-sub{ display:block; margin-top:3px; font-size:.92rem; color:var(--ink-muted); }

.hc-rest{ display:flex; flex-direction:column; margin-top:8px; }
.hcr-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--hairline); }
.hcr-logo{ width:17px; height:17px; object-fit:contain; border-radius:4px; flex:none; opacity:.8; }
.hcr-name{ flex:1; min-width:0; font-size:.87rem; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcr-rate{ font-family:var(--font-num); font-size:.87rem; color:var(--ink); font-variant-numeric:tabular-nums; flex:none; }
.hcr-delta{ font-family:var(--font-num); font-size:.76rem; color:var(--ink-dim); font-variant-numeric:tabular-nums; flex:none; width:12ch; white-space:nowrap; text-align:right; }
.hcr-row.hcr-worst .hcr-delta{ color:var(--orange-btn); }

.hero-card-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline-strong); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.hcf-lab{ font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); max-width:10ch; line-height:1.3; }
.hcf-num{ font-family:var(--font-num); font-weight:600; font-size:clamp(1.9rem,3vw,2.5rem); color:var(--green-deep); line-height:.9; letter-spacing:-.02em; }
.hero-card-note{ margin-top:12px; font-family:var(--font-mono); font-size:10px; color:var(--ink-dim); letter-spacing:.02em; line-height:1.45; }

/* Scéna + telefon */
.hero-stage{ perspective:1600px; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:520px; }
.phone{ position:relative; width:min(322px,80vw); aspect-ratio:9/19.2; transform-style:preserve-3d;
  transform:rotateX(8deg) rotateY(-19deg); will-change:transform; }
.phone-frame{ position:absolute; inset:0; border-radius:44px; padding:11px;
  background:linear-gradient(155deg,#41372c 0%,#221913 46%,#120c07 100%);
  box-shadow:0 50px 100px -34px rgba(0,0,0,.85), 0 0 0 1.5px rgba(255,255,255,.06), inset 0 1px 1px rgba(255,255,255,.10); }
.phone-screen{ position:relative; width:100%; height:100%; border-radius:34px; background:var(--surface); overflow:hidden; }
.phone-glare{ position:absolute; inset:0; z-index:6; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 22%, transparent 40%); }
.phone-notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:78px; height:20px; background:#120c07; border-radius:0 0 13px 13px; z-index:7; }
.pscreen{ position:absolute; inset:0; display:flex; flex-direction:column; padding:36px 15px 15px; }
.pscreen-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 3px; }
.pscreen-brand{ font-family:var(--font-display); font-weight:600; font-size:.98rem; }
.pscreen-brand .lo-hypo{ color:var(--green); }
.pscreen-tag{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase; }
.pscreen .ladder-rows{ gap:8px; flex:1; }
.pscreen .lrow{ grid-template-columns:14px 1fr auto; gap:9px; }
.pscreen .lrow-rank{ font-size:.62rem; }
.pscreen .lrow-head{ margin-bottom:4px; }
.pscreen .lrow-bank{ font-size:.7rem; gap:6px; min-width:0; }
.pscreen .lrow-bank img{ width:15px; height:15px; flex:none; }
.pscreen .lrow-rate{ font-size:.74rem; white-space:nowrap; flex:none; }
.pscreen .lrow-tag{ display:none; }
.pscreen .lrow-track{ height:6px; }
.pscreen-foot{ margin-top:12px; padding-top:11px; border-top:1px solid var(--hairline); display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pscreen-foot .pf-lab{ font-size:.6rem; color:var(--ink-muted); font-family:var(--font-mono); letter-spacing:.03em; text-transform:uppercase; max-width:9ch; line-height:1.3; }
.pscreen-foot .pf-num{ font-family:var(--font-num); font-weight:600; font-size:1.55rem; color:var(--green-deep); line-height:.9; letter-spacing:-.02em; }
.hero-stage-note{ margin-top:18px; text-align:center; font-family:var(--font-mono); font-size:var(--fs-micro); color:rgba(247,236,221,.5); letter-spacing:.03em; }
/* Reálný 3D telefon (Three.js) — nahradí CSS telefon, když WebGL naběhne */
.phone3d{ display:none; }
.phone3d canvas{ display:block; width:100%; height:100%; }
.hero-stage.has-3d .phone{ display:none; }
.hero-stage.has-3d .phone3d{ display:block; width:100%; height:min(600px,70vh); cursor:grab; }
@media (max-width:1000px){ .hero-stage.has-3d .phone3d{ height:min(520px,56vh); } }
@media (prefers-reduced-motion:reduce){ .phone{ transform:rotateX(4deg) rotateY(-12deg) !important; } }

/* ---------- BANK STRIP ---------- */
.strip{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:var(--s6) 0; }
.strip-label{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:var(--s6); }
.strip-row{ display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3.5vw,44px); flex-wrap:wrap; }
.strip-bank{ display:inline-flex; align-items:center; gap:9px; }
.strip-bank img{ height:26px; width:26px; object-fit:contain; border-radius:6px; display:block; flex:none; }
.strip-bank b{ font-weight:600; font-size:.95rem; color:var(--ink-muted); white-space:nowrap; letter-spacing:-.01em; }
@media (max-width:640px){ .strip-row{ justify-content:flex-start; gap:16px 22px; } .strip-bank img{ height:22px; width:22px; } .strip-bank b{ font-size:.86rem; } }


/* ---------- REPREZENTATIVNÍ PŘÍKLAD (§ 91 zák. 257/2016) ---------- */
.repex{ border-bottom:1px solid var(--hairline); padding:var(--s8) 0; }
.repex-grid{ display:grid; grid-template-columns:190px 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.repex-lab{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); line-height:1.5; padding-top:3px; }
.repex-body{ max-width:74ch; color:var(--ink-muted); font-size:.95rem; line-height:1.65; }
.repex-body p+p{ margin-top:var(--s3); }
.repex-body b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.repex-rpsn{ color:var(--ink); font-weight:600; font-size:1.06em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.repex-fine{ color:var(--ink-dim); font-size:.88rem; }
@media (max-width:720px){ .repex-grid{ grid-template-columns:1fr; gap:var(--s4); } .repex-lab{ padding-top:0; } }

/* ---------- ADVISOR ---------- */
.advisor{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.advisor-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg,var(--green-soft),var(--orange-soft)); box-shadow:var(--shadow-2); }
.advisor-photo img{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.advisor-photo::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,12,7,.28) 0%, transparent 26%, transparent 52%, rgba(18,12,7,.72) 100%); }
.advisor-mono{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:400; font-size:clamp(4.5rem,11vw,8rem); color:rgba(60,97,20,.20); letter-spacing:.02em; }
.advisor-eyebrow{ position:absolute; left:22px; top:20px; z-index:4; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:#FFF8F0;
  text-shadow:0 1px 4px rgba(20,12,6,.7); }   /* u horní hrany je ztmavení fotky slabé */
.advisor-photo .sig{ position:absolute; left:24px; bottom:40px; z-index:4; font-family:var(--font-display); font-style:italic; font-size:2rem; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.advisor h2 .accent{ color:var(--green); font-style:italic; }
.advisor-meta{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-dim); margin:var(--s4) 0 var(--s6); letter-spacing:.02em; }
.advisor-facts{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 var(--s6); font-size:.95rem; color:var(--ink-dim); }
.advisor-facts span{ position:relative; padding-left:16px; }
.advisor-facts span::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--green); }
.advisor-facts b{ color:var(--ink); font-weight:600; }
.advisor p.lead{ color:var(--ink-muted); font-size:1.15rem; line-height:1.6; margin-bottom:var(--s8); max-width:46ch; }

/* ---------- FAQ (asymetrie, sticky levý sloupec) ---------- */
.faq{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(28px,5vw,64px); align-items:start; }
.faq-aside{ position:sticky; top:100px; }
.faq-aside .section-lead{ margin-top:var(--s4); }
.faq-mini{ display:flex; gap:22px; margin-top:var(--s8); flex-wrap:wrap; }
.faq-mini .m-val{ font-family:var(--font-num); font-size:1.7rem; color:var(--ink); line-height:1; }
.faq-mini .m-lab{ font-size:var(--fs-micro); color:var(--ink-dim); margin-top:5px; max-width:17ch; }
.faq-list{ border-top:1px solid var(--hairline); }
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-q{ width:100%; display:flex; align-items:center; gap:16px; background:none; border:0; padding:var(--s6) 0; text-align:left; color:var(--ink); }
.faq-q .q-num{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dim); }
.faq-q .q-text{ flex:1; font-weight:600; font-size:1.1rem; }
.faq-q .q-chev{ width:20px; height:20px; color:var(--ink-dim); transition:transform .3s var(--ease); flex:none; }
.faq-item.open .q-chev{ transform:rotate(180deg); color:var(--green); }
.faq-a{ overflow:hidden; height:0; transition:height .35s var(--ease); }
.faq-a-inner{ padding:0 0 var(--s6) 34px; color:var(--ink-muted); font-size:1.02rem; line-height:1.65; max-width:64ch; }
@media (prefers-reduced-motion:reduce){ .faq-a{ transition:none; } }

/* ---------- CTA ---------- */
.cta{ }
.cta-card{
  background:linear-gradient(165deg,#2A1E12,#241A12); color:#F7ECDD;
  border-radius:var(--r-lg); padding:clamp(36px,5vw,68px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center;
  position:relative; overflow:hidden;
}
.cta-card::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(242,80,14,.20), transparent 55%); pointer-events:none; }
.cta-card h2{ color:#fff; font-weight:500; font-size:clamp(1.8rem,3vw,2.6rem); }
.cta-card .cta-lead{ color:rgba(247,236,221,.78); font-size:1.1rem; margin-top:var(--s4); max-width:34ch; }
.cta-actions{ display:flex; gap:12px; margin-top:var(--s8); flex-wrap:wrap; }
.cta-actions .btn-ghost{ color:#F7ECDD; border-color:rgba(247,236,221,.28); }
.cta-actions .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.cta-figures{ position:relative; z-index:1; }
.cta-fig-row{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(247,236,221,.14); }
.cta-fig-row:first-child{ border-top:1px solid rgba(247,236,221,.14); }
.cta-fig-lab{ font-size:var(--fs-small); color:rgba(247,236,221,.7); }
.cta-fig-val{ font-family:var(--font-mono); font-size:1.15rem; }
.cta-fig-row.best .cta-fig-val{ color:var(--green-bright); }
.cta-fig-row.worst .cta-fig-val{ color:#FF8A52; }
.cta-total{ margin-top:var(--s6); }
.cta-total .t-num{ font-family:var(--font-num); font-size:clamp(2rem,3.4vw,2.8rem); color:var(--green-bright); line-height:1; }
.cta-total .t-lab{ font-size:var(--fs-small); color:rgba(247,236,221,.7); margin-top:8px; max-width:32ch; }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--hairline); padding:var(--s16) 0 var(--s12); background:var(--paper-2); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(24px,4vw,48px); }
.footer-col h5{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 var(--s4); font-weight:500; }
.footer-col a{ display:block; color:var(--ink-muted); padding:5px 0; font-size:.96rem; transition:color .18s; }
.footer-col a:hover{ color:var(--green-deep); }
.footer-col .footer-desc{ color:var(--ink-muted); font-size:.96rem; max-width:34ch; margin-top:var(--s3); }
.footer-legal{ margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid var(--hairline); color:var(--ink-dim); font-size:var(--fs-small); line-height:1.6; }
.footer-legal .copy{ margin-top:var(--s3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.03em; }

/* ---------- MOTION (reveal) ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}
/* stagger: přímé děti kontejneru najíždějí v kaskádě (crafted reveal, ne blok naráz) */
[data-reveal].stagger{ opacity:1; transform:none; }
[data-reveal].stagger > *{ opacity:0; transform:translateY(15px); }
[data-reveal].stagger.is-in > *{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].stagger.is-in > *:nth-child(2){ transition-delay:.07s }
[data-reveal].stagger.is-in > *:nth-child(3){ transition-delay:.14s }
[data-reveal].stagger.is-in > *:nth-child(4){ transition-delay:.21s }
[data-reveal].stagger.is-in > *:nth-child(5){ transition-delay:.28s }
[data-reveal].stagger.is-in > *:nth-child(6){ transition-delay:.35s }
@media (prefers-reduced-motion:reduce){ [data-reveal].stagger > *{ opacity:1 !important; transform:none !important; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--s12); }
  .hero--cinematic .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ min-height:auto; margin-top:8px; }
  .hero h1{ max-width:20ch; }
  .trust{ grid-template-columns:1fr; }
  .advisor{ grid-template-columns:1fr; }
  .advisor-photo{ max-width:360px; aspect-ratio:4/4; }
  .faq{ grid-template-columns:1fr; }
  .faq-aside{ position:static; }
  .cta-card{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .brand-sub{ display:none; }
  .nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--surface); flex-direction:column; align-items:stretch; justify-content:center; gap:8px; padding:32px; transform:translateX(100%); transition:transform .3s var(--ease); box-shadow:-20px 0 60px -20px rgba(0,0,0,.25); z-index:120; }
  .nav a{ padding:12px 0; font-size:1.1rem; border-bottom:1px solid var(--hairline); }
  .nav .btn-primary{ margin-top:12px; justify-content:center; border-bottom:0; }
  body.menu-open .nav{ transform:translateX(0); }
  body.menu-open .nav-scrim{ display:block; position:fixed; inset:0; background:rgba(36,26,18,.4); z-index:110; }
  .hamburger{ display:flex; z-index:130; }
  body.menu-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .hamburger span:nth-child(2){ opacity:0; }
  body.menu-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.05rem; max-width:none; }
  .hero h1 br{ display:none; }
  .hero-sub{ font-size:1.08rem; }
  .gap-figure .gap-num{ font-size:2rem; }
  .ladder-top{ flex-wrap:wrap; }
  .section{ padding:var(--s16) 0; }
}

/* ============================================================
   POLISH pass (review → 10/10): hover afordance, kompozice,
   jedna primárka, loga, nav underline
   ============================================================ */
.step{ transition:background .22s var(--ease); }
.step:hover{ background:var(--paper-2); }
.faq-q{ cursor:pointer; transition:background .2s var(--ease); }
.faq-q:hover{ background:rgba(36,26,18,.035); }
.faq-q:hover .q-chev{ color:var(--ink); }
.footer-col a{ transition:color .18s; }
/* strip loga barevná (žádný grayscale) — sjednoceno se žebříčkem */
.advisor-photo{ transition:transform .35s var(--ease); }
.advisor-photo:hover{ transform:scale(1.012); }
/* sekce 02: zarovnat sloupce nahoru → zmizí diagonální díra */
.trust{ align-items:start; }
/* jen JEDNA plná primárka (oranžová); poradcovo CTA = zelený outline */
.btn-green{ background:transparent; color:var(--green-deep); border:1px solid var(--green); box-shadow:none; }
.btn-green:hover{ background:var(--green); color:#fff; transform:translateY(-1px); }
/* nav odkazy: tenké zelené podtržení zleva */
.nav > a:not(.btn-primary){ position:relative; }
.nav > a:not(.btn-primary)::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease); }
.nav > a:not(.btn-primary):hover::after{ transform:scaleX(1); }
body:not(.menu-open) .site-header:not(.scrolled) .nav > a:not(.btn-primary)::after{ background:var(--green-pale); }
/* poradce: role pod podpisem */
.advisor-role{ position:absolute; left:24px; bottom:12px; z-index:4; font-family:var(--font-mono);
  font-size:var(--fs-micro); letter-spacing:.04em; color:rgba(255,250,244,.96); text-shadow:0 1px 3px rgba(20,12,6,.55); }
@media (prefers-reduced-motion:reduce){ .step:hover,.advisor-photo:hover,.btn-green:hover{ transform:none; } }

/* ============================================================
   KINETIC BODY — „cinematic & kinetický" redesign těla (v18)
   Tříaktová skladba: papír dýchá mezi tmavými datovými beaty.
   Reusable grain + scrim z hera → do těla. Bez nových barev/fontů.
   ============================================================ */

/* ---- Reusable filmové vrstvy (extrakce z hera) ---- */
.grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scene-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 95% at 88% 6%, rgba(242,80,14,.30), transparent 52%),
    radial-gradient(95% 85% at 2% 96%, rgba(78,125,27,.24), transparent 60%); }

/* ---- Tmavá full-bleed scéna (background na section, obsah v .container) ---- */
.scene--dark{ position:relative; background:#160F09; color:#F7ECDD; overflow:hidden; isolation:isolate; }
/* Vodoznak echo hera, tentokrát nahoře vpravo (jiné místo, ne opakovaná
   šablona) — stejný princip jako .hero-wordmark, viz komentář tam. */
/* MENŠÍ SOUROZENEC HERA (26.8. odpoledne): stejné zpracování jako
   .hero-wordmark, ale zřetelně menší — na 1920 je to 346 px proti 576 px
   v heru, tedy 60 %. Tím se obě místa liší měřítkem, ne způsobem, a nepůsobí
   to jako dvakrát tentýž trik. Mezitím se zkoušela i opačná cesta (zvětšit
   tak, aby v ploše zbyla dvě tři písmena jako abstraktní tvary) — ZAMÍTNUTO,
   ze slova nesmí zbýt jen pár písmen. Krytí 4,5 % místo 5 %, protože pozadí
   je tu skoro ploše černé a stejná hodnota čte hlasitěji než v heru. */
.scene-wordmark{
  position:absolute; z-index:0; right:-9vw; top:-4.5vw;
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(140px,18vw,460px); line-height:.9; white-space:nowrap;
  color:rgba(247,236,221,.045); pointer-events:none; user-select:none;
}
@media (max-width:1000px){ .scene-wordmark{ display:none; } }
.scene--dark > .container{ position:relative; z-index:2; }
.scene--dark .eyebrow{ color:var(--green-pale); }
.scene--dark .eyebrow::before{ background:var(--green-pale); }
.scene--dark h2, .scene--dark h3{ color:#fff; }
/* full-bleed tmavá sekce: reveal jen opacitou (translateY by nahoře odkryl papírový šev) */
.scene--dark[data-reveal]{ transform:none; }
.scene--dark .ghost-num{ display:block; line-height:1; margin-bottom:14px; color:transparent; -webkit-text-stroke-color:rgba(247,236,221,.20); }

/* ============================================================
   02 · MEZERA MEZI BANKAMI — druhá signature (rate spectrum)
   ============================================================ */
.gap-scene{ padding:clamp(72px,9vw,120px) 0; }
.gap-scene .eyebrow{ margin-bottom:var(--s6); }
.gap-headline{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2rem,4.4vw,3.4rem); color:#fff; max-width:16ch; margin-bottom:clamp(40px,6vw,72px);
}
.gap-hero-num{
  display:block; font-family:var(--font-num); font-weight:500;
  font-size:var(--fs-display); line-height:.9; color:var(--green-bright); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin:.06em 0 .04em; min-width:6ch;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.ghn-unit{ font-family:var(--font-mono); font-size:.26em; font-weight:500; color:rgba(var(--green-bright-rgb),.72);
  letter-spacing:.02em; margin-left:.18em; text-shadow:none; }

/* ---- RATE SPECTRUM (horizontální osa, vzdálenost mezi bankami = argument) ---- */
.spectrum{ position:relative; margin:clamp(56px,7vw,84px) 0 clamp(28px,4vw,40px); }
.spectrum-axis{ position:relative; height:2px; margin:118px 22px 172px; }
.spectrum-line{ position:absolute; inset:0; border-radius:2px; opacity:.92;
  background:linear-gradient(90deg,var(--ramp-1),var(--ramp-3) 50%,var(--ramp-6));
  transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.16,1,.3,1) .1s; }
.gap-scene.is-in .spectrum-line{ transform:scaleX(1); }
/* čip = bodový anchor přesně na sazbě (na ose) */
.spec-chip{ position:absolute; left:var(--x); top:1px; width:0; z-index:1;
  opacity:0; transition:opacity .55s var(--ease); }
.gap-scene.is-in .spec-chip{ opacity:1; }
.gap-scene.is-in .spec-chip:nth-child(3){ transition-delay:.06s; }
.gap-scene.is-in .spec-chip:nth-child(4){ transition-delay:.12s; }
.gap-scene.is-in .spec-chip:nth-child(5){ transition-delay:.18s; }
.gap-scene.is-in .spec-chip:nth-child(6){ transition-delay:.24s; }
.gap-scene.is-in .spec-chip:nth-child(7){ transition-delay:.30s; }
.spec-dot{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%;
  background:var(--dot,#DC7A18); z-index:2; box-shadow:0 0 0 4px #160F09; }
.spec-label{ position:absolute; left:0; transform:translateX(-50%); width:max-content;
  display:flex; flex-direction:column; align-items:center; gap:5px; }
.spec-chip[data-side="up"] .spec-label{ bottom:20px; }
.spec-chip[data-side="down"] .spec-label{ top:20px; }
.spec-chip[data-side="down2"] .spec-label{ top:72px; }
.spec-label::after{ content:""; position:absolute; left:50%; width:1px; background:rgba(247,236,221,.24); }
.spec-chip[data-side="up"] .spec-label::after{ top:100%; height:20px; }
.spec-chip[data-side="down"] .spec-label::after{ bottom:100%; height:20px; }
.spec-chip[data-side="down2"] .spec-label::after{ bottom:100%; height:72px; }
.spec-bank{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; color:#F7ECDD; white-space:nowrap; }
.spec-bank img{ width:18px; height:18px; object-fit:contain; border-radius:5px; background:#fff; padding:1px; }
.spec-rate{ font-family:var(--font-mono); font-size:.84rem; color:rgba(247,236,221,.7); letter-spacing:.02em; }
.spec-cap{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.spec-cap.cheap{ background:rgba(var(--green-bright-rgb),.16); color:var(--green-pale); }
.spec-cap.dear{ background:rgba(242,80,14,.2); color:#FF8A52; }
.spec-chip.is-cheap .spec-dot{ --dot:var(--green-bright); }
.spec-chip.is-cheap .spec-bank{ color:var(--green-pale); }
/* krajní čipy zarovnat dovnitř, ať nevytečou z osy (cílíme třídou, ne DOM pozicí:
   1. dítě .spectrum-axis je .spectrum-line, ne čip) */
.spec-chip.is-cheap .spec-label{ transform:translateX(0); align-items:flex-start; }
.spec-chip.is-cheap .spec-label::after{ left:6px; }
.spec-chip.is-dear .spec-label{ transform:translateX(-100%); align-items:flex-end; }
.spec-chip.is-dear .spec-label::after{ left:auto; right:6px; }
.spectrum-scale{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-micro);
  color:rgba(247,236,221,.5); letter-spacing:.04em; }
.spectrum-scale span:first-child{ color:var(--green-bright); }
.spectrum-scale span:last-child{ color:#FF8A52; }
.spectrum-mobile{ display:none; }

.gap-caption{ font-family:var(--font-mono); font-size:var(--fs-small); line-height:1.6; color:rgba(247,236,221,.72);
  max-width:52ch; margin-top:clamp(28px,4vw,44px); padding-top:var(--s6); border-top:1px solid rgba(247,236,221,.14); }
.gap-caption strong{ color:var(--green-pale); font-weight:500; }
.gap-badges{ display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap; margin-top:var(--s6);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.04em; color:rgba(247,236,221,.62); }
.gap-badges span{ display:inline-flex; align-items:center; gap:8px; }
.gap-badges span + span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--green-bright); margin-right:12px; }
.gap-badges b{ color:rgba(247,236,221,.78); font-weight:600; }

/* ============================================================
   01 · JAK TO FUNGUJE — otevřené sloupce + obří numerály + rail
   ============================================================ */
.steps--open{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:none; border:0; border-radius:0; overflow:visible; position:relative; }
.step-rail{ position:absolute; top:0; left:0; right:0; height:1px; background:var(--hairline-strong);
  transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.16,1,.3,1); }
.steps--open.is-in .step-rail{ transform:scaleX(1); }
.step--open{ background:none; padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,34px) 0 0; position:relative; }
.step--open + .step--open{ border-left:1px solid var(--hairline); padding-left:clamp(24px,2.6vw,40px); }
.step-num{ font-family:var(--font-display); font-weight:400; line-height:.9; color:var(--ink);
  font-size:clamp(3.2rem,5.4vw,5.2rem); letter-spacing:-.03em; display:block; margin-bottom:var(--s4); }
.step--open .step-k{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:#B33F0B; display:block; margin-bottom:var(--s3); }   /* --orange má na papíře jen 3,5:1 */
.step--open h3{ font-weight:600; margin:0 0 var(--s2); }
.step--open p{ color:var(--ink-muted); font-size:1rem; max-width:26ch; }
/* mini bar-race teaser v kroku 03 (foreshadow signatury) */
.step-teaser{ display:flex; flex-direction:column; gap:6px; margin-top:var(--s6); max-width:210px; }
.step-teaser .tb{ height:6px; border-radius:4px; transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.16,1,.3,1); }
.steps--open.is-in .step-teaser .tb{ transform:scaleX(1); }
.step-teaser .tb:nth-child(1){ width:42%; background:var(--ramp-1); transition-delay:.30s; }
.step-teaser .tb:nth-child(2){ width:68%; background:var(--ramp-3); transition-delay:.38s; }
.step-teaser .tb:nth-child(3){ width:96%; background:var(--ramp-6); transition-delay:.46s; }
@media (prefers-reduced-motion:reduce){
  .spectrum-line,.spec-chip,.step-rail,.step-teaser .tb{ transition:none !important; }
}

/* ============================================================
   FAQ mini staty → Fraunces display + count-up
   ============================================================ */
.faq{ position:relative; }
.faq-mini .m-val{ font-family:var(--font-num); font-weight:500; font-size:clamp(2.2rem,3.6vw,3rem); color:var(--ink);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.faq-mini .m-val .u{ font-size:.5em; color:var(--ink-dim); margin-left:2px; }

/* ============================================================
   CTA — grain + mini ramp echo
   ============================================================ */
.cta-card > .grain{ z-index:0; opacity:.045; }
.cta-card > *:not(.grain){ position:relative; z-index:1; }
.cta-ramp{ display:flex; flex-direction:column; gap:7px; margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid rgba(247,236,221,.14); }
.cta-ramp .cr{ height:7px; border-radius:5px; transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.16,1,.3,1); }
.cta-card.is-in .cta-ramp .cr:nth-child(1){ transform:scaleX(1); transition-delay:.05s; }
.cta-card.is-in .cta-ramp .cr:nth-child(2){ transform:scaleX(1); transition-delay:.14s; }
.cta-ramp .cr:nth-child(1){ width:36%; background:var(--green-bright); }
.cta-ramp .cr:nth-child(2){ width:97%; background:#FF8A52; }
@media (prefers-reduced-motion:reduce){ .cta-ramp .cr{ transition:none !important; } }

/* ============================================================
   MOBILNÍ STICKY LIŠTA (buy-bar) — papírová římsa, ne plovoucí pilulka
   ============================================================ */
.mbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  align-items:center; justify-content:space-between; gap:14px;
  padding:11px clamp(16px,4.5vw,22px) calc(11px + env(safe-area-inset-bottom));
  background:var(--paper); border-top:1px solid var(--hairline-strong);
  transform:translateY(102%); transition:transform .34s var(--ease); will-change:transform; }
.mbar.show{ transform:translateY(0); }
.mbar-info{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.mbar-lab{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); }
.mbar-rate{ font-family:var(--font-display); font-weight:500; font-size:1.55rem; color:var(--green-deep); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.mbar-cta{ flex:0 1 auto; min-height:52px; padding-inline:20px; white-space:nowrap; }
@media (max-width:720px){ .mbar{ display:flex; } }
@media (prefers-reduced-motion:reduce){ .mbar{ transition:none; } }

/* ============================================================
   RESPONSIVE — kinetic body
   ============================================================ */
@media (max-width:900px){
  .steps--open{ grid-template-columns:1fr; }
  .step--open{ padding:var(--s6) 0; }
  .step--open + .step--open{ border-left:0; border-top:1px solid var(--hairline); padding-left:0; }
  .step-num{ font-size:3.4rem; }
  .step-rail{ display:none; }
  /* horizontální spektrum se v úzkém pásmu mačká → přepnout na čistý žebříček */
  .spectrum{ display:none; }
  .spectrum-mobile{ display:flex; flex-direction:column; gap:14px; margin:clamp(36px,6vw,52px) 0 clamp(24px,4vw,36px); }
  .spectrum-mobile .lrow-bank{ color:#F7ECDD; }
  .spectrum-mobile .lrow-rank{ color:rgba(247,236,221,.55); }
  .spectrum-mobile .lrow-rate{ color:#F7ECDD; }
  .spectrum-mobile .lrow.is-best .lrow-bank,.spectrum-mobile .lrow.is-best .lrow-rate{ color:var(--green-pale); }
  .spectrum-mobile .lrow-track{ background:rgba(247,236,221,.12); }
  .spectrum-mobile .lrow-bank img{ background:#fff; padding:1px; }
}
@media (max-width:720px){
  .gap-headline{ font-size:2rem; max-width:none; }
  .gap-hero-num{ font-size:clamp(3rem,15vw,4.4rem); }
}

/* ============================================================
   v34 — ČÍSLA SERIFEM, MONO PRYČ, LOGA BANK JAKO DLAŽDICE
   Vojta: „to hůlkové písmo, nula s čárkou uprostřed" = Geist Mono.
   Řešení: mono vyhozen z tokenu (--font-mono je teď Figtree = štítky),
   datová čísla nesou serifové číslice Fraunces (--font-num) = stejná
   rodina jako nadpisy → editoriální celek, žádný „terminál".
   ============================================================ */
.lrow-rank, .lrow-rate, .cta-fig-val, .faq-q .q-num, .spec-rate, .spectrum-scale,
.hero-card-note b, .gap-figure .gap-val{
  font-family:var(--font-num); font-optical-sizing:auto; letter-spacing:0;
}
.lrow-rate{ font-weight:600; font-size:1.02rem; }
.lrow-rank{ font-size:.86rem; }
/* štítky, které dřív držel mono tvar: Figtree potřebuje o stupeň silnější tah,
   aby prostrkané verzálky nezplihly */
.eyebrow, .ladder-cap, .ladder-live, .lrow-tag, .hcc-lab, .hcc-unit, .hc-cap, .hc-live,
.hcf-lab, .strip-label, .advisor-eyebrow, .footer-col h5, .spec-cap, .step--open .step-k,
.mbar-lab, .gap-figure .gap-sub{ font-weight:600; }
.lrow-tag{ letter-spacing:.06em; }

/* ---- Logo banky: jednotná dlaždice (barevná značka v papírovém rámu) ---- */
.lrow-bank img, .blogo{
  width:26px; height:26px; flex:none; border-radius:7px; overflow:hidden;
  object-fit:cover; background:#fff; box-shadow:0 0 0 1px var(--hairline) inset;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lrow:hover .lrow-bank img{ transform:scale(1.09) rotate(-1.5deg); box-shadow:0 0 0 1px var(--hairline-strong) inset, 0 4px 12px rgba(36,26,18,.14); }
.lrow.is-best .lrow-bank img{ box-shadow:0 0 0 1px rgba(78,125,27,.5) inset, 0 2px 8px rgba(78,125,27,.16); }
@media (prefers-reduced-motion:reduce){ .lrow-bank img{ transition:none } .lrow:hover .lrow-bank img{ transform:none } }
@media (max-width:640px){ .lrow-bank img, .blogo{ width:23px; height:23px; border-radius:6px; } }

/* ---- týmová fotka partnera (SAB servis) místo portrétu poradce ---- */
.advisor-photo--team{ aspect-ratio:4/3; }
.advisor-photo--team img{ object-position:50% 46%; }
.advisor-photo--team .sig{ font-style:normal; font-family:var(--font-body); font-weight:700;
  font-size:1.5rem; letter-spacing:-.01em; bottom:44px; }
@media (max-width:900px){ .advisor-photo--team{ max-width:460px; aspect-ratio:4/3; } }

/* ============================================================
   v35 · CESTA K DESÍTCE
   hero asymetrie · logo-stěna · scroll scéna 02 · mikrotypografie
   ============================================================ */

/* ---------- HERO: nesouměrný grid a řízené zalomení nadpisu ---------- */
.hero--cinematic .hero-grid{ grid-template-columns:1.42fr 1fr; align-items:center; }
.hero h1{ max-width:none; text-wrap:balance; }
.hero-copy > *{ max-width:19ch; }
.hero-copy .hero-sub{ max-width:44ch; }
.hero-copy .hero-cta, .hero-copy .hero-trust{ max-width:none; }
/* Míra 19ch je pro nadpis. Štítek nad ním je prostrkaná verzálka, takže se do ní
   nevešel a na počítači se lámal na tři řádky („HYPOTÉKY · / SROVNÁNÍ 6 / BANK"). */
.hero-copy .hero-eyebrow, .hero-copy .eyebrow{ max-width:none; white-space:nowrap; }
/* karta vystupuje z mřížky ven k pravé hraně, ať kompozice není půl na půl */
@media (min-width:1080px){
  .hero--cinematic .hero-stage{ margin-right:clamp(-40px,-2.4vw,0px); }
}
@media (max-width:1000px){
  .hero--cinematic .hero-grid{ grid-template-columns:1fr; }
  .hero-copy > *{ max-width:none; }
}

/* ---------- LOGO-STĚNA: barevná loga bank, jen sjednocený tvar a nástup ---------- */
.strip-bank img{
  border-radius:7px; background:#fff; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.strip-bank:hover img{ transform:translateY(-2px); box-shadow:0 6px 14px -6px rgba(36,26,18,.45); }

/* ---------- 02 · MEZERA MEZI BANKAMI jako scroll scéna ---------- */
.gap-track{ position:relative; }
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .gap-track.is-scrub{ height:210vh; }
  .gap-track.is-scrub .gap-scene{
    position:sticky; top:0; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
  }
  /* při scrubu řídí kresbu pozice scrollu, ne časovač */
  .gap-scene.is-scrub .spectrum-line{ transform:scaleX(var(--pl,1)); transition:none; }
  .gap-scene.is-scrub .spec-chip{ transition:none; }
  .gap-scene.is-scrub .spectrum-ruler i{ transition:none; }
}

/* pravítko po 0,01 p.b. */
.spectrum-ruler{ position:absolute; inset:0; pointer-events:none; }
.spectrum-ruler i{
  position:absolute; left:var(--x); top:0; width:1px; height:6px; transform:translate(-50%,-2px);
  background:rgba(247,236,221,.22); opacity:0; transition:opacity .5s var(--ease);
}
.spectrum-ruler i.tk-lg{ height:11px; transform:translate(-50%,-4px); background:rgba(247,236,221,.34); }
.gap-scene.is-in .spectrum-ruler i{ opacity:1; }

/* dvě banky se shodnou sazbou sdílí místo na ose: odsadit tečku, ne posunout pravdu */
.spec-dot{ transform:translate(-50%,-50%) translateY(var(--dy,0)); }
.spec-chip[data-side="up"] .spec-label::after,
.spec-chip[data-side="down"] .spec-label::after,
.spec-chip[data-side="down2"] .spec-label::after{ margin-top:var(--dy,0); }

/* ---------- MIKROTYPOGRAFIE A DOROVNÁNÍ SYSTÉMU ---------- */
/* otázka ve FAQ nese hierarchii velikostí, ne jen tučností */
.faq-q .q-text{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.24rem,1.9vw,1.5rem); letter-spacing:-.015em; }
.faq-a-inner{ max-width:62ch; }
/* popisek statu se nelámal jen u jednoho ze tří čísel */
.faq-mini .m-lab{ max-width:24ch; }
/* jeden systém numerálů: ghost i krokové číslo stejná kresba */
.step-num{ font-weight:400; letter-spacing:-.03em; }
/* viditelné zaostření klávesnicí napříč webem */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--orange); outline-offset:3px; border-radius:4px;
}
.scene--dark :where(a, button, [tabindex]):focus-visible{ outline-color:var(--green-pale); }

/* tisk: nic nesmí zůstat schované jen proto, že se k tomu nedoscrollovalo */
@media print{
  [data-reveal], [data-reveal].stagger > *{ opacity:1 !important; transform:none !important; }
  .gap-track.is-scrub{ height:auto !important; }
  .gap-track.is-scrub .gap-scene{ position:static !important; min-height:0 !important; }
  .spectrum-line{ transform:scaleX(1) !important; }
  .spec-chip, .spectrum-ruler i{ opacity:1 !important; }
}

/* scéna 02 se při scrubu musí vejít do jedné obrazovky, jinak by odjížděla dřív, než dokreslí */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .gap-track.is-scrub .gap-scene{ padding-block:clamp(24px,4vh,56px); }
  .gap-track.is-scrub .gap-headline{ margin-bottom:clamp(20px,3.4vh,56px); }
  .gap-track.is-scrub .spectrum{ margin:clamp(20px,3vh,48px) 0 clamp(10px,1.6vh,26px); }
  .gap-track.is-scrub .spectrum-axis{ margin:clamp(78px,11vh,118px) 22px clamp(104px,15vh,172px); }
  .gap-track.is-scrub .gap-caption{ margin-top:clamp(16px,2.6vh,40px); padding-top:var(--s5); }
  .gap-track.is-scrub .gap-badges{ margin-top:var(--s5); }
}

/* ---------- osa sazeb se přizpůsobí zvolené fixaci ----------
   Popisky se rozvrhnou do pater (--off) podle skutečné šířky, protože při roční fixaci
   sedí čtyři banky na stejné sazbě a jinak by se slepily. Statické data-side zůstává pro no-JS. */
.spec-chip[data-dir="down"] .spec-label{ top:var(--off,20px); bottom:auto; }
.spec-chip[data-dir="up"]   .spec-label{ bottom:var(--off,20px); top:auto; }
.spec-chip[data-dir="down"] .spec-label::after{ bottom:100%; top:auto; height:var(--off,20px); }
.spec-chip[data-dir="up"]   .spec-label::after{ top:100%; bottom:auto; height:var(--off,20px); }
.spec-chip.edge-l .spec-label{ transform:translateX(0); align-items:flex-start; }
.spec-chip.edge-l .spec-label::after{ left:6px; right:auto; }
.spec-chip.edge-r .spec-label{ transform:translateX(-100%); align-items:flex-end; }
.spec-chip.edge-r .spec-label::after{ left:auto; right:6px; }
/* čipy uprostřed osy zůstávají vycentrované, i když mají třídu is-dear kvůli barvě */
.spec-chip.is-dear:not(.edge-r) .spec-label{ transform:translateX(-50%); align-items:center; }
.spec-chip.is-dear:not(.edge-r) .spec-label::after{ left:50%; right:auto; }
.spec-chip.is-cheap:not(.edge-l) .spec-label{ transform:translateX(-50%); align-items:center; }
.spec-chip.is-cheap:not(.edge-l) .spec-label::after{ left:50%; right:auto; }
/* skupina bank se shodnou sazbou sdílí jeden bod na ose */
.spec-chip.is-group .spec-bank{ font-size:.84rem; }
.spec-chip.is-group .spec-label{ gap:3px; }
.spec-chip.is-group .spec-rate{ margin-top:2px; }


.spectrum{ position:relative; }


/* ============================================================
   v37 MOBIL — palec místo myši
   Mobil je 70 % provozu, takže se tu neřeší „aby to nespadlo", ale aby to
   bylo na telefonu LEPŠÍ než na monitoru. Vše měřeno Playwrightem na 390 px.
   ============================================================ */
@media (max-width:720px){

  /* --- 1. Slider v hero kartě: dotyková plocha byla 4 px vysoká (naměřeno).
         Čára zůstane tenká, prst dostane celých 44 px. --------------------- */
  .hcc-slider{ height:44px; margin-top:2px; background:none; }
  .hcc-slider::-webkit-slider-runnable-track{ height:6px; border-radius:999px;
    background:linear-gradient(90deg,var(--ramp-1),var(--ramp-3) 55%,var(--ramp-5)); }
  .hcc-slider::-webkit-slider-thumb{ width:26px; height:26px; margin-top:-10px; border-width:2px; }
  .hcc-slider::-moz-range-track{ height:6px; border-radius:999px;
    background:linear-gradient(90deg,var(--ramp-1),var(--ramp-3) 55%,var(--ramp-5)); }
  .hcc-slider::-moz-range-thumb{ width:24px; height:24px; }

  /* --- 2. Fixace: pět drobných čipů 30×27 → celoplošný přepínač,
         každý dílek přes celý palec, popisek nad řadou. ------------------- */
  .hcc-fix{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
  .hcc-chip{ min-height:44px; min-width:0; padding:0 4px; font-size:.94rem;
    display:flex; align-items:center; justify-content:center; }
  .hcc-unit{ grid-column:1 / -1; order:-1; margin:0 0 2px; }
  /* popisek před pilulkami (panel na metodice) patří taky nad řadu, ne do ní */
  .hcc-fix > .hcc-lab{ grid-column:1 / -1; order:-2; margin:0 0 2px; }
  .mc-panel .hcc-fix .hcc-unit{ display:none; }   /* „Fixace" už je v popisku */

  /* --- 3. Hlavička: hamburger měl 40×32. --------------------------------- */
  .hamburger{ width:44px; height:44px; align-items:center; justify-content:center; padding:0; }

  /* --- 4. Odkazy v patičce: 35 px na výšku → 44. ------------------------- */
  .footer-col a{ padding:10px 0; }

  /* --- 5. Oddělovací tečky nesmí zůstat viset samy na řádku.
         Místo lámaného flexu mřížka „tečka | text". ----------------------- */
  .hero-trust{ display:grid; grid-template-columns:auto 1fr; align-items:start; gap:9px 10px; }
  .hero-trust .dot{ margin-top:.5em; }
  .gap-badges{ display:grid; grid-template-columns:1fr; gap:8px; }
  .gap-badges span + span::before{ display:none; }
  .gap-badges span{ position:relative; padding-left:14px; }
  .gap-badges span::after{ content:""; position:absolute; left:0; top:.62em;
    width:4px; height:4px; border-radius:50%; background:var(--green-bright); }

  /* --- 6. Text nesmí končit v půlce obrazovky: desktopové míry v „ch"
         nechávaly vpravo 58 px prázdna (naměřeno). ------------------------ */
  .step--open p{ max-width:none; }
  .hero h1{ text-wrap:balance; }
  .hero-sub, .section-head p, .lead p{ max-width:none; }

  /* --- 7. Karta nad videem: backdrop-filter je na telefonu drahý (blur přes
         přehrávané video = trhaný scroll). Papír je stejně hezčí. --------- */
  .hero-card{ backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(255,252,246,.955); box-shadow:0 22px 54px -26px rgba(18,10,4,.72); }
}

@media (max-width:720px){
  /* --- 8. Hlavička sekce: číslo a text si na 390 px konkurovaly o šířku
         (text končil na 292 z 350 px). Na mobilu jde číslo nad text. ------ */
  .section-head{ display:block; }
  .section-head .section-head-body{ min-width:0; }
  .section-lead{ max-width:none; }

  /* --- 9. Spodní lišta: na 360 px se popisek lámal na dva řádky. -------- */
  .mbar-lab{ font-size:.56rem; letter-spacing:.07em; white-space:nowrap; }
  .mbar-rate{ font-size:1.42rem; }
}


/* ============================================================
   v37 MOBIL — SVISLÁ OSA SAZEB (sekce 02)
   Vodorovná osa se do 390 px nevejde, ale mobil neměl dostat ochuzeninu:
   dřív tu byl druhý opis žebříčku z hero karty (dvakrát totéž na dvě obrazovky).
   Telefon má naopak výšky dost, takže osa jde na výšku a mezera mezi bankami
   je vidět jako fyzická vzdálenost. Desktop zůstává beze změny.
   ============================================================ */
.vspec{ display:none; }
.vspec-axis{ position:relative; padding:0; }
.vspec-line{ position:absolute; left:10px; top:2px; bottom:2px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--ramp-1), var(--ramp-3) 52%, var(--ramp-5)); opacity:.45; }
.vspec-item{ position:absolute; left:0; right:0; top:var(--y); transform:translateY(-50%);
  display:flex; align-items:center; gap:10px; padding-left:32px; }
.vspec-dot{ position:absolute; left:4px; top:50%; margin-top:-7px; width:14px; height:14px; border-radius:50%;
  background:var(--c,var(--ramp-3)); box-shadow:0 0 0 3px rgba(22,15,9,.85); }
.vspec-item.is-cheap .vspec-dot{ box-shadow:0 0 0 3px rgba(22,15,9,.85), 0 0 0 6px rgba(var(--green-bright-rgb),.22); }
.vspec-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.vspec-cap{ font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.vspec-cap.cheap{ color:var(--green-bright); }
.vspec-cap.dear{ color:#E8916A; }
.vspec-name{ display:flex; align-items:center; gap:7px; color:rgba(247,236,221,.92); font-size:1rem; line-height:1.2; }
.vspec-name img{ width:23px; height:23px; border-radius:6px; background:#fff; object-fit:cover; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; }
.vspec-item.is-cheap .vspec-name{ color:#fff; font-weight:500; }
.vspec-rate{ margin-left:auto; font-family:var(--font-num); font-optical-sizing:auto; font-weight:600;
  font-size:1.06rem; color:rgba(247,236,221,.92); white-space:nowrap; }
.vspec-item.is-cheap .vspec-rate{ color:var(--green-pale); }
.vspec-item.is-dear .vspec-rate{ color:#EDA179; }
.vspec-foot{ margin-top:18px; font-size:.94rem; line-height:1.6; color:rgba(247,236,221,.62); }
.vspec-foot b{ color:rgba(247,236,221,.92); font-weight:600; }
/* nástup: body naskočí shora dolů, jak se osa odkrývá */
.vspec-item{ opacity:0; transform:translateY(-50%) translateX(-10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.is-in .vspec-item, .vspec-item.is-on{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (prefers-reduced-motion:reduce){ .vspec-item{ opacity:1 !important; transform:translateY(-50%) !important; transition:none; } }

@media (max-width:900px){
  .vspec{ display:block; margin:clamp(26px,6vw,40px) 0 clamp(18px,4vw,28px); }
  .spectrum-mobile{ display:none; }
}

/* --- pořadí v žebříčku sedělo na středu celého řádku, takže u řádků se štítkem
       kleslo pod jméno banky (naměřená odchylka 7 px). Patří na účaří jména banky,
       tedy do stejné výšky jako logo. --- */
.lrow{ align-items:start; }
.lrow-rank{ display:flex; align-items:center; justify-content:flex-end; min-height:26px; line-height:1.1; }
@media (max-width:640px){ .lrow-rank{ min-height:23px; } }

@media (max-width:720px){
  /* --- Trojice kroků („Jak to funguje", „Co se stane po odeslání") zabírala na
         telefonu skoro tři obrazovky na tři věty: obří číslo si bralo celý řádek.
         Na mobilu z toho je svislá časová osa — číslo vlevo, text vedle. -------- */
  .steps--open{ position:relative; padding-left:46px; }
  .steps--open::before{ content:""; position:absolute; left:17px; top:10px; bottom:10px;
    width:1px; background:var(--hairline-strong); }
  .step--open{ padding:0 0 var(--s8) 0 !important; border-top:0 !important; position:relative; }
  .step--open:last-child{ padding-bottom:0 !important; }
  .step--open .step-num{ position:absolute; left:-46px; top:-2px; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
    border-radius:50%; background:var(--paper); border:1px solid var(--hairline-strong);
    color:var(--ink-muted); }
  .step--open .step-k{ margin-bottom:2px; }
  .step--open h3{ font-size:1.12rem; }
  .step--open p{ margin-top:3px; }
  .step-teaser{ margin-top:10px; }
}

@media (max-width:720px){
  /* --- podlaha velikosti písma: pod ~11 px se drobné štítky na telefonu nečtou --- */
  .lrow-tag{ font-size:12px; }
  .hero-card-note{ font-size:12px; line-height:1.5; }
  .vspec-cap{ font-size:12px; }
  .mbar-lab{ font-size:11.5px; }
  /* --- dotykové cíle v hlavičce a patičce --- */
  .site-header .logo{ display:inline-flex; align-items:center; min-height:44px; }
  .nav .btn-primary{ min-height:48px; }
}

@media (max-width:720px){
  /* logo-stěna bank: flex s wrapem nechal druhý sloupec rozházený (ČSOB × UniCredit),
     mřížka je srovná pod sebe */
  .strip-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; justify-content:start; }
  .strip-bank{ justify-content:flex-start; }
}

/* --- sazba v žebříčku patří na účaří jména banky, ne na střed dvouřádkového bloku
       (u řádků se štítkem „nejlevnější/nejdražší" klesala pod jméno) --- */
.lrow-head{ align-items:flex-start; }


/* ============================================================
   v39 TABLET — ergonomie se neřídí šířkou, ale prstem
   Mobilní opravy byly vázané na ≤720 px, takže iPad (768–1024) nedostal nic:
   posuvník měl 4 px na výšku, pilulky 30×27, štítky pod 11 px. Tady je totéž
   navázané na `pointer:coarse`, tedy na jakékoli dotykové zařízení.
   Rozvržení (mřížky, stohování) zůstává podle šířky, to je správně.
   ============================================================ */
@media (pointer:coarse){

  /* posuvníky: prst potřebuje 44 px, čára zůstává tenká */
  .hcc-slider{ height:44px; margin-top:2px; background:none; }
  .hcc-slider::-webkit-slider-runnable-track{ height:6px; border-radius:999px;
    background:linear-gradient(90deg,var(--ramp-1),var(--ramp-3) 55%,var(--ramp-5)); }
  .hcc-slider::-webkit-slider-thumb{ width:26px; height:26px; margin-top:-10px; border-width:2px; }
  .hcc-slider::-moz-range-track{ height:6px; border-radius:999px;
    background:linear-gradient(90deg,var(--ramp-1),var(--ramp-3) 55%,var(--ramp-5)); }
  .hcc-slider::-moz-range-thumb{ width:24px; height:24px; }

  /* dotykové cíle */
  .hcc-chip{ min-height:44px; min-width:44px; padding:0 12px;
    display:inline-flex; align-items:center; justify-content:center; }
  .hamburger{ width:44px; height:44px; align-items:center; justify-content:center; padding:0; }
  .footer-col a{ padding:10px 0; }
  .site-header .logo{ display:inline-flex; align-items:center; min-height:44px; }
  .nav a{ padding-block:11px; }
  .nav .btn-primary{ min-height:48px; }

  /* podlaha velikosti písma (na tabletu se drží dál od očí než telefon) */
  .lrow-tag{ font-size:12px; }
  .hero-card-note{ font-size:12px; line-height:1.5; }
  .vspec-cap{ font-size:12px; }
  .spec-cap{ font-size:11.5px; }        /* popisky vodorovné osy na tabletu (9,3 px) */
}

/* --- hlavička na tabletu: podtitulek značky a odkazy se lámaly na dva řádky
       („Jak / počítáme"), protože desktopová hlavička platí od 721 px. --- */
@media (max-width:1100px){
  .brand-sub{ display:none; }
  .nav > a{ white-space:nowrap; }
}

/* --- Tabletové pásmo 721–1000 px: dosud spadlo mezi dvě židle. Desktopové
       rozvržení se sem nevešlo, mobilní stohování zase nechávalo půl obrazovky
       prázdnou (tři kroky přes celou šířku, text zalomený ve 26 znacích). --- */
@media (min-width:721px) and (max-width:1000px){
  /* tři kroky vedle sebe jako na desktopu, jen o stupeň menší číslice */
  .steps--open{ grid-template-columns:repeat(3,1fr); }
  .step--open{ padding:clamp(22px,3vw,32px) clamp(14px,2vw,22px) 0 0; }
  .step--open + .step--open{ border-top:0; border-left:1px solid var(--hairline);
    padding-left:clamp(16px,2.2vw,26px); }
  .step-num{ font-size:2.7rem; }
  .step--open p{ max-width:none; }
  .step-rail{ display:block; }
  /* signature karta má na tabletu prostor, ať nevypadá jako zbytek po mobilu */
  .hero-card{ width:min(560px,100%); margin-inline:auto; }
  /* svislé rytmy: desktopové odsazení sekcí dělalo na tabletu mrtvé plochy */
  .section{ padding:var(--s20,72px) 0; }
  .advisor-photo{ max-width:420px; }
}

/* --container teď roste plynule sám (viz :root), tahle skoková verze byla
   nahrazena 25.8. — zbylo jen zvětšení základního textu na velkých monitorech. */
@media (min-width:2100px){
  body{ font-size:1.06rem; }
}

/* --- v43 KONTRAST: drobný text v zelené. --green (#4E7D1B) je barva grafiky (bary, tečky),
       na text v běžné velikosti má na papíře jen 4,2 až 4,5 : 1. Text proto bere --green-deep
       (6,2 až 7,0 : 1). Velké logo v hlavičce je „large text", tam stačí 3 : 1, ale patičkové
       je malé, takže i to jde do tmavší zelené. --- */
.footer .lo-hypo, .footer-col .lo-hypo{ color:var(--green-deep); }

/* ============================================================
   v44 · CINEMATICKÝ HERO NA CELOU OBRAZOVKU (13. 8. 2026)
   Hero měl výšku jen z obsahu, na každém monitoru stejných ~855 px.
   Na notebooku okno náhodou vyplnil, ale na 1920×1080 pod ním vykoukla
   logo-stěna (224 px) a na 2560×1440 skoro 600 px. Nově se váže na
   výšku okna, takže video drží celou plochu na jakékoli obrazovce.
   ============================================================ */
.hero--cinematic{
  min-height:100vh;    /* fallback pro prohlížeče bez svh */
  min-height:100svh;   /* mobil: neskáče při schování adresní lišty */
  display:flex; flex-direction:column; justify-content:center;
}
/* .container je tady zároveň .hero-grid (display:grid), jako položka flexu
   by se scvrkla na obsah, proto výslovná plná šířka. */
.hero--cinematic > .container{ width:100%; }

/* Nízká okna na šířku (notebook v okně, iPad naležato): obsah je vyšší než
   okno, min-height ho nezmenší, jen se stáhne dýchání nad a pod ním.
   Horní odsazení nesmí pod 76 px, tam sedí pevná hlavička (68 px). */
@media (min-width:1000px) and (max-height:760px){
  .hero--cinematic{ padding-top:clamp(76px,10vh,92px); padding-bottom:clamp(28px,5vh,56px); }
}


/* Velké monitory (1440p a víc): hero teď drží celou výšku okna, takže by
   kolem obsahu zůstalo přes 400 px prázdna a sazba by v té ploše plavala.
   Střed kompozice proto úměrně povyroste. Váže se na výšku i šířku, ať se
   to nespustí na nízkém širokoúhlém okně. */
@media (min-width:1700px) and (min-height:1000px){
  .hero--cinematic h1{ font-size:clamp(3.8rem,3.1vw,4.6rem); }
  .hero--cinematic .hero-sub{ font-size:1.28rem; }
  .hero--cinematic .hero-card{ width:min(486px,100%); padding:30px 30px 26px; }
  .hero--cinematic .hero-card .ladder-rows{ gap:16px; }
  .hero--cinematic .hero-save .hs-num{ font-size:3rem; }
}


/* ============================================================
   v45 · DVĚ POZVÁNÍ DO HLUCHÉHO ÚSEKU (jen homepage)
   Mezi CTA v heru (9,3 %) a poradcem (69,1 %) bylo na 1440×900 celkem
   3 691 px, tedy 4,10 obrazovky a 60 % délky stránky. Sama tmavá scéna 02
   z toho zabírá 1 890 px: klient tam uvidí rozdíl 132 117 Kč a nemá kam
   kliknout. Doplněna dvě pozvání, každé řečí svého místa, ne dvě další
   oranžová tlačítka. Oranžová zůstává vyhrazená heru, hlavičce a závěrečné
   CTA. Smazatelné vcelku: tenhle blok + .steps-foot a .gap-foot v index.html.
   ============================================================ */

/* ---------- 01 · uzávěrka kapitoly „Jak to funguje" ----------
   Linka zrcadlí .step-rail nad sloupci, jen se kreslí od pravé hrany zpět,
   takže kapitolu uzavře tam, kde čtení tří sloupců končí. Odkaz, ne tlačítko:
   sekce je výkladová a tlačítko by z ní udělalo reklamní blok. */
.steps-foot{
  position:relative; display:flex; justify-content:flex-end;
  margin-top:clamp(26px,3.2vw,40px); padding-top:clamp(16px,1.8vw,22px);
}
.steps-foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--hairline-strong);
  transform:scaleX(0); transform-origin:right;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.steps-foot.is-in::before{ transform:scaleX(1); }
.steps-cta{
  display:inline-flex; align-items:center; gap:10px; position:relative;
  font-weight:600; font-size:1.04rem; letter-spacing:-.01em;
  color:#B33F0B;                              /* tón kickeru .step-k v téže sekci, 5,3:1 na papíru */
  padding-bottom:3px; transition:color .2s var(--ease);
}
.steps-cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.3;
  transition:opacity .25s var(--ease);
}
.steps-cta svg{ width:17px; height:17px; transition:transform .3s var(--ease); }
.steps-cta:hover{ color:#8F3208; }
.steps-cta:hover::after{ opacity:.62; }
.steps-cta:hover svg{ transform:translateX(4px); }

/* ---------- 02 · pata tmavé scény ----------
   Jedna linka přes celou šířku, vlevo čím se řídíme, vpravo pozvání.
   Vpravo je i údaj, z čeho příklad počítá: vodorovná osa ho na počítači
   nikde neuvádí (svislá osa pro telefon ho má v .vspec-foot), takže ten
   řádek doplňuje chybějící informaci a pozvání z něj přirozeně plyne. */
.gap-foot{
  display:grid; grid-template-columns:minmax(0,52ch) auto;
  gap:clamp(20px,3.4vw,56px); align-items:start;
  margin-top:clamp(28px,4vw,44px); padding-top:var(--s6);
  border-top:1px solid rgba(247,236,221,.14);
}
.gap-foot .gap-caption{ margin-top:0; padding-top:0; border-top:0; }
.gap-ask{ justify-self:end; text-align:right; max-width:34ch; }
.gap-ask-lead{
  font-family:var(--font-mono); font-size:var(--fs-small); line-height:1.6;
  color:rgba(247,236,221,.6); margin:0 0 14px;
}
.gap-ask-lead b{ color:#F7ECDD; font-weight:600; }
.gap-ask-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:1rem; line-height:1; white-space:nowrap;
  padding:14px 22px; border-radius:var(--r-sm);
  color:var(--green-pale);                              /* řeč štítku .spec-cap.cheap z téže osy */
  background:rgba(var(--green-bright-rgb),.14);
  border:1px solid rgba(var(--green-bright-rgb),.42);
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .18s var(--ease);
}
.gap-ask-cta svg{ width:17px; height:17px; transition:transform .3s var(--ease); }
.gap-ask-cta:hover{ background:var(--green-bright); border-color:var(--green-bright); color:#160F09; transform:translateY(-1px); }
.gap-ask-cta:hover svg{ transform:translateX(4px); }

@media (max-width:900px){
  .steps-foot{ justify-content:flex-start; }
  .steps-foot::before{ transform-origin:left; }
  .gap-foot{ grid-template-columns:1fr; gap:clamp(18px,4vw,26px); align-items:start; }
  .gap-ask{ justify-self:start; text-align:left; max-width:none; }
  .gap-ask-lead{ display:none; }   /* .vspec-foot pod svislou osou už čtyři miliony a třicet let říká */
}
@media (pointer:coarse){
  .gap-ask-cta{ min-height:48px; }
  .steps-cta{ min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .steps-foot::before{ transform:scaleX(1); transition:none; }
  .steps-cta svg, .gap-ask-cta, .gap-ask-cta svg{ transition:none; }
  .gap-ask-cta:hover{ transform:none; }
}
@media print{
  .steps-foot::before{ transform:scaleX(1) !important; }
}

/* ============================================================================
 * HERO — karta se zavěšeným CTA a pozadí (diagonální prolnutí oranžová/modrá)
 * 25.8. vzniklo srovnáním 3 návrhů hero sekce (přes dočasný přepínač,
 * smazaný po rozhodnutí Jeni) — tohle je vítězná, teď jediná podoba.
 * 25.8. mřížka (`.hbg-b`) smazána — čtla se jako generický Stripe/Linear
 * "AI SaaS" vzor. Dvě další kola (rozmazaná vlna, pak ostrá vlna) skončila
 * vodorovným předělem oranžová-nahoře/modrá-dole, který Jeňa zamítl — čte
 * se to jako doslovná krajina "západ slunce nad mořem", ne jako abstraktní
 * značka. `.hbg-blend` (25.8. noc, finální): žádná vodorovná linka vůbec,
 * obě barvy jako měkké rozostřené skvrny na DIAGONÁLE (oranžová vlevo
 * nahoře, modrá vpravo I dole), takže se prolínají na víc místech napříč
 * plochou a nedá se to přečíst jako horizont. */
.herop-card-cta{ margin-top:16px; }
.herop-card-cta .btn{ width:100%; }
.herop-card-cta + .hero-card-note{ margin-top:10px; text-align:center; }

.hbg-blend{ position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='b1' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='130'/%3E%3C/filter%3E%3Cfilter id='b2' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='160'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1920' height='1080' fill='%230D0906'/%3E%3Cellipse cx='480' cy='340' rx='680' ry='560' fill='%23F2500E' opacity='.92' filter='url(%23b1)'/%3E%3Cellipse cx='800' cy='160' rx='460' ry='360' fill='%23FFA35C' opacity='.5' filter='url(%23b1)'/%3E%3Cellipse cx='1550' cy='600' rx='700' ry='640' fill='%23123F63' opacity='.94' filter='url(%23b2)'/%3E%3Cellipse cx='260' cy='920' rx='700' ry='520' fill='%230E5A88' opacity='.92' filter='url(%23b2)'/%3E%3Cellipse cx='1790' cy='60' rx='360' ry='300' fill='%236EC3F0' opacity='.32' filter='url(%23b1)'/%3E%3C/svg%3E");
}

/* ============================================================================
 * TEXT JAKO JEDEN VYCENTROVANÝ BLOK (26.8.) — Vojta: text byl přišpendlený
 * vlevo nahoře, chtěl ho vycentrovat na výšku i na šířku levého sloupce.
 * `.hero-copy-col` obaluje nadpis i zbytek textu a centruje je jako JEDEN
 * flex blok (align-items:center vodorovně, text-align:center; svisle to
 * dělá zděděné `align-items:center` z `.hero-grid` samo, protože ten box
 * je teď kratší než karta vedle). Na mobilu ale karta MUSÍ zůstat MEZI
 * nadpisem a zbytkem textu (starý „mobilní ohyb" fix, viz níž) — proto tam
 * `.hero-copy-col` dostane `display:contents` a zmizí, `.hero-head`/
 * `.hero-support` se pak chovají jako přímé položky gridu s vlastním
 * grid-area, přesně jako předtím.
 * ==========================================================================*/
.hero--cinematic .hero-grid{
  grid-template-areas:"copy stage";
}
.hero-copy-col{ display:flex; flex-direction:column; align-items:center; text-align:center; grid-area:copy; }
.hero-head{ grid-area:head; }
.hero-support{ grid-area:support; }
.hero-stage{ grid-area:stage; }
@media (max-width:1000px){
  .hero--cinematic .hero-grid{
    grid-template-rows:none;
    grid-template-areas:"head" "stage" "support";
    row-gap:24px;
  }
  .hero-copy-col{ display:contents; }
}

/* ============================================================
   BAREVNÝ RYTMUS PODKLADŮ (26. 8. 2026)
   ------------------------------------------------------------
   Problém, který to řeší (změřeno na nasazeném webu): /metodika běží
   5 700 px v jedné jediné barvě od hera po CTA, /zasady-zpracovani 4 590 px
   a /kontakt 1 940 px. Mechanismus střídání (.section--paper2) v kódu byl,
   ale na celém webu se používal přesně JEDNOU (FAQ na homepage). Homepage
   je proti tomu v pořádku, tmavé scény ji dělí na úseky max. 986 px, proto
   se jí tahle vlna nedotýká.

   Recept je odkoukaný z hypoteka2026.cz (hlavní benchmark), ale postavený
   z naší palety:
   1) Málo pevných úrovní, ne barva ad hoc: krémová, tmavší krémová,
      modrý tint, teplý tint, tmavá. Nic dalšího.
   2) Tónovaný pás NENÍ plná barva, ale jemný svislý gradient, který se na
      obou koncích vrací do krémové. Rovný řez mezi sekcemi tak padne tam,
      kde jsou barvy už skoro totožné, a hranice není vidět jako čára.
      (Diagonální švy à la Lotus V1 se sem záměrně nevrací — zamítnuty 25.8.)
   3) Sytý/tmavý tón nikdy 3x za sebou; po "úderu" vždy klidná sekce.
   4) Jemné zrno přes tónované pásy, ať plocha není mrtvě hladká — stejný
      šumový SVG jako u tmavých scén, jen v multiply a na 3,5 %.
   ============================================================ */
.section--modra, .section--tepla, .section--drift{ position:relative; }
.section--modra > .container,
.section--tepla > .container,
.section--drift > .container{ position:relative; z-index:1; }

.section--modra{
  background:linear-gradient(180deg,
    var(--paper) 0%, var(--plocha-modra) 9%, var(--plocha-modra) 91%, var(--paper) 100%);
}
.section--tepla{
  background:linear-gradient(180deg,
    var(--paper) 0%, var(--plocha-tepla) 9%, var(--plocha-tepla) 91%, var(--paper) 100%);
}
/* Pro velmi dlouhé textové sekce: barva se posouvá tak pomalu, že to při
   scrollu není vidět jako pás, jen jako "něco se mění". */
.section--drift{
  background:linear-gradient(180deg,
    var(--paper) 0%, var(--plocha-modra) 28%, var(--paper-2) 68%, var(--paper) 100%);
}

.section--modra::before, .section--tepla::before, .section--drift::before,
.method-section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* /metodika — jediná sekce dlouhá 3 832 px, uvnitř pět kroků výpočtu.
   Rozsekat ji na pásy by rozbilo sticky panel vlevo, takže místo pásů jede
   přes celou její výšku jeden pomalý přechod krém → modrá → teplá → krém.
   Při scrollu to čte jako by stránka během výpočtu měnila náladu. */
.method-section{ position:relative; }
.method-section > .container{ position:relative; z-index:1; }
.method-section{
  background:linear-gradient(180deg,
    var(--paper) 0%,
    var(--plocha-tepla) 11%,   /* 01 zadáte parametry — teplá */
    var(--plocha-tepla) 25%,
    var(--plocha-modra) 42%,   /* 02-03 LTV, DSTI, které banky vás vezmou — modrá */
    var(--plocha-modra) 62%,
    var(--plocha-tepla) 82%,   /* 04 splátka a úroky — zpátky teplá */
    var(--paper) 100%);
}