@font-face{font-family:'Plus Jakarta Sans';font-weight:200 800;font-style:normal;font-display:swap;src:url(/_a/plus-jakarta-sans-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-weight:200 800;font-style:normal;font-display:swap;src:url(/_a/plus-jakarta-sans-latin-ext-wght.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/_a/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/_a/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/_a/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/_a/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
src:url(/_a/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
src:url(/_a/inter-latin-wght-normal.woff2) format('woff2-variations');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ══════════════════════════════════════════════════════════════════════════
   MAPLETOP · kabát v2.3 (22. 8. 2026) — sdílené CSS pro podstránky.
   Reskin styl.css: STEJNÉ selektory (HTML se nemění), jiné hodnoty.
   Tokeny: design/prototypy/v23-handoff-2026-08-20/README.md + v23-demo/assets/style.css.
   Paleta bez žluté · Plus Jakarta Sans self-hosted z /_a/ (fallback Inter) ·
   sekce = stack karet radius 32 · pilulky 999 · motion 180 ms.
   Bílý text na #ED1C24 JEN ≥ 18 px / 800 (.pill-accent); menší červená = #B11F24.
   ══════════════════════════════════════════════════════════════════════════ */

/* ============ TOKENY v2.3 ============ */
/* ══ ODCHYLKY OD /_a/tokeny.css — K ROZHODNUTÍ MAJITELE ══════════════════
   24. 8. 2026: z 43 deklarací tohohle souboru bylo 36 znak po znaku
   shodných s /_a/tokeny.css, takže se smazaly. Zbylo 7, které se od systému LIŠÍ
   a mění vzhled 21 podstránek. Dokud nepadne rozhodnutí, platí hodnoty tady.
   Sjednocení = smazat řádek → stránka převezme systémovou hodnotu.
   POZOR: tenhle soubor se linkuje AŽ ZA tokeny.css, jinak nic nepřebije.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --accent2:var(--brand-900);
  --dark2:var(--ink);
  --font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --on-accent:#fff;
  --sh-sec:0 30px 60px -45px rgba(35,31,32,.30);
  --shell:1440px;
  --xpad:clamp(16px, 4vw, 64px);
}

/* ============ ZÁKLAD ============ */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);font-size:16px;font-weight:400;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color var(--t) var(--ease)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:inherit}
input{font:inherit;color:inherit}
em,.serif{font-family:var(--font);font-style:normal;font-weight:inherit}
sup{font-size:.55em;line-height:0}
::selection{background:var(--brand-50)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad)}
.mut{color:var(--ink-2)}

h1,h2,h3{letter-spacing:-.03em;line-height:1.08;font-weight:800;text-wrap:balance}
h1{font-size:64px}
h2{font-size:40px}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.3}

/* ---- pilulky / tlačítka ---- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);white-space:nowrap;font-weight:700;line-height:1;cursor:pointer;
transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pill:hover{transform:none;box-shadow:none}
.pill:active{transform:scale(.97)}
.pill-black{background:var(--ink);color:#fff}
.pill-black:hover{background:var(--brand-900);color:#fff}
.pill-white{background:#fff;color:var(--ink)}
.pill-white:hover{background:var(--brand-50);color:var(--ink)}
/* CTA: bílá na #ED1C24 má 4,4:1 → drží jen jako velký tučný text, proto 18 px / 800 vždy */
.pill-accent{background:var(--accent);color:var(--on-accent);font-size:18px;font-weight:800}
.pill-accent:hover{background:var(--accent-h);color:#fff}
.pill-outline{border:1.5px solid var(--line);background:transparent;color:var(--ink)}
.pill-outline:hover{border-color:var(--ink);color:var(--ink)}
.btn-lg{min-height:56px;padding:18px 30px;font-size:18px}
.btn-md{min-height:48px;padding:14px 24px;font-size:16px}
.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}
.pill-accent.btn-lg,.pill-accent.btn-md,.pill-accent.btn-sm{font-size:18px;font-weight:800}
.pill-accent.btn-md{min-height:48px;padding:14px 24px}
.pill-accent.btn-sm{min-height:46px;padding:12px 22px}
.stars{display:inline-flex;gap:2px;color:var(--accent)}
.stars svg{width:16px;height:16px}

/* pásové oblouky mezi sekcemi — v2.3 dělicí pásy nemá */
.curve{height:0;background:transparent;display:none}
.curve>div{height:0;background:transparent;border-radius:0;display:none}

/* ============ TOPBAR (oznamovací lišta) ============ */
.topbar{min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px;
background:var(--ink);color:#fff;font-size:14px;line-height:20px;padding:10px 16px;text-align:center}
.topbar b{font-weight:700}
.topbar .tb-long{display:inline}
.topbar .tb-short{display:none}
/* malá pilulka na tmavé: krémová + tmavý text (text pod 18 px nesmí na červenou) */
.topbar .tb-chip{background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:4px 12px;font-size:12px;font-weight:700;line-height:16px;white-space:nowrap}

/* ============ HEADER — plovoucí pill navigace ============ */
header{background:transparent;padding:16px 40px 8px;height:auto;position:sticky;top:0;z-index:900}
header .hgrid{max-width:1440px;margin:0 auto;background:var(--card);border-radius:var(--r-pill);box-shadow:var(--sh-card);
padding:10px 12px 10px 22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo img{height:31px;width:auto}
.hnav{display:flex;gap:4px;justify-content:center;align-items:center}
.hnav a,.hnav-b{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:10px 14px;font-size:14px;font-weight:600;line-height:1;color:var(--ink-2);
transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.hnav a:hover,.hnav-b:hover{background:var(--paper);color:var(--ink)}
.hnav-b svg{transition:transform var(--t) var(--ease)}
.hnav-b[aria-expanded="true"]{background:var(--brand-50);color:var(--ink)}
.hnav-b[aria-expanded="true"] svg{transform:rotate(180deg)}
.hact{display:flex;justify-content:flex-end;align-items:center;gap:8px}

/* ---- rozbalovací mega-panely navigace (homepage; otevírá KLIK) ---- */
.navpanel{position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%) translateY(-8px);
width:min(920px,calc(100vw - 32px));background:var(--card);border-radius:24px;padding:20px;z-index:2;
box-shadow:0 26px 60px -20px rgba(35,31,32,.35);opacity:0;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.navpanel.on{opacity:1;transform:translateX(-50%) translateY(0)}
.np-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.np-big{display:flex;flex-direction:column;gap:6px;background:var(--paper);border-radius:var(--r-inner);padding:22px 20px;min-height:172px;transition:background var(--t) var(--ease)}
.np-big:hover{background:var(--brand-50)}
.np-big .np-ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--card);color:var(--accent-h);margin-bottom:auto}
.np-big .np-ic svg{width:24px;height:24px}
.np-big b{font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.np-big i{font-style:normal;font-size:14px;line-height:20px;color:var(--ink-2)}
.np-rows{display:flex;flex-direction:column;gap:8px}
.np-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);border-radius:14px;padding:12px 14px;flex:1;transition:background var(--t) var(--ease)}
.np-row:hover{background:var(--brand-50)}
.np-row b{display:block;font-size:15px;font-weight:700;line-height:22px}
.np-row i{font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2)}
.np-row>svg{flex:0 0 auto;width:18px;height:18px;color:var(--accent-h)}
.navscrim{position:fixed;inset:0;z-index:860;background:rgba(35,31,32,.34);backdrop-filter:blur(3px);
opacity:0;transition:opacity var(--t) var(--ease)}
.navscrim.on{opacity:1}

/* ============ 1 · HERO (homepage) ============ */
.hero{background:var(--paper);padding-block:64px}
.hero-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad);display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.offer-chip{display:inline-flex;align-items:center;gap:8px;background:var(--brand-50);color:var(--ink);border-radius:var(--r-pill);padding:9px 16px;font-size:13px;font-weight:700;line-height:1.2}
h1{margin-top:20px;text-wrap:balance}
h1 em{font-weight:800;display:block}
.hero-sub{font-size:18px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:22px;max-width:36ch;text-wrap:pretty}
.pscbar{display:flex;align-items:center;gap:8px;width:100%;max-width:420px;height:64px;margin-top:24px;
background:var(--card);border-radius:var(--r-pill);padding:6px 6px 6px 8px;border:1.5px solid transparent;box-shadow:var(--sh-card);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pscbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(237,28,36,.10)}
.pscbar.bad{border-color:var(--danger);box-shadow:0 0 0 4px rgba(177,31,36,.12)}
.pscbar input{flex:1;min-width:0;height:52px;border:none;outline:none;background:transparent;padding:0 16px;font-size:17px;font-weight:400}
.pscbar button{flex:0 0 auto;height:52px;padding:12px 26px;font-size:18px;font-weight:800;line-height:1;border-radius:var(--r-pill);background:var(--ink);color:#fff;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.pscbar button:hover{background:var(--brand-900)}
.pscbar button:active{transform:scale(.97)}
.psc-err{display:none;font-size:14px;line-height:20px;color:var(--danger);padding-left:20px;margin-top:8px}
.psc-err.on{display:block}
.ticks{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.tick{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tick .tk{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.tick .tk svg{width:13px;height:13px}
.hero-rev{margin-top:26px}
.hero-rev a{display:inline-flex;align-items:center;gap:8px;height:44px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line-2);padding:8px 18px;font-size:13px;font-weight:700;line-height:1.2}
.hero-rev strong{font-weight:800}

.hero-art{position:relative;border-radius:var(--r-sec);min-height:452px;display:flex;align-items:center;justify-content:center;gap:8px;padding:32px;
background:radial-gradient(560px 340px at 82% -8%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),linear-gradient(140deg,#3A3132 0%,var(--brand-900) 84%)}
.hero-art img{height:290px;width:auto;object-fit:contain;filter:drop-shadow(0 22px 44px rgba(0,0,0,.45))}
.hero-art img.b{height:250px;opacity:.94}
.sticker{position:absolute;background:var(--brand-50);color:var(--ink);border-radius:12px;padding:10px 14px;font-family:var(--font);font-size:17px;font-weight:800;line-height:1.2;letter-spacing:-.01em;
box-shadow:var(--sh-card);text-align:center}
.sticker.s1{left:22px;top:96px;transform:rotate(-8deg)}
.sticker.s2{right:20px;top:132px;transform:rotate(7deg);background:var(--card)}
.hero-art .art-foot{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
background:var(--card);color:var(--ink);border-radius:var(--r-pill);padding:8px 20px;font-size:13px;font-weight:600;line-height:20px;white-space:nowrap}

/* ============ 2 · KARUSEL ROZPOČTŮ ============ */
.budget{background:var(--brand-900);color:#fff;padding-block:96px 88px}
.bud-head{max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
h2{text-wrap:balance}
h2 em{font-weight:800}
.budget h2{font-size:40px;line-height:1.08}
.arrows{display:flex;gap:12px;flex:0 0 auto}
.arrows button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background var(--t) var(--ease)}
.arrows button:hover{background:var(--accent)}
.arrows button:disabled{opacity:.35;cursor:not-allowed}
.bcards{display:flex;gap:16px;margin-top:48px;padding:4px max(var(--xpad), calc((100vw - var(--shell))/2 + var(--xpad)));overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--xpad), calc((100vw - var(--shell))/2 + var(--xpad)));overscroll-behavior-x:contain}
.bcards::-webkit-scrollbar{display:none}
.bcard{scroll-snap-align:start;flex:0 0 296px;width:296px;display:flex;flex-direction:column;background:var(--card);color:var(--ink);border-radius:var(--r-inner);overflow:hidden}
.bcard .bimg{height:220px;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.bcard .bimg img{height:150px;width:auto;object-fit:contain}
.bcard .bbody{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}
.bchips{display:flex;flex-wrap:wrap;gap:6px}
.bchip{border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);font-size:12px;font-weight:700;line-height:16px;padding:5px 12px}
.bchip.hot{background:var(--brand-50);color:var(--accent-h)}
.bcard h3{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.bcard h3 span{display:block;font-family:var(--font);font-size:15px;font-weight:500;line-height:1.4;color:var(--ink-2);letter-spacing:0}
.bmeta{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:20px;color:var(--ink-2)}
.bmeta span{display:flex;align-items:center;gap:8px}
.bmeta svg{width:15px;height:15px;color:var(--accent-h);flex:0 0 15px}
.bprice{margin-top:auto;background:var(--paper);border-radius:14px;padding:12px 16px}
.bprice i{display:block;font-style:normal;font-size:12.5px;line-height:18px;color:var(--ink-3)}
.bprice b{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.bcard .pill{width:100%;min-height:48px;font-size:18px}
.bnote{max-width:var(--shell);margin:24px auto 0;padding-inline:var(--xpad);font-size:12.5px;font-weight:400;line-height:18px;color:#B9B1B0}

.brandstrip{max-width:var(--shell);margin:80px auto 0;padding-inline:var(--xpad)}
.brandstrip p{font-size:15px;line-height:24px;color:#CFC8C7}
.wordmarks{display:flex;flex-wrap:wrap;align-items:center;gap:48px;margin-top:28px}
.wm{font-size:30px;line-height:38px;letter-spacing:.5px;color:#fff;opacity:.9}
.wm-baxi{font-weight:800;letter-spacing:2px}
.wm-buderus{font-family:var(--font);font-weight:800;letter-spacing:-.5px}
.wm-viessmann{font-weight:400;letter-spacing:3px;text-transform:uppercase;font-size:26px}

/* ============ 3 · RYCHLOST ============ */
.speed{padding-block:120px;text-align:center}
.speed h2{font-size:40px;line-height:1.08;max-width:820px;margin:0 auto}
.speed .lead{font-size:18px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:20px}
.sp3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:var(--shell);margin:72px auto 0;padding-inline:var(--xpad)}
.sp{display:flex;flex-direction:column;align-items:center;gap:16px}
.sp .picto{width:132px;height:192px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.sp h3{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.sp h3 em{font-family:var(--font)}
.sp p{font-size:16px;font-weight:400;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.speed .cta-row{margin-top:64px}

/* ============ 4 · DŮVĚRA, tmavý pás ============ */
.trust{background:var(--brand-900);color:#fff;padding:96px 24px;display:flex;flex-direction:column;gap:40px;position:relative}
.trust h2{font-size:40px;line-height:1.08;text-align:center}
.trust-cols{display:grid;grid-template-columns:repeat(3,220px);gap:40px;justify-content:center}
.tcol{display:flex;flex-direction:column;align-items:center;text-align:center}
.tcol .ticon{height:72px;display:flex;align-items:center;justify-content:center;color:#fff}
.tcol .ticon svg{width:52px;height:52px}
.tcol b{display:block;margin-top:12px;font-size:18px;font-weight:800;line-height:1.3;text-wrap:balance}
.tcol span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:#CFC8C7}

/* ============ 5 · VŠE V CENĚ ============ */
.allin{background:var(--paper);padding-block:calc(var(--ylg) + 24px)}
.allin h2.big{font-size:40px;line-height:1.08;text-align:center;max-width:880px;margin:0 auto}
.inclcard{max-width:calc(var(--shell) - 2 * var(--xpad));margin:64px auto 0;background:var(--brand-900);color:#fff;border-radius:var(--r-sec);padding:80px 40px;text-align:center;box-shadow:var(--sh-sec)}
.inclcard h3{font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.chipstack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.cstack{display:inline-flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border-radius:var(--r-pill);padding:9px 20px 9px 9px;font-size:15px;font-weight:600;line-height:24px;
cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.cstack:hover{background:var(--brand-50)}
.cstack:active{transform:scale(.97)}
.cstack:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cstack i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;flex:0 0 26px}
.cstack i svg{width:14px;height:14px}
.inclcard .note{margin-top:28px;font-size:14px;font-weight:400;line-height:1.6;color:#B9B1B0}

.inclcard,.bbig{position:relative}
.inclcard{min-height:450px;display:flex;flex-direction:column;justify-content:center}
.incl-body{transition:opacity .25s var(--ease)}
.incl-body.dim{opacity:0;pointer-events:none}
.ovl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:72px 40px;
border-radius:var(--r-sec);color:#fff;text-align:left;z-index:3;
opacity:0;transition:opacity .3s var(--ease)}
.ovl.on{opacity:1}
#inclOv{background:radial-gradient(660px 340px at 86% -8%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%),linear-gradient(135deg,#3A3132 0%,var(--brand-900) 82%)}
#saveOv{background:radial-gradient(520px 300px at 88% -12%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 72%),var(--brand-900)}
.ovl-tx{max-width:60ch;display:flex;flex-direction:column;gap:14px}
.ovl-tx h4{font-family:var(--font);font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.ovl-tx p{font-size:16px;font-weight:400;line-height:1.65;color:#D8D2D1}
.ovl-tx p b{font-weight:700;color:#fff}
.ovl-x{position:absolute;top:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;
border-radius:50%;background:rgba(0,0,0,.42);color:#fff;transition:background var(--t) var(--ease)}
.ovl-x:hover{background:var(--ink)}
.ovl-x svg{width:16px;height:16px}
.ovl-left .ovl-x{left:24px}
.ovl-right .ovl-x{right:24px}
.infoplus{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.infoplus:hover{background:var(--accent)}
.infoplus:active{transform:scale(.97)}
.infoplus svg{width:18px;height:18px}
.bbig .incl-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;padding-bottom:60px}
.a3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:calc(var(--shell) - 2 * var(--xpad));margin:40px auto 0}
.acard{display:flex;flex-direction:column;gap:16px;background:var(--card);border-radius:var(--r-inner);padding:40px 32px;min-height:462px;border:1px solid var(--line-2)}
.acard .aic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--brand-50);color:var(--accent-h)}
.acard .aic svg{width:30px;height:30px}
.acard h3{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.acard h3 em{font-family:var(--font)}
.acard p{font-size:15.5px;font-weight:400;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.acard .pill{align-self:flex-start;margin-top:auto}
.installers{max-width:calc(var(--shell) - 2 * var(--xpad));margin:calc(var(--ylg) + 40px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.installers h2{font-size:40px;line-height:1.08}
.installers p{font-size:17px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:20px;text-wrap:pretty}
.instfoto{margin:28px 0 0}
.instfoto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-inner);display:block}
.instfoto figcaption{margin-top:12px;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink-3)}
.inst-card{background:var(--card);border-radius:var(--r-sec);padding:48px;box-shadow:var(--sh-sec)}
.inst-card h3{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.inst-list{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.inst-list span{display:flex;gap:12px;font-size:16px;font-weight:400;line-height:1.6;color:var(--ink-2)}
.inst-list svg{flex:0 0 20px;width:20px;height:20px;color:var(--accent-h);margin-top:3px}
.inst-card .pill{margin-top:28px}

/* ============ 6 · RECENZE ============ */
.reviews{padding-block:64px}
.rev-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.reviews h2{font-size:40px;line-height:1.08}
.rev-badge{margin-top:40px;background:var(--brand-900);color:#fff;border-radius:var(--r-inner);padding:32px;max-width:420px}
.rev-badge .g{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;line-height:1.5}
.rev-badge .g svg{width:22px;height:22px}
.rev-badge .pill{width:100%;margin-top:20px}
.rev-list{display:flex;flex-direction:column;gap:16px}
.rev{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-inner);padding:24px}
.rev .rtop{display:flex;align-items:center;gap:10px}
.rev blockquote{font-size:16px;font-weight:400;line-height:1.65;margin-top:12px;color:var(--ink-2);text-wrap:pretty}
.rev figcaption{font-size:13.5px;font-weight:700;line-height:1.5;color:var(--ink);margin-top:12px}

/* ============ 7 · TŘI KROKY + CTA ============ */
.steps3{background:var(--brand-50);padding-block:var(--ylg)}
.steps3 h2{font-size:40px;line-height:1.08;text-align:center;max-width:900px;margin:0 auto}
.stp-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:calc(var(--shell) - 2 * var(--xpad));margin:72px auto 0}
.stp-row.flip{direction:rtl}
.stp-row.flip>*{direction:ltr}
.stp-art{border-radius:var(--r-sec);min-height:364px;display:flex;align-items:center;justify-content:center;color:#fff;
background:radial-gradient(460px 280px at 20% 110%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 68%),linear-gradient(150deg,#3A3132 0%,var(--brand-900) 86%)}
.stp-art svg{width:150px;height:150px;opacity:.95}
.stp-art{padding:36px;overflow:hidden}
.stp-art img{width:100%;height:auto;border-radius:14px;display:block;
box-shadow:0 24px 60px rgba(0,0,0,.42),0 2px 0 rgba(255,255,255,.16) inset}
.stp-tx .num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand-50);color:var(--accent-h);font-size:16px;font-weight:800}
.stp-tx h3{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-top:16px;font-family:var(--font)}
.stp-tx p{font-size:17px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:16px;text-wrap:pretty}
.stp-tx .lnk{display:inline-block;margin-top:16px;font-size:16px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:3px}
.stp-tx .lnk:hover{color:var(--accent-h);border-color:var(--accent-h)}
.ctaband{text-align:center;margin-top:calc(var(--ylg) + 24px)}
.ctaband h3{font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.ctarow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:20px}
.ctarow span{display:flex;align-items:center;gap:8px;font-size:15px;line-height:24px;color:var(--ink-2)}
.ctarow svg{width:18px;height:18px;color:var(--accent-h)}
.cta-row{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}

/* ============ 8 · ZNAČKY ============ */
.brands{padding-block:calc(var(--ylg) + 16px)}
.brands h2{font-size:40px;line-height:1.08;max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad)}
.brow{display:grid;grid-template-columns:420px 1fr;gap:48px;align-items:center;max-width:calc(var(--shell) - 2 * var(--xpad));margin:48px auto 0;
background:var(--card);border-radius:var(--r-sec);padding:44px;box-shadow:var(--sh-sec)}
.brow .bpic{height:366px;border-radius:var(--r-inner);background:var(--paper);display:flex;align-items:center;justify-content:center;position:relative}
.brow .bpic img{height:230px;width:auto;object-fit:contain}
.brow .bstamp{position:absolute;left:24px;top:24px;background:var(--card);border:1.5px solid var(--accent);border-radius:var(--r-pill);padding:8px 16px;font-size:13px;font-weight:700;line-height:18px;color:var(--ink)}
.brow h3{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.brow .sub{font-size:17px;font-weight:400;line-height:1.6;color:var(--ink-2);margin-top:6px}
.blist{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.blist span{display:flex;gap:12px;font-size:16px;font-weight:400;line-height:1.6;color:var(--ink-2)}
.blist svg{flex:0 0 20px;width:20px;height:20px;color:var(--accent-h);margin-top:3px}
.brow .pill{margin-top:24px}
.brow .fine{margin-top:14px;font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-3);max-width:60ch}
.brands .gline{max-width:var(--shell);margin:64px auto 0;padding-inline:var(--xpad);display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;color:var(--ink-2)}

/* ============ 9 · ÚČTY / BEZPEČÍ / PLATBA ============ */
.bills{background:var(--paper);padding-block:calc(var(--ylg) + 32px)}
.bills h2{font-size:40px;line-height:1.08;padding-block:20px;max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad)}
.b2{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:calc(var(--shell) - 2 * var(--xpad));margin:44px auto 0}
.bbig{background:var(--brand-900);color:#fff;border-radius:var(--r-sec);padding:56px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:560px}
.bbig .bic{width:44px;height:44px;color:var(--accent)}
.bbig h3{font-size:40px;font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.bbig h3 em{font-weight:800}
.bbig p{font-size:16px;font-weight:400;line-height:1.65;color:#D8D2D1}
.bside{background:var(--card);border-radius:var(--r-sec);padding:56px 48px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--sh-sec)}
.bside h3{font-size:40px;font-weight:800;line-height:1.08;letter-spacing:-.03em}
.bside h3 em{font-weight:800}
.bside p{font-size:16px;font-weight:400;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.bside .pill{align-self:flex-start;margin-top:auto}
.pay2{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:calc(var(--shell) - 2 * var(--xpad));margin:44px auto 0}
.paycard{background:var(--brand-900);color:#fff;border-radius:var(--r-sec);padding:48px 40px;display:flex;flex-direction:column;gap:14px;min-height:380px}
.paycard .aic{width:44px;height:44px;color:#fff}
.paycard h3{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.paycard p{font-size:16px;font-weight:400;line-height:1.65;color:#D8D2D1;text-wrap:pretty}

/* ============ 10 · TYPY KOTLŮ / INSTALACÍ / PLATBA BEZ ÚVĚRU ============ */
.types{padding-block:calc(var(--ylg) + 32px)}
.types h2{font-size:40px;line-height:1.08;padding-block:16px;max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad)}
.types .lead{max-width:var(--shell);margin:16px auto 0;padding-inline:var(--xpad);font-size:17px;font-weight:400;line-height:1.65;color:var(--ink-2);max-width:min(var(--shell),980px)}
.t3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:calc(var(--shell) - 2 * var(--xpad));margin:48px auto 0}
.tcard{display:flex;flex-direction:column;gap:16px;background:var(--card);border:1.5px solid var(--line-2);border-radius:24px;padding:36px;min-height:600px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.tcard .tic{width:52px;height:52px;color:var(--accent-h)}
.tcard h3{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.tcard p{font-size:15px;font-weight:400;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.tcard ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.tcard li{display:flex;gap:10px;font-size:14.5px;font-weight:400;line-height:1.55;color:var(--ink-2)}
.tcard li svg{flex:0 0 18px;width:18px;height:18px;color:var(--accent-h);margin-top:3px}
.tcard .from{margin-top:auto;padding-top:8px}
.tcard .from i{display:block;font-style:normal;font-size:12.5px;line-height:18px;color:var(--ink-3)}
.tcard .from b{font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.tcard .pill{width:100%}
.instgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:calc(var(--shell) - 2 * var(--xpad));margin:48px auto 0}
.icard{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-inner);padding:32px;min-height:262px}
.icard h3{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.icard p{font-size:14.5px;font-weight:400;line-height:1.6;color:var(--ink-2);flex:1}
.icard .from{display:flex;align-items:baseline;gap:8px}
.icard .from i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.icard .from b{font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.inclrow{max-width:calc(var(--shell) - 2 * var(--xpad));margin:64px auto 0;text-align:center}
.inclrow h4{font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.inclrow .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:16px}
.inclrow .chips span{display:flex;align-items:center;gap:8px;font-size:15px;line-height:24px;color:var(--ink-2)}
.inclrow .chips svg{width:18px;height:18px;color:var(--accent-h)}
.fin2{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:calc(var(--shell) - 2 * var(--xpad));margin:48px auto 0}
.fcard{background:var(--card);border-radius:24px;padding:44px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line-2)}
.fcard h3{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.fcard p{font-size:15px;font-weight:400;line-height:1.6;color:var(--ink-2)}
.fcard ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.fcard li{display:flex;gap:12px;font-size:15px;font-weight:400;line-height:1.6;color:var(--ink-2)}
.fcard li svg{flex:0 0 18px;width:18px;height:18px;color:var(--accent-h);margin-top:3px}
.fcard .pill{margin-top:auto;width:100%;min-height:56px;font-size:18px}

/* ============ 11 · RODINNÁ FIRMA + FAQ (homepage, tmavý pás) ============ */
.deep{background:var(--ink);color:#fff;padding-block:calc(var(--ylg) + 24px);position:relative}
.family{max-width:calc(var(--shell) - 2 * var(--xpad));margin:0 auto;background:var(--brand-900);border-radius:var(--r-sec);padding:72px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.family h2{font-size:40px;line-height:1.08}
.fam-l{display:flex;flex-direction:column;gap:24px}
.family p{font-size:17px;font-weight:400;line-height:1.65;color:#D8D2D1;text-wrap:pretty}
.family p b{color:#fff;font-weight:700}
.fam-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto}
.fam-r img{width:100%;height:100%;min-height:540px;object-fit:cover;border-radius:var(--r-inner)}
.faqcard{max-width:calc(var(--shell) - 2 * var(--xpad));margin:40px auto 0;background:var(--brand-900);border-radius:var(--r-sec);padding:64px;display:flex;flex-direction:column}
.faq-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-title{font-family:var(--font);font-size:40px;font-weight:800;line-height:1.08;letter-spacing:-.03em}
.faq-head .pill{min-height:56px;padding:18px 30px;font-size:18px}
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:40px}
/* FAQ = karty s kruhovým togglem (chevron v kruhu, otevřené = tmavý kruh) */
.faq-item{background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item h3{font-size:16px;font-weight:700;line-height:1.4;letter-spacing:0}
.faq-item summary svg{flex:0 0 auto;width:34px;height:34px;margin-top:0;padding:8px;border-radius:50%;border:1.5px solid var(--line);color:var(--ink);
transition:transform var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.faq-item summary:hover svg{border-color:var(--ink)}
.faq-item[open] summary svg{transform:rotate(180deg);background:var(--brand-900);border-color:var(--brand-900);color:#fff}
.faq-w{overflow:hidden;height:0;transition:height .3s var(--ease)}
.faq-item[open] .faq-w{height:auto}
.faq-w.anim{transition:height .3s var(--ease)}
.faq-a{font-size:15px;font-weight:400;line-height:1.65;color:var(--ink-2);padding:0 24px 22px;max-width:720px}
.faq-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:28px;color:var(--ink-3);font-size:13.5px;line-height:1.5}

/* ============ 12 · RÁDCE (homepage) ============ */
.advice{padding-block:96px}
.adv-head{max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.advice h2{font-size:40px;line-height:1.08}
.advice .h3l{font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.02em;text-align:right}
.advice .h3l em{font-weight:800}
.arts{display:flex;gap:16px;margin-top:48px;padding-inline:max(var(--xpad), calc((100vw - var(--shell))/2 + var(--xpad)));overflow-x:auto;scrollbar-width:none}
.arts::-webkit-scrollbar{display:none}
.art{flex:0 0 360px;width:360px;display:flex;flex-direction:column}
.art .thumb{height:250px;border-radius:var(--r-inner);overflow:hidden;position:relative}
.art .tpic{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:22px 24px 0}
.art .tpic img{height:88%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.45))}
.art-2 .tpic img{height:74%}
.art-1 .thumb{background:radial-gradient(420px 240px at 18% 110%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 64%),linear-gradient(126deg,color-mix(in srgb,var(--accent) 22%,var(--brand-900)) 0%,var(--brand-900) 88%)}
.art-2 .thumb{background:radial-gradient(420px 260px at 86% -18%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 66%),linear-gradient(206deg,color-mix(in srgb,var(--accent) 16%,var(--brand-900)) 0%,var(--brand-900) 90%)}
.art-3 .thumb{background:radial-gradient(440px 250px at 50% 130%,color-mix(in srgb,var(--accent-h) 58%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--brand-900)) 0%,var(--brand-900) 86%)}
.art-4 .thumb{background:radial-gradient(420px 240px at 80% 120%,color-mix(in srgb,var(--accent) 44%,transparent),transparent 66%),linear-gradient(146deg,color-mix(in srgb,var(--accent) 18%,var(--brand-900)) 0%,var(--brand-900) 88%)}
.art-body{display:flex;flex-direction:column;gap:14px;margin-top:16px;flex:1}
.art .meta{display:flex;gap:8px;align-items:center}
.art time{font-size:14px;font-weight:400;line-height:24px;color:var(--ink-3)}
.art .tag{display:inline-flex;align-items:center;border-radius:var(--r-pill);font-size:11px;font-weight:700;line-height:1;letter-spacing:.06em;padding:7px 10px}
.tag-dark{background:var(--brand-900);color:#fff}
.tag-accent{background:var(--brand-50);color:var(--accent-h)}
.art h3{font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.02em;min-height:58px;text-wrap:balance}
.art .pill{align-self:flex-start}

/* ============ 13 · ZÁVĚREČNÁ CTA (homepage) ============ */
.finalcta{background:var(--brand-50);padding-block:88px;text-align:center}
.finalcta h2{font-size:56px;font-weight:800;line-height:1.08;letter-spacing:-.03em;max-width:1000px;margin:0 auto}
.finalcta h2 em{font-weight:800}
.finalcta .pill{margin-top:32px}

/* ============ FOOTER (homepage) ============ */
footer{position:relative;background:var(--brand-900);color:var(--paper);padding-block:calc(var(--ylg) + 24px)}
.f-inner{max-width:var(--shell);margin:0 auto;padding-inline:var(--xpad);display:flex;flex-direction:column;gap:56px}
.f-grid{display:grid;grid-template-columns:repeat(4,195px);gap:24px;justify-content:space-between;min-height:360px}
.f-brand img{height:31px;width:auto;margin-top:3px}
.f-social{display:flex;gap:16px;margin-top:24px}
.f-social a{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--paper);color:var(--ink)}
.f-col h3{font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#CFC8C7}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.f-col a{font-size:14.5px;line-height:1.5;display:block;color:var(--paper)}
.f-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.f-soon{display:block;font-size:14.5px;line-height:1.5;color:#B9B1B0}
.f-soon i{font-style:normal;font-size:12px;line-height:16px;color:#B9B1B0;opacity:.85}
.f-legal{display:flex;flex-direction:column;gap:16px}
.f-legal p{font-size:12.5px;font-weight:400;line-height:1.6;color:#B9B1B0}
.f-badges{display:flex;flex-wrap:wrap;gap:16px}
.fb{width:112px;height:112px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;color:var(--ink)}
.fb::after{content:"";position:absolute;inset:5px;border:2px dashed color-mix(in srgb,var(--accent-h) 36%,transparent);border-radius:10px;pointer-events:none}
.fb-ic{height:56px;display:flex;align-items:center;justify-content:center}
.fb-ic svg{width:44px;height:44px}
.fb span{width:100%;border-radius:6px;background:var(--line-2);color:var(--ink-2);font-size:12px;font-weight:700;line-height:16px;padding:4px 0 2px;text-align:center}

/* ============ PLOVOUCÍ CTA + TOAST (homepage) ============ */
.floatcta{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:800;min-height:52px;padding:16px 26px;font-size:18px;font-weight:800;line-height:1;
box-shadow:0 20px 40px -20px rgba(35,31,32,.5)}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(14px);z-index:850;display:flex;align-items:center;gap:12px;
background:var(--brand-900);color:#fff;border-radius:var(--r-pill);padding:12px 16px 12px 20px;font-size:15px;line-height:22px;
box-shadow:0 20px 40px -20px rgba(35,31,32,.5);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast svg{width:18px;height:18px;flex:0 0 18px}
.toast b{font-weight:700}
.toast .tclose{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);flex:0 0 26px}
.toast .tclose svg{width:12px;height:12px}

/* ============ KANADSKÁ VRSTVA — v2.3 bez dekorativních pásů ============ */
.trust::before,
.budget::before,
.deep::before,
footer::before{content:none}
.budget{position:relative}
.mleaf::after{content:"";display:inline-block;width:15px;height:15px;margin-left:8px;vertical-align:-2px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,.8L10.5,4.4L7.8,3L8.9,7L4.4,5.8L6.2,9.6L1.6,10.4L5.4,13.6L4.2,16.6L10.2,15.4L11.4,18.2L11.4,23L12.6,23L12.6,18.2L13.8,15.4L19.8,16.6L18.6,13.6L22.4,10.4L17.8,9.6L19.6,5.8L15.1,7L16.2,3L13.5,4.4L12,.8Z' fill='%23ED1C24'/%3E%3C/svg%3E") center/contain no-repeat}

/* ============ RESPONSIVE (homepage část) ============ */
@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr;gap:32px}
  .hero-art{min-height:380px}
  .sp3,.t3,.instgrid{grid-template-columns:1fr 1fr}
  .brow{grid-template-columns:1fr}
  .brow .bpic{height:240px}
  .installers,.rev-in,.stp-row,.family{grid-template-columns:1fr}
  .stp-row.flip{direction:ltr}
  .a3{grid-template-columns:1fr}
  .trust-cols{grid-template-columns:repeat(3,minmax(0,220px))}
}
@media (max-width:1023px){
  .arrows{display:none}
  .np-grid{grid-template-columns:1fr}
  .np-big{min-height:0}
}
@media (max-width:900px){
  h1{font-size:36px}
  h2{font-size:28px}
  .ovl{padding:64px 24px 28px;border-radius:24px}
  .ovl-x{top:16px}
  .ovl-left .ovl-x{left:16px}
  .ovl-right .ovl-x{right:16px}
  .ovl-tx h4{font-size:22px;line-height:1.2}
  .ovl-tx p{font-size:15px;line-height:1.6}
  .inclcard{min-height:0}
  .floatcta{left:auto;right:14px;bottom:14px;transform:none;min-height:48px;padding:14px 20px;font-size:18px}
  .infoplus{right:auto;left:0}
  .faq-head{flex-direction:column;align-items:flex-start;gap:16px}
  footer{padding-bottom:calc(var(--ylg) + 48px + 96px)}
  .budget h2,.speed h2,.allin h2.big,.installers h2,.brands h2,.bills h2,.types h2,.advice h2{font-size:28px;line-height:1.1}
  .trust h2,.reviews h2,.steps3 h2,.family h2{font-size:28px;line-height:1.1}
  .faq-title{font-size:27px;line-height:1.1}
  .finalcta h2{font-size:36px;line-height:1.08}
  .acard h3,.inclcard h3,.inst-card h3,.brow h3,.stp-tx h3,.paycard h3,.ctaband h3,.advice .h3l{font-size:24px;line-height:1.15;letter-spacing:-.02em}
  .bbig h3,.bside h3{font-size:28px;line-height:1.1}
  .tcard h3,.fcard h3,.art h3{font-size:22px;line-height:1.2}
  .art h3{min-height:0}
  .trust-cols{grid-template-columns:1fr;gap:32px}
  .sp3,.t3,.instgrid,.b2,.pay2,.fin2{grid-template-columns:1fr}
  .adv-head{flex-direction:column;align-items:flex-start}
  .advice .h3l{text-align:left}
  .f-grid{grid-template-columns:1fr 1fr}
  .hnav{display:none}
  header{padding:12px 16px 4px}
  header .hgrid{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 16px;gap:8px}
  .family,.faqcard,.inclcard{padding:28px}
  .tcard,.icard,.acard,.bbig,.paycard,.f-grid,.fam-r img{min-height:0}
  .bbig,.bside,.fcard,.tcard,.paycard,.acard{padding:28px}
  .topbar{font-size:12px;gap:8px;text-align:center}
  .topbar .tb-long{display:none}
  .topbar .tb-short{display:inline}
}
@media (max-width:620px){
  h1{font-size:36px}
  .pscbar{flex-wrap:wrap;height:auto;border-radius:26px;padding:8px;gap:10px}
  .pscbar input{flex:1 0 100%;text-align:center;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}
  .pscbar button{width:100%}
  .offer-chip{font-size:13px;line-height:1.2;padding:8px 14px}
  h1{margin-top:16px}
  .bcard,.art{flex-basis:280px;width:280px}
  .f-grid{grid-template-columns:1fr}
  .hero-art{min-height:320px;padding:20px}
  .hero-art img{height:210px}
  .hero-art img.b{height:180px}
  .sticker{font-size:15px;line-height:1.2;padding:8px 10px}
  .floatcta{bottom:14px}
  .toast{bottom:76px;font-size:13px;line-height:19px;padding:12px;border-radius:16px;align-items:flex-start;width:calc(100vw - 24px)}
  .toast svg{margin-top:2px}
}

/* rychlé odkazy v rádci (homepage) */
.popular{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;max-width:var(--shell);margin:24px auto 0;padding-inline:var(--xpad);font-size:15px;line-height:24px}
.popular .plabel{display:flex;gap:8px;align-items:center;color:var(--accent-h)}
.popular a{text-decoration:underline;text-underline-offset:4px}
.popular a:hover{color:var(--accent-h)}

/* ── mobilní dorovnání (tapovací cíle ≥ 44 px, čtené písmo ≥ 14 px) ── */
@media (max-width:620px){
  .logo{min-height:44px;display:inline-flex;align-items:center}
  header .pill,.pill.pill-outline,.pill.pill-accent{min-height:44px}
  .lnk{display:inline-block;padding-block:10px}
  .advice a:not(.pill),.art-more a{display:inline-block;padding-block:10px}
  .tclose{min-width:44px;min-height:44px}
  .topbar .tb-chip,.topbar .tb-short,.topbar .tb-long{font-size:13px;line-height:18px}
  .bnote b,.bchip{font-size:14px}
  .bprice i,.brow .bpic .bstamp,.brow .fine,.tcard .from i{font-size:14px;line-height:20px}
  .meta .tag{font-size:14px}
  li .f-soon i,.f-inner .f-legal p,.f-legal p b,.f-badges .fb span{font-size:14px;line-height:20px}
  .toast span b{font-size:14px}
  /* padding-block 10px, ne 8px: při 8 px měl odkaz na mobilu box vysoký 38 px a padal
     pod projektové minimum 40x40 (změřeno 23. 8. strážníkem na /radce/ @375 — 21 cílů
     po 38 px; starý styl.css:618 měl 10 px, tedy 42 px). min-height je pojistka pro
     případ, že se změní řádkování. */
  .popular a,ul li a:not(.pill){display:inline-block;padding-block:10px;min-height:40px}
  .f-brand .f-social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .f-grid a,ul li a:not(.pill){min-width:44px}
  .speed,.steps3,.allin,.types{padding-inline:16px}
  .types .inclrow{padding-inline:0}
  .fin2{grid-template-columns:1fr}
  .fcard{padding:24px;min-width:0}
  .fcard li{min-width:0}
  .fcard li span{overflow-wrap:anywhere}
}


/* ══════════════════════════════════════════════════════════════════════════
   MAPLETOP · podstránky (kategorie, značka, chyba, právní, kontakt, rádce).
   Kostra: header + nav.hnav + .topbar + main(.pg-hero .pg-body .faqsec) +
   .souvis + .autor + .pg-cta + footer.pg-foot.
   v2.3 = každý blok je KARTA ve stacku: radius 32, mezera 16, gutter 40
   (mobil 16), max-width 1440. Krémová karta (hero, FAQ, autor) / bílá
   (tělo, související) / tmavá brand-900 (CTA, patička).
   ══════════════════════════════════════════════════════════════════════════ */

/* ============ STACK KARET ============ */
.pg-hero,.pg-body,.faqsec,.souvis,.autor,.pg-cta,.pg-foot{
  width:min(1440px,calc(100% - 80px));margin:16px auto 0;border-radius:var(--r-sec);padding:64px}
.pg-hero{background:var(--paper);border:1px solid var(--line-2);padding:56px 64px 64px}
.pg-body{background:var(--card);box-shadow:var(--sh-sec);padding:72px 64px}
.faqsec{background:var(--paper);border:1px solid var(--line-2)}
.souvis{background:var(--card);box-shadow:var(--sh-sec)}
.autor{background:var(--paper);border:1px solid var(--line-2);padding:48px 64px}
.pg-cta{background:var(--brand-900);color:#fff;text-align:center;padding:80px 64px}
.pg-foot{background:var(--brand-900);color:var(--paper);border-radius:var(--r-sec) var(--r-sec) 0 0;padding:64px 64px 40px;border-top:0;margin-bottom:0}
/* vnitřní obaly už nenesou šířku ani odsazení — to dělá karta */
.pg-hero .pg-in,.pg-body .pg-in,.pg-grid,.souvis-in,.autor-in,.pg-foot-in{max-width:none;margin:0;padding:0}

/* ============ HLAVIČKA obsahové stránky ============ */
.hnav a{font-size:14px}
.logo-tx{font-family:var(--font);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em}

.drobky{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.drobky a{text-decoration:none;text-underline-offset:3px;color:var(--ink-3)}
.drobky a:hover{color:var(--accent-h)}
.drobky span[aria-current]{color:var(--ink)}
.pg-hero h1{font-size:64px;line-height:1.08;letter-spacing:-.03em;margin-top:18px;max-width:22ch}
.pg-lead{font-size:18px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:22px;max-width:62ch;text-wrap:pretty}
.pg-lead b{font-weight:700;color:var(--ink)}
/* meta údaje jako pilulky (hero .pills v demu) */
.pg-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;font-size:13px;line-height:1.2;color:var(--ink)}
.pg-meta span{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:9px 14px;font-weight:600}
.pg-meta svg{width:15px;height:15px;color:var(--accent-h);flex:0 0 15px}

/* ============ CENOVÝ BOX — zvýrazněné cenové karty ============ */
.cenabox{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
background:transparent;border:0;border-radius:0;overflow:visible;margin-top:30px}
.cenabox>div{background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-inner);padding:24px;display:flex;flex-direction:column;
transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.cenabox>div:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.cenabox i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-h)}
.cenabox b{display:block;font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;margin-top:10px;color:var(--ink)}
.cenabox small{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:8px}
/* hlavní cena = tmavá karta (číslo „na klíč od" na tmavé → bílé), ne červená plocha */
.cenabox .hlavni{background:var(--brand-900);border-color:var(--brand-900);color:#fff}
.cenabox .hlavni i{color:#fff}
.cenabox .hlavni b{color:#fff}
.cenabox .hlavni small{color:#CFC8C7}
.cenanote{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:68ch}
.cenanote svg{width:18px;height:18px;color:var(--accent-h);flex:0 0 18px;margin-top:1px}

/* ============ TĚLO: sloupec textu + postranní karta ============ */
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}

.proza h2{font-size:34px;line-height:1.1;letter-spacing:-.03em;margin-top:52px}
.proza h2:first-child{margin-top:0}
.proza h3{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.01em;margin-top:30px}
.proza p{font-size:16px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:14px;max-width:70ch;text-wrap:pretty}
.proza p b,.proza li b{font-weight:700;color:var(--ink)}
.proza ul,.proza ol{margin-top:14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:70ch}
.proza ol{counter-reset:kr}
.proza ul li{display:flex;gap:12px;font-size:16px;font-weight:400;line-height:1.65;color:var(--ink-2)}
.proza ul:not(.radce-list):not(.mapa-list) li::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--accent-h);margin-top:9px}
.proza ol li{counter-increment:kr;display:flex;gap:12px;font-size:16px;font-weight:400;line-height:1.65;color:var(--ink-2)}
/* číslo kroku: kruh brand-50 + červený text (text pod 18 px nejde bíle na červenou) */
.proza ol li::before{content:counter(kr);flex:0 0 28px;width:28px;height:28px;border-radius:50%;
background:var(--brand-50);color:var(--accent-h);font-size:13px;font-weight:800;line-height:28px;text-align:center;margin-top:0}
.proza a{color:var(--accent-h);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.proza a:hover{color:var(--ink)}
.proza .zdroj{font-size:13px;line-height:1.55;color:var(--ink-3);margin-top:12px;max-width:70ch}
.proza .zdroj a{word-break:break-word}

/* definice v úvodu = blockquote v2.3 (krémová, červená linka vlevo) */
.definice{background:var(--paper);border-left:3px solid var(--accent);border-radius:0 16px 16px 0;
padding:20px 26px;margin-top:20px;max-width:70ch;color:var(--ink)}
.definice p{margin-top:0;font-size:16.5px;font-weight:500;line-height:1.6;color:var(--ink)}
.definice p+p{margin-top:12px;font-weight:400;color:var(--ink-2)}

/* ============ TABULKY ============ */
.tabw{margin-top:20px;overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-inner);background:var(--card);padding:6px 2px}
table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
thead th{font-family:var(--mono);font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-3);background:transparent;white-space:nowrap;border-bottom:1.5px solid var(--line)}
tbody td:first-child{color:var(--ink);font-weight:700}
tbody tr:hover td{background:var(--paper)}
tbody tr:last-child td{border-bottom:none}
td.cena{white-space:nowrap;font-weight:800;color:var(--ink)}
td.neni{color:var(--ink-3);font-style:normal}
caption{caption-side:top;padding:6px 14px 12px;font-size:13px;line-height:1.55;color:var(--ink-3);text-align:left}

/* ============ POSTRANNÍ KARTA ============ */
.aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
/* tmavá cenová karta (.dark-price v demu) */
.askart{background:var(--brand-900);color:#fff;border-radius:var(--r-inner);padding:30px}
.askart h2{font-family:var(--font);font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.askart .ask-c{margin-top:16px;font-size:13.5px;line-height:1.5;color:#CFC8C7}
.askart .ask-b{display:block;font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff;margin-top:8px}
.askart .pill{width:100%;margin-top:20px}
.askart ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:20px}
.askart li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#D8D2D1}
.askart li svg{width:15px;height:15px;color:#fff;flex:0 0 15px;margin-top:3px}
.askbox{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-inner);padding:24px}
.askbox h2{font-size:16px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.askbox ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.askbox a{font-size:14.5px;line-height:1.5;color:var(--ink-2);text-decoration:none}
.askbox a:hover{color:var(--accent-h)}

/* postranní karta právních a kontaktní stránky (.pg-aside / .aside-card) —
   styl.css pro ni pravidlo neměl; <li> mimo <ul> v markupu se tu tisknou jako pilulky odkazů */
.pg-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:10px}
.aside-card{background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-inner);padding:26px;display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.aside-card h2{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.aside-card ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.aside-card ul a{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.aside-card ul a:hover{color:var(--accent-h)}
.aside-card .aside-label{font-family:var(--mono);font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-h);margin-top:4px}
.aside-card .aside-cena{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.aside-card li{list-style:none;display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.aside-card li svg{width:15px;height:15px;color:var(--accent-h);flex:0 0 15px;margin-top:3px}
.aside-card .pill{width:100%;margin-top:14px}
.pg-aside>li{list-style:none;display:block}
.pg-aside>li a{display:flex;align-items:center;min-height:44px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:10px 18px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);
transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.pg-aside>li a:hover{background:var(--brand-50);border-color:transparent;color:var(--ink)}

/* ============ KARTA AUTORA ============ */
.autor-in{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start;background:transparent}
.autor img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.autor h2{font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.autor .role{font-size:14px;line-height:1.5;color:var(--ink-3);margin-top:4px}
.autor p{font-size:15px;font-weight:400;line-height:1.65;color:var(--ink-2);margin-top:14px;max-width:78ch}
.autor .revize{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:13px;line-height:1.2;color:var(--ink)}
.autor .revize span{display:inline-flex;gap:7px;align-items:center;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 13px;font-weight:600}
.autor .revize svg{width:15px;height:15px;color:var(--accent-h)}
.autor .revize a:hover{color:var(--accent-h)}

/* ============ SOUVISEJÍCÍ (karty hubu) ============ */
.souvis h2{font-size:40px;line-height:1.08;letter-spacing:-.03em}
.souvis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:36px}
.souvis-grid a{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-inner);padding:26px;
display:flex;flex-direction:column;gap:8px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.souvis-grid a:hover{background:var(--card);transform:translateY(-5px);box-shadow:var(--sh-card)}
.souvis-grid b{font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--ink);transition:color var(--t) var(--ease)}
.souvis-grid a:hover b{color:var(--accent-h)}
.souvis-grid i{font-style:normal;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ============ FAQ na obsahové stránce ============ */
.faqcard.uzka{margin:0;padding:0;max-width:none;background:transparent;border-radius:0;color:var(--ink)}
.faqsec .faq-title{color:var(--ink)}
.faq-item summary::marker{content:""}
.proza .faq-item{margin-top:12px}
.proza .faq-item h3{margin-top:0}
.proza .faq-a{margin-top:0}

/* ============ RÁDCE (rozcestník) a MAPA WEBU ============ */
.radce-sk{margin:44px 0 0}
.radce-sk:first-child{margin-top:0}
.radce-sk>p{color:var(--ink-2);max-width:70ch;margin:10px 0 0}
.radce-list{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;max-width:none}
.radce-list li{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-inner);padding:22px 24px;background:var(--paper);
transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.radce-list li:hover{background:var(--card);transform:translateY(-4px);box-shadow:var(--sh-card)}
.radce-list a{font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.radce-list a:hover{color:var(--accent-h)}
.radce-list span{display:block;font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:0}
.mapa-list{list-style:none;padding:0;margin:10px 0 28px;columns:2;column-gap:32px;display:block;max-width:none}
.mapa-list li{display:block;margin:0;padding:9px 0;border-bottom:1px solid var(--line-2);break-inside:avoid}
.mapa-list a{color:var(--ink);font-weight:600;text-decoration:none}
.mapa-list a:hover{color:var(--accent-h)}

/* ============ ZÁVĚREČNÉ CTA (tmavá karta) ============ */
.pg-cta-in{max-width:760px;margin:0 auto;padding:0}
.pg-cta h2{font-size:40px;line-height:1.08;letter-spacing:-.03em;color:#fff}
.pg-cta p{font-size:18px;font-weight:400;line-height:1.65;color:#D8D2D1;margin-top:16px}
.pg-cta .cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* ============ PATIČKA obsahové stránky (brand-900, krémový text) ============ */
.pg-foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.pg-foot h2{font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#CFC8C7}
.pg-foot ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.pg-foot a{font-size:14.5px;line-height:1.5;color:var(--paper)}
.pg-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pg-foot .f-soon{color:#B9B1B0}
.pg-foot .pravni{grid-column:1/-1;font-size:12.5px;font-weight:400;line-height:1.6;color:#B9B1B0;
border-top:1px solid rgba(255,255,255,.12);padding-top:24px;margin-top:12px;max-width:100ch}

/* ============ BOXY na chybové stránce ============ */
.klicbox{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-inner);padding:24px 28px;margin:28px 0;max-width:70ch}
.klicbox h3{margin:0 0 10px;font-size:18px}
.klicbox ul{margin:0;padding-left:0}
.klicbox li{margin:0}
.nedelejbox{background:var(--brand-50);border:0;border-radius:var(--r-inner);padding:24px 28px;margin:28px 0;max-width:70ch}
.nedelejbox h3{margin:0 0 10px;font-size:18px;color:var(--accent-h)}
.nedelejbox ul{margin:0;padding-left:0}
.nedelejbox li{margin:0}
.ctainline{background:var(--brand-900);color:#fff;border-radius:var(--r-inner);padding:30px;margin:30px 0;max-width:70ch;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ctainline h3{margin:0;font-size:22px;color:#fff;letter-spacing:-.02em}
.ctainline p{margin:0;color:#D8D2D1;max-width:none}
.ctainline .pill{margin-top:8px}
/* tmavá FAQ karta na homepage — bílý text (oprava 4. 8. 2026 zůstává) */
.faqcard{color:#fff}
.faqcard .faq-item{color:var(--ink)}

/* ============ MOBIL (podstránky) ============ */
@media (max-width:1100px){
  .pg-grid{grid-template-columns:1fr;gap:40px}
  .aside,.pg-aside{position:static}
  .pg-hero h1{font-size:48px}
  .pg-hero,.pg-body,.faqsec,.souvis,.autor,.pg-cta,.pg-foot{padding:56px 40px}
  .pg-hero{padding-top:44px}
  .pg-foot{padding-bottom:32px}
}
@media (max-width:900px){
  .pg-hero,.pg-body,.faqsec,.souvis,.autor,.pg-cta,.pg-foot{width:calc(100% - 32px);margin-top:12px;padding:40px 22px;border-radius:24px}
  .pg-hero{padding-top:32px}
  .pg-foot{border-radius:24px 24px 0 0;padding-bottom:32px}
  .pg-hero h1{font-size:36px;line-height:1.1;max-width:none}
  .pg-lead{font-size:16.5px;line-height:1.6}
  .proza h2,.souvis h2,.pg-cta h2{font-size:27px;line-height:1.12;letter-spacing:-.02em}
  .proza h3{font-size:19px}
  .cenabox b,.askart .ask-b,.aside-card .aside-cena{font-size:32px}
  .cenabox{gap:10px}
  .autor-in{grid-template-columns:1fr}
  .faq-item summary{padding:16px 18px}
  .faq-a{padding:0 18px 18px}
  .klicbox,.nedelejbox,.ctainline{padding:20px 22px}
  .souvis-grid a{padding:22px}
}
@media (max-width:620px){
  /* hlavička na úzkém displeji: logo + kruhový telefon + CTA (CTA pod 18 px → #B11F24, bílá 6,8:1) */
  .logo img{height:26px}
  .hact{gap:6px}
  .hact .pill-outline{width:44px;min-height:44px;flex:0 0 44px;padding:0;font-size:0;gap:0;justify-content:center}
  .hact .pill-outline svg{width:18px;height:18px}
  .hact .pill-accent{background:var(--accent-h);font-size:15px;padding:0 16px;min-height:44px}
  .hact .pill-accent:hover{background:var(--ink)}
  .pg-hero,.pg-body,.faqsec,.souvis,.autor,.pg-cta,.pg-foot{padding:32px 18px;border-radius:22px}
  .pg-hero{padding-top:26px}
  .pg-foot{border-radius:22px 22px 0 0}
  .pg-cta{padding:44px 20px}
  .pg-meta span,.autor .revize span{font-size:12.5px;padding:8px 12px}
  .mapa-list{columns:1}
  .radce-list{grid-template-columns:1fr}
  .pg-foot a,.askbox a,.mapa-list a,.aside-card ul a{display:inline-block;padding-block:6px}
  .faq-head .pill{width:100%}
  .askart .pill,.aside-card .pill,.ctainline .pill,.pg-cta .cta-row .pill{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   MAPLETOP · dodatek ke /_a/styl-v23.css — vlna V-2 (23. 8. 2026)
   PŘIPOJIT NA KONEC souboru styl-v23.css. Nic v původním souboru nemazat.
   Nesahá na text ani na strukturu stránek — porovnej-web --otisk to neuvidí.
   Každý blok má číslo úkolu z Plánu převleku.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 2.4 · kontrast drobného textu ─────────────────────────────────────────
   #7C7473 na --paper dává 4,12:1; AA vyžaduje 4,5. #746C6B dává 4,62 na
   --paper, 4,53 na --brand-50 a 5,12 na bílé. Postihuje drobečkovou
   navigaci, .role, .cenanote a .q-note — zhruba 35 porušení. */
:root{ --ink-3:#746C6B; }

/* ── 2.5 · bílý text na značkové červené ───────────────────────────────────
   Bílá na #ED1C24 = 4,38:1. Projde jen jako „velký text", a ten podle
   WCAG začíná na 18,66 px tučně — ne na 18. Zvednutím na 19 px/800 se
   uplatní práh 3:1 a značková červená zůstane nedotčená. */
.pill-accent,
.pill-accent.btn-lg,
.pill-accent.btn-md,
.pill-accent.btn-sm{ font-size:19px }

/* ── 2.6 · odkazy musí být poznat i bez barvy (WCAG 1.4.1) ─────────────────
   Ve v2.3 se u .drobky ztr-underline-offset tam
   zůstal viset. .askbox a má stejnou barvu jako běžný text. */
.drobky a{ text-decoration:underline; text-decoration-thickness:1px;
           text-underline-offset:3px; color:var(--ink-2) }
.drobky a:hover{ color:var(--accent-h) }
.askbox a{ text-decoration:underline; text-underline-offset:3px;
           color:var(--accent-h) }

/* ── 2.7 · viditelný focus pro klávesnici ──────────────────────────────────
   Dosud jediné :focus-visible mířilo na .cstack, která na podstránkách
   není. Zůstával výchozí černý prstenec prohlížeče, na červeném tlačítku
   a v tmavé patičce prakticky neviditelný. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:4px }
.pg-foot :focus-visible,
.pg-cta :focus-visible,
.faqcard :focus-visible{ outline-color:#fff }

/* skip link — vyžaduje i jeden řádek v HTML, viz 04-html-fragmenty.txt */
.skip{ position:absolute; left:-9999px; top:0; z-index:9999 }
.skip:focus{ left:16px; top:16px; width:auto; padding:12px 20px;
  background:var(--ink); color:#fff; border-radius:var(--r-pill);
  font-weight:700; text-decoration:none }

/* ── 2.8 · stavy formulářových polí (přeneseno z demo stylopisu) ───────────
   README v2.3 slibuje sadu OK / chyba / spinner / disabled.
   V nasazovaném stylopisu nebylo ani jedno pravidlo. */
.field{ display:flex; flex-direction:column; gap:6px }
.field label{ font-size:14px; font-weight:600; color:var(--ink) }
.field input,.field textarea,.field select{
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font:inherit; font-size:16px; color:var(--ink); background:var(--card);
  min-height:44px; transition:border-color var(--t) var(--ease),
  box-shadow var(--t) var(--ease) }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3) }
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(237,28,36,.10);
  outline:none }
.field.ok input,.field.ok textarea{ border-color:var(--good,#276048) }
.field.err input,.field.err textarea,
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--danger); background:var(--brand-50) }
.field .msg{ font-size:13px; line-height:1.4; color:var(--ink-3) }
.field.err .msg{ color:var(--danger); font-weight:600 }
.field.err .msg::before{ content:"! "; font-weight:800 }
.pill[disabled],.pill:disabled,.pill.is-disabled{
  opacity:.45; cursor:not-allowed; pointer-events:none }
.is-loading{ position:relative; color:transparent !important }
.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:mt-spin .7s linear infinite }
@keyframes mt-spin{ to{ transform:rotate(360deg) } }

/* ── 2.9 · omezený pohyb ───────────────────────────────────────────────────
   v2.3 pohyb přidala (scroll-behavior:smooth, hover posuny, animovaná
   výška FAQ, 26 přechodů proti 19), pravidlo pro reduce chybělo v obou
   verzích. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  .cenabox>div:hover,.souvis-grid a:hover,.radce-list li:hover,
  .tcard:hover,.pill:hover{ transform:none }
}

/* ── 2.9 · tisk ────────────────────────────────────────────────────────────
   Obchodní podmínky a reklamační řád si lidé tisknou. Dnes se vytiskne
   i tmavá patička přes celou stránku toneru. */
@media print{
  header,.pg-cta,.pg-foot,.floatcta,.toast,.pg-aside,.aside,
  #mtCookieBar,.drobky{ display:none !important }
  .pg-hero,.pg-body,.faqsec,.souvis,.autor{
    width:auto; margin:0; padding:0; border:0; box-shadow:none;
    border-radius:0; background:#fff }
  .faq-w{ height:auto !important; overflow:visible }
  .faq-item{ break-inside:avoid; border-bottom:1px solid #ccc }
  .proza a::after{ content:" (" attr(href) ")"; font-size:11px; color:#555 }
  body,a,p,li,h1,h2,h3{ color:#000; background:#fff }
}

/* ── 2.10 · dotykové cíle na mobilu ────────────────────────────────────────
   Změřeno na skutečné stránce: pod 44 px byly odkazy v patičce (.f-col,
   .pg-foot-in), v postranní kartě (.askbox), v drobečkové navigaci,
   v „oblíbených" (.popular), u revizí a v cookie liště. Selektory jsou
   psané tak, aby specificitou přebily stávající min-height:40px. */
@media (max-width:900px){
  .pg-foot-in li > a,
  .f-col li > a,
  .askbox ul li > a,
  .souvis-grid > a,
  .radce-list li > a,
  .popular > a,
  .revize a,
  .ck-txt a,
  .mapa li > a{
    display:inline-flex; align-items:center; min-height:44px }
  .drobky a{ display:inline-flex; align-items:center; min-height:44px }
}

/* ── 2.11 · dlouhá česká slova nesmí přetéct ───────────────────────────────
   Dnes nepřetékají, ale bez pojistky. */
h1,h2,h3,.pg-lead,.proza p,.proza li,.faq-item h3,td,th{
  overflow-wrap:break-word }

/* -- 2.10b - oprava specificity pravidla 2.10 (Claude Code, 24. 8. 2026) ----
   Pravidlo 2.10 vyse ma specificitu (0,1,2) a prohravalo s existujicim
   `ul li a:not(.pill)` na r. 637 (0,1,3), ktere drzi min-height:40px.
   ZMERENO po pripojeni dodatku: /caste-dotazy/ 16 z 56 a /plynove-kotle/
   16 z 43 cilu pod 44 px, computed min-height 40px, display inline-block.
   Tohle je tataz oprava o jeden krok specifictejsi. Text ani struktura
   stranek se nemeni. */
@media (max-width:900px){
  .pg-foot-in ul li a:not(.pill),
  .f-col ul li a:not(.pill),
  .askbox ul li a:not(.pill),
  .radce-list li a:not(.pill),
  .mapa ul li a:not(.pill){
    display:inline-flex; align-items:center; min-height:44px }
}