/* ===== Mistr Zakázek — design system (mobile-first) ===== */

/* Fonts (self-hosted) */
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_24pt-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_24pt-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_24pt-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy:#1A2547; --navy-900:#141d38;
  /* ⚠️ --navy-tint ZŮSTÁVÁ STUDENÝ #eef1f7 — ROZHODNUTÍ MAJITELE 15. 8. 2026:
     „colours that were there before looked better". Týž den byl zkusmo teplý
     #EFEAE0 (odvozený od --bg, aby paleta byla podle §12 celá teple neutrální)
     a majitel ho po nasazení VRÁTIL. Nezkoušet znovu bez jeho pokynu.
     ⚠️ Vědět se ale musí, co ta volba stojí: proti --bg má tenhle odstín
     kontrast 1,038:1, takže na krémovém pozadí (/cenik) není rámeček „pro koho"
     skoro vidět a drží se jen barevným rozdílem, ne světlostí. Kdyby bylo
     někdy potřeba ten blok zvýraznit, řeší se to RÁMEČKEM nebo --border
     u konkrétní komponenty, ne přebarvením tokenu.
     ⚠️ Token používá 10 míst v base.css a dalších ~15 stylopisů (ikony .ico,
     .portfolio-shot, .ads-hero gradient, neaktivní stavy). Měnit JEN tady,
     jinak se paleta zase rozejde. */
  --navy-tint:#eef1f7;
  --orange:#EF601D; --orange-600:#d4530f; --orange-tint:#FCEDE5;
  --bg:#F7F5F0; --surface:#ffffff; --border:#E6E1D7;
  --ink:#1A1A17; --muted:#5C5C54;
  --green:#25a35a; --green-600:#1f8e4d;
  --star:#F5A623;
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1140px; --radius:16px; --radius-sm:11px;
  --shadow:0 10px 30px rgba(26,37,71,.08); --shadow-lg:0 24px 60px rgba(26,37,71,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:74px}
h1,h2,h3{font-family:var(--font-head);color:var(--navy);line-height:1.16;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2rem,8vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.55rem,5.5vw,2.4rem);font-weight:700}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--orange-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
strong{font-weight:600}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}
.container-narrow{max-width:820px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* Icons */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);font-weight:600;font-size:1rem;padding:.85em 1.4em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s;text-decoration:none;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-accent{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(239,96,29,.28)}
.btn-accent:hover{background:var(--orange-600);color:#fff;box-shadow:0 12px 26px rgba(239,96,29,.36)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-900);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{background:var(--green-600);color:#fff}
.btn-lg{font-size:1.05rem;padding:.95em 1.6em}
.btn-block{width:100%}
/* ⚠️ TLAČÍTKA V CENÍKU JSOU 19 px TUČNĚ — NENÍ TO JEN ESTETIKA (28. 8. 2026).
   Prostřední karta dostala `btn-accent`, tedy BÍLÝ text na oranžové #EF601D.
   Ten pár má kontrast 3,34:1. To projde WCAG AA jen jako VELKÝ TEXT (práh 3,0),
   ne jako běžný (4,5). Velký text začíná u 18,66 px tučně — proto 19/700.
   Při 16 px/600, což je výchozí `.btn`, by bílá na oranžové NEPROŠLA.
   Stejné pravidlo už drží stránky /p/ (§11).
   ⚠️ Ztmavit oranžovou místo toho nejde: --orange-600 dá s bílou 4,20 — pořád
   pod 4,5 — a nový odstín §12 zakazuje. Zvětšit písmo je jediná cesta, která
   nesahá na paletu.
   ⚠️ Platí pro všechny tři karty, ať nemají tlačítka různou velikost. */
.price-card .btn{font-size:19px;font-weight:700}

/* ── Masthead: header (hides on scroll) + persistent subbar ── */
.masthead{position:sticky;top:0;z-index:60;background:var(--bg);transition:transform .3s ease}
.site-header{background:rgba(247,245,240,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
/* ⚠️ HLAVIČKA SE SCHOVÁVÁ POSUNEM, NE ZMENŠENÍM VÝŠKY.
   Do 11. 8. 2026 se na počítači sbalovala přes `max-height: 0`. Tím se ale
   měnila výška lišty (106 → 42 px), a protože je `position: sticky`, posunul
   se s ní VŠECHEN obsah pod ní — stránka při každém sbalení poskočila o ~64 px
   a prohlížeč si sám přepsal pozici scrollu (naměřeno: scroll vzhůru o 30 px
   skončil o 14 px NÍŽ). Při malých pohybech kolečka se to pralo samo se sebou
   a vypadalo to rozbitě.
   `transform` layout nemění, takže obsah zůstane stát. O kolik se posunout,
   dopočítá main.js do proměnné `--mh-shift`: na mobilu se schová celá lišta
   (-100 %), na počítači jen horní část a dole zůstane viditelné hodnocení. */
.masthead.compact{transform:translateY(var(--mh-shift,-100%))}
/* Header hide-on-scroll is DESKTOP-ONLY — on mobile the hamburger lives in the header,
   so collapsing it would make the menu unreachable mid-page (see @media min-width:880px). */
.header-inner{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-icon{width:34px;height:34px;border-radius:8px}
.brand-word{font-family:var(--font-head);font-weight:700;font-size:1.22rem;letter-spacing:-.02em}
.brand-mistr{color:var(--navy)} .brand-mistr-light{color:#fff}
.brand-zakazek{color:var(--orange)}
.site-nav{display:none}
.header-cta{display:none}
.nav-toggle{display:inline-flex;background:none;border:0;padding:6px;color:var(--navy);cursor:pointer;margin-left:auto}
.nav-toggle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ── REVERT SUBBAR: původní tmavě-modrá varianta — pro návrat odkomentuj tento blok
   a smaž světlý blok pod ním (změna 2026-07-08, test světlé lišty). ──
.subbar{background:var(--navy);color:#cdd4e6;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.08)}
.subbar a{color:#e8ebf5}
.hours{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#fff;white-space:nowrap}
.hours.is-open .hours-dot{background:#3ad07a;box-shadow:0 0 0 3px rgba(58,208,122,.22)}
.hours.is-closed .hours-dot{background:#ff6b5e;box-shadow:0 0 0 3px rgba(255,107,94,.22)}
.subbar-rating b{color:#fff}
.subbar-link:hover{text-decoration:none;color:#fff}
.subbar-link.wa{background:var(--green);padding:5px 11px;border-radius:999px}
── konec REVERT bloku ── */
.subbar{background:var(--bg);color:var(--muted);font-size:.82rem;border-bottom:1px solid var(--border)}
.subbar a{color:var(--navy)}
.subbar-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.subbar-left,.subbar-right{display:flex;align-items:center;gap:10px}
.hours{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--navy);white-space:nowrap}
.hours-dot{width:8px;height:8px;border-radius:50%;background:var(--star);box-shadow:0 0 0 3px rgba(245,166,35,.22)}
.hours.is-open .hours-dot{background:var(--green);box-shadow:0 0 0 3px rgba(37,163,90,.2)}
.hours.is-closed .hours-dot{background:#e24b3a;box-shadow:0 0 0 3px rgba(226,75,58,.18)}
.subbar-sep{opacity:.35}
.subbar-area{display:none;align-items:center;gap:5px}
.subbar-area .ic{width:1em;height:1em;opacity:.85}
.subbar-rating{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.subbar-g{width:13px;height:13px;flex:none}
.subbar-rating:hover{text-decoration:none;border-color:#d6d0c3}
.subbar-star{color:var(--star);letter-spacing:1px}
.subbar-rating b{color:var(--navy)}
.subbar-rcount{display:none;opacity:.7}
.subbar-link{display:none;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.subbar-link:hover{text-decoration:none;color:var(--navy-900)}
.subbar-link .ic{width:1.05em;height:1.05em}
.subbar-phone{display:none}
.subbar-link.wa{background:var(--green);color:#fff;padding:5px 11px;border-radius:999px}
.subbar-link.wa:hover{background:var(--green-600);color:#fff}

/* Mobile dropdown nav */
/* ⚠️ MENU SI OMEZUJE VÝŠKU A ROLUJE SAMO V SOBĚ.
   Od 12. 8. 2026 má jedenáct odkazů a dvě skupiny, takže na 390×844 měřilo
   738 px a končilo 4 px nad spodkem obrazovky — na menším telefonu se na
   poslední položky ani na tlačítko nedalo dosáhnout. Menu je uvnitř sticky
   hlavičky, takže rolováním stránky se spodek odhalit nedá.
   `--mnav-nad` = kolik místa nad menu zabírá hlavička s lištou; měří to
   main.js při otevření, protože hlavička je na různých stránkách různě
   vysoká. Bez skriptu se použije záložní hodnota.
   `overscroll-behavior:contain` zabrání tomu, aby se po dorolování na konec
   začala hýbat stránka pod menu. */
.mobile-nav{display:none;flex-direction:column;gap:4px;background:var(--surface);
  border-bottom:1px solid var(--border);padding:12px 18px;box-shadow:var(--shadow);
  max-height:calc(100dvh - var(--mnav-nad, 110px));overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Starší prohlížeče bez `dvh` — o adresní řádek se menu připraví raději samo. */
@supports not (height: 100dvh){
  .mobile-nav{max-height:calc(100vh - var(--mnav-nad, 110px) - 60px)}
}
.mobile-nav.open{display:flex}
.mobile-nav a{color:var(--navy);font-weight:600;padding:11px 6px;border-bottom:1px solid var(--border)}
.mobile-nav a:hover{text-decoration:none;color:var(--orange-600)}
.mobile-nav .btn{margin-top:10px;border:0}
.mobile-nav .btn:hover{color:#fff}

/* Mobile sticky bottom action bar */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(26,37,71,.08);transition:transform .3s ease}
.mobile-cta.is-hidden{transform:translateY(120%)}
.mobile-cta .btn{flex:1;padding:.85em 1em}
/* Jedno tlačítko přes celou šířku — lišta má od 11. 8. 2026 jen kontakt. */
.mobile-cta--single .btn{font-size:1.02rem;padding:.95em 1em}

/* Kicker / eyebrow */
.kicker{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-600);margin-bottom:.5em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.86rem;color:var(--navy);background:#fff;border:1px solid var(--border);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow)}
.eyebrow .ic{color:var(--orange);width:1.05em;height:1.05em}
.eyebrow strong{color:var(--navy);font-weight:700}

/* Hero */
.hero{padding:36px 0 30px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.hero h1{margin-top:16px}
.hero-lead{font-size:1.12rem;color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin:24px 0 20px}
.hero-cta .btn{flex:1 1 auto}
.hero-checks{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.hero-checks li{position:relative;padding-left:32px;font-weight:500;color:var(--ink);font-size:1rem;line-height:1.5}
.hero-checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--orange-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>") center/14px no-repeat}

/* Hero cutout stage */
.hero-visual{display:flex;justify-content:center}
.hero-stage{position:relative;width:100%;max-width:380px}
.hero-stage::after{content:"";position:absolute;right:-14px;bottom:-16px;width:52%;height:46%;background:var(--orange-tint);border-radius:22px;z-index:0}
.hero-cutout{position:relative;z-index:1;display:block;width:100%;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-cutout img{display:block;width:100%;height:auto}
.hero-chip{position:absolute;z-index:2;top:14%;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:10px 13px;display:flex;align-items:center;gap:9px;max-width:170px}
.hero-chip-num{font-family:var(--font-head);font-weight:700;font-size:1.8rem;color:var(--orange);line-height:1}
.hero-chip-txt{font-size:.72rem;color:var(--muted);line-height:1.25}

/* Trust strip */
.trust{background:var(--navy);color:#dfe4f0}
.trust .container{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;padding-top:16px;padding-bottom:16px;font-size:.9rem;text-align:center}
.trust b{color:#fff}
.trust span{display:inline-flex;gap:8px;align-items:center}
.trust .ic{color:var(--orange);width:1.2em;height:1.2em}

/* Sections */
section{padding:46px 0}
.section-head{max-width:64ch;margin:0 auto 30px;text-align:center}
.section-head p{color:var(--muted);font-size:1.05rem}
.bg-surface{background:var(--surface)}
.lede{font-size:1.1rem;color:var(--muted)}

/* Cards grid */
.grid-3{display:grid;grid-template-columns:1fr;gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d8d2c5}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);margin:0}
.card .ico{width:50px;height:50px;border-radius:13px;background:var(--navy-tint);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bg-surface .card{background:var(--bg)}
.card-soft .ico{background:var(--orange-tint);color:var(--orange-600)}
.why .ico{background:var(--navy);color:#fff}

/* Results */
.results .ico{background:var(--orange-tint);color:var(--orange-600)}
.stat-card{text-align:left}
.big-num{font-family:var(--font-head);font-weight:700;font-size:2.7rem;color:var(--navy);line-height:1;margin-top:4px}
.stat-card h3{color:var(--muted);font-weight:600;font-size:1rem;margin:.2em 0 .6em}
.results-note{max-width:760px;margin:24px auto 0;text-align:center;color:var(--ink);font-size:1.02rem;background:var(--orange-tint);border-radius:var(--radius);padding:18px 22px}
.results-link{text-align:center;margin-top:18px;color:var(--muted);font-size:.98rem}

/* Pricing */
.pricing{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}
.bg-surface .price-card{background:var(--bg)}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.price-card.featured{border:2px solid var(--orange);box-shadow:var(--shadow-lg);background:var(--surface)}
.rank{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--navy-tint);padding:4px 11px;border-radius:999px;margin-bottom:14px}
/* ⚠️ `.rank-top` JE ORANŽOVÝ ZÁMĚRNĚ a 5. 9. 2026 se to POTVRDILO (Alexandr).
   Ten den se to na pár hodin zneutralizovalo na tichou šedou, protože stuha
   `.badge` („Nejoblíbenější") měla úplně stejný recept — .72rem / 700 /
   kapitálky / radius 999px / oranžové pozadí / bílý text — a dvě identické
   pilulky 14 px od sebe si braly pozornost navzájem.
   Majitel zvolil opačné řešení: PRYČ ŠLA STUHA, ne barva štítku. Oranžová
   pilulka tak zůstala na kartě jediná a hierarchie je zpátky.
   ⚠️ Kdo sem vrátí `.badge`, ať tuhle barvu řeší znovu — problém se tím
   vrátí i s ní. */
.rank-top{color:#fff;background:var(--orange)}
.price-card h3{font-size:1.4rem;margin-bottom:.15em}
.price-tagline{color:var(--muted);font-size:.95rem;margin:0 0 .7em}
.price-tag{font-family:var(--font-head);font-weight:700;font-size:2rem;color:var(--navy);margin:.1em 0 .5em}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(239,96,29,.34);white-space:nowrap}
.price-for{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--navy);background:var(--navy-tint);border-radius:var(--radius-sm);padding:11px 13px;margin:0 0 16px}
.price-for .ic-for{color:var(--orange-600);width:1.2em;height:1.2em;margin-top:1px}
.price-feats{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}
.price-feats li{position:relative;padding-left:26px;font-size:.95rem;color:var(--ink)}
.price-feats li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--orange-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>") center/12px no-repeat}
.price-feats li.muted-feat{color:var(--muted)}
.price-feats li.muted-feat::before{background:#eee url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'><path d='M6 12h12'/></svg>") center/12px no-repeat}
.price-feats li.feat-strong{font-weight:600;color:var(--navy)}
.price-feats li.feat-ai{padding-left:0;display:flex;align-items:center;gap:7px}
.price-feats li.feat-ai::before{display:none}
.ai-badge{height:19px;width:auto;flex:none;display:block}
.price-card .btn{margin-top:auto;justify-content:center}
.pricing-note{display:flex;align-items:flex-start;gap:13px;max-width:820px;margin:26px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;font-size:.98rem;color:var(--navy)}
.bg-surface .pricing-note{background:var(--bg)}
.pricing-note .ic{color:var(--orange-600);width:1.5em;height:1.5em;flex:none}
/* Zvýrazněná garance v kartě */
.price-guarantee{display:flex;gap:9px;align-items:flex-start;margin:2px 0 16px;padding:11px 13px;border-radius:var(--radius-sm);background:rgba(37,163,90,.10);border:1px solid rgba(37,163,90,.24);color:var(--green-600);font-family:var(--font-head);font-weight:600;font-size:.92rem;line-height:1.3}
.price-guarantee svg{width:18px;height:18px;flex:none;margin-top:1px}
/* Zelená pilulka „Nejsme plátci DPH" (ceníková sekce na /ads/) */
.dph-pill{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 18px;border-radius:999px;background:rgba(37,163,90,.10);border:1px solid rgba(37,163,90,.24);color:var(--green-600);font-family:var(--font-head);font-weight:700;font-size:.98rem}
.dph-pill::before{content:"✓";font-weight:800}
.price-guarantee.is-none{background:var(--navy-tint);border-color:var(--border);color:var(--muted);font-weight:500}
.price-card.featured .price-guarantee{background:rgba(239,96,29,.10);border-color:rgba(239,96,29,.30);color:var(--orange-600)}
/* Pruh „v každém balíčku" pod kartami */
.pkg-universal{max-width:1000px;margin:24px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;justify-content:center}
.bg-surface .pkg-universal{background:var(--bg)}
.pkg-universal-title{flex-basis:100%;text-align:center;font-family:var(--font-head);color:var(--navy);margin-bottom:4px;font-size:1.02rem}
.pkg-universal .item{position:relative;padding-left:24px;font-size:.93rem;color:var(--ink)}
.pkg-universal .item::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;background:var(--orange-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>") center/11px no-repeat}

/* Process steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:14px;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 22px;display:flex;gap:16px;align-items:flex-start}
.step-n{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.1rem}
.step:nth-child(2) .step-n,.step:nth-child(5) .step-n{background:var(--orange)}
/* h2 i h3: na /jak-to-funguje jsou kroky hlavním obsahem (h2), na homepage
   jsou podřazené sekci (h3). */
.step h3,.step h2{font-size:1.06rem;margin-bottom:.35em;line-height:1.25}
.step p{color:var(--muted);font-size:.94rem;line-height:1.5;margin:0}

/* Guarantee band — screams */
.guarantee-sec{padding:34px 0}
.band{background:var(--navy);color:#eef1f7;border-radius:var(--radius);padding:38px 22px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 50% -10%, rgba(239,96,29,.16), rgba(239,96,29,0) 55%);pointer-events:none}
.band-eyebrow{position:relative;display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.5em}
.band-title{position:relative;color:#fff;font-size:clamp(1.3rem,4.5vw,2rem);margin-bottom:.1em}
.band-huge{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(2.7rem,14vw,5.8rem);color:var(--orange);line-height:.98;letter-spacing:-.03em;white-space:nowrap;margin-top:.04em;text-shadow:0 6px 30px rgba(239,96,29,.35)}
.band .big{position:relative;font-family:var(--font-head);font-weight:700;color:#fff;font-size:clamp(1.2rem,3.4vw,1.7rem);max-width:26ch;margin:.4em auto 1rem}
.band .accent{color:var(--orange)}
.band-sub{position:relative;color:#c3cae0;max-width:62ch;margin:0 auto;font-size:1rem}
.band-cta{position:relative;margin-top:22px}

/* Reviews */
.rating-line{font-size:1.1rem;color:var(--muted)}
.rating-stars{color:var(--star);letter-spacing:2px}
.reviews-carousel{position:relative;display:flex;align-items:center;gap:8px}
.reviews-track{display:flex;gap:18px;flex:1;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 2px}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track .review{flex:0 0 100%;scroll-snap-align:start;margin:0}
.rev-arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--navy);font:600 1.4rem/1 var(--font-head);cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center;transition:opacity .2s,color .2s}
.rev-arrow:hover{color:var(--orange-600)}
.rev-arrow:disabled{opacity:.3;cursor:default}
@media(min-width:760px){ .reviews-track .review{flex:0 0 calc((100% - 36px)/3)} }
/* Mobil: recenze přes celou šířku, šipky pod ní (ne po stranách) */
@media(max-width:759px){
  .reviews-carousel{flex-wrap:wrap;justify-content:center;gap:14px}
  .reviews-track{order:0;flex:0 0 100%}
  .rev-arrow{order:1}
}
.review{position:relative;display:flex;flex-direction:column;break-inside:avoid;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 18px;margin:0 0 18px}
.bg-surface .review{background:var(--bg)}
.review-source{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.review-source:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(26,37,71,.16)}
.review-source svg{display:block}
.bg-surface .review-source{background:var(--surface)}
.review-stars{padding-right:40px}
.review-stars{color:var(--star);letter-spacing:2px;font-size:1.05rem;margin-bottom:8px}
.review blockquote{margin:0 0 14px;font-size:.96rem;color:var(--ink);line-height:1.6}
.review.is-clamped blockquote{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.review-more{display:inline-block;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:-4px 0 14px;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--orange-600);cursor:pointer}
.review-more:hover{text-decoration:underline}
.review figcaption{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:4px}
.review-avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.05rem}
.review:nth-child(3n+2) .review-avatar{background:var(--orange)}
.review:nth-child(3n) .review-avatar{background:#3a4a78}
.review-meta{display:flex;flex-direction:column;line-height:1.25}
.review-meta b{font-size:.94rem;color:var(--navy)}
.review-biz{font-size:.82rem;color:var(--muted)}

/* FAQ */
.faq{display:grid;gap:11px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.bg-surface .faq-item{background:var(--bg)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 50px 16px 18px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--navy);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:18px;top:50%;width:13px;height:13px;margin-top:-6px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-a{padding:0 18px 18px}
.faq-a p{margin:0;color:var(--muted)}

/* CTA / contact */
.cta-final{background:var(--bg)}
/* Kapacita — kolečka (obsazená přeškrtnutá) */
.capacity{text-align:center;margin:0 auto 26px;max-width:520px}
.capacity-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.capacity-label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(37,163,90,.5);animation:livePulse 1.8s ease-out infinite}
.capacity-dots{display:inline-flex;gap:14px;justify-content:center}
.cap-dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--green-600);background:rgba(37,163,90,.14);display:grid;place-items:center;color:var(--green-600)}
.cap-dot:not(.is-taken){animation:capFree 2.4s ease-in-out infinite}
.cap-dot.is-taken{border-color:var(--border);background:var(--navy-tint);color:var(--muted);animation:none}
.cap-dot svg{width:18px;height:18px}
.capacity-note{display:block;margin-top:12px;font-family:var(--font-head);font-weight:600;color:var(--navy)}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(37,163,90,.5)}70%{box-shadow:0 0 0 9px rgba(37,163,90,0)}100%{box-shadow:0 0 0 0 rgba(37,163,90,0)}}
@keyframes capFree{0%,100%{box-shadow:0 0 0 0 rgba(37,163,90,0)}50%{box-shadow:0 0 0 7px rgba(37,163,90,.16)}}
.cta-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
/* ⚠️ NA MOBILU JDE FORMULÁŘ HNED ZA NADPIS (Alexandr 15. 8. 2026).
   Do té doby se pod 880 px sloupce prostě naskládaly v pořadí z HTML, takže
   kdo klikl na výzvu k akci a přistál na #kontakt, viděl nadpis, odstavec
   „Řekneme vám na rovinu…", odstavec o Alexandrovi a IČO — a teprve pak
   kartu s tlačítky. Formulář, který je PRIMÁRNÍ konverzí pro Google Ads
   (gclid → odeslat.php → CSV), začínal až někde pod ohybem. Člověk, který
   právě kliknul, má hotové rozhodnutí; do cesty mu nepatří tři odstavce.
   ⚠️ Text se NEMAŽE, jen se stěhuje POD formulář — důvěra (jméno, IČO, sídlo)
   se čte stejně dobře hned pod ním a na desktopu se nemění vůbec nic, tam
   stojí sloupce vedle sebe.
   ⚠️ `display:contents` na .cta-copy udělá z nadpisu a odstavců přímé položky
   mřížky, aby šly řadit. Vedlejší efekt: .cta-copy má i třídu `reveal`, a ta
   na prvku bez boxu neplatí — obsah se tedy na mobilu objeví bez prolnutí.
   Je to ozdoba, ne obsah; důležité je, že se tím NIC neschová.
   ⚠️ Pořadí ve zdrojovém kódu zůstává logické (nadpis → text → formulář),
   takže čtečka i tabulátor čtou pořád smysluplně. */
@media(max-width:879px){
  .cta-copy{display:contents}
  .cta-copy h2{order:1}
  .cta-form-wrap{order:2}
  .cta-copy .lede{order:3}
  .cta-copy .cta-who{order:4}
}
.cta-copy h2{margin-bottom:.4em}
/* „Kdo vám web postaví" u formuláře na reklamní LP. Tiché, ne další slib —
   proto menší a potlačené; jméno a IČO nese <strong>. */
.cta-who{margin:1.1em 0 0;font-size:.92rem;line-height:1.55;opacity:.82}
.cta-who strong{font-weight:600}
.cta-points{list-style:none;padding:0;margin:16px 0 24px;display:grid;gap:11px}
.cta-points li{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--navy)}
.cta-points .ic{color:var(--orange);width:1.3em;height:1.3em}
.cta-actions{display:flex;flex-wrap:wrap;gap:11px}
.cta-actions .btn{flex:1 1 auto}
.cta-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.cta-form h3{font-size:1.25rem;margin-bottom:.8em}
.cta-form label{display:block;font-weight:600;font-size:.92rem;color:var(--navy);margin-bottom:14px}
.cta-form .opt{font-weight:400;color:var(--muted)}
.cta-form input,.cta-form textarea{width:100%;margin-top:6px;padding:12px 14px;font-family:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}
.cta-form input:focus,.cta-form textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)}
.cta-form .btn{margin-top:6px}
.form-fine{font-size:.8rem;color:var(--muted);margin:14px 0 0;line-height:1.5}

/* Footer */
.site-footer{background:var(--navy-900);color:#b9c0d4;padding:44px 0 26px}
.footer-inner{display:grid;grid-template-columns:1fr;gap:28px}
.site-footer h3{color:#fff;font-size:1rem;margin-bottom:.6em}
.site-footer a{color:#cfd5e6}
.site-footer p{color:#9aa2bd;font-size:.95rem}
.footer-brand .brand-word{font-size:1.2rem}
.footer-contact a{font-weight:500}
.footer-muted{color:#828aa6}
.footer-col nav{display:flex;flex-direction:column;gap:8px}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px}
.footer-legal p{font-size:.84rem;color:#828aa6;margin:0}

/* Reveal on scroll
   ⚠️ SCHOVÁVÁ SE JEN POD `.js` (14. 8. 2026) — a to je pojistka, ne kosmetika.
   Do té doby platilo `.reveal{opacity:0}` vždycky a zviditelnil to až main.js.
   Když se main.js nestáhl (výpadek, blokátor, 404 po nasazení) nebo cestou
   spadl, zůstala CELÁ stránka pod hero neviditelná — bílá plocha, o které se
   nedozvíme. Na návštěvě placené za proklik je to ztracená stovka za každého,
   kdo přišel. Třídu `js` přidává vloženy skript v head.php dřív, než se
   vykreslí první pixel, takže při běžícím JS se nemění vůbec nic; bez JS je
   obsah prostě rovnou vidět. Druhá pojistka (main.js spadne až za běhu) je
   try/catch přímo v main.js. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover,.card:hover,.price-card:hover{transform:none}.capacity-label::before,.cap-dot{animation:none}}

/* ───────── Tablet ───────── */
@media(min-width:600px){
  .container{padding:0 22px}
  .grid-3{grid-template-columns:repeat(2,1fr);gap:20px}
  .pricing{grid-template-columns:1fr;gap:20px;max-width:520px;margin:0 auto}
  /* recenze = .reviews-carousel (1 na mobilu, 3 na desktopu) */
  .hero-cta .btn,.cta-actions .btn{flex:0 1 auto}
  .subbar-area{display:inline-flex}
  .subbar-rcount{display:inline}
}

/* ───────── Desktop ───────── */
@media(min-width:880px){
  body{font-size:18px;padding-bottom:0 !important}
  .mobile-cta{display:none}
  .nav-toggle{display:none}
  .mobile-nav{display:none !important}
  .site-nav{display:flex;gap:22px;margin-left:auto}
  .site-nav a{color:var(--navy);font-weight:500;font-size:.97rem;position:relative;padding:4px 0}
  .site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--orange);transition:right .22s}
  .site-nav a:hover{color:var(--orange-600);text-decoration:none}
  .site-nav a:hover::after{right:0}
  /* ⚠️ ZMENŠENO 5. 9. 2026 (majitel: „ať to nekřičí přes CTA na stránkách").
     Do té doby mělo tlačítko v hlavičce 16px a 194×47 px, tedy skoro stejnou
     váhu jako hlavní tlačítko v hero (17,3px). Dvě stejně hlasitá tlačítka
     na jedné obrazovce si berou pozornost navzájem; hlavičkové má být
     záchytka, ne soupeř. Teď 14px a menší výplň.
     ⚠️ SDÍLENÁ HLAVIČKA — mění se na CELÉM webu, ne jen na LP.
     ⚠️ Na mobilu se `.header-cta` vůbec nevykresluje (`display:none` výš),
     takže se tím nesnižuje žádný dotykový cíl. */
  .header-cta{display:inline-flex;flex:none;margin-left:0;font-size:.875rem;padding:9px 17px}
  .header-inner{gap:22px;min-height:64px}
  /* výšku hlavičky na počítači drží obsah (.header-inner má min-height) */
  .subbar-link{display:inline-flex}
  .subbar-phone{display:inline}

  section{padding:62px 0}
  .hero{padding:54px 0 44px}
  .hero-grid{grid-template-columns:1.04fr .96fr;gap:50px}
  .hero h1{margin-top:20px}
  .hero-lead{font-size:1.2rem;max-width:42ch}
  .hero-stage{max-width:430px}

  .grid-3{grid-template-columns:repeat(3,1fr);gap:22px}
  .pricing{grid-template-columns:repeat(3,1fr);max-width:none}
  /* ⚠️ Pět sloupců až od 1100 px. Na 820 px vycházel sloupec na ~150 px a text
     v kroku se lámal po dvou slovech — přesně ten „namačkaný" dojem, který
     Alexandr 11. 8. 2026 vytkl. Do té doby jedou tři, zbytek se zalomí. */
  .steps{grid-template-columns:repeat(3,1fr);gap:18px}
  .step{flex-direction:column}
  .step-n{margin-bottom:6px}
  /* recenze: 3 na desktopu řeší .reviews-track .review */
  .cta-grid{grid-template-columns:1.05fr .95fr;gap:44px}
  .band{padding:52px 42px}
  .results-note{font-size:1.05rem}
  /* Čtyři sloupce od 11. 8. 2026 (přibyly Služby). Značka drží víc místa,
     tři seznamy odkazů se dělí o zbytek. */
  .footer-inner{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
}

@media(min-width:1100px){
  /* ⚠️ PĚT SLOUPCŮ JEN TEHDY, KDYŽ JE KROKŮ OPRAVDU PĚT.
     Do 12. 8. 2026 tu stálo natvrdo `repeat(5,1fr)` — jenže /sluzby/tvorba-webu
     má kroky jen tři, takže se roztáhly do tří pětinových sloupců (~140 px),
     text se lámal po dvou slovech a napravo zůstala prázdná díra po dvou
     nevyužitých sloupcích. Přesně to Alexandr 12. 8. 2026 označil za rozbité.
     Počet sloupců proto řídí počet položek, ne pevné číslo. Prohlížeč, který
     `:has()` neumí, spadne zpátky na tři sloupce z pravidla výš — a tři
     sloupce nevypadají rozbitě nikdy. */
  .steps:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr);gap:18px}
  .steps:has(> :nth-child(5)){grid-template-columns:repeat(5,1fr);gap:18px}
  /* Šest a víc kroků se vrací do tří sloupců ve dvou řadách — šest sloupců
     by mělo znovu tu nečitelnou šířku. */
  .steps:has(> :nth-child(6)){grid-template-columns:repeat(3,1fr);gap:18px}
}
@media(min-width:1040px){
  .hero-stage{max-width:460px}
  .hero-chip{right:-12px}
  .hero-stage::after{right:-14px}
}

/* ── Případové studie ────────────────────────────────────────────── */
.case{display:grid;gap:22px;align-items:center}
.case + .case{margin-top:42px;padding-top:42px;border-top:1px solid var(--border)}
.case-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.case-tag{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-600);background:var(--orange-tint);padding:.3em .7em;border-radius:999px;margin-bottom:.6em}
.case h2{margin:.1em 0 .4em}
.case-nums{display:flex;flex-wrap:wrap;gap:16px 26px;margin:1.1em 0}
.case-num b{display:block;font-family:var(--font-head);font-size:1.7rem;color:var(--navy);line-height:1.1}
.case-num span{font-size:.88rem;color:var(--muted)}
.case-verified{font-size:.86rem;color:var(--muted)}
.case-soon .case-media img{opacity:.7;filter:grayscale(.2)}
@media(min-width:860px){ .case{grid-template-columns:1.05fr 1fr;gap:36px} .case.rev .case-media{order:2} }

/* ── Ukázky práce / portfolio ────────────────────────────────────── */
/* Portfolio: grid na tabletu/desktopu; na mobilu karusel (1 karta + šipky dole) */
.portfolio-track{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:680px){ .portfolio-track{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .portfolio-track{grid-template-columns:repeat(3,1fr)} }
@media(max-width:679px){
  .portfolio-track{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .portfolio-track::-webkit-scrollbar{display:none}
  .portfolio-track>.portfolio-card{flex:0 0 100%;scroll-snap-align:start}
}
.portfolio-nav{display:none}
@media(max-width:679px){ .portfolio-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px} }
.pf-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.pf-arrow:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.pf-arrow:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none}
.portfolio-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
a.portfolio-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.portfolio-shot{aspect-ratio:4/3;background:var(--navy-tint);overflow:hidden}
.portfolio-shot img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-shot--ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45em;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%);color:#fff;text-align:center;padding:1.2em}
.portfolio-shot--ph .ph-mark{font-family:var(--font-head);font-weight:600;font-size:1.5rem;letter-spacing:.02em;color:#fff}
.portfolio-shot--ph .ph-mark span{color:var(--orange)}
.portfolio-shot--ph .ph-url{font-size:.82rem;color:#cbd3e6;letter-spacing:.04em}
.portfolio-soon .portfolio-shot img{opacity:.7;filter:grayscale(.2)}
.portfolio-meta{padding:16px 18px;display:flex;flex-direction:column;gap:.25em}
.portfolio-meta b{font-family:var(--font-head);color:var(--navy);font-size:1.02rem}
.portfolio-sub{font-size:.86rem;color:var(--muted);line-height:1.45}
.portfolio-tag{align-self:flex-start;font-family:var(--font-head);font-weight:600;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-600);background:var(--orange-tint);padding:.28em .65em;border-radius:999px;margin-bottom:.2em}
.portfolio-link{margin-top:.55em;align-self:flex-start;font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--orange-600);text-decoration:none}
.portfolio-link:hover{text-decoration:underline}
/* scrollable browser-window preview */
.site-window-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#eef1f7;border-bottom:1px solid var(--border)}
.site-window-dots{display:flex;gap:6px;flex:0 0 auto}
.site-window-dots i{width:10px;height:10px;border-radius:50%;background:#cfd5e2;display:block}
.site-window-url{flex:1;text-align:center;font-size:.76rem;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:.25em .9em;max-width:240px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lista jako odkaz na web klienta (16. 9. 2026). Sipka rika, ze se to otevre. */
a.site-window-url{text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s}
a.site-window-url::after{content:" \2197";color:var(--orange-600)}
a.site-window-url:hover,a.site-window-url:focus-visible{color:var(--navy);border-color:var(--navy)}
/* ⚠️ 300 px JE VÝCHOZÍ A NESNIŽOVAT (Alexandr 14. 8. 2026).
   Chvíli tu bylo 240 px, jenže tohle je SDÍLENÁ třída: zkrátila se tím
   případovka i na homepage a /reference, kde o to nikdo nežádal. Alexandr
   chtěl zkrátit MOBILNÍ verzi — ta se řídí `.casewin--tap` níž a je jen
   na reklamní LP. */
.site-window-view{max-height:300px;overflow-y:auto;overflow-x:hidden;background:#fff;scrollbar-width:thin;scrollbar-color:var(--orange) #e7e3da}
/* ⚠️ PAST NA PRST NA DOTYKOVÝCH DISPLEJÍCH — PLATÍ NA CELÉM WEBU
   (Alexandr 14. 8. 2026; zprvu jen `.casewin--tap` na reklamní LP, na jeho
   pokyn „oprav to i na ostatních stránkách" rozšířeno na všechna okna).
   Okno má 300 px a uvnitř je screenshot vysoký přes 3 500 px. Na myši je to
   pěkné, na dotyku ne: komu prst přistane uvnitř, ten odroluje 3 200 px cizího
   webu, než se hne stránka — a spousta lidí to vzdá dřív, než pochopí, co se
   děje. Na dotykovém displeji proto okno NEROLUJE a ukazuje jen horní výřez;
   pobídka „Posuňte se webem" se schová, ať neslibuje něco, co nejde.

   ⚠️ ZÁMĚRNĚ SE MĚNÍ JEN `overflow`, NE VÝŠKA. `max-height` si každá stránka
   drží svoji (/reference má v `reference.css` 380 px, resp. 300 px pod 719 px)
   a shodit ji všem na 230 px by zkrátilo případovky tam, kde o to nikdo
   nežádal — přesně to se jednou stalo a muselo se to vracet.
   Reklamní LP je jediná, která výřez krátí, a dělá to vlastní třídou.

   ⚠️ KDE OKNO ROLOVAT NEJDE, NESMÍ TO SLIBOVAT ANI TEXT. Věty, které vybízely
   „projděte si web v okně odshora dolů", se proto přepínají podle zařízení
   přes `.only-mouse` / `.only-touch` (homepage, /sluzby/tvorba-webu,
   /reseni/stehovaci-firmy, /lp/). Kdo přidá další okno, ať to prověří. */
@media (pointer:coarse){
  .site-window-view{overflow:hidden}
  .casewin--tap .site-window-view{max-height:230px}   /* jen reklamní LP */
}
/* ⚠️ Pobídka „Posuňte se webem" se schovává až u své vlastní definice
   (oddíl 12 níž), NE tady. Zkoušeno a nefungovalo to: `.scrollhint` se
   o osm set řádků dál nastavuje na `display:inline-flex` se STEJNOU
   specificitou, takže pozdější pravidlo vyhrálo a pobídka svítila dál —
   nad oknem, které se posunout nedá. */
/* Popisek pod případovkou podle zařízení: myš smí rolovat, dotyk ne, takže
   každý dostane větu, která je pro něj pravdivá. */
.only-touch{display:none}
@media (pointer:coarse){ .only-mouse{display:none} .only-touch{display:inline} }
@media(max-width:679px){ .site-window-view{max-height:230px} }
.site-window-view::-webkit-scrollbar{width:9px}
.site-window-view::-webkit-scrollbar-thumb{background:var(--orange);border-radius:9px;border:2px solid #fff}
.site-window-view img{width:100%;display:block}

/* ── Kontaktní údaje ─────────────────────────────────────────────── */
.contact-lines{list-style:none;padding:0;margin:0;display:grid;gap:.7em}
.contact-lines li{display:flex;gap:.6em;align-items:flex-start}
.contact-lines .ic{flex:0 0 20px;color:var(--orange-600);margin-top:2px}
.contact-lines a{color:var(--navy);font-weight:600}

/* ── Právní text (dlouhý) ────────────────────────────────────────── */
.legal h2{margin:1.4em 0 .4em;font-size:1.25rem}
.legal p, .legal li{color:var(--ink)}
.legal ul{margin:.4em 0 .4em 1.1em;display:grid;gap:.35em}
.legal .updated{color:var(--muted);font-size:.9rem}

/* ── Reklamní hero (vstupní stránka) ─────────────────────────────── */
.ads-hero{padding:32px 0 24px;background:linear-gradient(180deg,var(--navy-tint),transparent)}
.ads-hero h1{margin:.15em 0 .35em;font-size:clamp(1.7rem,4.6vw,2.7rem)}
.ads-hero .lede{font-size:1.12rem;color:var(--muted);max-width:700px;margin:0 0 1.2em}
.ads-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.1em}
.ads-checks{list-style:none;display:grid;gap:.55em;padding:0;margin:0;max-width:640px}
.ads-checks li{position:relative;padding-left:1.7em;color:var(--ink)}
.ads-checks li::before{content:"✓";position:absolute;left:0;color:var(--green-600);font-weight:800}
.ads-urgency{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:.93rem;color:var(--navy);margin:0 0 6px}
.ads-urgency .ic{width:18px;height:18px;color:var(--orange-600);flex:none}
.band-fine{font-size:.92rem;margin:.9em 0 0;opacity:.92}
@media(min-width:760px){ .ads-hero{padding:52px 0 34px} }
@media(min-width:880px){
  .ads-hero{text-align:center}
  .ads-hero .lede{margin-left:auto;margin-right:auto}
  .ads-hero .ads-cta{justify-content:center}
  .ads-hero .ads-urgency{display:flex;justify-content:center}
  .ads-hero .ads-checks{display:grid;width:max-content;max-width:100%;text-align:left;margin-left:auto;margin-right:auto}
}

/* Kdo vám web staví — kulatý avatar (2026-07-08, nahrazuje velký cutout duplicitní s hero).
   REVERT: smaž tento blok, odkomentuj "REVERT-CUTOUT" blok níže a ve 3 souborech /ads/ vrať
   <img src="/assets/img/alexandr-cutout.webp" width="300" height="281">. */
.person-sec{padding-top:60px}
.person{position:relative;display:grid;grid-template-columns:1fr;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:0 26px 24px;max-width:820px;margin:0 auto;text-align:center}
.person-photo{margin-top:-46px}
.person-photo img{width:104px;height:104px;border-radius:50%;object-fit:cover;display:inline-block;background:#2a3866;border:3px solid var(--accent);box-shadow:0 7px 16px rgba(26,37,71,.16),0 0 26px rgba(239,96,29,.22)}
.person-text h2{margin:.15em 0 .4em;font-size:1.25rem}
.person-text p{color:var(--muted);max-width:560px;margin:0 auto 1.1em}
@media(min-width:760px){
  .person{grid-template-columns:auto 1fr;gap:28px;align-items:center;text-align:left;padding:24px 36px;overflow:visible}
  .person-photo{margin:0;align-self:center}
  .person-photo img{width:128px;height:128px}
  .person-text{padding:0}
  .person-text p{margin-left:0}
}
/* REVERT-CUTOUT — původní velké foto přesahující kartu:
.person-photo{margin-top:-46px}
.person-photo img{width:250px;max-width:74%;height:auto;display:inline-block;filter:drop-shadow(0 7px 16px rgba(26,37,71,.16)) drop-shadow(0 0 26px rgba(239,96,29,.24))}
@media(min-width:760px){
  .person{grid-template-columns:300px 1fr;gap:32px;align-items:center;text-align:left;padding:10px 36px 10px 30px;overflow:visible}
  .person-photo{margin:0;align-self:end}
  .person-photo img{width:300px;max-width:100%;margin-top:-30px;vertical-align:bottom}
  .person-text{padding:24px 0}
}
*/

/* Ukázka reálného webu na reklamní LP */
.ads-proof-media{max-width:560px;margin:0 auto 14px;text-align:center}
.ads-proof-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.ads-proof-media .case-verified{margin-top:.6em}

/* Úzký CTA pruh (po ceníku a na konci stránky) */
.cta-strip{background:var(--navy);color:#fff;padding:0}
.cta-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px}
.cta-strip p{margin:0;font-family:var(--font-head);font-weight:600;font-size:1.08rem;color:#fff}
.cta-strip-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:560px){ .cta-strip-inner{flex-direction:column;text-align:center} }

/* ── Reklamní vstupní stránky (.lp) — pryč s rozptýlením, telefon zůstává ──
   ⚠️ TŘÍDA `lp` SCHOVÁVÁ CELOU NAVIGACI. Patří starší generaci reklamních
   stránek, které navigaci schválně neměly.
   ⚠️ NEPOUŽÍVAT `lp` JAKO `$body_class` NA NIČEM JINÉM. 14. 8. 2026 jsem tak
   omylem pojmenoval třídu pro /lp/tvorba-webovych-stranek (kvůli kresleným
   značkám a vyšší stěně) a tím jsem té stránce vypnul menu, hamburger
   i tlačítko v hlavičce — přesně to, co u ní má podle rozhodnutí zůstat
   (kdo kupuje web, musí si smět prolistovat reference).
   Ta stránka používá `lp-full` = reklamní LP S plnou hlavičkou. */
.lp .site-nav, .lp .header-cta, .lp .nav-toggle, .lp .mobile-nav { display:none !important; }
.lp .site-header .header-inner { justify-content:center; }
.lp .breadcrumb { display:none; }

/* ── Drobečková navigace (vnitřní stránky) ───────────────────────── */
.breadcrumb{font-size:.86rem;color:var(--muted);padding:14px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--orange-600)}
.breadcrumb [aria-current]{color:var(--ink)}

/* ── Jednoduchý nadpis vnitřní stránky ───────────────────────────── */
/* Hlavička vnitřní stránky. Do 11. 8. 2026 to byl jen nadpis a odstavec na
   prázdném pozadí — vedle nové homepage to vypadalo jako jiný, nedodělaný web
   (Alexandr). Teď má stejný rytmus jako sekce na homepage: kicker, velký
   nadpis, výrazný úvodní odstavec a linka, která hlavičku oddělí od obsahu. */
.page-hero{padding:46px 0 34px;margin-bottom:8px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--bg))}
.page-hero h1{margin:.1em 0 .3em;font-size:clamp(1.9rem,6.4vw,3.1rem);letter-spacing:-.025em}
.page-hero .lede{font-size:clamp(1.04rem,3.2vw,1.2rem);color:var(--muted);max-width:70ch}
.page-hero .kicker{margin-bottom:.35em}
@media(min-width:820px){ .page-hero{padding:62px 0 44px} }
.card-more{display:inline-block;margin-top:.7em;font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--orange-600)}
.card-more:hover{color:var(--orange)}

/* ── 404 ────────────────────────────────────────────────────────── */
.error-sec{padding:72px 0}
.error-wrap{text-align:center}
.error-wrap h1{margin:.25em 0 .4em}
.error-lead{color:var(--muted);font-size:1.08rem;max-width:560px;margin:0 auto 1.6em}
.error-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:2em}
.error-links{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;font-family:var(--font-head);font-weight:600;font-size:.95rem}
.error-links a{color:var(--navy)}
.error-links a:hover{color:var(--orange-600)}
@media(min-width:760px){ .error-sec{padding:104px 0} }

/* ── Kontaktní formulář: honeypot (skryté) + stavové hlášky ──────── */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form-banner{margin:0 0 16px;padding:12px 14px;border-radius:10px;font-size:.95rem;line-height:1.5}
.form-banner strong{font-family:var(--font-head)}
.form-banner--ok{background:#e9f7ef;border:1px solid #b7e2c8;color:#15683b}
.form-banner--err{background:#fdecea;border:1px solid #f1c3bd;color:#9c241a}
.form-banner a{color:inherit;text-decoration:underline;font-weight:600}

/* ── Ceník: DVA balíčky webu + nadstavba ────────────────────────────────── */
/* .pricing-1 = jeden balíček webu (od 16. 9. 2026, homepage a /ads/). */
.pricing-1{max-width:520px;margin:0 auto}
@media(min-width:880px){ .pricing-1{grid-template-columns:1fr;max-width:520px} }
/* .pricing-2 = jen dvě karty webu (nadstavba je samostatná karta pod nimi). */
.pricing-2{max-width:520px;margin:0 auto}
@media(min-width:880px){ .pricing-2{grid-template-columns:repeat(2,1fr);max-width:860px} }
/* .pricing-3 = dvě karty webu + „Individual" bez číselné ceny (14. 8. 2026).
   Nastavuje ji jen stránka, která si o třetí kartu řekne ($pricing_individual);
   ostatní stránky dostávají .pricing-2 přesně jako dosud.
   Tři sloupce až od 1080 px — na užším displeji by se cena a odrážky mačkaly. */
.pricing-3{max-width:520px;margin:0 auto}
@media(min-width:880px){ .pricing-3{grid-template-columns:repeat(2,1fr);max-width:860px} }
/* ⚠️ 16. 9. 2026: od zrušení Firemního webu má .pricing-3 jen DVĚ karty
   (Web na míru + Individual). Třetí sloupec od 1080 px zůstával prázdný
   a karty se lepily doleva (Alexandr poslal screenshot). Proto dva sloupce
   na střed i na širokém displeji. */
@media(min-width:1080px){ .pricing-3{grid-template-columns:repeat(2,1fr);max-width:900px} }
/* Cena slovem („Na míru") místo částky — menší než číselná cena, ať karta
   bez ceny opticky nepřebije obě karty s cenou. */
.price-tag--word{font-size:1.9rem;letter-spacing:-.01em}
.price-card--individual{border-style:dashed}
/* .price-feats je grid s flex:1, takže se řádky roztáhnou po celé výšce karty.
   U dvou balíčků to nevadí (mají odrážek dost), u karty se čtyřmi z toho byly
   propasti mezi řádky. align-content:start je nechá u sebe a volné místo
   sesbírá dole, kde je tlačítko. Platí JEN pro kartu Individual. */
.price-card--individual .price-feats{align-content:start}

/* Nadstavba „Poptávky ihned" — vizuálně ODLIŠENÁ, aby nevypadala jako 3. balíček */
.addon-card{max-width:860px;margin:22px auto 0;background:var(--surface);border:2px dashed var(--orange);border-radius:var(--radius);padding:22px 24px}
.addon-head{text-align:center;margin-bottom:16px}
.addon-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--orange);padding:4px 12px;border-radius:999px;margin-bottom:10px}
.addon-card h3{font-size:1.4rem;margin-bottom:.15em}
.addon-tagline{color:var(--muted);font-size:.95rem;margin:0}
.addon-body{display:grid;gap:18px}
.addon-card .price-feats{margin-bottom:0}
.addon-buy{display:flex;flex-direction:column;gap:12px;justify-content:center}
.addon-price{font-family:var(--font-head);font-weight:700;font-size:2rem;color:var(--orange-600);text-align:center;line-height:1}
.addon-card .price-guarantee{margin:0}
.addon-card .btn{justify-content:center}
@media(min-width:760px){
  .addon-body{grid-template-columns:1.15fr .85fr;align-items:center;gap:28px}
  .addon-buy{border-left:1px solid var(--border);padding-left:26px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026 — sloučeno sem z `nova.css` 11. 8. 2026, když redesign nahradil
   starou homepage. Do té doby se to načítalo zvlášť jen na náhledu.
   PROČ SLOUČENO: styly nové homepage (číslovaný seznam místo karet, Google
   karty recenzí, pásy log a štítků, pruh referencí) potřebují i ostatní
   stránky — bez nich vypadaly jako jiný web. Sloučením navíc zmizel jeden
   blokující požadavek na nejdůležitější stránce.
   ⚠️ Skoro všechno níž jsou NOVÉ třídy, které staré stránky nepoužívají,
   takže se nic nepřepisuje. Jediná pravidla vázaná na existující jména jsou
   `.nhero` a `#recenze .section-head` — obojí existuje pouze na homepage.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lišta bez otevírací doby: zůstalo jen hodnocení, tak ho zarovnej doprava ── */
.subbar--slim .subbar-inner{justify-content:flex-end;min-height:34px}
.subbar--slim .subbar-left{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   1. HERO — mobil napřed: vycentrovaný sloupec, jeden hlavní CTA, pod ním
   sociální důkaz. Na desktopu se jen roztáhne, nerozpadá se do dvou sloupců.
   ══════════════════════════════════════════════════════════════════════════ */
/* Dole nula: poslední věc v hero je tmavý pruh se stěnou referencí a ten musí
   dosednout přímo na pás slibů — jinak by mezi nimi svítil proužek pozadí. */
.nhero{padding:44px 0 0;text-align:center}
.nhero-inner{max-width:760px;margin:0 auto}
.nhero h1{font-size:clamp(1.85rem,7.4vw,3.9rem);letter-spacing:-.025em;margin-bottom:.55em}

/* Podtržení klíčového slova. SVG je absolutně pozicované, takže nemá vliv na
   layout → CLS zůstává 0. Kreslí se samo při odhalení sekce.
   ⚠️ Původní verze byla tlustá (stroke 7 na výšku 12) a uprostřed se vyhýbala
   nahoru — vypadalo to jako banán pod slovem, ne jako tah fixou. Teď je tenčí,
   skoro vodorovná, těsněji pod slovem a nepřesahuje ho do stran. */
.uline{position:relative;display:inline-block;white-space:nowrap}
.uline svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.26em;
  overflow:visible;pointer-events:none}
.uline path{fill:none;stroke:var(--orange);stroke-width:4.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .85s cubic-bezier(.65,.02,.3,1) .1s}
.uline.drawn path{stroke-dashoffset:0}

/* Podnadpis uvnitř H1. Je v H1 SCHVÁLNĚ — nese klíčové slovo („tvorba webů")
   i místo („Kladna a okolí"), které hlavní věta nemá. Vizuálně je to podtitulek,
   pro vyhledávač součást nejsilnějšího nadpisu na stránce. */
.h1-sub{display:block;margin-top:.42em;font-family:var(--font-body);font-weight:400;
  font-size:clamp(.95rem,2.9vw,1.14rem);letter-spacing:0;color:var(--muted);line-height:1.35}
/* ── KRESLENÉ ZNAČKY PO STRANÁCH HERO (reklamní LP /lp/, 14. 8. 2026) ──
   Celé je to zamčené pod `body.lp-full`, takže se to nemůže projevit nikde
   jinde — homepage používá stejné třídy .nhero a nesmí se hnout.
   ⚠️ AŽ OD 1100 px. Textový sloupec má 760 px; při 1100 px zbývá po stranách
   170 px a nejširší značka končí 41 px před textem. Pod 1100 px se skrývají,
   na mobilu by lezly do nadpisu.
   ⚠️ Pozicování je absolutní → nulový CLS. `pointer-events:none`, ať se na ně
   nedá kliknout a nekradou prst nad tlačítkem.
   ⚠️ Barvy z palety, žádné nové odstíny. Oranžová drží stejný rukopis jako
   kreslené podtržení v H1 (kulaté konce), navy je tlumená přes opacity, aby
   značky nepřebily nadpis — jsou to kulisy, ne obsah. */
.lp-full .nhero{position:relative}
.lp-full .nhero-inner{position:relative;z-index:1}
/* ⚠️ OPRAVENO 24. 8. 2026. Vazba na `body.lp-full` byla PAST: /tvorba-webu-kladno
   převzalo značky do hero, ale tu třídu na <body> nemá — `.nhero` tím pádem
   zůstalo `position:static`, `inset:0` se počítalo od výřezu (0,0,1440,1000)
   a kroužek přistál u drobečkové navigace, ne v hlavičce. Vypadalo to jako
   rozsypaný layout, ne jako kulisy.
   Pozicování se proto váže na to, co o věci opravdu rozhoduje — že hero ty
   značky OBSAHUJE — a ne na jméno stránky. Pravidla s `.lp-full` výš zůstávají
   jako záložka pro prohlížeč bez `:has()`; tam LP funguje dál a Kladno vypadá
   nanejvýš jako dnes, nikdy hůř. Kdo přidá značky na další stránku, nemusí
   sahat sem. */
.nhero:has(> .hero-doodles){position:relative}
.nhero:has(> .hero-doodles) > .nhero-inner{position:relative;z-index:1}
.hero-doodles{position:absolute;inset:0;pointer-events:none;z-index:0;display:none}
.hero-doodle{position:absolute;display:block;color:var(--navy);opacity:.5}
.hero-doodle svg{display:block;width:100%;height:auto}
.hero-doodle--ring   {top:168px; left:11%;   width:30px}
.hero-doodle--stocks {top:236px; right:5%;   width:50px}
.hero-doodle--rocket {top:372px; left:6%;    width:60px; transform:rotate(-10deg)}
/* ⚠️ Pozice jsou ZÁMĚRNĚ NEPRAVIDELNÉ (Alexandr 14. 8. 2026: „move them down,
   make them less regular"). Žádné dvě značky nesdílí výšku, odsazení od kraje
   ani velikost — pravidelný rozestup čte jako rámeček kolem textu.
   ⚠️ Ověřeno, že ani při 1100 px nezasahují do textového sloupce. */
.hero-doodle--www    {top:505px; right:9%;   width:44px; transform:rotate(-8deg)}
@media(min-width:1100px){ .hero-doodles{display:block} }
/* Sotva znatelné plavání — bez něj působí značky nalepené. Dvě různé délky,
   ať se nekývají synchronně. Kdo má vypnuté animace, uvidí je stát. */
@keyframes doodlefloat{from{transform:translateY(0) rotate(var(--dr,0deg))}
                        to{transform:translateY(-10px) rotate(var(--dr,0deg))}}
@media(prefers-reduced-motion:no-preference){
  .hero-doodle--ring  {animation:doodlefloat 5.5s ease-in-out infinite alternate}
  .hero-doodle--stocks{animation:doodlefloat 7s   ease-in-out infinite alternate}
  .hero-doodle--rocket{--dr:-10deg; animation:doodlefloat 6.2s ease-in-out infinite alternate}
  .hero-doodle--www   {--dr:-8deg;  animation:doodlefloat 8s   ease-in-out infinite alternate}
}

/* ── .trustbar = tmavý pruh s odškrtnutými body pod hero (reklamní LP /lp/,
   14. 8. 2026). Nahrazuje čtyřdílný blok .promises: stejná informace, místo
   0,7 obrazovky jeden až dva řádky.
   Navy pozadí + bílý text drží kontrast 12,6:1, takže projde i jako malý text
   (na rozdíl od oranžové, která v paletě prochází jen jako velký text).
   Na mobilu se položky zalomí pod sebe; `gap` řeší mezery v obou směrech. */
.trustbar{background:var(--navy);color:#fff}
.trustbar-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:12px 30px;padding:16px 18px}
/* .trustbar--card = tentýž pruh, ale jako zaoblená karta uvnitř obsahu.
   Používá ho hero na /lp/: pruh přes celou šířku by se nad stěnou referencí
   tloukl s její světlou vlnou (tmavá / světlá vlna / tmavá pod sebou vypadá
   jako chyba), karta v obsahu ne. */
.trustbar--card{max-width:640px;margin:26px auto 0;border-radius:var(--radius)}
.trustbar--card .trustbar-inner{gap:10px 26px;padding:15px 20px}

/* Cenový řádek v hero (/lp/, 14. 8. 2026) — cena je podle §7 náš strukturální
   rozdíl, takže musí být vidět dřív než po pěti obrazovkách. Větší a tmavší než
   podnadpis, ale menší než nadpis, ať nepřebije klíčové slovo. */
/* ⚠️ Spodní mezera je nutná: cenový řádek nahradil `.nhero-lead`, který měl
   `margin-bottom:2rem` — bez ní se cena lepí na tlačítko. */
.hero-price{margin:.9em auto 1.7rem;max-width:600px;font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.06rem,3.6vw,1.3rem);line-height:1.4;color:var(--navy)}
.hero-price strong{font-weight:700;color:var(--orange-600);white-space:nowrap}
.trustbar-item{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-head);font-weight:600;font-size:.98rem;line-height:1.3;color:#fff}
.trustbar-item svg{width:20px;height:20px;flex:none;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.trustbar-item svg circle{fill:var(--orange);stroke:none}
@media(min-width:680px){ .trustbar-item{font-size:1.04rem} .trustbar-inner{padding:18px} }

/* .h1-sub--out = tentýž podnadpis, ale jako samostatný <p> VEDLE <h1>, ne uvnitř
   (reklamní LP v /lp/, 14. 8. 2026 — aby <h1> nesl jen klíčové slovo).
   Mezera se u .h1-sub počítá v `em`, tedy z velikosti rodiče: uvnitř nadpisu to
   bylo ~12 px na mobilu a ~26 px na desktopu, v odstavci by z toho zbylo 6 px.
   Clamp níž ty hodnoty dorovnává, takže se vizuálně nemění nic. */
.h1-sub--out{margin-top:clamp(.75rem,2.2vw,1.6rem);margin-bottom:0}
/* Záruka v popisku hero (v2, 1. 9. 2026) — nahradila tmavý pruh důvěry pod
   tlačítkem. Musí z tlumeného podnadpisu vystoupit, jinak se nejsilnější slib
   na stránce ztratí uprostřed věty; navy místo oranžové, ať nesoupeří s CTA.
   ⚠️ Scopováno na `.lp-v2` — pruh i podnadpis sdílí originál `/lp/` a stránka
      `/tvorba-webu-kladno`, kde se nemění nic. */
/* ⚠️ Zvýraznění záruky v popisku ZRUŠENO 1. 9. 2026 — majitel ji z popisku
   odebral („no need to include"), takže tam žádné <strong> není. Pravidlo se
   nemaže úplně: kdyby se věta vracela, patří jí navy a tučný řez, ne oranžová
   (ta by soupeřila s tlačítkem). */

/* ── Hero v2 podle rozvržení ideasys.cz (1. 9. 2026) ───────────────────────
   Pilulka nad nadpisem · cena na vlastním řádku oranžově · dvě tlačítka.
   ⚠️ Všechno scopováno na `.lp-v2`. `.nhero*` a `.eyebrow` sdílí homepage,
      originál `/lp/` i `/tvorba-webu-kladno` — nescopovaná změna by se
      rozlezla po celém webu. */
.lp-v2 .nhero-eyebrow{margin:0 auto 1.1rem}
/* ⚠️ `.h1-cena` (cena na vlastní řádek, oranžově) tu byla pár hodin 1. 9. 2026
   a je ZRUŠENÁ — majitel chtěl sazbu nadpisu zpátky původní. Nevracet bez
   důvodu z dat; z ideasys zůstává jen pilulka a dvě tlačítka. */
@media(min-width:880px){
  /* Na širokém displeji vedle sebe; na mobilu zůstávají pod sebou přes celou
     šířku, přesně jako u ideasys. */
  .lp-v2 .nhero-cta{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:14px}
}
.nhero-lead{font-size:clamp(1.02rem,3.4vw,1.22rem);color:var(--muted);max-width:600px;margin:0 auto 2rem}

/* „Kde pracujeme" — vysazené pod rejstříkem služeb, aby se to nepletlo
   s nabídkou. Vlastní linku nahoře nemá (17. 9. 2026): nad ním už je spodní
   linka posledního řádku seznamu, dohromady to byla dvojitá čára. */
.wherewe{margin-top:36px;padding-top:28px;
  max-width:78ch;margin-left:auto;margin-right:auto;text-align:center}
.wherewe h2{font-size:clamp(1.18rem,4vw,1.5rem);margin-bottom:.5em}
.wherewe p{color:var(--muted);margin:0}
.wherewe strong{color:var(--navy);font-weight:600}
.nhero-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.nhero-cta .btn{width:100%;max-width:400px;font-size:1.08rem;padding:1.02em 1.6em}
.nhero-sub{font-size:.93rem;color:var(--muted);margin:2px 0 0}
.nhero-sub a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Hlavní tlačítko v hero NÍŽ NA MOBILU — do palcové zóny (1. 9. 2026, Alexandr).
   Telefon se drží jednou rukou a pohodlný oblouk palce je zhruba spodní polovina
   displeje; tlačítko sedělo v horní třetině, tedy na dosah jen přehmátnutím.
   ⚠️ SCOPOVÁNO NA `.lp-full`, NIKDY NA HOLÉ `.nhero-cta`. Tytéž třídy používá
      homepage a u `.nhero` v tomhle souboru stojí výslovné varování, že se
      nesmí hnout — nescopovaná změna by posunula tlačítko i tam.
   ⚠️ Platí pro OBĚ `/lp/` stránky, ne jen pro v2. Kdyby se ergonomie lišila,
      přibyla by do A/B testu další proměnná a přestalo by být poznat, jestli
      rozdíl udělala cena v nadpisu, nebo poloha tlačítka.
   ⚠️ HODNOTA NENÍ POSUN. Nad tlačítkem už ~26 px mezery je a sousední svislé
      okraje se SLUČUJÍ — platí větší z nich, ne jejich součet. Z 56 px tedy
      tlačítko reálně klesne jen o 30 px. Změřeno v prohlížeči (390×844):
        margin 0 → y=257 · 34 → y=265 (+8) · 56 → y=287 (+30) · 80 → y=311 (+54)
      Kdo tohle číslo mění, ať počítá s tím, že prvních ~26 px nedělá nic.
   ⚠️ VÝŠ SE JÍT NEDÁ. Při 80 px vznikne nad tlačítkem prázdné místo, které
      vypadá jako nenačtený obrázek, a střed tlačítka je i tak teprve na 40 %
      výšky displeje — do palcové zóny (spodní polovina) se hero tlačítko
      posunout NELZE, aniž by pod ohyb spadl důkazní pruh a hodnocení.
      Skutečný nástroj na dosah palcem je spodní lepicí lišta, jakou mají
      stránky v `/p/` a tahle zatím ne.
   ⚠️ Jen pod 880 px. Nad tím platí vlastní pravidla pro desktop (níž) a tam je
      hero vodorovné, takže by mezera navíc jen roztrhla rozvržení. */
@media(max-width:879px){
  .lp-full .nhero-cta{margin-top:56px}

  /* ── v2: MÍSTO PRÁZDNÉ MEZERY VĚTŠÍ PÍSMO (Alexandr 1. 9. 2026: „why is there
     so much space between vybrat balicek and description … make h1 and
     description bigger so cta is at finger level") ──────────────────────────
     Je to lepší řešení téhož problému, než jaké jsem sem dal předtím. Prázdné
     místo tlačítko taky posune, ale vypadá jako chyba sazby; větší nadpis ho
     posune stejně a zároveň zaplní obsahem. Mezera se proto vrací na běžnou
     hodnotu a práci dělá typografie.
     ⚠️ VÝCHOZÍ VELIKOSTI BYLY NA MOBILU MALÉ: `clamp` u nadpisu měl spodní mez
        1,85rem a člen 7,4vw se na telefonu vůbec neuplatní (na 390 px dá
        28,9 px, což je pod tou mezí) — nadpis tedy stál na 29,6 px bez ohledu
        na šířku displeje. Podnadpis ze stejného důvodu na 15,2 px.
        Nové meze jsou nastavené tak, aby na telefonu rozhodoval člen ve `vw`.
     ⚠️ Horní mez nadpisu zůstává 3,9rem, takže DESKTOP SE NEMĚNÍ — pravidlo
        platí jen pod 880 px.
     ⚠️ Scopováno na `.lp-v2`. `.nhero h1` i `.h1-sub` používá homepage,
        originál `/lp/` i `/tvorba-webu-kladno`. */
  .lp-v2 .nhero h1{font-size:clamp(2.4rem,10.2vw,3.9rem)}
  .lp-v2 .h1-sub--out{font-size:clamp(1.06rem,4.3vw,1.2rem)}
  /* ⚠️ VLASTNÍ ODSTUP PRO v2 ZRUŠEN 1. 9. 2026 — v2 se vrací k 56 px
     z `.lp-full` výš. Krátce tu bylo 26 px, protože prázdné místo nahradilo
     větší písmo; pak ale zmizela pilulka nad nadpisem (~55 px) a tlačítka
     vyjela z 50 % na 43 % výšky displeje. 56 px vrací ~47 % a je to hodnota,
     u které je změřeno, že nad tlačítkem NEVZNIKÁ prázdné místo (na rozdíl
     od 80 px). Kdo pilulku vrátí, ať sem zase přidá `.lp-v2` s nižší hodnotou. */
}

/* ── Sociální důkaz pod tlačítkem: skutečná fotka + hvězdy + počet hodnocení ── */
.nproof{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:38px}
.nproof-faces{display:flex;padding-left:12px;margin-bottom:2px}
/* Skutečná fotka místo řady vymyšlených tváří — viz komentář v nahled.php. */
.nproof-who{display:flex;align-items:center;gap:12px;text-align:left}
.nproof-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid var(--surface);box-shadow:0 3px 10px rgba(26,37,71,.16)}
.nproof-name{font-size:.95rem;color:var(--muted);line-height:1.3}
.nproof-name b{color:var(--navy);font-weight:600}
.nproof-name span{display:block;font-size:.87rem;opacity:.85}
.nproof-g{width:22px;height:22px;flex:none}
.nproof-rate{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--navy)}
.nproof-rate .rating-stars{color:var(--star);font-size:1.32rem;letter-spacing:2px}
.nproof-note{font-size:.95rem;color:var(--muted);margin:0}
.nproof-note b{color:var(--navy)}

@media(min-width:880px){
  .nhero{padding:66px 0 0}
  /* tlačítko zůstává na svém řádku a NEZALAMUJE se — vedlejší řádek jde pod něj */
  .nhero-cta .btn{width:auto;max-width:none;white-space:nowrap;flex:none}
  .nhero-sub{margin-top:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   2. POHYBLIVÁ STĚNA REFERENCÍ — sloupce náhledů, které pomalu ujíždějí,
   na tmavém pruhu přes celou šířku a oddělené křivkou (podle referenčního webu,
   Alexandr 11. 8. 2026).
   Každý sloupec má obsah 2× za sebou, takže se posun o -50 % zacyklí bez skoku.
   Čistě CSS, žádný JS. Kdo má vypnuté animace, uvidí statickou mozaiku.
   ══════════════════════════════════════════════════════════════════════════ */
/* Tmavé pozadí NENÍ dekorace: na světlém by nebyla vidět křivka (má barvu
   pozadí stránky) a bílé screenshoty by neměly do čeho vystoupit. */
.refband{position:relative;background:var(--navy);margin-top:40px;padding-bottom:24px;overflow:hidden}
.refband-curve{position:absolute;top:0;left:0;width:100%;height:42px;z-index:2;
  display:block;pointer-events:none}
.refband-curve-fill{fill:var(--bg)}

.refwall{position:relative;height:min(56vh,450px);overflow:hidden;contain:paint;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
          mask-image:linear-gradient(to bottom,#000 60%,transparent)}
/* ⚠️ `align-items:flex-start` JE NOSNÁ ČÁST ANIMACE, NE KOSMETIKA (14. 8. 2026).
   Bez něj platí výchozí `stretch` a flexbox natáhne KAŽDÝ sloupec na výšku toho
   nejvyššího. Animace přitom posouvá o `-50 %` VLASTNÍ výšky prvku — takže
   sloupec, který má míň obsahu než ten nejvyšší, se posune dál, než kam jeho
   obsah sahá, a v jednu chvíli je pod poslední dlaždicí DÍRA.
   Přesně tohle byla „pátá dráha má volné místo": čtvrtý sloupec (tři krátké
   ořezy „jen hero") má obsah 1 351 px, ale natažený byl na 2 894 px, takže
   posun končil na 1 447 px a při výšce stěny 490 px chybělo 586 px.
   S `flex-start` má každý sloupec vlastní výšku, `-50 %` je přesně jedna perioda
   obsahu a smyčka sedí bez ohledu na to, kolik dlaždic v sloupci je.
   ⚠️ Teprve s tímhle platí rovnice pro strop stěny níž. Do 14. 8. 2026 ji
   `stretch` tiše obcházel a čísla v komentářích neseděla na to, co dělal
   prohlížeč. */
.refwall-track{display:flex;gap:12px;justify-content:center;align-items:flex-start}
/* Sloupce se střídají ve směru: 1. dolů, 2. nahoru, 3. dolů.
   Že se přitom nesejdou dvě stejné dlaždice, nezajišťuje časování (protisměrné
   sloupce se vůči sobě pořád posouvají), ale rozdělení webů do nepřekrývajících
   se skupin — viz reference-wall.php. Rychlosti proto můžou být různé. */
/* ⚠️ RYCHLOST SE 14. 8. 2026 LADILA DVAKRÁT. Původně 52 / 61 / 47 s, pak
   zrychleno na 40 / 47 / 36 („speed it up a bit") a hned nato zpomaleno sem —
   Alexandrovi to přišlo moc rychlé. Konečný stav je mírné zrychlení proti
   původnímu, ne dvojnásobek.
   ⚠️ MĚŘIT SE MUSÍ PIXELY ZA VTEŘINU, NE VTEŘINY. Dráha jednoho cyklu je
   2× dlaždice + 2× mezera, takže stejná doba trvání znamená na desktopu
   (vyšší dlaždice) úplně jinou rychlost než na mobilu. Referenční hodnoty:
     mobil   dráha 992 px / 47 s  = 21 px/s   (původně 19)
     desktop dráha 1090 px / 60 s = 18 px/s   (původně 14)
   Čísla zůstávají navzájem nesoudělná, ať dva sousední sloupce nejedou
   jako metronom. */
/* ⚠️ `will-change` + `translateZ(0)` = KAŽDÝ SLOUPEC MÁ VLASTNÍ GPU VRSTVU
   (Alexandr 14. 8. 2026: „slider je trochu laggy, občas se tam škubne").
   Bez toho prohlížeč překresluje obsah sloupce při každém snímku — a je co
   překreslovat: každá dlaždice má `box-shadow` s 30px rozostřením a celý pruh
   navíc `mask-image`. Maska přes měnící se obsah je jedna z nejdražších věcí,
   co se dá v prohlížeči udělat.
   S vlastní vrstvou se stín i maska vykreslí JEDNOU a animace je pak jen posun
   hotové textury po GPU. Pět vrstev je bezpečné množství; `will-change` se
   nesmí rozdávat po stovkách prvků, tam by pomoc otočila v opak. */
.refwall-col{flex:0 0 178px;display:flex;flex-direction:column;gap:14px;
  animation:refscroll 47s linear infinite;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.refwall-col:nth-child(odd){animation-direction:reverse}   /* dolů */
.refwall-col:nth-child(2){animation-duration:55s}
.refwall-col:nth-child(3){animation-duration:42s}
/* ⚠️ 14. 8. 2026: pátý sloupec se VRÁTIL ke střídání (Alexandr — stěna má jet
   nahoru/dolů/nahoru/dolů/nahoru a poslední dva sloupce jely stejně).
   Do té doby tu stálo `animation-direction:normal`, aby se nikdy nesešel
   BORAsport (4. sloupec) s JOMA (5.) — jeden obchod na jednom systému, vedle
   sebe vypadá jako tentýž web. Za to ale platil rozbitý rytmus celé stěny.
   Vyřešeno v OBSAHU, ne v časování: oba podobné e-shopy jsou teď v jednom
   sloupci (reference-wall.php), takže se vedle sebe nemůžou objevit z principu
   a směr už na ničem nezáleží. Směr proto řídí zase jen pravidlo pro liché
   sloupce výš; zůstává tu vlastní rychlost, ať dva sousední sloupce nejedou
   jako metronom. */
.refwall-col:nth-child(5){animation-duration:39s}
/* ⚠️ Poměr dlaždice se mezi mobilem a zbytkem LIŠÍ a je to schválně: na mobilu
   je vysoká (300×813), aby stěna mohla zabrat ~60 % obrazovky a přitom se
   v jednom sloupci neobjevil tentýž web dvakrát. Zdroje přepíná <picture>
   v reference-wall.php; `aspect-ratio` drží rámeček dřív, než se obrázek
   načte, takže se nic neposune. */
/* ── VIDEO JAKO DLAŽDICE VE STĚNĚ (14. 8. 2026) ──
   Rámeček drží poměr 1,6 jako běžná dlaždice, aby seděla rovnice pro strop
   stěny. Video samotné je 16:9 a leží v něm vystředěné — volné místo nad a pod
   je PRŮHLEDNÉ, takže prosvítá tmavý pruh a video vypadá, jako by plavalo.
   `cover` by z 16:9 udělal svislý proužek, na kterém není poznat, co se děje. */
/* ⚠️ PŘESNĚ 16:9 — ŽÁDNÉ VOLNÉ MÍSTO (Alexandr 14. 8. 2026: „fifth row got
   some free space, we dont want free space"). Rámeček byl chvíli vyšší, aby
   držel strop stěny; ta prázdná plocha nad a pod videem ale čte jako díra ve
   sloupci. Výška stěny se místo toho zachránila přechodem na ČTYŘI sloupce
   po třech dlaždicích — viz $wall_cols na /lp/. */
.refwall-videobox{position:relative;width:100%;aspect-ratio:900/506}
.refwall-video{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.34)}
.refwall-col picture{display:block}
.refwall-col img{width:100%;height:auto;border-radius:12px;background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.34)}
@keyframes refscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.refwall-cap{position:relative;z-index:2;text-align:center;font-size:.9rem;
  color:rgba(255,255,255,.66);margin:16px 0 0;padding:0 18px}
.refwall-cap a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ⚠️ VÝŠKY JSOU DOPOČÍTANÉ, NE ODHADNUTÉ (ověřeno hrubou silou přes všechny
   fáze posunu, ne od oka).
   Aby se do sloupce nikdy nevešly TŘI dlaždice po sobě (ve dvoučlenné skupině
   by třetí byla zase ta první), musí platit:
       výška výřezu ≤ výška dlaždice + 2·mezera + 2·práh        (práh = 14 px)
   ⚠️ Křivka se do toho ZÁMĚRNĚ nezapočítává, i když horní pruh zakrývá: kryje
   každý sloupec jinak (vlevo ~pětinu své výšky, vpravo skoro nic), takže by se
   limit musel počítat zvlášť pro každý sloupec a při první změně tvaru křivky
   by přestal platit. Takhle sedí při jakémkoli tvaru.
     mobil   sloupec 178, mezera 14, VYSOKÝ OŘEZ. Nejnižší strop má 2. sloupec:
               Španělština 519 + Sweet Family 396 → mez 396 + 2×14 + 28 = 452.
               Máme min(56vh, 450). Alexandr 11. 8. 2026 chtěl sekci na telefonu
               přes půlku výšky; při poměru 4:5 by mez byla jen 278 px, proto
               vysoký ořez.
     tablet  sloupec 220 (sloupce 4 a 5 skryté) → nejnižší mez 545, máme 318
     desktop sloupec (šířka−80)/5, mezera 20. Nejnižší strop má 4. sloupec —
               tři krátké ořezy „jen hero" po 208 px → mez 417 + 60 + 28 = 505.
               Máme min(34vw, 500): na 1440 px to je 490, na 1200 px 408
               (a tam je i mez níž, 431). Pod mezí je to na KAŽDÉ šířce.
   Když se změní šířka sloupce, mezera nebo poměr dlaždice, PŘEPOČÍTAT —
   jinak se v jednom sloupci objeví stejný web dvakrát. */
/* ⚠️ VÝŠKY PLATÍ PRO OBĚ STRÁNKY, KTERÉ STĚNU VYKRESLUJÍ (homepage + /lp/).
   Do 14. 8. 2026 tu byla dvojice `.lp-full .refwall` přepisů, protože každá
   stránka měla jinou sestavu sloupců, tedy i jiný strop. Alexandr pak řekl
   „použij ten slider z LP i na homepage", takže obě sestavy jsou dnes shodné
   (liší se jen o video v 5. sloupci, které strop nesnižuje) a stačí jedna
   sada výšek. Kdyby se sestavy zase rozešly, přepis se musí vrátit —
   a ⚠️ POVINNĚ uvnitř @media: `.lp-full .refwall` (0,2,0) přebije i pravidlo
   pro desktop uvnitř @media(min-width:1200px), protože média specificitu
   nezvyšují, a stěna by pak měla mobilní výšku i na velkém monitoru. */

@media(min-width:680px){
  .refband{margin-top:48px}
  .refband-curve{height:56px}
  .refwall{height:318px}
  .refwall-col{flex:0 0 220px;gap:14px}
  .refwall-track{gap:16px}
}

/* ── PĚT SLOUPCŮ PŘES CELOU ŠÍŘKU (jako na vzorovém webu, Alexandr 11. 8. 2026).
   Sloupce se roztáhnou na celou šířku okna: sloupec = (šířka − 4×20) / 5, takže
   dlaždice je 1,25× toho, tedy zhruba 25vw − 20.
   Limit z rovnice výš pak vychází na 25vw + 48; nastavená výška 25vw + 20 je
   pod ním na JAKÉKOLI šířce okna, takže se to nemusí ladit po breakpointech.
   Strop 560 px je jen proto, aby z pruhu na 4K monitoru nebyl půlmetrový blok
   (a i tam limit platí — dlaždice je tam vyšší než 560).
   Sloupce 4 a 5 jsou pod 1200 px schované: zbylé tři mají pořád vlastní weby
   bez průniku, takže se nic nerozbije, jen se ukáže míň prací. ── */
.refwall-col:nth-child(n+4){display:none}
/* ── DESKTOP: VYŠŠÍ DLAŽDICE = VYŠŠÍ PRUH (Alexandr 14. 8. 2026) ──
   Do té doby tu byla nízká dlaždice 1,25 a pruh `25vw + 20`. Rovnice výš z toho
   dělala strop `25vw + 48`, takže na zvětšení zbývalo 28 px — nic.
   Řešení je vyšší dlaždice, ne vyšší strop: od 1200 px se bere VYSOKÝ OŘEZ
   (reference-wall.php) a zobrazuje se v poměru 1,93.
   ⚠️ VÝŠKU URČUJE 4. SLOUPEC, NE TEN NEJVYŠŠÍ (14. 8. 2026). Od sjednocení
   sestavy s reklamní LP jsou ve čtvrtém sloupci tři krátké ořezy „jen hero"
   (KABY, Hotel Swami, Backnumber), každý 230 px při šířce 300. Na 1440 px je
   sloupec 272 široký → dlaždice 208, součet ostatních dvou 417:
     strop = 417 + 3×20 + 2×14 = 505 px
   Nastaveno `min(34vw, 500px)` — na 1440 px to je 490 px, pod stropem, a strop
   roste se šířkou rychleji než 34vw, takže to platí na KAŽDÉ šířce ≥1200:
     1200 → pruh 408, strop 431 · 1600 → 500 / 554 · 1920 → 500 / 652
   Strop 500 px je zároveň pojistka, aby z pruhu na 4K monitoru nebyl
   půlmetrový blok. Do 14. 8. tu stálo `min(36vw + 10, 600)` = 528 px na
   1440 px; těch 38 px je cena za tři krátké dlaždice ve stěně.
   ⚠️ Poměr 1,93 NEZVYŠOVAT na 2,71: BORAsport a JOMA mají vysoký ořez jen
   579 px vysoký (poměr 1,93), takže by se roztáhly.
   ⚠️ Doby trvání jsou tu VYŠŠÍ než na mobilu schválně. Vyšší dlaždice = delší
   dráha, takže při stejné době ujede pruh víc pixelů za vteřinu. Proti mobilu
   je tu jen mírné zrychlení (52→45 s), jinak by stěna působila zbrkle. */
@media(min-width:1200px){
  .refband-curve{height:64px}
  .refwall{height:min(34vw,500px)}
  .refwall-track{gap:20px}
  .refwall-col{flex:1 1 0;min-width:0;gap:20px;animation-duration:60s}
  .refwall-col:nth-child(2){animation-duration:69s}
  .refwall-col:nth-child(3){animation-duration:54s}
  .refwall-col:nth-child(n+4){display:flex}
  .refwall-col:nth-child(4){animation-duration:63s}
  .refwall-col:nth-child(5){animation-duration:50s}
  .refwall-cap{margin-top:20px;font-size:.94rem}
}
@media(min-width:1600px){ .refband-curve{height:72px} }
@media(prefers-reduced-motion:reduce){ .refwall-col{animation:none} }

/* ══════════════════════════════════════════════════════════════════════════
   3. PÁS LOG — bílé kartičky, které ujíždějí doleva donekonečna.
   Statická mřížka vypadala jako tabulka; kartička dá každé značce stejný rám,
   takže sedm log s různými proporcemi drží linku. Okraje se rozplývají maskou.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ LINKY NAHOŘE I DOLE ODEBRÁNY 28. 8. 2026 (Alexandr). Pás log má stejné
   pozadí jako stránka (--bg), takže ho ohraničovaly VÝHRADNĚ ty dvě linky —
   bez nich splyne se stránkou, což je záměr. Kdo je vrací, ať vrátí OBĚ:
   samotná spodní vypadá jako nedopatření. */
.logostrip{padding:44px 0 48px;
  background:var(--bg);overflow:hidden}
.logostrip-head{text-align:center;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:0 0 26px;padding:0 18px}
.logolane{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.logotrack{display:flex;gap:14px;width:max-content;animation:logorun 44s linear infinite}
@keyframes logorun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logocard{flex:none;display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;box-shadow:0 3px 12px rgba(26,37,71,.06);
  width:190px;height:104px;padding:0 22px}
.logocard img{height:34px;width:auto;max-width:100%;object-fit:contain}
/* Tmavá kartička pro loga, která jsou dělaná na tmavé pozadí (Aapni Fleet).
   Nejde o dekoraci — na bílé by světlý text z loga zmizel. */
.logocard--dark{background:var(--navy);border-color:var(--navy)}
@media(min-width:760px){ .logocard{width:220px;height:116px} .logocard img{height:40px} }
@media(prefers-reduced-motion:reduce){
  .logotrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .logocard[aria-hidden],.logotrack>.logocard:nth-child(n+8){display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   3b. SLIBY — byl to úzký proužek se čtyřmi ikonami, pak tmavý proužek. Obojí
   se četlo jako lišta, kterou oko přeskočí. Teď je z toho čtveřice bloků
   s velkým klíčovým slovem a drobným vysvětlením pod ním — stejná typografická
   logika jako u pásu čísel, jen slova místo statistik.
   ══════════════════════════════════════════════════════════════════════════ */
.promises{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* Víc vzduchu kolem (Alexandr 11. 8. 2026) — čtyři údaje natěsnané k sobě
   se četly jako lišta, kterou oko přeskočí, což je přesně to, čemu se tenhle
   blok od začátku vyhýbá. */
.promises-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 22px;padding:62px 18px}
.promise{text-align:center}
.promise b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.5rem,6.2vw,2.05rem);line-height:1.05;letter-spacing:-.03em}
.promise b em{font-style:normal;color:var(--orange)}
.promise span{display:block;color:var(--muted);font-size:.9rem;margin-top:11px;line-height:1.45}
@media(min-width:820px){
  .promises-grid{grid-template-columns:repeat(4,1fr);gap:0;padding:76px 18px}
  .promise{padding:0 34px;border-right:1px solid var(--border)}
  .promise:last-child{border-right:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   3c. REJSTŘÍK SLUŽEB — místo šesti bílých karet s ikonou. Karta kolem každé
   služby dělala z nabídky katalog; tady je z toho rejstřík: číslo, název velkým
   písmem, popis vedle a šipka vpravo. Řádek je celý klikatelný.
   Záměrně JINÝ tvar než očíslovaný seznam v „Proč my" — ten je dvousloupcový
   a bez odkazů, aby se ty dvě sekce nepletly.
   ══════════════════════════════════════════════════════════════════════════ */
.svcindex{border-top:1px solid var(--border)}
.svcrow{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;
  padding:22px 4px;border-bottom:1px solid var(--border);position:relative;
  color:inherit;text-decoration:none;transition:padding-left .18s ease}
a.svcrow:hover{text-decoration:none;padding-left:10px}
.svcrow-n{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--orange);
  padding-top:.42em;letter-spacing:.03em}
.svcrow-t{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:clamp(1.2rem,4.4vw,1.6rem);line-height:1.22;margin:0}
.svcrow-d{grid-column:2;margin:0;color:var(--muted);font-size:.97rem;max-width:62ch}
.svcrow-go{grid-column:2;justify-self:start;margin-top:8px;font-weight:600;font-size:.92rem;
  color:var(--orange-600);display:inline-flex;align-items:center;gap:6px}
a.svcrow:hover .svcrow-go{gap:11px}
.svcrow-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
a.svcrow:hover .svcrow-go svg{transform:translateX(3px)}
@media(min-width:900px){
  .svcrow{grid-template-columns:auto minmax(0,30ch) 1fr auto;align-items:center;gap:0 30px;padding:26px 4px}
  .svcrow-d{grid-column:auto;margin:0}
  .svcrow-go{grid-column:auto;justify-self:end;margin-top:0;white-space:nowrap}
  .svcrow-n{padding-top:0}
}
@media(prefers-reduced-motion:reduce){ a.svcrow:hover{padding-left:4px} a.svcrow:hover .svcrow-go svg{transform:none} }

/* ══════════════════════════════════════════════════════════════════════════
   4. PÁS ČÍSEL — nahrazuje tři šablonovité karty. Čísla stojí volně v ploše,
   oddělená linkou; váhu nese typografie, ne rámeček.
   ══════════════════════════════════════════════════════════════════════════ */
.statband{padding:52px 0}
.statband-grid{display:grid;grid-template-columns:1fr;gap:0}
.statband-item{padding:24px 4px;text-align:center;border-bottom:1px solid var(--border)}
.statband-item:last-child{border-bottom:0}
.statband-num{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(3rem,13vw,4.4rem);line-height:1;letter-spacing:-.04em;display:block}
.statband-num sup{color:var(--orange);font-size:.42em;font-weight:700;top:-.85em;margin-left:.04em}
.statband-lab{display:block;font-weight:600;color:var(--navy);margin-top:10px;font-size:1.02rem}
.statband-sub{display:block;color:var(--muted);font-size:.93rem;margin-top:4px;max-width:34ch;
  margin-left:auto;margin-right:auto}
.statband-note{text-align:center;color:var(--muted);font-size:.9rem;margin:26px 0 0}
@media(min-width:760px){
  .statband-grid{grid-template-columns:repeat(3,1fr)}
  .statband-item{border-bottom:0;border-right:1px solid var(--border);padding:8px 18px}
  .statband-item:last-child{border-right:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   5. PROČ MY — místo šesti stejných karet očíslovaný seznam. Číslo drží rytmus,
   linka odděluje, karta nikde. Čte se to jako argumentace, ne jako katalog.
   ══════════════════════════════════════════════════════════════════════════ */
.whylist{display:grid;grid-template-columns:1fr;gap:0;margin-top:8px;counter-reset:why}
.whyitem{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:26px 0;border-top:1px solid var(--border)}
.whyitem:first-child{border-top:0}
.whyitem::before{counter-increment:why;content:counter(why,decimal-leading-zero);
  font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--orange);
  padding-top:.22em;letter-spacing:.02em}
/* h2 i h3: na homepage jsou důvody podřazené sekci (h3), na /proc-my jsou
   hlavním obsahem stránky pod h1 (h2). Vypadat musí stejně. */
.whyitem h3,.whyitem h2{margin:0 0 .35em;font-size:1.2rem;line-height:1.25}
.whyitem p{margin:0;color:var(--muted)}
.whyitem strong{color:var(--navy)}
@media(min-width:820px){
  .whylist{grid-template-columns:1fr 1fr;column-gap:56px}
  .whyitem:nth-child(2){border-top:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   6. RECENZE ve stylu Google karet — jméno + datum nahoře vedle avataru,
   logo Google vpravo, hvězdy, zkrácený text a odkaz na originál.
   Datum se počítá ze skutečného data v config/reviews.json — nic se nevymýšlí.
   Podoba podle referenčního webu (Alexandr 11. 8. 2026): velký nadpis vlevo,
   karty bez obrysu jen na stínu, lišta karet uříznutá krajem = je vidět, že
   jich je víc.
   ══════════════════════════════════════════════════════════════════════════ */
/* Nadpis sekce vlevo a velký, ne vycentrovaný jako jinde na stránce. */
#recenze .section-head{max-width:none;margin:0 0 26px;text-align:left}
#recenze .section-head h2{font-size:clamp(2rem,7.4vw,3.5rem);letter-spacing:-.03em;max-width:13ch}
#recenze .rating-line{margin:0}

.grev{background:var(--surface);border:0;border-radius:16px;padding:20px;
  box-shadow:0 6px 22px rgba(26,37,71,.09);display:flex;flex-direction:column;gap:12px;margin:0}
.grev-top{display:flex;align-items:center;gap:11px}
.grev-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:600;color:#fff;background:var(--navy);font-size:1.06rem}
/* Pět odstínů výhradně z palety base.css — viz komentář v reviews-google.php. */
.grev-av--0{background:var(--navy)}
.grev-av--1{background:var(--orange)}
.grev-av--2{background:var(--muted)}
.grev-av--3{background:var(--green)}
.grev-av--4{background:var(--navy-900)}
.grev-who{min-width:0;flex:1}
.grev-name{display:block;font-weight:600;color:var(--navy);font-size:1.04rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grev-when{display:block;color:var(--muted);font-size:.86rem;margin-top:1px}
.grev-g{width:20px;height:20px;flex:none}
.grev-stars{color:var(--star);letter-spacing:2px;font-size:1.02rem;line-height:1}
.grev-text{margin:0;color:var(--ink);font-size:.98rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-clamp:4;overflow:hidden}
/* „Číst více" je TLAČÍTKO, ne odkaz — rozbaluje text v kartě, nikam nevede.
   Vypadá jako text, takže se resetuje vzhled tlačítka. Odkrývá ho nova.js. */
.grev-more{font:inherit;font-size:.93rem;color:var(--muted);background:none;border:0;
  padding:0;cursor:pointer;text-align:left;margin-top:auto;align-self:flex-start}
.grev-more:hover{color:var(--navy);text-decoration:underline}
.grev-more[hidden]{display:none}
.grev--open .grev-text{-webkit-line-clamp:unset;line-clamp:unset;display:block}

/* vodorovný posuv prstem; šipky jen na desktopu */
.grev-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 18px 20px;margin:0 -18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.grev-rail::-webkit-scrollbar{display:none}
.grev-rail>.grev{flex:0 0 min(84vw,330px);scroll-snap-align:center}
.grev-wrap{position:relative}
.grev-arrow{display:none}

/* Ukazatel posunu pod lištou — jen tam, kde nejsou šipky. Jezdce (span) plní
   nova.js; dokud nedoběhne, je lišta prázdná a nezabírá pozornost. */
.grev-bar{height:4px;border-radius:999px;background:var(--border);max-width:220px;margin:2px auto 0;
  overflow:hidden}
.grev-bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--navy);
  opacity:.55;transform:translateX(0);transition:transform .12s linear}

/* Odkaz na profil pod listou recenzi. Zamerne tichy: overeni ma byt po ruce,
   ale nema prebijet CTA na kontakt. Logo Google dedi .grev-g z karty. */
.grev-verify{margin:18px 0 0}
.grev-verify .btn{gap:10px;background:var(--surface)}
.grev-verify .btn:hover{background:var(--navy);color:#fff}
.grev-verify .grev-g{width:20px;height:20px}

@media(min-width:880px){
  .grev-rail{padding:6px 0 22px;margin:0;scroll-behavior:smooth}
  /* 3,35 karty do řady: čtvrtá je záměrně uříznutá krajem, aby bylo poznat,
     že lišta pokračuje — přesně jako na referenčním webu. Se třemi přesnými
     kartami to vypadalo jako statická mřížka a nikdo nescrolloval. */
  .grev-rail>.grev{flex:0 0 calc((100% - 3*16px)/3.35);scroll-snap-align:start}
  .grev-arrow{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:46px;border-radius:50%;background:var(--surface);border:0;
    box-shadow:0 6px 20px rgba(26,37,71,.16);cursor:pointer;font-size:1.5rem;line-height:1;
    color:var(--navy);z-index:3}
  .grev-arrow:hover{background:var(--navy);color:#fff}
  .grev-prev{left:-18px} .grev-next{right:-18px}
  .grev-bar{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   6b. „Ještě vám něco chybí?" — samostatný panel pod ceníkem.
   Vypadá jinak než karty balíčků SCHVÁLNĚ: nemá cenu ani odrážky, protože to
   není balíček, ale výzva. Přerušovaný rámeček ho oddělí, aniž by přidal další
   „kartu k prodeji".
   ══════════════════════════════════════════════════════════════════════════ */
.askbox{margin-top:30px;text-align:center;padding:30px 22px;
  border:2px dashed var(--border);border-radius:var(--radius);background:var(--surface)}
.askbox-title{font-size:clamp(1.2rem,4.4vw,1.6rem);margin:0 0 .4em}
.askbox-lead{color:var(--ink);font-size:1.04rem;margin:0 0 .55em}
.askbox-eg{color:var(--muted);font-size:.95rem;max-width:60ch;margin:0 auto 20px;line-height:1.5}
.askbox-eg b{font-weight:600;color:var(--navy)}
@media(min-width:760px){ .askbox{padding:36px 30px} }

/* ══════════════════════════════════════════════════════════════════════════
   7. CO UMÍME — tři řady štítků, střídavě doleva a doprava, donekonečna.
   Řada je v DOM 2× za sebou, animace ji posune přesně o -50 % → smyčka
   nikde neskočí. Okraje se rozplývají maskou, aby štítky „nenarážely" do kraje.
   ══════════════════════════════════════════════════════════════════════════ */
.caps{padding:56px 0 60px;overflow:hidden}
.caps-rows{display:flex;flex-direction:column;gap:12px;margin-top:6px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.caps-lane{overflow:hidden}
.caps-row{display:flex;gap:12px;width:max-content;animation:capsrun 42s linear infinite}
.caps-row--rev{animation-direction:reverse;animation-duration:52s}
.caps-lane:nth-child(3) .caps-row{animation-duration:60s}
@keyframes capsrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ⚠️ Žádná pauza při najetí myší (Alexandr 10. 8. 2026 — vypadá to jako
   zaseknutá stránka). Řady jedou pořád; jediná výjimka je vypnutá animace
   v systému, viz prefers-reduced-motion níž. */
.caps-row,.caps:hover .caps-row{animation-play-state:running}

.cap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:11px 18px;font-size:.97rem;font-weight:500;color:var(--navy);
  box-shadow:0 2px 8px rgba(26,37,71,.05)}
.cap svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--orange);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.caps-note{text-align:center;color:var(--muted);margin:26px 0 0;font-size:.98rem}
@media(prefers-reduced-motion:reduce){
  .caps-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .caps-lane{overflow:visible}
  .cap[aria-hidden="true"]{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   8. NADSTAVBA „Poptávky ihned" v ceníku — zmenšená. Je to doplněk ke dvěma
   balíčkům, ne třetí balíček, takže nemá zabírat stejnou plochu jako ony.
   Mění se JEN vzhled; text i cena zůstávají ze sdíleného pricing-cards.php.
   ══════════════════════════════════════════════════════════════════════════ */
.pricing-compact .addon-card{margin-top:18px;padding:18px 20px}
.pricing-compact .addon-head h3{font-size:1.14rem;margin-bottom:.2em}
.pricing-compact .addon-tagline{font-size:.94rem;margin-bottom:0}
.pricing-compact .addon-body{gap:14px}
.pricing-compact .addon-body .price-feats{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0}
.pricing-compact .addon-body .price-feats li{font-size:.9rem;margin:0}
.pricing-compact .addon-price{font-size:1.5rem}
.pricing-compact .addon-buy .btn{font-size:.96rem;padding:.72em 1.2em}
.pricing-compact .price-guarantee{font-size:.86rem}

/* ══════════════════════════════════════════════════════════════════════════
   9. KARTY PORTFOLIA — štítek role (co přesně je naše práce) nad názvem.
   ══════════════════════════════════════════════════════════════════════════ */
/* Tři karty na homepage: mezi 680 a 979 px dávala mřížka 2+1, tedy osamocenou
   kartu na druhém řádku, a při 2 sloupcích byly náhledy tak úzké, že se weby
   v okně nedaly přečíst. Do 979 px proto zůstává posuvná lišta (jedna karta
   přes celou šířku, prstem doprava) a teprve pak se rozpadne na tři sloupce. */
.portfolio-carousel--n3 .portfolio-track{display:flex;grid-template-columns:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.portfolio-carousel--n3 .portfolio-track::-webkit-scrollbar{display:none}
.portfolio-carousel--n3 .portfolio-track>.portfolio-card{flex:0 0 100%;scroll-snap-align:start}
.portfolio-carousel--n3 .portfolio-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px}
@media(min-width:980px){
  .portfolio-carousel--n3 .portfolio-track{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .portfolio-carousel--n3 .portfolio-track>.portfolio-card{flex:none}
  .portfolio-carousel--n3 .portfolio-nav{display:none}
}

.pf-role{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  background:var(--navy-tint);border-radius:999px;padding:4px 10px;margin-bottom:8px;align-self:flex-start}
.pf-role--own{background:var(--orange-tint);color:var(--orange-600)}

/* šipky u recenzí: na kraji railu zšednou, ať je vidět, že dál to nejede */
.grev-arrow:disabled{opacity:.3;cursor:default}
.grev-arrow:disabled:hover{background:var(--surface);color:var(--navy)}

/* ══════════════════════════════════════════════════════════════════════════
   9b. VIDEO V HLAVIČCE — ukázka, že hlavička webu nemusí být jen fotka.
   Stejný rám okna prohlížeče jako u karet portfolia, aby to sedělo do řady.
   Poměr 16:9 drží aspect-ratio, takže se při načtení videa nic neposune (CLS 0).
   ══════════════════════════════════════════════════════════════════════════ */
.videowin{margin:34px auto 0;max-width:760px}
.videowin .site-window{border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:#000}
.videowin-v{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.videowin figcaption{margin-top:14px;text-align:center;color:var(--muted);font-size:.95rem}

/* ══════════════════════════════════════════════════════════════════════════
   10. VELKÝ NÁHLED PŘÍPADOVÉ STUDIE — web, ze kterého jsou čísla nad ním.
   Rám okna prohlížeče je stejný jako u karet portfolia, jen přes celou šířku
   a bez posouvání: tady jde o jeden snímek, ne o procházení celého webu.
   ══════════════════════════════════════════════════════════════════════════ */
/* Menší, ať nepřebíjí čísla nad sebou (Alexandr 11. 8. 2026). */
.casewin{margin:32px auto 0;max-width:640px}
.casewin .site-window{border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.casewin img{width:100%;height:auto;display:block}
.casewin figcaption{margin-top:14px;text-align:center;color:var(--muted);
  font-size:.93rem;max-width:60ch;margin-left:auto;margin-right:auto}

/* ══════════════════════════════════════════════════════════════════════════
   11. AI SYSTÉMY v kartách ceníku — v obou balíčcích. Drobným písmem, aby to
   nekonkurovalo ceně; oranžová jen na rámečku, ne na výplni.
   ══════════════════════════════════════════════════════════════════════════ */
.ai-row{margin:14px 0 16px;padding-top:14px;border-top:1px dashed var(--border)}
.ai-row-lab{display:block;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:8px}
.ai-list{display:flex;flex-wrap:wrap;gap:6px}
.ai-chip{font-size:.82rem;font-weight:600;color:var(--navy);background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;line-height:1.2}

/* ══════════════════════════════════════════════════════════════════════════
   12. NÁPOVĚDA K POSOUVÁNÍ v okně s náhledem webu. Náhled je vysoký přes tisíce
   pixelů a posouvá se uvnitř rámu — bez tohohle to spousta lidí nepozná a
   uvidí jen hlavičku cizího webu. Šipka sedí na spodním okraji okna, jemně
   pulzuje a po prvním posunutí zmizí (třídu sundá nova.js).
   ══════════════════════════════════════════════════════════════════════════ */
.site-window{position:relative}
.scrollhint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;pointer-events:none;
  background:rgba(26,37,71,.86);color:#fff;border-radius:999px;padding:6px 13px;
  font-size:.78rem;font-weight:600;white-space:nowrap;
  box-shadow:0 4px 14px rgba(26,37,71,.28);
  opacity:1;transition:opacity .35s ease}
.scrollhint svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;animation:hintbob 1.6s ease-in-out infinite}
@keyframes hintbob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.site-window.scrolled .scrollhint{opacity:0}
@media(prefers-reduced-motion:reduce){ .scrollhint svg{animation:none} }
/* ⚠️ NA DOTYKU PRYČ — okno se tam posouvat NEDÁ (viz `.site-window-view`
   v oddílu výš, past na prst). Pobídka „Posuňte se webem" by slibovala něco,
   co nejde, a člověk by u ní marně zkoušel prst.
   ⚠️ MUSÍ BÝT AŽ TADY, ZA definicí `.scrollhint`. V bloku u `.site-window-view`
   to nefungovalo: `display:inline-flex` výš má stejnou specificitu a je
   v souboru později, takže vyhrálo. */
@media (pointer:coarse){ .scrollhint{display:none} }

/* ── Alternativa k formuláři: WhatsApp + telefon těsně nad ním ────────────
   Byly ve vedlejším sloupci s textem, kde je člověk minul. Nad formulářem
   zabírají přesně ten okamžik, kdy se rozhoduje, jestli se mu chce vyplňovat
   (Alexandr 11. 8. 2026). Oddělovač „nebo vyplňte formulář" dává najevo, že
   jsou to dvě rovnocenné cesty, ne dvě tlačítka navíc. */
.cta-alt{margin-bottom:20px}
.cta-alt-lead{font-size:.98rem;color:var(--muted);margin:0 0 12px}
/* Stav dostupnosti nad formulářem. Zelená = jsme tady, šedá = zavřeno; barvu
   nese tečka, ne text, aby to nekřičelo. */
/* ⚠️ white-space:normal MUSÍ ZŮSTAT. Třída `.hours` má z horní lišty
   `white-space:nowrap` — tam je to správně („Otevřeno do 21:00" se nesmí zalomit),
   ale tady je uvnitř celá věta. S nowrap měla nejmenší možná šířka 369 px,
   sloupec s formulářem se roztáhl na 423 a CELÁ STRÁNKA šla na 441 px místo 390:
   mobil se dal posouvat do strany (Alexandr 11. 8. 2026). */
.hours--inline{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;
  font-size:.95rem;color:var(--muted);line-height:1.35;white-space:normal}
.hours--inline .hours-status{white-space:normal}
.hours--inline .hours-dot{margin-top:.42em}
.hours--inline .hours-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.hours--inline.is-open .hours-dot{background:var(--green);box-shadow:0 0 0 4px rgba(37,163,90,.16)}
.hours--inline.is-open .hours-status{color:var(--navy);font-weight:500}
/* Pod sebou, ne vedle sebe: sloupec s formulářem je úzký a popisky se do dvou
   tlačítek vedle sebe lámaly uprostřed slova („Napsat na / WhatsApp"). */
.cta-alt .cta-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.cta-alt .cta-actions .btn{width:100%;font-size:1rem;padding:.9em 1.2em}
.cta-alt-or{display:flex;align-items:center;gap:12px;margin:18px 0 0;
  font-size:.9rem;color:var(--muted)}
.cta-alt-or::before,.cta-alt-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* ── Rozbalovací „Služby" v hlavičce ──────────────────────────────────────
   ⚠️ Čistě CSS: otvírá se najetím myší i zaostřením z klávesnice
   (`:focus-within`), takže se k němu dostane i ten, kdo nepoužívá myš.
   Žádný JavaScript — na dotykovém displeji se menu stejně otvírá hamburgerem,
   kde jsou služby vypsané jako podseznam.
   Přidáno 11. 8. 2026: šest stránek služeb do té doby nemělo z menu odkaz. */
.navdrop{position:relative;display:inline-flex}
.navdrop-t{display:inline-flex;align-items:center;gap:5px}
.navdrop-t svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.navdrop:hover .navdrop-t svg,.navdrop:focus-within .navdrop-t svg{transform:rotate(180deg)}
.navdrop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:250px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:8px;
  display:flex;flex-direction:column;gap:1px;z-index:80;
  opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s,transform .16s}
/* Mezera mezi odkazem a nabídkou by rozbila najetí myší — přemostí ji
   neviditelný pruh nad nabídkou. */
.navdrop-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.navdrop-menu a{display:block;padding:9px 13px;border-radius:8px;font-size:.94rem;
  color:var(--navy);white-space:nowrap}
.navdrop-menu a:hover{background:var(--navy-tint);text-decoration:none;color:var(--orange-600)}
.navdrop-menu a::after{content:none}   /* podtržítko z .site-nav sem nepatří */
/* Doplňky nejsou služba jako ostatní, jen se hledají na stejném místě —
   linka nad odkazem to odděluje, aby seznam nevypadal jako sedm rovnocenných
   služeb. */
.navdrop-menu a.navdrop-sep{margin-top:6px;padding-top:11px;
  border-top:1px solid var(--border);border-radius:0 0 8px 8px}

/* Nadpisy skupin v mobilním menu */
.mobile-nav-lab{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:14px 0 4px}
.mobile-nav-lab:first-child{margin-top:0}
.mobile-nav-sub{padding-left:12px !important}

/* Mezi 880 a 1023 px se do lišty šest položek při plné velikosti nevejde a menu
   se zalomí do dvou řádků (změřeno: hlavička vyroste z 33 na 58 px). Užší
   mezery a o kousek menší písmo to udrží na jednom řádku; od 1024 px se vrací
   výchozí velikost. */
@media(min-width:880px) and (max-width:1023px){
  .site-nav{gap:13px}
  .site-nav a{font-size:.9rem}
}

/* ── Srovnávací tabulka `.cmp` ────────────────────────────────────────────
   Sdílená: /cenik (rozdíly mezi balíčky) a /web-na-miru-nebo-wordpress.
   Sem se přestěhovala z cenik.css 11. 8. 2026, když ji začaly používat dvě
   stránky. Na mobilu se z tabulky stane seznam karet (každý řádek = jedna
   karta), protože trojsloupcová tabulka na 390 px nejde přečíst — proto MUSÍ
   mít každá buňka `data-lab` s názvem sloupce, jinak na mobilu není poznat,
   která hodnota patří komu. */
.cmp{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp caption{caption-side:top;text-align:left;color:var(--muted);font-size:.94rem;
  padding-bottom:12px}
.cmp th,.cmp td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;
  vertical-align:top}
.cmp thead th{font-family:var(--font-head);font-weight:600;color:var(--navy);
  border-bottom:2px solid var(--border);white-space:nowrap}
.cmp tbody th{font-weight:500;color:var(--navy)}
.cmp td{color:var(--muted)}
.cmp .yes{color:var(--green-600);font-weight:600}
.cmp .no{color:var(--muted);opacity:.75}
.cmp-hi{background:var(--orange-tint)}
@media(max-width:639px){
  .cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tr{background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px}
  .cmp th,.cmp td{border:0;padding:4px 0}
  .cmp tbody th{font-family:var(--font-head);font-weight:600;font-size:1rem;margin-bottom:4px}
  /* popisek sloupce se na mobilu doplní před hodnotu */
  .cmp td::before{content:attr(data-lab) " – ";color:var(--navy);font-weight:600}
  .cmp-hi{background:none}
}

/* Mezi 640 a 879 px má patička dva sloupce — čtyři by na tabletu byly
   nečitelně úzké a jeden sloupec zbytečně dlouhý. */
@media(min-width:640px) and (max-width:879px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px 34px}
}
/* Patička jednostránkové LP má jen tři sloupce (16. 9. 2026). */
@media(min-width:880px){ .footer-inner--3{grid-template-columns:1.5fr 1fr 1fr} }

/* Hlavička na PODSTRÁNCE (/sluzby/tvorba-webu). `.nhero` má dole nulový
   padding, protože na homepage na něj rovnou dosedá stěna referencí. Na
   podstránce žádná není, takže by hlavička nalepila na další sekci. */
.nhero--page{padding-bottom:40px;border-bottom:1px solid var(--border)}
@media(min-width:880px){ .nhero--page{padding-bottom:52px} }
/* ⚠️ Tady končí nadpis podtrženým slovem (na homepage je podtržení uprostřed).
   Tah fixou proto zasahoval do podnadpisu — potřebuje pod sebou víc místa. */
.nhero--page .h1-sub{margin-top:.78em}
/* Poznámka o záloze pod tlačítkem — drobná, ale musí být čitelná. */
.nhero--page .tw-hero-note{margin:22px 0 0;font-size:.93rem;color:var(--muted);line-height:1.6}
.nhero--page .tw-hero-note b{color:var(--navy)}

/* ── „Co pro viditelnost děláme navíc" (includes/seo-edge.php) ────────────
   Sdílený blok na stránkách služeb. Číslovaný seznam ve dvou sloupcích,
   stejný rytmus jako `.drivers` na /kolik-stoji-web a `.parts` u e-shopu —
   schválně, ať to na webu působí jako jeden jazyk, ne tři různé komponenty. */
.seoedge{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:900px){ .seoedge{grid-template-columns:1fr 1fr;column-gap:48px} }
.seoedge li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:20px 0;border-top:1px solid var(--border)}
.seoedge li:first-child{border-top:0}
@media(min-width:900px){ .seoedge li:nth-child(2){border-top:0} }
.seoedge i{font-style:normal;font-family:var(--font-head);font-weight:700;font-size:1rem;
  color:var(--orange);padding-top:.2em;letter-spacing:.02em}
.seoedge b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;margin-bottom:.25em;line-height:1.3}
.seoedge span{color:var(--muted);font-size:.96rem;line-height:1.55}
/* Poznámka o negarantování pozic. Musí být čitelná, ne schovaná drobným
   písmem — je to náš rozlišovací znak, ne právní kličky. */
.seoedge-note{max-width:74ch;margin:30px auto 0;padding-top:22px;
  border-top:1px solid var(--border);color:var(--muted);font-size:.96rem;
  line-height:1.6;text-align:center}

/* ── Schematická mapka okolí ──────────────────────────────────────────────
   Sdílená: /sluzby/seo a /sluzby/tvorba-webu. Sem se přestěhovala z
   sluzby-seo.css 12. 8. 2026, když ji začaly používat dvě stránky.
   ⚠️ NENÍ TO MAPA V MĚŘÍTKU a ani se o to nesnaží — je to schéma vztahu
   „my a okolí". Říká to i popisek pod obrázkem a ten se nesmí odstranit.
   ⚠️ viewBox je schválně jen 340 široký: na telefonu tak vyjde písmo 12
   jednotek zhruba na 12 px, tedy čitelně. Kdyby byl viewBox 800, popisky by
   se na mobilu smrskly na pět pixelů.
   ⚠️ Text uvnitř SVG má obtah barvou pozadí (paint-order), aby byl čitelný
   i tam, kde pod ním vede spojnice.
   ⚠️ transform-origin u pulzujícího kroužku je vázaný na střed 160,132 —
   když se změní viewBox nebo poloha Kladna, musí se změnit i tady. */
.mapcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 12px 6px}
.bg-surface .mapcard{background:var(--bg)}
.mapdia{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.mapdia .m-blob{fill:var(--orange-tint);stroke:var(--orange);stroke-opacity:.4;
  stroke-width:1.4;stroke-dasharray:5 6}
.mapdia .m-link{fill:none;stroke:var(--navy);stroke-opacity:.22;stroke-width:1.2;stroke-dasharray:3 5}
.mapdia .m-link--far{stroke-opacity:.13}
.mapdia .m-dot{fill:var(--navy)}
.mapdia .m-dot--far{fill:var(--muted);opacity:.5}
.mapdia .m-hub{fill:var(--orange)}
.mapdia .m-ring{fill:none;stroke:var(--orange);stroke-width:2;opacity:.5;
  transform-box:view-box;transform-origin:160px 132px;animation:mzPing 3s ease-out infinite}
@keyframes mzPing{0%{transform:scale(.55);opacity:.55}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.mapdia text{font-family:var(--font-body);font-size:12px;fill:var(--navy);
  paint-order:stroke;stroke:var(--surface);stroke-width:3.5;stroke-linejoin:round}
.bg-surface .mapdia text{stroke:var(--bg)}
.mapdia .m-hub-t{font-family:var(--font-head);font-weight:700;font-size:15px}
.mapdia .m-far-t{fill:var(--muted);font-size:11px}
.figcap{margin:12px auto 0;text-align:center;color:var(--muted);font-size:.9rem;
  max-width:62ch;line-height:1.5}

/* ═══ Jednostránková navigace na reklamní LP (6. 9. 2026) ═══════════════════
   `.masthead` je `position:sticky;top:0`, takže bez odsazení skočí kotva tak,
   že se nadpis sekce schová POD hlavičku. Dokud menu vedlo na jiné stránky,
   nebylo to vidět; s jednostránkovou navigací to potká každý klik v menu.
   ⚠️ Scoped na `.lp-onepager` — ostatní stránky webu se nemění.
   ⚠️ `scroll-margin-top` na CÍLI, ne `scroll-padding-top` na `html`: rolovací
      element je `html` a pravidlo na `body` by se tiše ignorovalo.
   80px = hlavička (min-height 60px + rámeček + odsazení) a kus vzduchu navíc,
   aby nadpis nelepil na spodní hranu lišty. */
.lp-onepager main[id],
.lp-onepager section[id],
.lp-onepager #reference{scroll-margin-top:80px}

/* ══════════════════════════════════════════════════════════════════════════
   „PROČ WEB OD NÁS" JAKO KARTY S IKONOU — homepage (17. 9. 2026).
   Kopie pravidel z lp-portfolio.css (reklamní LP je načítá samostatně a mají
   stejné hodnoty, takže se nic nepere). Markup: includes/why-cards.php.
   ══════════════════════════════════════════════════════════════════════════ */
.whylist--cards{gap:16px;margin-top:22px}
.whylist--cards .whyitem{display:block;padding:24px 22px 26px;border-top:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.whylist--cards .whyitem::before{content:none}
.why-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin:0 0 15px;border-radius:12px;background:var(--orange-tint);color:var(--navy)}
.why-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.whylist--cards .whyitem h3,.whylist--cards .whyitem h2{margin-bottom:.4em}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .whylist--cards .whyitem{transition:transform .18s ease,box-shadow .18s ease}
  .whylist--cards .whyitem:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
}
@media (min-width:820px){ .whylist--cards{column-gap:16px} }
/* Čtyři karty v jedné řadě od 1000 px (stejně jako LP v2); pod tím 2 × 2. */
@media (min-width:1000px){ .whylist--row4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0} }

/* ══════════════════════════════════════════════════════════════════════════
   KOMPAKTNÍ „PROČ WEB OD NÁS" + „JAK TO FUNGUJE" NA HOMEPAGE (17. 9. 2026)
   Alexandr: sekce je moc velká, ať je jako na LP v2. Hodnoty jsou 1:1
   z lp-portfolio.css (`.lp-full`/`.lp-v2` #proc-my a #jak), jen scopované
   na `.sec-compact`, aby se nezmenšily ostatní stránky se stejnými třídami.
   Platí od 1000 px; pod tím zůstávají karty jako všude jinde.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  .sec-compact{padding:52px 0}
  .sec-compact .section-head{margin-bottom:20px}
  .sec-compact .section-head h2{font-size:clamp(1.5rem,2.9vw,1.95rem)}
  .sec-compact .section-head p{font-size:.97rem;margin:.5em 0 0}
  .sec-compact .whylist--cards .whyitem{padding:20px 18px 22px}
  .sec-compact .why-ico{width:38px;height:38px;margin-bottom:12px;border-radius:11px}
  .sec-compact .why-ico svg{width:22px;height:22px}
  .sec-compact .whyitem h3{font-size:1.05rem}
  .sec-compact .whyitem p{font-size:.93rem;line-height:1.5}
  .sec-compact .step h3,.sec-compact .step h2{font-size:1.02rem}
  .sec-compact .step p{font-size:.91rem;line-height:1.5}

  /* Časová osa: čísla stojí na lince, kroky bez karet (LP v2, 29. 8. 2026).
     Linka je ::before, takže nemá vliv na rozvržení a CLS zůstává 0.
     left/right = polovina kolečka (34/2), aby začínala i končila v jeho středu.
     Sloupců je vždy tolik, kolik je kroků v jedné řadě: druhá řada by linku neměla. */
  .steps--timeline{position:relative;column-gap:24px;row-gap:16px;
    grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps--timeline:has(> :nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
  .steps--timeline::before{content:"";position:absolute;top:17px;left:17px;right:17px;
    height:2px;background:var(--border);z-index:0}
  .steps--timeline .step{background:none;border:0;border-radius:0;box-shadow:none;
    padding:0 14px 0 0;position:relative;z-index:1}
  .steps--timeline .step-n{width:34px;height:34px;font-size:1rem;margin-bottom:14px;
    box-shadow:0 0 0 5px var(--bg)}
  .steps--timeline .step:hover{transform:none;box-shadow:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   KONTAKTNÍ BLOK `.lpk` — i na homepage (17. 9. 2026)
   Kopie pravidel z lp-portfolio.css (LP je načítá samostatně se stejnými
   hodnotami). Markup: index.php #kontakt. `.cta-final` sdílí další stránky,
   proto je všechno scopnuté na `.lpk`.
   ══════════════════════════════════════════════════════════════════════════ */
.lpk{background:var(--navy);color:#fff}
.lpk h2{color:#fff;text-align:center;margin-bottom:10px}
.lpk-reply{text-align:center;color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.1rem,3.4vw,1.32rem);line-height:1.4;margin:0 0 34px}
.lpk-box{max-width:560px;margin:0 auto}
.lpk-btns{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
@media (min-width:380px){ .lpk-btns{grid-template-columns:1fr 1fr} }
.lpk-btns .btn{width:100%}
.lpk-call{background:#fff;color:var(--navy)}
.lpk-call:hover{background:#e9edf6;color:var(--navy)}
.lpk-form{background:var(--surface);border-radius:14px;padding:20px}
.lpk-form label{color:var(--navy)}
.lpk-form .form-fine{color:var(--muted)}
.lpk-reply .uline svg{left:-5%;right:auto;bottom:-15px;width:110%;height:15px;overflow:visible}
.lpk-reply .uline path{stroke-width:5}

/* Čtyři kroky mezi 880 a 1099 px: 2 × 2 místo 3 + 1 s dírou (17. 9. 2026). */
@media(min-width:880px) and (max-width:1099px){
  .steps:not(.steps--timeline):has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}

/* ── Homepage hero podle /lp/ v2 (17. 9. 2026, Alexandr) ─────────────────────
   Hodnoty jsou výsledný stav `.lp-v2 .nhero*` z lp-portfolio.css, jen bez ceny.
   ⚠️ Scope `.nhero--v2`: `.nhero*` dál používají /lp/ i /tvorba-webu-kladno. */
.nhero.nhero--v2{padding-top:84px}
.nhero.nhero--v2 .nhero-eyebrow{display:block;margin:0 auto 34px;color:#6E6A63;font-weight:700;
  font-size:.72rem;line-height:1.5;letter-spacing:.16em;text-transform:uppercase}
.nhero.nhero--v2 h1{font-size:clamp(2.1rem,8.1vw,3.7rem);margin-bottom:32px}
.nhero.nhero--v2 .h1-sub--out{margin-top:0;margin-bottom:0}
.nhero.nhero--v2 .nhero-cta{margin-top:58px}
.nhero.nhero--v2 .nhero-cta + *{margin-top:42px}
.nhero.nhero--v2 .nproof{gap:3px}
.nhero.nhero--v2 .nproof-note{font-size:.88rem}
@media(min-width:880px){
  .nhero.nhero--v2 .nhero-inner{max-width:1040px}
  .nhero.nhero--v2 .h1-sub--out{font-size:1.4rem;max-width:620px;margin-left:auto;margin-right:auto}
  .nhero.nhero--v2 .nhero-cta{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:14px}
}
@media(max-width:879px){
  .nhero.nhero--v2{padding-top:72px}
  .nhero.nhero--v2 .nhero-eyebrow{font-size:.68rem;margin-bottom:30px}
  .nhero.nhero--v2 h1{font-size:clamp(1.7rem,10.8vw,4.35rem);margin-bottom:28px}
  .nhero.nhero--v2 .h1-sub--out{font-size:1.28rem;max-width:21ch;margin-left:auto;margin-right:auto}
  .nhero.nhero--v2 .nhero-cta{margin-top:50px}
  .nhero.nhero--v2 .nhero-cta + *{margin-top:36px}
  .nhero.nhero--v2 .nhero-cta .btn{font-size:1.2rem;font-weight:600;padding-top:17px;padding-bottom:17px}
}
@media(max-width:380px){
  .nhero.nhero--v2{padding-top:52px}
  .nhero.nhero--v2 .nhero-eyebrow{margin-bottom:22px}
  .nhero.nhero--v2 h1{font-size:clamp(1.6rem,9vw,4.35rem);margin-bottom:20px}
  .nhero.nhero--v2 .h1-sub--out{font-size:1.14rem}
  .nhero.nhero--v2 .nhero-cta{margin-top:38px}
  .nhero.nhero--v2 .nhero-cta + *{margin-top:28px}
  .nhero.nhero--v2 .nhero-cta .btn{font-size:1.05rem;padding-top:13px;padding-bottom:13px}
}

/* ── Homepage: <h1> je nadřádka, velká věta je <p class="nhero-title"> (23. 9. 2026, SEO) ──
   Jen přidaná pravidla, vzhled se nemá změnit ani o pixel. Nadřádka jako <h1>
   by jinak zdědila písmo z `h1,h2,h3`; velká věta jako <p> by přišla o sazbu
   nadpisu z `h1,h2,h3`, `h1`, `.nhero h1` a `.nhero.nhero--v2 h1`.
   ⚠️ Velikosti a spodní mezery tady MUSÍ odpovídat `.nhero.nhero--v2 h1` výš,
   včetně obou media bloků. Změníte-li jedno, změňte i druhé. */
.nhero.nhero--v2 h1.nhero-eyebrow{font-family:inherit}
.nhero.nhero--v2 .nhero-title{font-family:var(--font-head);color:var(--navy);font-weight:700;
  line-height:1.16;letter-spacing:-.025em;margin:0 0 32px;font-size:clamp(2.1rem,8.1vw,3.7rem)}
@media(max-width:879px){
  .nhero.nhero--v2 .nhero-title{font-size:clamp(1.7rem,10.8vw,4.35rem);margin-bottom:28px}
}
@media(max-width:380px){
  .nhero.nhero--v2 .nhero-title{font-size:clamp(1.6rem,9vw,4.35rem);margin-bottom:20px}
}