/* ============================================================
   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:#8A7154;
  --hairline:#E7DAC6;
  --hairline-strong:#D8C6AC;

  /* Datové napětí (jádro identity) */
  --green:#4E7D1B;
  --green-deep:#3C6114;
  --green-soft:#EEF3E2;
  --amber:#C9A21E;
  --orange:#E0561A;
  --orange-deep:#C4470F;
  --orange-soft:#FBE7D6;
  --red:#C0341A;          /* jen validace / chyby */

  /* Datová rampa (levné → drahé), 6 stopů pro 6 bank */
  --ramp-1:#4E7D1B;
  --ramp-2:#6E9A24;
  --ramp-3:#A79A1F;
  --ramp-4:#C9A21E;
  --ramp-5:#DC7A18;
  --ramp-6:#E0561A;

  /* Typografie */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* v34: Geist Mono PRYČ z celého webu (škrtnutá nula + „terminálový" dojem).
     --font-mono zůstává jako název kvůli desítkám volání, ale je to teď LABEL font
     (Figtree, prostrkané verzálky) — a čísla mají vlastní serifový token níž. */
  --font-mono:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Čísla = serifové číslice Fraunces (stejná rodina jako nadpisy → editoriál,
     ne „AI/terminál"). Kde je potřeba srovnat sloupce, jde se přes --font-body + tabular-nums. */
  --font-num:'Fraunces',Georgia,'Times New Roman',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);
  --container:1200px;
}

/* ---------- 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); color:#fff; box-shadow:0 8px 20px -10px rgba(224,86,26,.7); }
.btn-primary:hover{ background:var(--orange-deep); transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(224,86,26,.8); }
.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:#BEDC93; }
.site-header:not(.scrolled) .brand-sub{ color:rgba(255,248,240,.74); border-left-color:rgba(255,255,255,.22); }
.site-header:not(.scrolled) .nav > a:not(.btn-primary){ color:rgba(255,248,240,.9); }
.site-header:not(.scrolled) .nav > a:not(.btn-primary):hover{ color:#fff; }
.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; }
.logo .lo-rychla{ color:var(--ink); }
.logo .lo-hypo{ color:var(--green); }
.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; }
.lrow-bar{ display:block; height:100%; width:var(--w,0); border-radius:6px; transform-origin:left; animation:barGrow .85s var(--ease) both; }
@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 } }
.lrow.is-best .lrow-bank{ color:var(--green-deep); }
.lrow.is-best .lrow-rate{ color:var(--green-deep); font-weight:600; }
.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:var(--orange-deep); }
/* ž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-display); 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-display); 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); }
.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;
  background:
    linear-gradient(180deg, rgba(22,15,9,.74) 0%, rgba(22,15,9,.80) 55%, rgba(22,15,9,.94) 100%),
    radial-gradient(120% 95% at 88% 6%, rgba(224,86,26,.30), transparent 52%),
    radial-gradient(95% 85% at 2% 96%, rgba(78,125,27,.24), transparent 60%);
}
/* ---- statické hero pozadí (vektorová grafika sazeb místo videa) ---- */
.hero-viz{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center bottom; }
/* scrim je u statické grafiky lehčí a vážený doleva: text drží kontrast, graf zůstane vidět */
.hero-bg--static .hero-bg-scrim{
  background:
    linear-gradient(96deg, rgba(22,15,9,.95) 0%, rgba(22,15,9,.88) 32%, rgba(22,15,9,.58) 62%, rgba(22,15,9,.44) 100%),
    linear-gradient(180deg, rgba(22,15,9,.78) 0%, rgba(22,15,9,.20) 34%, rgba(22,15,9,.52) 100%),
    radial-gradient(78% 62% at 88% 4%, rgba(224,86,26,.22), transparent 60%);
}
@media (max-width:900px){
  .hero-viz{ object-position:72% bottom; }
  .hero-bg--static .hero-bg-scrim{
    background:
      linear-gradient(180deg, rgba(22,15,9,.93) 0%, rgba(22,15,9,.84) 40%, rgba(22,15,9,.46) 74%, rgba(22,15,9,.40) 100%);
  }
}
.hero-grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  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"); }
.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:#BEDC93; }
.hero--cinematic .eyebrow::before{ background:#BEDC93; }
.hero--cinematic h1{ color:#fff; }
.hero--cinematic h1 .accent{ color:#BEDC93; }
.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:#9AD154; }
.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-display); font-weight:500; font-size:clamp(1.9rem,3vw,2.7rem); line-height:1; color:#9AD154; 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{
  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);
  border-radius:24px;
  box-shadow:0 34px 80px -34px rgba(18,10,4,.62), 0 2px 8px rgba(18,10,4,.16);
  padding:24px 24px 20px; color:var(--ink);
}
/* karta statická — bez perpetuálního floatu (ambientní loop = šablonový tell) */
.hero-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-bottom:18px; }
.hc-cap{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.hc-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.hc-live{ font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--ink-dim); letter-spacing:.04em; }
.hero-card .ladder-rows{ display:flex; flex-direction:column; gap:14px; }
.hero-card-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); 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-display); 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-display); 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:#F7ECDD; }
.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-display); 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(224,86,26,.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:#9AD154; }
.cta-fig-row.worst .cta-fig-val{ color:#F0885A; }
.cta-total{ margin-top:var(--s6); }
.cta-total .t-num{ font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.8rem); color:#9AD154; 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); }
.site-header:not(.scrolled) .nav > a:not(.btn-primary)::after{ background:#BEDC93; }
/* 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,248,240,.82); }
@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(224,86,26,.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; }
.scene--dark > .container{ position:relative; z-index:2; }
.scene--dark .eyebrow{ color:#BEDC93; }
.scene--dark .eyebrow::before{ background:#BEDC93; }
.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-display); font-weight:500;
  font-size:var(--fs-display); line-height:.9; color:#9AD154; 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(154,209,84,.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(154,209,84,.16); color:#BEDC93; }
.spec-cap.dear{ background:rgba(224,86,26,.2); color:#F0885A; }
.spec-chip.is-cheap .spec-dot{ --dot:#9AD154; }
.spec-chip.is-cheap .spec-bank{ color:#BEDC93; }
/* 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:#9AD154; }
.spectrum-scale span:last-child{ color:#F0885A; }
.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:#BEDC93; 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:#9AD154; 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:var(--orange); display:block; margin-bottom:var(--s3); }
.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-display); 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:#9AD154; }
.cta-ramp .cr:nth-child(2){ width:97%; background:#F0885A; }
@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:#BEDC93; }
  .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; } }

/* === audit 13. 8. 2026: čitelnost a dotykové cíle na mobilu ================
   Drobný mono text pod 11 px byl na telefonu na hraně čitelnosti a přepínač
   fixace v hero kartě měl dotykovou plochu 30×27 px (doporučeno 44). */
.hero-card-note{ font-size:11px; }
.spec-cap{ font-size:.66rem; }
/* dotykové cíle podle ZAŘÍZENÍ, ne podle šířky — tablet je taky prst, ne myš */
@media (pointer: coarse){
  .hcc-chip{ min-height:40px; min-width:40px; padding:8px 11px; font-size:.88rem; }
  .lrow-tag{ font-size:.7rem; }
  .mbar-lab{ font-size:.72rem; }
}
/* Bílý text na značkové oranžové měl kontrast 3,81:1 (WCAG AA chce 4,5).
   Tlačítka proto sedí na tmavším odstínu téže barvy (4,93:1); dekorativní
   pruhy a ikony zůstávají na původní --orange, tam kontrast nehraje roli. */
.btn-primary{ background:var(--orange-deep); box-shadow:0 8px 20px -10px rgba(196,71,15,.7); }
.btn-primary:hover{ background:#A83A0A; }
/* --ink-dim byl #8A7154 = 4,2:1 na papíru a 4,49:1 na kartách, tedy těsně pod
   AA pro běžný text (4,5). O čtyři procenta tmavší odstín téže barvy dá 4,8–5,1
   a na pohled je to prakticky totéž. */
:root{ --ink-dim:#806849; }
/* Amber #C9A21E má na papíru jen 2,2:1 — jako plocha (pruhy, ikony) je v pořádku,
   jako TEXT ne. Textové varianty proto sedí na tmavším odstínu (4,6:1). */
.toc-n, .lt-lab, .legal-toc a.is-active .toc-n{ color:#8A6A15; }