:root{
    --ground:#F5F8FB; --surface:#FFFFFF; --surface-2:#EAF0F7;
    --ink:#152438; --muted:#54657D; --line:#D7E0EC;
    --brand:#1D5FBF; --brand-deep:#14448C; --brand-soft:#DCE8F9;
    --accent:#E8890C; --accent-ink:#7A4A00; --accent-soft:#FBEFD8;
    --band-ink:#E8EFF8; --band:#0D2440; --band-2:#123056;
    --shadow:0 10px 30px rgba(13,36,64,.10);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0C1420; --surface:#131E2E; --surface-2:#182639;
      --ink:#E6EDF6; --muted:#93A5BD; --line:#263850;
      --brand:#5B93E8; --brand-deep:#7FACF0; --brand-soft:#16283F;
      --accent:#F0A62E; --accent-ink:#F5C36E; --accent-soft:#2E2412;
      --band-ink:#E8EFF8; --band:#0A1B30; --band-2:#0F2540;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0C1420; --surface:#131E2E; --surface-2:#182639;
    --ink:#E6EDF6; --muted:#93A5BD; --line:#263850;
    --brand:#5B93E8; --brand-deep:#7FACF0; --brand-soft:#16283F;
    --accent:#F0A62E; --accent-ink:#F5C36E; --accent-soft:#2E2412;
    --band-ink:#E8EFF8; --band:#0A1B30; --band-2:#0F2540;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  [id]{scroll-margin-top:80px}
  body{background:var(--ground); color:var(--ink);
    font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16.5px; line-height:1.6; margin:0;}
  h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
    line-height:1.12; text-wrap:balance; margin:0 0 .5em;}
  h1{font-size:clamp(2rem,4.6vw,3.1rem); font-weight:800; letter-spacing:-.01em}
  h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700}
  h3{font-size:1.12rem; font-weight:700}
  p{margin:.35em 0}
  a{color:var(--brand-deep)}
  .wrap{max-width:1080px; margin:0 auto; padding:0 22px}
  .eyebrow{display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--brand); margin-bottom:.6em}
  .muted{color:var(--muted)}
  .note{font-size:.8rem; color:var(--muted); font-style:italic}

  /* header */
  header.site{position:sticky; top:0; z-index:50; background:var(--surface);
    border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; gap:26px; padding-block:14px}
  .logo{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.35rem;
    color:var(--brand-deep); text-decoration:none; letter-spacing:-.01em}
  .logo em{font-style:normal; color:var(--accent)}
  .nav ul{display:flex; gap:20px; list-style:none; margin:0 0 0 auto; padding:0}
  .nav ul a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem; white-space:nowrap}
  .nav ul a:hover{color:var(--brand)}
  .call{background:var(--brand); color:#fff !important; padding:9px 16px; border-radius:8px;
    font-weight:600; text-decoration:none; white-space:nowrap}
  .call:hover{background:var(--brand-deep)}
  @media (max-width:1020px){ .nav{gap:16px} .nav ul{gap:13px} .nav ul a{font-size:.88rem} }
  /* mobilní menu */
  .nav-toggle{display:none}
  .nav-btn{display:none}
  .nav-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  @media (max-width:820px){
    .nav{position:relative; gap:12px; padding-block:10px}
    .nav-btn{display:grid; place-items:center; width:44px; height:44px; margin-left:auto;
      border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:1.25rem;
      color:var(--ink); background:var(--surface); user-select:none}
    .nav > ul{position:absolute; top:calc(100% + 1px); left:0; right:0;
      background:var(--surface); border-bottom:1px solid var(--line);
      flex-direction:column; gap:0; padding:4px 22px 12px; margin:0; box-shadow:var(--shadow); z-index:60;
      visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-6px);
      transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
    .nav-toggle:checked ~ ul{visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0);
      transition-delay:0s}
    .nav ul a{display:block; padding:12px 4px; font-size:1.02rem; border-bottom:1px solid var(--line)}
    .nav ul li:last-child a{border-bottom:none}
    .nav ul li.only-m{display:block}
    .nav ul .has-sub::after{display:none}
    .nav ul .sub-label{display:block; padding:12px 4px 2px; font-size:.8rem; font-weight:600;
      letter-spacing:.1em; text-transform:uppercase; color:var(--muted); cursor:default}
    .nav ul .sub-label .caret{display:none}
    .nav ul .sub{display:flex; position:static; flex-direction:column; border:none; box-shadow:none;
      background:none; padding:0; margin:0; min-width:0; border-radius:0;
      visibility:inherit; opacity:1; transform:none; pointer-events:auto; transition:none}
    .nav ul .sub a{padding-left:16px}
    .nav ul .sub li:last-child a{border-bottom:1px solid var(--line)}
    .call{margin-left:auto; padding:9px 12px; font-size:.92rem}
    .nav-btn{margin-left:0}
  }
  @media (max-width:700px){ .call.wa{display:none} }

  /* hero */
  .hero{padding:56px 0 48px}
  .hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
  @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} }
  .hero p.lead{font-size:1.13rem; max-width:34em; color:var(--muted)}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:22px 0 18px}
  .btn{display:inline-block; padding:13px 22px; border-radius:9px; font-weight:600;
    text-decoration:none; font-size:1rem; border:1px solid transparent}
  .btn:focus-visible,.call:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .btn-primary{background:var(--accent); color:#231500}
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
  .chips{display:flex; flex-wrap:wrap; gap:8px 16px; padding:0; margin:8px 0 0; list-style:none}
  .chips li{font-size:.9rem; color:var(--muted)}
  .chips li::before{content:"✓ "; color:var(--brand); font-weight:700}

  /* before/after */
  .ba{position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
    aspect-ratio:4/3; user-select:none; border:1px solid var(--line)}
  .ba .pane{position:absolute; inset:0}
  .carpet{width:100%; height:100%;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 6px),
      radial-gradient(circle at 30% 40%, rgba(0,0,0,.28), transparent 45%),
      radial-gradient(circle at 70% 65%, rgba(0,0,0,.22), transparent 40%),
      radial-gradient(circle at 55% 20%, rgba(0,0,0,.16), transparent 35%),
      #8A7B62;}
  .carpet.clean{background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 6px),
      #B9AC91;}
  .ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
  .ba .divider{position:absolute; top:0; bottom:0; left:var(--cut,50%); width:3px;
    background:#fff; box-shadow:0 0 8px rgba(0,0,0,.4); pointer-events:none}
  .ba .knob{position:absolute; top:50%; left:var(--cut,50%); translate:-50% -50%;
    width:42px; height:42px; border-radius:50%; background:#fff; color:#333;
    display:grid; place-items:center; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.35);
    pointer-events:none; font-size:.9rem}
  .ba input[type=range]{position:absolute; inset:0; width:100%; height:100%;
    opacity:0; cursor:ew-resize; margin:0}
  .ba:focus-within{outline:3px solid var(--accent); outline-offset:3px}
  .ba .tag{position:absolute; top:12px; font-size:.75rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.55);
    color:#fff; padding:4px 10px; border-radius:99px; pointer-events:none}
  .ba .tag.b{left:12px} .ba .tag.a{right:12px}
  .ba .placeholder{position:absolute; left:50%; bottom:12px; translate:-50% 0;
    background:rgba(0,0,0,.55); color:#fff; font-size:.75rem; padding:4px 12px;
    border-radius:99px; pointer-events:none; white-space:nowrap}

  section{padding:52px 0}
  .grid4{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:16px}
  @media (max-width:900px){ .grid4{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .grid4{grid-template-columns:1fr} }
  .card{background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:22px 20px; display:flex; flex-direction:column; gap:6px}
  .card .ico{width:40px; height:40px; border-radius:9px; background:var(--brand-soft);
    color:var(--brand-deep); display:grid; place-items:center; margin-bottom:8px}
  .card p{color:var(--muted); font-size:.94rem}
  .card .price{margin-top:auto; padding-top:10px; font-weight:600; color:var(--brand-deep); font-size:.95rem}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:step}
  @media (max-width:760px){ .steps{grid-template-columns:1fr} }
  .step{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px}
  .step::before{counter-increment:step; content:counter(step);
    display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent-ink); font-weight:800;
    font-family:"Bricolage Grotesque",sans-serif; margin-bottom:12px}
  .step p{color:var(--muted); font-size:.94rem}

  /* modelové situace */
  .cases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media (max-width:860px){ .cases{grid-template-columns:1fr} }
  .case{background:var(--surface); border:1px solid var(--line); border-radius:12px;
    overflow:hidden; display:flex; flex-direction:column}
  .case .photo{aspect-ratio:16/9; display:grid; place-items:center; color:#fff;
    font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
    background:linear-gradient(135deg,#7C90AB,#4E6284)}
  .case .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1}
  .case .body p{color:var(--muted); font-size:.93rem; margin:0}
  .case .total{margin-top:auto; padding-top:12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .case .total strong{font-family:"Bricolage Grotesque",sans-serif; font-size:1.2rem;
    color:var(--brand-deep); white-space:nowrap}
  .case .total span{font-size:.8rem; color:var(--muted)}
  .guarantee{margin-top:26px; background:var(--brand-soft); border:1px solid var(--line);
    border-radius:12px; padding:18px 22px; display:flex; gap:14px; align-items:center}
  .guarantee .mark{font-size:1.6rem}
  .guarantee p{margin:0; font-size:.95rem}

  .reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media (max-width:760px){ .reviews{grid-template-columns:1fr} }
  .review{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px}
  .stars{color:var(--accent); letter-spacing:2px}
  .review p{font-size:.95rem; margin:.5em 0}
  .review .who{font-weight:600; font-size:.88rem; color:var(--muted)}

  .b2b{background:linear-gradient(135deg,var(--band),var(--band-2)); color:var(--band-ink)}
  .b2b .eyebrow{color:var(--accent)}
  .b2b h2,.b2b h3{color:#fff}
  .b2b p{color:var(--band-ink)}
  .b2b .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
  @media (max-width:820px){ .b2b .wrap{grid-template-columns:1fr} }
  .b2b ul.seg{list-style:none; padding:0; margin:16px 0 0; display:grid;
    grid-template-columns:1fr 1fr; gap:10px}
  .b2b ul.seg li{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
    border-radius:9px; padding:11px 14px; font-size:.94rem}
  .b2b .panel{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
    border-radius:14px; padding:26px}
  .b2b .panel .btn-primary{margin-top:14px}

  .locality .wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center}
  @media (max-width:820px){ .locality .wrap{grid-template-columns:1fr} }
  .mapa{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px}
  .mapa svg{width:100%; height:auto; display:block}
  .mapa text{font-family:"Instrument Sans",sans-serif; fill:var(--muted); font-size:10.5px}
  .mapa .ringlabel{font-size:9px; fill:var(--muted); opacity:.8}
  .mapa circle.town{fill:var(--brand)}
  .mapa circle.ring{fill:none; stroke:var(--line); stroke-dasharray:4 5}
  .mapa .brno{fill:var(--accent)}
  .checker{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px}
  .checker .row{display:flex; gap:10px; margin-top:14px}
  .checker input{flex:1}
  .checker .result{margin-top:0; max-height:0; overflow:hidden; border-radius:9px; padding:0 16px;
    font-size:.95rem; opacity:0; transition:max-height .2s ease, margin .2s ease, padding .2s ease, opacity .16s ease}
  .checker .result.ok,.checker .result.maybe{margin-top:14px; max-height:120px; padding:14px 16px; opacity:1}
  .checker .result.ok{background:var(--brand-soft); color:var(--ink)}
  .checker .result.maybe{background:var(--accent-soft); color:var(--ink)}
  .checker .result strong{color:var(--brand-deep)}

  .contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px}
  @media (max-width:820px){ .contact .wrap{grid-template-columns:1fr} }
  form{display:grid; gap:12px}
  label{font-size:.85rem; font-weight:600; display:block; margin-bottom:6px}
  input,select,textarea{width:100%; padding:11px 12px; border-radius:8px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    font:inherit; font-size:.95rem}
  input:not([type=checkbox]),select{min-height:47px}
  select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat}
  form .two > div{display:flex; flex-direction:column}
  form .two label{min-height:1.3em}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); border-color:var(--brand)}
  .phone-big{font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
    font-size:1.7rem; color:var(--brand-deep); text-decoration:none; display:block}

  footer.site{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:.88rem}
  .proto{background:var(--accent-soft); color:var(--accent-ink); text-align:center;
    font-size:.8rem; padding:6px 12px}
  @media (prefers-reduced-motion: no-preference){
    .card,.step,.review{transition:transform .18s ease, box-shadow .18s ease}
    .btn{transition:transform .14s ease, filter .14s ease, background-color .14s ease}
    .btn:active{transform:translateY(1px)}
  }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .card:hover,.review:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
  }
  @media (max-width:760px){ #kdo .wrap{grid-template-columns:1fr !important; max-width:420px} }

/* ---- podstránky ---- */
.page-hero{padding:48px 0 8px}
.page-hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.prose{max-width:46em}
.prose h2{margin-top:1.4em}
.prose ul{padding-left:1.2em}
.pricing table{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-variant-numeric:tabular-nums}
.pricing th,.pricing td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem}
.pricing th{background:var(--surface-2); font-weight:600}
.pricing tr:last-child td{border-bottom:none}
.pricing .tablewrap{overflow-x:auto}
.breadcrumbs{font-size:.85rem; color:var(--muted); padding-top:18px}
.breadcrumbs a{color:var(--muted)}
.towns-cols{columns:3 180px; column-gap:28px; font-size:.93rem; color:var(--muted); line-height:1.9}

/* ---- formulář v2 ---- */
form .two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ form .two{grid-template-columns:1fr} }
fieldset.checks-wrap{border:none; margin:0; padding:0}
fieldset.checks-wrap legend{font-size:.85rem; font-weight:600; padding:0; margin-bottom:6px}
.checks{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px}
@media (max-width:520px){ .checks{grid-template-columns:1fr} }
label.check{display:flex; align-items:center; gap:9px; font-weight:400; font-size:.93rem; cursor:pointer}
input[type=checkbox]{width:auto; accent-color:var(--brand); transform:scale(1.15)}
input[type=date]{min-height:47px}

/* ---- dropdown Služby ---- */
.only-m{display:none}
.has-sub{position:relative}
.sub-label{cursor:default; font-weight:500; font-size:.95rem; color:var(--ink); white-space:nowrap}
.sub-label .caret{font-size:.7em; color:var(--muted)}
.nav .sub{display:none; position:absolute; top:100%; left:-14px; padding:8px; margin:0;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); min-width:210px; flex-direction:column; gap:0; list-style:none; z-index:70}
.has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.nav .sub a{display:block; padding:9px 12px; border-radius:7px; white-space:nowrap}
.nav .sub a:hover{background:var(--surface-2); color:var(--brand)}

/* ---- WhatsApp ---- */
.call.wa{background:#1FAF5E}
.call.wa:hover{background:#178A4B}
@media (max-width:560px){ .call.wa{display:none} }

/* ---- maskot ---- */
.hero-visual{position:relative}
@media (max-width:520px){  }
.kdo-fig{margin:0}
.kdo-fig img{width:100%; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.kdo-fig figcaption{margin-top:8px; text-align:center}

/* ---- skutečné fotky ---- */
.ba .pane img{width:100%; height:100%; object-fit:cover; display:block}
.case .photo{background:linear-gradient(135deg,#7C90AB,#4E6284); position:relative}
.case .photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.foto-strip{border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); width:100%; display:block; margin:18px 0}

/* ---- galerie před a po ---- */
.galerie{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
@media (max-width:860px){ .galerie{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .galerie{grid-template-columns:1fr} }
.gal-item{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.gal-item img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in}
.gal-item figcaption{padding:10px 14px; font-size:.88rem; color:var(--muted)}
@media (prefers-reduced-motion: no-preference){
  .gal-item{transition:transform .18s ease, box-shadow .18s ease}
  .gal-item:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
}
dialog#lightbox{border:none; border-radius:14px; padding:10px; background:var(--surface);
  max-width:min(92vw,1100px); cursor:zoom-out}
dialog#lightbox::backdrop{background:rgba(10,20,35,.8)}
dialog#lightbox img{max-width:100%; max-height:80vh; display:block; border-radius:8px}
dialog#lightbox .lb-cap{margin:8px 4px 2px; font-size:.9rem; color:var(--muted); text-align:center}