/* #1416 (ADR 0024) - presunuto z inline <style> bloku index.html */
/* Scroll offset — kompenzace sticky navbar + přesahu loga */
          html { scroll-padding-top: 150px; }
          /* Plynulý scroll se zapíná až třídou, kterou custom.js přidá po načtení. Kdyby platil
             od začátku, animoval by Chrome i ÚVODNÍ skok na #fragment při prokliku z jiné
             stránky — a přesuny obsahu při načítání tu animaci zruší, takže stránka zůstane
             nahoře a formulář se nezobrazí (#1585). */
          html.smooth-scroll { scroll-behavior: smooth; }
          /* Nativní plynulý scroll nahrazuje smoothscroll.js (jQuery.ScrollTo 1.4.3.1 z roku
             2013 animoval document.body.scrollTop, což Chrome od verze 61 ignoruje) i ruční
             handler v custom.js. Odsazení pod sticky navbar drží scroll-padding-top výše. */
          @media (prefers-reduced-motion: reduce) {
               html.smooth-scroll { scroll-behavior: auto; }
          }
          /* Obsadto barvy — přepis šablony */
          a { color: #C2410C; }
          a:hover { color: #9A3412; }
          /* Hero — eyebrow (slogan nad H1) a lead podnadpis (#1137) */
          #home .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #FDDBB4; margin-bottom: 10px; }
          #home .lead { color: #fff; font-size: 18px; font-weight: 400; line-height: 1.5; margin: 0 auto 18px; max-width: 640px; }
          .navbar-default .navbar-nav > .appointment-btn > a,
          .navbar-default .navbar-nav > .appointment-btn > a:focus {
               background-color: #C2410C;
               border-color: #C2410C;
          }
          .navbar-default .navbar-nav > .appointment-btn > a:hover {
               background-color: #9A3412;
               border-color: #9A3412;
          }
          .navbar-default .navbar-nav > li.appointment-btn > a {
               padding-top: 0;
               padding-bottom: 0;
          }
          .section-btn { border-radius: 4px; font-weight: 600; }
          .section-btn.btn-default { background-color: #C2410C; border-color: #C2410C; color: #fff; }
          .section-btn.btn-default:hover { background-color: #9A3412; border-color: #9A3412; }
          .section-btn.btn-gray { background-color: #fff; border-color: #9CA3AF; color: #1F2937; }
          .section-btn.btn-blue { background-color: #1A2870; border-color: #1A2870; color: #fff; }
          /* Pricing cards */
          .pricing-row { display: flex; flex-wrap: wrap; align-items: stretch; }
          .pricing-row .col-md-4 { display: flex; }
          .pricing-card { border: 2px solid #E5E7EB; border-radius: 12px; padding: 36px 28px; text-align: center; background: #fff; margin-bottom: 24px; display: flex; flex-direction: column; width: 100%; }
          .pricing-card.featured { border-color: #F56500; box-shadow: 0 8px 30px rgba(59,130,246,0.15); }
          .pricing-card h3 { font-size: 22px; font-weight: 700; color: #1F2937; margin-bottom: 8px; }
          .pricing-card .price { font-size: 48px; font-weight: 800; color: #C2410C; line-height: 1; }
          .pricing-card .price span { font-size: 18px; font-weight: 500; color: #6B7280; }
          .pricing-card ul { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
          .pricing-card ul li { padding: 6px 0; color: #374151; }
          .pricing-card ul li i { color: #F56500; margin-right: 8px; }
          .pricing-card .btn-pricing { display: block; padding: 12px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; margin-top: auto; }
          .pricing-card .btn-pricing-primary { background: #C2410C; color: #fff; border: 2px solid #C2410C; }
          .pricing-card .btn-pricing-primary:hover { background: #9A3412; border-color: #9A3412; color: #fff; }
          .pricing-card .btn-pricing-outline { background: #fff; color: #C2410C; border: 2px solid #F56500; }
          .pricing-card .btn-pricing-outline:hover { background: #FFF3E8; color: #1A2870; }
          /* Feature icons */
          .feature-icon { width: 60px; height: 60px; background: #FFF3E8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
          .feature-icon i { font-size: 24px; color: #F56500; }
          #features .col-md-4 { margin-bottom: 24px; }
          /* Steps */
          .step-number { width: 40px; height: 40px; background: #C2410C; border-radius: 50%; color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
          /* Override header */
          header { background-color: #1A2870; }
          header p { color: #FDDBB4; margin-bottom: 0; }
          header .email-icon a { color: #FDDBB4; }
          header .email-icon a:hover { color: #fff; }
          /* Navbar sticky — zůstane při scrollování nahoře */
          section.navbar { position: sticky; top: 0; z-index: 1030; }
          /* Bílý pruh má pevnou výšku 60px */
          .navbar-default { overflow: visible; min-height: 60px; position: relative; }
          /* Logo fixované na obrazovce — vždy na stejném místě, neovlivněno scrollem ani navbarem */
          .navbar-default .navbar-brand { position: fixed; top: 0; left: 30px; z-index: 1040; padding: 0; margin: 0; height: auto; }
          .navbar-default .navbar-brand img { height: 166px; width: auto; display: block; }
          .navbar-default .navbar-brand:hover { opacity: 0.85; }
          /* Menu položky vycentrovat na 60px pruh */
          .navbar-default .navbar-nav > li > a { line-height: 60px; padding-top: 0; padding-bottom: 0; }
          /* Tablet: skrýt "Rezervační systém" text — logo ho překrývá */
          @media (max-width: 991px) {
               header .col-sm-6:first-child { display: none; }
               header .col-sm-6:last-child { width: 100%; text-align: right; padding-left: 190px; }
          }
          /* Desktop 992–1599px: Bootstrap .container (970/1170px) je zde blíž levému okraji než
             šířka fixního loga (166px vysoké, ~180px široké na left:30px) — text v hlavičce začíná
             pod logem (#1671 G-03). Od ~1600 px má container dost odsazení a padding už není potřeba. */
          @media (min-width: 992px) and (max-width: 1599px) {
               header .col-sm-6:first-child { padding-left: 200px; }
          }
          /* Tablet 768–991px (#1670): Bootstrap rozbaluje menu do jednoho řádku už od 768 px, ale
             položce "Případové studie" (#1657) se do šířky .container (750 px) nevešlo — zalomilo
             se na 2. řádek, který skončil pod fixním logem (166 px vysoké). Řešení: posunout hranici
             hamburger menu z výchozích 768 px na 991 px (přepis Bootstrap pravidel z min-width:768px
             v bootstrap.min.css), stejně jako se to už dělá pro mobil níž. */
          @media (max-width: 991px) {
               .navbar-default .navbar-header { float: none; }
               .navbar-default .navbar-toggle { display: block; }
               .navbar-default .navbar-collapse { width: auto; border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
               .navbar-default .navbar-collapse.collapse { display: none !important; }
               .navbar-default .navbar-collapse.collapse.in { display: block !important; }
               .navbar-default .navbar-nav { float: none !important; margin: 7.5px -15px; }
               .navbar-default .navbar-nav > li { float: none; }
               .navbar-default .navbar-nav > li > a { line-height: 20px; padding-top: 10px; padding-bottom: 10px; }
               /* Rozbalený panel začíná hned pod 60px pruhem — beze zmenšení loga (166 px) by
                  první položky "Úvod" byly pod ním schované stejně jako předtím zalomený řádek. */
               .navbar-default .navbar-brand { left: 10px; top: -4px; transform: none; position: absolute; }
               .navbar-default .navbar-brand img { height: 68px; }
          }
          /* Mobil: skrýt header (zmenšení loga viz #1670 blok výše, sdílený s 768–991px) */
          @media (max-width: 767px) {
               header { display: none; }
          }
          /* Team thumbs: remove image hover overlay so text is visible */
          .team-thumb { overflow: visible; }
          .team-thumb .team-info { position: static; opacity: 1; padding: 16px 0 0; background: transparent; }
          .team-thumb .team-info h3 { font-size: 17px; }
          /* Code block */
          .code-snippet { background: #1F2937; color: #E5E7EB; padding: 16px; border-radius: 8px; font-size: 13px; overflow-x: auto; font-family: monospace; text-align: left; }
          /* Demo karty */
          .demo-card { background: #fff; border: 2px solid #E5E7EB; border-radius: 12px; padding: 28px 24px; text-align: center; height: 100%; box-sizing: border-box; }
          /* Demo grid: flexbox s wrapem + centrováním — odolný vůči nestejné výšce karet (#1142).
             Mezeru mezi řadami drží row-gap — margin-bottom na .demo-card se přes height:100% neuplatnil (#1451) */
          .demo-row { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
          .demo-row > [class*="col-"] { display: flex; }   /* aby .demo-card height:100% fungovalo */
          .demo-card-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
          .demo-card-icon i { font-size: 26px; }
          .demo-card h3 { font-size: 18px; font-weight: 700; color: #1F2937; margin-bottom: 8px; }
          .demo-card p { color: #6B7280; font-size: 14px; margin-bottom: 12px; }
          .demo-card ul { list-style: none; padding: 0; text-align: left; font-size: 13px; color: #374151; margin-bottom: 20px; }
          .demo-card .btn-demo { display: inline-block; padding: 10px 24px; border-radius: 6px; font-weight: 600; font-size: 14px; text-decoration: none; border: 2px solid; }
          .demo-card .btn-demo:hover { opacity: 0.85; }
          /* Zmenšit prázdný prostor mezi hero a about */
          #about { padding-top: 60px; padding-bottom: 60px; }
          /* #1540 — přeskládání sekcí: „Jak to funguje" je hned pod hero, potřebuje odstup nahoře */
          #how-it-works { padding-top: 60px; padding-bottom: 50px; }
          /* #1540 — sekce „Jak vypadá naše administrace" (screenshot týdenního kalendáře) */
          #administrace { padding-top: 60px; padding-bottom: 60px; background: #F9FAFB; }
          #administrace .section-title { padding-bottom: 10px; }
          #administrace .admin-preview-lead { max-width: 760px; margin: 12px 0 0; color: #4B5563; font-size: 16px; line-height: 1.6; }
          #administrace .admin-preview { margin: 20px auto 0; max-width: 1140px; }
          #administrace .admin-preview img { display: block; width: 100%; height: auto; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 20px 45px rgba(31, 41, 55, 0.18); }
          @media (max-width: 767px) {
               #how-it-works { padding-top: 40px; padding-bottom: 30px; }
               #administrace { padding-top: 40px; padding-bottom: 40px; }
               #administrace .admin-preview img { border-radius: 8px; box-shadow: 0 10px 24px rgba(31, 41, 55, 0.15); }
          }
          /* #1543 — potvrzení kontaktního formuláře (dřív inline <style>/style= v landing-contact.js, CSP je blokovalo) */
          .contact-success-box { text-align: center; padding: 24px 0; }
          .contact-success-icon { animation: obsEnvFloat 1.8s ease-in-out infinite; }
          .contact-success-text { font-size: 1.05rem; font-weight: 600; color: #1F2937; margin-top: 18px; margin-bottom: 0; }
          @keyframes obsEnvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

          /* #1580 + #1586 + #1587 (ADR 0040 vzor D) — hero je samostatný blok, ne kostra
             carouselu. Dřívější .slider > .item > .caption > .col-md-* odvozovalo šířku textu
             řetězcem 42 % → width:100 % → obsahová šířka rodiče, takže stačil jeden přepočet
             layoutu mimo pořadí (přechod přes breakpoint 767 px bez reloadu, typicky otočení
             telefonu) a textový sloupec spadl na 50 px. Šířku drží jediná deklarace níž.
             Fotka má vestavěné prázdné místo pro text, proto se nepřekrývá ničím; kontrast
             proti skutečnému výřezu hlídá E2E HeroContrastTests. */
          #home.hero {
               position: relative;
               /* width:100 % je nutná, ne kosmetická. Chromium po přechodu přes breakpoint
                  767 px bez reloadu znovu nespočítá vnitřní šířku hero a zůstane mu hodnota
                  z předchozího rozvržení (118,031 px) — se starou kostrou carouselu i s novým
                  plochým blokem naprosto stejná, což ukazuje na zapamatovanou hodnotu, ne na
                  výpočet. Pevná šířka tu závislost na obsahu ruší. Hlídá
                  HeroContrastTests.Hero_SurvivesViewportChangeAcrossBreakpoint. */
               width: 100%;
               display: flex;
               align-items: center;
               height: 650px;
               color: #1F2937;
               background-color: #FFF7ED;
               background-image: url(/images/hero/hero-uvod.jpg);
               background-image: image-set(url(/images/hero/hero-uvod.webp) type("image/webp"),
                                           url(/images/hero/hero-uvod.jpg) type("image/jpeg"));
               /* Hero má pevnou výšku, takže cover ořezává svisle. Při `center` se řez na
                  1920 px trefí do temene a na 2560 px projde čelem — `left 20%` drží hlavu
                  i ruce v záběru na 1280–2560 px (#1586). */
               background-position: left 20%;
               background-size: cover;
               background-repeat: no-repeat;
          }
          /* Jediné místo, které určuje šířku textu. Žádné procento odvozené z rodiče,
             který se sám měří podle obsahu. */
          #home .hero-inner { max-width: 46%; margin-left: 4%; text-align: left; }
          #home h1 { color: #1F2937; font-size: 40px; line-height: 1.15; margin: 0 0 16px; }
          #home .lead { color: #374151; margin: 0 0 18px; max-width: none; }
          #home .eyebrow { color: #A83D00; }
          #home .cv-m1 { color: #374151; }
          /* Benefity pod CTA — návštěvník z reklamy vidí „nic neriskuju" bez scrollování */
          #home .hero-benefits { list-style: none; padding: 0; margin: 16px 0 0; color: #374151; font-size: 15px; }
          #home .hero-benefits li { display: inline-block; margin: 0 20px 0 0; }
          #home .hero-benefits i { color: #C2410C; margin-right: 7px; }
          /* Šablona nemá mezi 640 a 767 px žádnou větev velikosti H1 — zůstávalo 64 px */
          @media (min-width: 640px) and (max-width: 767px) {
               #home h1 { font-size: 36px; }
          }
          /* Mobil (ADR 0040 vzor B): text nikdy neleží na fotce, fotka se ukáže až POD blokem
             s nadpisem a CTA. Vzor D tu nejde použít — dodaný snímek má prázdnou plochu nad
             y 39,7 % (pod ní vlasy, kontrast spadne z 12,1 na 1,2 : 1), což na hero boxu
             393×650 dává 258 px, zatímco kopie hero (eyebrow, H1, lead, cena, dvě CTA,
             benefity a řádek nabídky pomoci z #1585) měří 527 px. Zvětšit fotku svisle nejde
             bez vodorovného ořezu, který by ukrojil postavu. Architekt schválil v #1586. */
          @media (max-width: 767px) {
               #home.hero {
                    display: block;
                    height: auto;
                    padding: 28px 0 0;
                    background-image: none;
                    background-color: #FFF7ED;
               }
               #home .hero-inner { max-width: none; margin-left: 0; padding: 0 18px; overflow-wrap: break-word; }
               #home h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.5px; }
               #home .lead { font-size: 16px; }
               #home .section-btn { display: block; width: 100%; margin: 0 0 10px; }
               #home .hero-benefits li { display: block; margin: 0 0 6px; }
               #home.hero::after {
                    content: "";
                    display: block;
                    margin-top: 24px;
                    /* Výška svázaná se šířkou — pevných 320 px na širším displeji ukáže z fotky
                       jen prázdnou stěnu nad postavou. */
                    height: min(320px, 78vw);
                    background-image: url(/images/hero/hero-uvod-mobil.jpg);
                    background-image: image-set(url(/images/hero/hero-uvod-mobil.webp) type("image/webp"),
                                                url(/images/hero/hero-uvod-mobil.jpg) type("image/jpeg"));
                    background-position: center 62%;
                    background-size: cover;
                    background-repeat: no-repeat;
               }
          }
          /* #1581 (ADR 0040 bod 1) — sekce #about ma na pozadi fotku about-bg.jpg, takze kontrast
             textu zavisel na jejim vyrezu (3,18:1). Neprusvitna svetla vrstva jako u profesnich
             stranek (#1541) ho odpoji od obsahu fotky. */
          #about { position: relative; background-color: #FFF7ED; }
          #about::before { content: ""; position: absolute; inset: 0; background: rgba(255, 247, 237, .85); }
          #about > .container { position: relative; }
          #about .about-info p, #about h6 { color: #374151; }

          /* #1585 — plošná nabídka „Nastavíme to s vámi. Zdarma."
             Hlavní bariérou cílové skupiny není cena, ale obava „já to nezvládnu nastavit". */
          #home .hero-help { color: #374151; font-size: 14px; margin: 12px 0 0; }
          #pomoc { padding-top: 60px; padding-bottom: 60px; background: #FFF7ED; }
          #pomoc .pomoc-lead { color: #374151; font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
          #pomoc .pomoc-list { list-style: none; padding: 0; margin: 0 0 22px; }
          #pomoc .pomoc-list li { color: #374151; padding: 6px 0; }
          #pomoc .pomoc-list li i { color: #C2410C; margin-right: 10px; }