/* Self-hosted fonty (jen latin + latin-ext = česká diakritika). Nahrazuje Google Fonts. */
@font-face{
  font-family:'Google Sans Flex';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(assets/fonts/google-sans-flex-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Google Sans Flex';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(assets/fonts/google-sans-flex-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(assets/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(assets/fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   HONOSY.cz — postaveno na design systému Web na Míru
   Tokens (colors, type, spacing, radius, shadows) převzaty z DS.
   ============================================================ */
:root{
  color-scheme:light;
  /* Ink */
  --ink-900:#0a0a0b; --ink-800:#131316; --ink-700:#1c1c20; --ink-500:#3a3a42;
  /* Neutral */
  --gray-50:#f7f7f8; --gray-100:#efeff1; --gray-200:#e4e4e7;
  --gray-400:#a9a9b2; --gray-500:#74747e; --gray-600:#52525b;
  --white:#ffffff;
  /* Signal blue */
  --blue-100:#e6eafe; --blue-500:#4f6bf6; --blue-600:#3a52d8;
  /* Space (tmavý CTA pruh) */
  --space-bg:#05060a;
  /* Semantic */
  --text:var(--ink-900); --text-muted:var(--gray-500); --text-subtle:var(--gray-400);
  --surface:var(--white); --surface-alt:var(--gray-50);
  --border:var(--gray-200);
  --accent:var(--blue-500); --accent-hover:var(--blue-600); --accent-soft:var(--blue-100); --focus-ring:var(--blue-500);
  /* Fonts */
  --font-display:'Google Sans Flex','Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-text:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Weights */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  /* Type scale */
  --text-display:clamp(2.75rem,6vw,5.25rem);
  --text-h1:clamp(2.25rem,4vw,3.5rem);
  --text-h3:1.5rem; --text-h4:1.25rem;
  --text-lead:1.375rem; --text-body:1.0625rem; --text-sm:0.9375rem; --text-xs:0.8125rem; --text-label:0.75rem;
  --lh-snug:1.12; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-display:-0.03em; --ls-heading:-0.02em; --ls-body:-0.006em; --ls-label:0.14em;
  /* Spacing */
  --space-8:32px; --space-10:40px;
  --container-wide:1360px;
  --gutter:clamp(20px,5vw,80px);
  /* Jednotná mezera mezi sekcemi (viz zjednodušené padding schéma: horní pt = --sec-gap, spodní pb = 0) */
  --sec-gap:clamp(100px,14.06vw,187.5px);
  /* Radius */
  --radius-sm:10px; --radius-md:14px;
  --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px;
  /* Shadows */
  --shadow-sm:0 2px 8px rgba(10,10,11,0.06);
  --shadow-lg:0 24px 60px rgba(10,10,11,0.12);
  --shadow-cta:0 6px 20px rgba(10,10,11,0.18);
  /* Motion */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-text); font-size:var(--text-body);
  line-height:var(--lh-normal); letter-spacing:var(--ls-body);
  color:var(--text); background:var(--surface);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading); line-height:var(--lh-snug);
  margin:0; color:var(--text); text-wrap:balance;
}
p{margin:0; text-wrap:pretty;}
a{color:var(--accent); text-decoration:none; transition:color var(--dur-fast) var(--ease-out);}
a:hover{color:var(--accent-hover);}
img{max-width:100%; display:block;}
/* Rámeček pro inline SVG ikony (obsah doplňuje script.js) */
.ic{display:inline-flex;}
::selection{background:var(--blue-100); color:var(--ink-900);}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px;}

.wrap{max-width:var(--container-wide); margin:0 auto; width:100%; padding-inline:var(--gutter);}
.section{padding-block:clamp(64px,9vw,120px);}

.logo{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:700; font-size:1.3rem; letter-spacing:-0.04em; color:var(--ink-900); line-height:1; text-decoration:none; white-space:nowrap;}
.logo:hover{color:var(--ink-900);}

/* ---------- Buttons ---------- */
/* Text tlačítka se smí zalomit (white-space:normal). Popisek se zalomí až
   když se na řádek nevejde — jinak si inline-flex drží šířku obsahu, takže
   při běžném písmu je výsledek stejný jako s nowrap. S nowrap se místo toho
   tlačítko roztáhlo přes okraj okna a celá stránka šla posouvat do strany
   (stačilo zvětšené výchozí písmo prohlížeče nebo systémový font místo
   webfontu). line-height 1.15 je kvůli čitelnosti dvouřádkového popisku;
   výšku tlačítka nemění, protože ji stejně určuje ikona (.ic má 1.15em).
   Tlačítka bez ikony jsou o 2,5px vyšší a mají teď stejnou výšku jako ta
   s ikonou. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:500; font-variation-settings:'wght' 500;
  font-size:var(--text-body); letter-spacing:-0.02em; line-height:1.15;
  padding:13px 26px; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid transparent; white-space:normal; text-wrap:balance; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn:active{transform:scale(0.97);}
.btn .ic{width:1.15em; height:1.15em;}
.btn--sm{padding:9px 18px; font-size:var(--text-sm); gap:7px;}
/* Hover: mění se jen barva výplně, tlačítko se nikam nehýbe a nemění stín */
.btn--primary{background:var(--ink-900); color:var(--white); border-color:var(--ink-900); box-shadow:var(--shadow-cta);}
.btn--primary:hover{color:var(--white); background:var(--ink-500); border-color:var(--ink-500);}
.btn--secondary{background:var(--gray-50); color:var(--ink-900); border-color:var(--gray-200);}
.btn--secondary:hover{color:var(--ink-900); background:var(--gray-200); border-color:var(--gray-400);}
.btn--inverse{background:var(--white); color:var(--ink-900); border-color:var(--white);}
.btn--inverse:hover{color:var(--ink-900); background:var(--gray-200); border-color:var(--gray-200);}
.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,0.3);}
.btn--outline-light:hover{color:#fff; background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.55);}

/* ---------- Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:var(--white);
}
.nav__inner{display:flex; align-items:center; justify-content:flex-start; gap:var(--space-8); padding-block:9px;}
.nav__links{display:flex; align-items:center; gap:2px; list-style:none; margin:0 0 0 calc(var(--space-8) - 12px); padding:0; position:relative; top:3px;}
/* Hover jako měkká bublina za položkou (padding je součástí rozestupu, proto gap 2px) */
.nav__links a{
  display:inline-flex; align-items:center; line-height:1;
  color:var(--ink-700); font-size:var(--text-sm); font-weight:var(--fw-medium);
  padding:8px 12px; border-radius:var(--radius-pill); background:transparent;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.nav__links a:hover{color:var(--ink-900); background:var(--gray-100);}
.nav__inner .btn{margin-left:auto; padding:8px 16px; font-size:var(--text-xs);}
.nav__toggle{display:none; margin-left:auto; background:none; border:0; padding:0; width:44px; height:44px; cursor:pointer; color:var(--ink-900); position:relative;}
.burger{position:absolute; left:50%; top:50%; width:26px; height:16px; transform:translate(-50%,-50%);}
.burger::before,.burger::after{content:''; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; transition:transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);}
.burger::before{top:2px;}
.burger::after{top:12px;}
.nav--open .burger::before{top:7px; transform:rotate(45deg);}
.nav--open .burger::after{top:7px; transform:rotate(-45deg);}

/* ---------- Hero ----------
   Rozvržení stojí na běžném toku dokumentu: text má odsazení odshora
   a hranoly jsou dalším prvkem v toku pod ním. Grafika se proto nemůže
   dostat do textu ani do tlačítek — ať prohlížeč zvětší písmo, nenačte se
   webfont, nebo je okno nízké. Když obsah přeroste min-height, hero se
   natáhne a stránka je o pár desítek pixelů delší; nic se nepřekryje.

   Dřív se text centroval ve výšce okna a pak posouval transformem
   o −65 % VLASTNÍ výšky, zatímco hranoly visely absolutně u spodní hrany.
   Obě polohy tak závisely na výšce textu, ale každá jinak. Vyšší text
   (zvětšené písmo v prohlížeči, systémový font místo webfontu, delší
   zalomení leadu) posunul nadpis pod navigaci, kde ho uřízl overflow,
   a hranoly zůstaly na místě a přelezly tlačítka. Na 1280×720, 320×568
   nebo 900×500 se to dělo i s úplně výchozím nastavením. */
.hero{
  position:relative; text-align:center;
  display:flex; flex-direction:column;
  min-height:125vh; min-height:125svh;
  /* clip jen kvůli přesahu grafiky dolů; obsah už z hera nikdy nevyčnívá.
     (overflow:hidden je jen fallback pro starší Safari) */
  overflow:hidden; overflow:clip;
  /* Šířka scény s hranoly */
  --bars-w:min(760px,66vw);
  /* Nejmenší mezera mezi tlačítky a viditelnou hranou grafiky */
  --bars-gap:clamp(24px,4.1vw,60px);
  /* Obrázky hranolů mají nad sebou průhledný okraj — nejvyšší (červený)
     začíná ve 13,38 % výšky obrázku. Výška obrázku = šířka scény, takže
     se okraj dá odečíst a mezera se měří ke skutečné hraně grafiky.
     Kdyby se assety měnily, přeměř: tools/check.mjs to čte z alfa kanálu. */
  --bars-pad:0.1338;
}
/* Odsazení textu odshora. Vzorec „polovina výšky okna minus konstanta“ drží
   stejnou polohu jako předchozí centrování + transform, ale nezávisí na
   výšce textu — proto se nadpis nemůže vysunout pod navigaci. Na nízkých
   oknech ho zespodu drží max(). */
.hero>.wrap{padding-top:max(28px, calc(50vh - 328px)); padding-top:max(28px, calc(50svh - 328px));}
/* z-index: text je vždy nad grafikou, i kdyby se rámce překryly */
.hero__inner{position:relative; z-index:1; max-width:1000px; margin-inline:auto;}
.hero__name{display:block; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:1.2rem; letter-spacing:var(--ls-heading); color:var(--ink-700); margin-bottom:24px;}
.hero__name .ing{font-weight:var(--fw-regular);}
.hero__name .role{font-weight:var(--fw-regular); color:var(--text-muted);}
/* Nadpis drží dva řádky přes pevný <br> a stropy v min() (druhý člen je
   měřený tak, aby se delší řádek „Průkaz energetické náročnosti“ = 13,14em
   vešel do 100vw − 2× gutter; pod 400px je gutter 20px, nad ním 5vw).
   Stropy platí pro webfont. Když se nenačte, je systémový font o ~20 %
   širší a řádek se do nich nevejde — proto tu NENÍ white-space:nowrap:
   text se v takovém případě zalomí na tři řádky. S nowrap se místo toho
   vysunul z okna a overflow hera ho uřízl (přesně to bylo na screenshotu
   klienta). overflow-wrap řeší i extrémní případ, kdy se nevejde ani slovo. */
.hero h1{font-size:min(clamp(1.9rem,3.9vw,3.1rem), 6.64vw, calc(7.38vw - 2.96px)); letter-spacing:var(--ls-display); font-weight:480; font-variation-settings:'wght' 480; line-height:1.08; margin-bottom:26px; text-wrap:balance; overflow-wrap:break-word;}
.hero__lead{font-size:1.125rem; color:var(--text-muted); max-width:640px; margin:0 auto 36px;}
.hero__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero__cta .btn{padding-block:15px;}

/* Energetické 3D sloupce (render) */
.hero__bars{
  position:relative; z-index:0; width:var(--bars-w); pointer-events:none;
  /* margin-top:auto — zbylé místo se sype NAD hranoly, takže u vysokého okna
     zůstanou u spodní hrany hera stejně jako dřív. Když místo není, auto je
     nula a polohu určí mezera níž. */
  margin:auto auto 42px;
}
.hero__bars-stage{
  position:relative; width:100%; aspect-ratio:1/1;
  /* Záporný horní margin odečte průhledný okraj obrázků, takže viditelná
     hrana grafiky sedí přesně --bars-gap pod tlačítky. */
  margin-top:calc(var(--bars-gap) - var(--bars-pad) * var(--bars-w));
  margin-bottom:-11%;
}
.hero__bar{position:absolute; top:0; height:100%; width:auto; will-change:transform; transition:transform 120ms linear;}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,88px); align-items:start;}
.about h2{font-size:var(--text-h1); letter-spacing:var(--ls-heading); font-weight:var(--fw-bold);}
.about__lead{font-size:var(--text-lead); color:var(--text-muted); margin-bottom:22px;}
.about__body p{font-size:var(--text-body); color:var(--gray-600); margin-bottom:16px; line-height:var(--lh-relaxed); max-width:56ch;}
.about__points{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px;}
.about__points li{display:flex; align-items:flex-start; gap:12px; font-size:var(--text-body); color:var(--ink-800);}
.about__points .chk{flex:0 0 auto; width:24px; height:24px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-hover); display:inline-flex; align-items:center; justify-content:center; margin-top:1px;}
.about__points .chk .ic{width:14px; height:14px;}

/* ---------- Statistiky ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.stat{background:var(--accent-soft); border-radius:var(--radius-xl); padding:clamp(32px,5vw,56px);}
.stat__num{display:block; font-family:var(--font-display); font-weight:700; font-variation-settings:'wght' 700; font-size:clamp(2.1rem,5vw,4rem); letter-spacing:var(--ls-display); line-height:1; color:var(--accent-hover); margin-bottom:12px;}
.stat__label{display:block; max-width:80%; font-size:var(--text-lead); color:var(--ink-800); font-weight:var(--fw-medium);}

/* ---------- Services ---------- */
.services__head{max-width:720px; margin-bottom:52px;}
.services__head h2{font-size:var(--text-display); font-weight:var(--fw-extra); letter-spacing:var(--ls-display); margin-bottom:18px;}
.services__head p{font-size:1.125rem; color:var(--text-muted);}
.services__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:var(--space-10); box-shadow:var(--shadow-sm);
}
.service__icon-img{height:auto;}
/* Ikona stojí nad názvem služby, stejné schéma jako číslované kroky na podstránce.
   Ikona i zkratka škálují společně: velikost je řízená font-size na bloku, ikona v em. */
.service__head-row{display:block; margin-bottom:14px; font-size:clamp(2rem,3.4vw,2.75rem);}
.service__head-row .service__icon-img{width:0.95em; margin:0 0 0.34em; position:static;}
.service__head-row .service__abbr{margin:0; font-size:1em; line-height:1;}
/* Samostatně stojící zkratka (karty „z čeho se skládá") nese hlavní váhu v kartě,
   proto je výrazně větší než podnadpis pod ní. V .service__head-row si velikost
   řídí rodič, tam se tohle neuplatní. */
.service__abbr{font-size:clamp(1.5rem,2.4vw,1.85rem); font-weight:500; font-variation-settings:'wght' 500; letter-spacing:-0.02em; line-height:1.05; margin-bottom:6px;}
.service__title{font-size:var(--text-h4); font-weight:var(--fw-semibold); color:var(--ink-900); letter-spacing:var(--ls-heading); line-height:1.25; margin-bottom:18px;}
.service__desc{font-size:var(--text-body); color:var(--text-muted); margin-bottom:24px; line-height:var(--lh-relaxed);}
.service__list{list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--border); display:grid; gap:13px;}
.service__list li{display:flex; align-items:flex-start; gap:11px; font-size:var(--text-sm); color:var(--ink-800);}
.service__list .chk{flex:0 0 auto; width:22px; height:22px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-hover); display:inline-flex; align-items:center; justify-content:center; margin-top:1px;}
.service__list .chk .ic{width:13px; height:13px;}

/* ---------- Reviews ---------- */
.reviews__head{max-width:720px; margin-bottom:52px;}
.reviews__head h2{font-size:var(--text-display); font-weight:var(--fw-extra); letter-spacing:var(--ls-display); margin-bottom:18px;}
.reviews__head p{font-size:1.125rem; color:var(--text-muted);}
.reviews__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
/* Původ recenzí — informační povinnost podle § 5 odst. 3 zákona o ochraně spotřebitele. */
.reviews__note{margin:34px auto 0; max-width:70ch; text-align:center; font-size:var(--text-xs); color:var(--text-muted); line-height:var(--lh-relaxed);}
.reviews__note a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.review{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-8); display:flex; flex-direction:column; gap:18px;}
.review__text{font-size:var(--text-body); color:var(--ink-800); line-height:var(--lh-relaxed);}
.review__author{display:flex; align-items:center; gap:12px; margin-top:auto;}
.review__avatar{width:44px; height:44px; border-radius:var(--radius-pill); background:var(--ink-900); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-body);}
.review__meta{display:flex; flex-direction:column; gap:1px; line-height:1.2;}
.review__name{font-weight:var(--fw-semibold); font-size:var(--text-sm); color:var(--ink-900);}
.review__role{font-size:var(--text-xs); color:var(--text-muted);}

/* ---------- CTA banner ---------- */
.cta-band{position:relative; overflow:hidden; border-radius:var(--radius-2xl); background:var(--space-bg); padding:clamp(52px,8vw,104px) var(--gutter);}
.cta-band__inner{position:relative; max-width:660px;}
.cta-band h2{font-size:clamp(1.85rem,3vw,2.6rem); color:#fff; font-weight:500; font-variation-settings:'wght' 500; margin-bottom:16px; letter-spacing:-0.02em; line-height:1.12;}
.cta-band p{font-size:1.125rem; color:rgba(255,255,255,0.72); margin-bottom:32px; max-width:520px;}
.cta-band__actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:start;}
.faq__intro h2{font-size:var(--text-display); font-weight:var(--fw-extra); letter-spacing:var(--ls-display); margin-bottom:18px;}
.faq__intro p{font-size:var(--text-body); color:var(--text-muted); max-width:38ch; line-height:var(--lh-relaxed);}
/* Odkazy v podnadpisu FAQ: bez modré, zvýrazněné černě jako telefonní číslo */
.faq__intro a{
  color:var(--ink-900); font-weight:var(--fw-semibold); text-decoration:none;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.faq__intro a:hover{color:var(--ink-900); text-decoration:underline;}
.faq__tel{white-space:nowrap;}
.faq__list{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border);}
.faq__item{border-bottom:1px solid var(--border);}
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--text-h4); letter-spacing:var(--ls-heading); color:var(--ink-900); line-height:1.3;
}
.faq__icon{flex:0 0 auto; width:34px; height:34px; border-radius:var(--radius-pill); background:var(--gray-100); color:var(--ink-800); display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);}
.faq__icon .ic{width:18px; height:18px;}
.faq__item.is-open .faq__icon{background:var(--accent); color:#fff; transform:rotate(45deg);}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease-inout);}
.faq__item.is-open .faq__a{grid-template-rows:1fr;}
.faq__a-inner{overflow:hidden; min-height:0;}
.faq__a p{padding:0 44px 26px 0; font-size:var(--text-body); color:var(--gray-600); line-height:var(--lh-relaxed);}

/* ---------- Footer / contact ---------- */
.footer{background:var(--white); padding-top:var(--sec-gap); overflow:hidden;}
.contact__head{max-width:760px; margin-bottom:clamp(28px,3.5vw,44px);}
.contact h2{font-size:var(--text-display); font-weight:var(--fw-extra); letter-spacing:var(--ls-display); margin-bottom:22px;}

/* Jednotný styl sekčních nadpisů (mimo hero) — stejný font jako hero, jiná velikost */
.about h2, .services__head h2, .reviews__head h2, .faq__intro h2, .contact h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,3vw,2.6rem);
  font-weight:500; font-variation-settings:'wght' 500;
  letter-spacing:-0.02em; line-height:1.12;
}
.contact__intro{font-size:1.125rem; color:var(--text-muted); max-width:44ch; margin-bottom:0;}

/* Form */
.form-card{background:var(--surface-alt); border:1px solid transparent; border-radius:var(--radius-xl); padding:clamp(24px,3.4vw,48px);}
/* Alternativa k formuláři: samostatná karta pod formulářem, stejná plocha i rádius
   jako .form-card, jen nižší, aby zůstala vedlejší volbou. */
.form-alt{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,20px);
  background:var(--surface-alt); border:1px solid transparent;
  border-radius:var(--radius-xl);
  padding:clamp(20px,2.4vw,30px) clamp(24px,3.4vw,48px);
  margin-top:18px;
}
.form-alt__text{flex:1 1 auto; min-width:0;}
.form-alt__title{font-family:var(--font-display); font-size:var(--text-h4); font-weight:var(--fw-semibold); letter-spacing:var(--ls-heading); line-height:1.2; color:var(--ink-900);}
.form-alt__sub{font-size:var(--text-sm); color:var(--text-muted); line-height:var(--lh-relaxed); margin-top:3px;}
/* flex-shrink:1 — tlačítko s telefonem se smí zúžit a číslo zalomit.
   S flex:0 0 auto si drželo šířku obsahu a při zvětšeném písmu vytlačilo
   celou stránku do strany. */
.form-alt__btn{flex:0 1 auto; max-width:100%;}
/* Široký formulář přes celou šířku webu */
.form{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start;}
.field--span2{grid-column:span 2;}
.field--span3{grid-column:1 / -1;}
.form__legal,.form__foot,.form__error{grid-column:1 / -1;}
.form__req-note{grid-column:1 / -1; font-size:var(--text-xs); color:var(--text-muted); margin:0;}
/* Hvězdička u povinných polí; pro odečítače stačí atribut required, proto aria-hidden. */
.req{color:var(--accent); font-weight:var(--fw-semibold);}
.form__legal{display:flex; flex-direction:column; gap:10px;}
.form__legal .form__note{max-width:60ch; margin:0;}
.form__foot{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:4px;}
/* min-width:0 — bez toho roztáhne vlastní vnitřní šířka <input> (výchozí size=20)
   políčko nad šířku sloupce a formulář na úzkých displejích vyteče z karty. */
.field{display:flex; flex-direction:column; gap:7px; min-width:0;}
.field label{font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--ink-800);}
.field input, .field select, .field textarea{
  width:100%; min-width:0; font-family:var(--font-text); font-size:var(--text-body); color:var(--ink-900);
  letter-spacing:var(--ls-body); background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 16px; outline:none;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field textarea{resize:vertical; min-height:110px;}
.field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2374747e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:42px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,107,246,0.15);}
.form__note{font-size:var(--text-xs); color:var(--text-muted);}
.form__consent{display:flex; align-items:flex-start; gap:10px; font-size:var(--text-xs); color:var(--text-muted); line-height:1.5; cursor:pointer;}
.form__consent input{flex:0 0 auto; width:16px; height:16px; margin-top:1px; accent-color:var(--accent); cursor:pointer;}
.form__error{font-size:var(--text-sm); color:#c8351d; margin:0;}
.form__error a{color:inherit; font-weight:var(--fw-semibold);}

.form__success{display:none; text-align:center; padding:24px 0;}
.form__success.show{display:block;}
.form__success .badge-ok{width:64px; height:64px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-hover); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px;}
.form__success h3{font-size:var(--text-h3); margin-bottom:8px;}
.form__success p{color:var(--text-muted);}

/* Reálná patička */
.footer__main{display:grid; grid-template-columns:1.1fr 2fr; gap:clamp(36px,6vw,80px); margin-top:clamp(16px,2vw,32px);}
.footer__brand-col{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
/* Stejná hierarchie jako jméno v hero sekci: Ing. lehčí, jméno výrazné, role tlumená */
.footer__tagline{font-family:var(--font-display); font-size:var(--text-h4); font-weight:var(--fw-semibold); color:var(--ink-900); line-height:1.45; letter-spacing:var(--ls-heading);}
.footer__tagline .ing{font-weight:var(--fw-regular);}
.footer__tagline .role{font-weight:var(--fw-regular); color:var(--text-muted); font-size:var(--text-body);}
.footer__ident{font-size:var(--text-sm); color:var(--text-muted); line-height:1.7;}
.footer__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px);}
.footer__col h3{font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-muted); letter-spacing:0; margin-bottom:18px;}
.footer__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer__col li{font-size:var(--text-sm); color:var(--ink-800); line-height:1.45;}
/* Odkazy v patičce: žádná modrá, podtržení naskočí okamžitě bez animace */
.footer__col a{
  font-size:var(--text-sm); color:var(--ink-800);
  line-height:1.45; text-decoration:none;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color var(--dur-base) var(--ease-out);
}
.footer__col a:hover{color:var(--ink-900); text-decoration:underline;}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-block:24px 40px; border-top:1px solid var(--border); margin-top:clamp(48px,6vw,80px);}
.footer__bottom span{font-size:var(--text-sm); color:var(--text-muted);}

/* ---------- Responsive ---------- */
/* Tablet */
/* Se sedmi položkami v navigaci zúžíme na užších šířkách odsazení, ať se řádek nepřeplní */
@media (min-width:961px) and (max-width:1120px){
  .nav__links a{padding:8px 9px;}
}
@media (max-width:960px){
  .about{grid-template-columns:1fr; gap:36px;}
  .stats{grid-template-columns:1fr;}
  .services__grid{grid-template-columns:1fr;}
  .reviews__grid{grid-template-columns:1fr;}
  .faq{grid-template-columns:1fr; gap:36px;}
  .form{grid-template-columns:repeat(2,1fr);}
  /* dva sloupce: Obec a PSČ zůstávají vedle sebe */
  .field--city{grid-column:span 1;}
  .footer__main{grid-template-columns:1fr; gap:44px;}
  /* Hero: text o něco výš, hranoly proporčně větší (drží peek zdola) */
  .hero{min-height:118vh; min-height:118svh; --bars-w:min(680px,74vw);}
  .hero>.wrap{padding-top:max(28px, calc(50vh - 260px)); padding-top:max(28px, calc(50svh - 260px));}
  /* Pozn.: responzivní pravidla pro podstránky (.steps, .cases) jsou až
     za jejich základními deklaracemi níže — jinak by je kaskáda přebila. */

  /* Sbalený navbar s hamburgerem */
  .nav__links, .nav .btn{display:none;}
  .nav__toggle{display:inline-flex; position:relative; z-index:60;}
  .nav--open .logo{position:relative; z-index:60;}
  .nav--open .nav__links{
    display:flex; position:fixed; inset:0; z-index:40; margin:0;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:clamp(2px,1vh,10px); background:var(--white);
    padding:clamp(96px,17vh,160px) var(--gutter) 104px;
    /* Sedm položek se na nízkém displeji se zvětšeným písmem do okna nevejde
       (320×480 a výchozí písmo 24px = „Časté dotazy“ a „Kontakt“ pod hranou).
       Overlay proto musí jít odscrollovat, jinak jsou ty odkazy nedostupné —
       body má v otevřeném menu overflow:hidden. Spodní odsazení drží místo
       pro pevné tlačítko Zavolat. */
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav--open .nav__links a{
    font-family:var(--font-display); font-weight:500; font-variation-settings:'wght' 500;
    font-size:clamp(2.1rem,10vw,3rem); letter-spacing:-0.02em; color:var(--ink-900); line-height:1.28;
    /* v celoobrazovkovém menu žádná bublina, jen čistý text */
    padding:0; background:none; border-radius:0;
  }
  /* Selektor musí být .nav--open .btn — třída .nav--open sedí na samotném
     <nav class="nav">, takže .nav--open .nav .btn nikdy nic nenašel
     a tlačítko v otevřeném menu zůstávalo skryté pravidlem .nav .btn výše. */
  .nav--open .btn{
    display:inline-flex; position:fixed; z-index:60; left:var(--gutter); bottom:40px; margin-left:0;
    padding:12px 22px; font-size:var(--text-sm);
  }
  /* Kontakt (první sloupec) přes celou šířku, pod ním Web a Právní informace vedle sebe */
  /* Kontakt je přes celou šířku, proto větší svislá mezera k dvojici sloupců pod ním */
  .footer__cols{grid-template-columns:repeat(2,1fr); gap:60px 32px;}
  .footer__col:first-child{grid-column:1 / -1;}
  /* tlačítka objímají text a drží se vlevo, ne přes celou šířku */
  .form__foot{flex-direction:column; align-items:flex-start;}
}
/* Mobil */
@media (max-width:560px){
  :root{--sec-gap:125px;} /* jednotná mezera mezi sekcemi na mobilu */
  .hero{min-height:110vh; min-height:110svh; --bars-w:min(560px,92vw);}
  .hero>.wrap{padding-top:max(24px, 11vh); padding-top:max(24px, 11svh);}
  /* Hierarchie: nadpis vede nad leadem i jménem. Velikost řídí cap v základním
     pravidle (dva řádky), tady se ladí jen prokládání a mezery. */
  .hero h1{line-height:1.14; margin-bottom:18px;}
  .hero__bars{margin-bottom:26px;}
  .hero__cta{flex-direction:column; align-items:center;}
  .hero__cta .btn{width:auto;}
  .hero__name{font-size:0.95rem; margin-bottom:14px;}
  .hero__lead{font-size:1rem; margin-bottom:30px;}
  .stat__label{max-width:100%;}
  .cta-band__actions{flex-direction:column; align-items:flex-start; gap:16px;}
  .form{grid-template-columns:1fr;}
  .field--span2,.field--city{grid-column:1 / -1;}
  /* ikona a nadpis zůstávají na řádku, tlačítko se zalomí pod text */
  .form-alt{flex-wrap:wrap; row-gap:18px; align-items:flex-start;}
  .form-alt__text{flex:1 1 100%;}
  /* dvousloupcové rozbití zůstává i na mobilu, ať patička není jeden dlouhý sloupec */
  .footer__cols{gap:54px 24px;}
  /* podpis na vlastním řádku: na střed, odsazený od značky a blíž ke spodní hraně */
  .footer__bottom{padding-block:24px 26px;}
  /* logo vlevo, copyright úplně vpravo; s šířkou okna se přibližují a oddalují */
  .footer__bottom-brand{width:100%; flex-wrap:nowrap; justify-content:space-between; align-items:baseline; gap:16px;}
  .footer__credit{width:100%; justify-content:center; text-align:center; margin-top:18px;}
  /* Podstránky: tlačítka v CTA pod kroky na celou šířku pod sebou */
  .steps__cta-row{flex-direction:column; align-items:center; width:100%;}
}
/* Velmi úzké displeje (iPhone SE 1. gen. apod.) */
@media (max-width:360px){
  /* Tlačítka v kartách služeb se nelámou, takže při 40px odsazení karta
     nevejde do gutteru a stránka jde vodorovně posouvat. */
  .card{padding:28px 22px;}
  .service__more .btn{width:100%; justify-content:center;}
  /* Odesílací tlačítko je na 320px širší než sloupec formuláře, proto
     přes celou šířku (zalomit text umí samo, viz .btn). */
  .form__foot{width:100%;}
  .form__foot .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .faq__a{transition:none;}
  /* barvy se přepnou, ale nic se nehýbe */
  .btn{transition:background var(--dur-base) linear, color var(--dur-base) linear, border-color var(--dur-base) linear;}
  .btn:active{transform:none;}
  .credit-arrow{transition:none;}
}

/* ============================================================
   Podstránka: Co je PENB
   ============================================================ */
/* Hlavička podstránky: stejný formát i styl jako nadpis v hero na homepage */
.page-head{padding-top:var(--sec-gap); text-align:center;}
.page-head__inner{max-width:1000px; margin:0 auto;}
.page-head h1{
  font-family:var(--font-display); font-size:clamp(1.9rem,3.9vw,3.1rem);
  font-weight:480; font-variation-settings:'wght' 480;
  letter-spacing:var(--ls-display); line-height:1.08;
  margin-bottom:26px; text-wrap:balance;
}
.page-head p{font-size:1.125rem; color:var(--text-muted); max-width:640px; margin:0 auto;}

/* Energetické třídy A až G */
.eclass{display:flex; flex-direction:column; gap:8px;}
.eclass__row{display:flex; align-items:center; gap:16px;}
.eclass__badge{
  flex:0 0 auto; width:58px; height:46px; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff;
}
.eclass__text{font-size:var(--text-body); color:var(--ink-800);}
.eclass__note{margin-top:22px; font-size:var(--text-sm); color:var(--text-muted);}

/* Kroky zpracování */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step__num{
  width:44px; height:44px; border-radius:var(--radius-pill);
  background:var(--accent-soft); color:var(--accent-hover);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-bottom:18px;
}
.step h3{font-size:var(--text-h4); margin-bottom:10px; letter-spacing:-0.02em;}
.step p{font-size:var(--text-body); color:var(--text-muted); line-height:var(--lh-relaxed);}

/* Mřížka případů, kdy je PENB potřeba */
.cases{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.case h3{font-size:var(--text-h4); margin-bottom:12px; letter-spacing:-0.02em;}
.case p{font-size:var(--text-body); color:var(--text-muted); line-height:var(--lh-relaxed);}

/* Odkaz zpět v patičce podstránky */
/* Karta je sloupec, aby tlačítka sedla na spodní hranu i při různě dlouhých seznamech */
.service{display:flex; flex-direction:column;}
.service__more{margin-top:auto; padding-top:26px; display:flex; gap:10px; flex-wrap:wrap;}

/* CTA pod kroky zpracování */
.steps__cta{margin-top:clamp(28px,4vw,44px); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;}
.steps__cta-note{font-size:var(--text-sm); color:var(--text-muted);}

/* Zvýraznění důležitých částí textu */
strong{font-weight:600; color:var(--ink-900);}
/* Odkaz vypadající jako zvýrazněný text (strong), podtržení až při hoveru */
.link-underline{
  color:var(--ink-900); font-weight:600; text-decoration:none;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-out);
}
.link-underline:hover{color:var(--ink-900); text-decoration:underline;}
.cta-band strong{color:#fff;}

/* Větší, lépe čitelné odrážky (výjimky apod.) */
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
/* Fajfka je pozicovaná absolutně, aby text (včetně <strong>) tekl jako běžný odstavec */
.checklist li{position:relative; padding-left:40px; font-size:var(--text-body); color:var(--ink-800); line-height:var(--lh-relaxed);}
.checklist .chk{position:absolute; left:0; top:3px; width:26px; height:26px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-hover); display:inline-flex; align-items:center; justify-content:center;}
.checklist .chk .ic{width:15px; height:15px;}

/* Řádek tlačítek v CTA pod kroky */
.steps__cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

/* Spodní lišta patičky: logo + copyright vlevo, meta a credit vpravo */
.footer__bottom-brand{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
/* Credit tvůrce webu: klidná hnědá místo modré + jemně animovaná šipka */
.footer__credit{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--text-muted);}
.footer__credit a{display:inline-flex; align-items:center; gap:5px; color:var(--ink-800); font-weight:var(--fw-medium);}
.footer__credit a:hover{color:#ff6a00;}
/* Dvě šipky v okénku: první vyjede vpravo nahoru, druhá přijede zleva zdola */
.credit-arrows{position:relative; display:inline-block; flex:0 0 auto; width:12px; height:12px; overflow:hidden;}
.credit-arrow{position:absolute; left:0; top:0; transition:transform 260ms var(--ease-out);}
/* odjizdejici sipka zustava v zakladni barve, prijizdejici je oranzova */
.credit-arrow--a{color:var(--ink-800);}
.credit-arrow--b{color:#ff6a00; transform:translate(-110%,110%);}
.footer__credit a:hover .credit-arrow--a{transform:translate(110%,-110%);}
.footer__credit a:hover .credit-arrow--b{transform:translate(0,0);}

/* Logo ve spodní liště patičky: o kousek větší, bez hover stavu */
.footer__bottom-brand .logo{font-size:1.5rem; color:var(--ink-900); cursor:default; pointer-events:none;}

/* Podstránky — responzivní chování.
   Musí stát AŽ ZA základními pravidly .steps/.cases výše: mají stejnou
   specificitu, takže v tomhle souboru rozhoduje pořadí, ne media query. */
@media (max-width:960px){
  /* Karty jdou pod sebe. Ve dvou/třech sloupcích se text na mobilu láme
     do úzkých proužků a poslední sloupec vytéká mimo obrazovku. */
  .cases{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
}

/* ---------- Právní stránky (GDPR, cookies) ---------- */
/* Sazba textu má čitelnou šířku, ale sedí ve standardním .wrap jako zbytek webu */
.legal{max-width:760px; margin:0 auto;}
.legal h2{font-size:var(--text-h4); margin:46px 0 12px;}
.legal > h2:first-child{margin-top:0;}
.legal p,.legal ul{margin:0 0 16px; color:var(--gray-600); line-height:var(--lh-relaxed);}
.legal ul{padding-left:22px;}
.legal li{margin-bottom:8px;}
.legal li::marker{color:var(--text-subtle);}
/* Datum účinnosti jako kicker nad nadpisem — drobné, ale s jasnou pozicí v hierarchii */
.legal__effective{display:block; margin:0 0 16px; font-size:var(--text-label); font-weight:var(--fw-semibold); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-subtle);}
.legal__box{border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 24px; margin:20px 0 24px;}
.legal__box p{margin:0 0 5px; color:var(--ink-800);}
.legal__box p:last-child{margin-bottom:0;}

/* ============================================================
   Reveal animace (jen opacity/transform/translate → skládá GPU)
   Dvě části s odlišným cílem kvůli výkonu:

   1) HERO / PAGE-HEAD (nad foldem) → čisté CSS, běží hned po načtení
      stylů, NEČEKÁ na JavaScript. Nadpis je předrozsekaný na slova
      přímo v HTML (<span class="w">), takže se nic neskládá za běhu.
      LCP prvek (hero__lead / úvodní odstavec) se NESKRÝVÁ přes opacity
      – jen se jemně posune (transform) – aby se vykreslil okamžitě
      a nebrzdil LCP/FCP.

   2) ZBYTEK (pod foldem) → řídí JavaScript přes IntersectionObserver
      (třída .js-anim na <html> + atribut [data-reveal]).
   ============================================================ */

/* --- Pod foldem: reveal při scrollu (řídí JS) --- */
.js-anim [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(var(--reveal-i,0)*70ms);
}
.js-anim [data-reveal].is-in{opacity:1; transform:none;}

/* --- Nad foldem: hero sekvence po načtení (čisté CSS) ---
   Jen od 768 px výš. Na mobilu se hero vykreslí naráz a staticky
   (žádné postupné naskakování → nižší Speed Index, rychlejší dojem). */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  /* Nadpis po slovech (--i nese pořadí slova, viz HTML) — jen podstránky */
  .page-head h1 .w{
    display:inline-block;
    animation:heroWord .42s var(--ease-out) both;
    animation-delay:calc(60ms + var(--i,0)*40ms);
  }
  /* Úvodní odstavec podstránky je LCP prvek, stejně jako .hero__lead na úvodu:
     jen posun, opacity zůstává 1, a nečeká na JavaScript. */
  .page-head .legal__effective{ animation:heroRise .55s var(--ease-out) both; }
  .page-head__inner>p{ animation:heroSlide .55s var(--ease-out) both; animation-delay:180ms; }
  /* Textová část hera: jeden pohyb, jedna křivka, shora dolů v pořadí čtení.
     Nadpis jde jako celek (ne po slovech), aby sekvence měla klidný rytmus. */
  .hero__name,
  .hero h1,
  .hero__cta{ animation:heroRise .55s var(--ease-out) both; }
  /* Lead je LCP prvek → jen posun, opacity zůstává 1 (okamžité vykreslení) */
  .hero__lead{ animation:heroSlide .55s var(--ease-out) both; }

  .hero__name{ animation-delay:0ms; }
  .hero h1    { animation-delay:90ms; }
  .hero__lead { animation-delay:180ms; }
  .hero__cta  { animation-delay:270ms; }

  /* Energetické hranoly zleva doprava; pohyb přes `translate`, aby
     nekolidoval s parallaxem, který drží `transform` */
  .hero__bar{ animation:barIn .4s var(--ease-out) both; animation-delay:calc(400ms + var(--i,0)*60ms); }
}
@keyframes heroWord{ from{opacity:0; transform:translateY(0.32em);} to{opacity:1; transform:none;} }
@keyframes heroRise{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
/* Stejná dráha jako heroRise, jen bez opacity (LCP prvek) */
@keyframes heroSlide{ from{transform:translateY(12px);} to{transform:none;} }
@keyframes barIn{ from{opacity:0; translate:0 12px;} to{opacity:1; translate:0 0;} }

/* ---------- Stránka 404 ---------- */
/* Navbar + obsah tvoří blok vysoký celé okno, patička je až pod foldem */
.err-shell{min-height:100vh; min-height:100svh; display:flex; flex-direction:column;}
.err-main{flex:1 0 auto; display:flex; align-items:center; justify-content:center; text-align:center; padding-block:clamp(40px,8vh,80px);}
.err-title{font-size:clamp(2rem,5vw,3.25rem); letter-spacing:var(--ls-display); line-height:1.08;}
.err-text{font-size:1.125rem; color:var(--text-muted); max-width:520px; margin:18px auto 0;}
.err-cta{justify-content:center; margin-top:32px;}