/* D.CH Weby od Davida – vzhled webu */
/* Rozvržení: tmavě zelený úvod přes celou šířku se skutečnými ukázkami v notebooku a mobilu,
   pod ním světlé sekce, na konci znovu zelený pás s kontaktem */
:root{
  --bg:#F2F4F0;
  --surface:#FFFFFF;
  --ink:#16261E;
  --muted:#56665D;
  --line:#D9E0DA;
  --spruce:#1F3B2E;
  --accent:#E0A21C;
  --accent-ink:#1A1205;
  --band:#17302A;
  --band-ink:#EAF1EC;
  --band-muted:#A9C2B5;
  --font-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:"Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1713; --surface:#16211B; --ink:#E7EEE9; --muted:#9DAEA3;
    --line:#26352D; --spruce:#A9CDB8; --accent:#E8B03A; --accent-ink:#1A1205;
    --band:#0B2019; --band-ink:#EAF1EC; --band-muted:#A9C2B5;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1713; --surface:#16211B; --ink:#E7EEE9; --muted:#9DAEA3;
  --line:#26352D; --spruce:#A9CDB8; --accent:#E8B03A; --accent-ink:#1A1205;
  --band:#0B2019; --band-ink:#EAF1EC; --band-muted:#A9C2B5;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; padding:0 20px; overflow-x:hidden; margin:0}
img{max-width:100%}
.wrap{max-width:1080px; margin:0 auto}
h1, h2, h3{font-family:var(--font-display); line-height:1.08; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
.head-block{display:grid; gap:12px}
.full{margin-inline:-20px; padding-inline:20px}

/* Tlačítka */
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:10px; font-weight:700; text-decoration:none; border:2px solid currentColor; transition:transform .15s; min-height:48px}
.btn.main{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 8px 24px -10px rgba(224,162,28,.8)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px; height:18px}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* Hlavička */
header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--band); color:var(--band-ink); margin:0 -20px; padding:12px 20px}
.head{max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px 16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; font-size:1.15rem; text-decoration:none; color:var(--band-ink)}
.logo-badge{display:inline-flex; align-items:center}
.logo-badge img{display:block; height:72px; width:auto}
.logo-big{justify-self:start}
.logo-big img{display:block; width:min(380px, 100%); height:auto}
@media (max-width:420px){ .logo-badge img{height:54px} }
nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
nav a{color:var(--band-muted); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px; min-height:44px; display:inline-flex; align-items:center}
nav a:hover{color:var(--band-ink); background:rgba(255,255,255,.06)}
nav a.cta{background:var(--accent); color:var(--accent-ink); margin-left:6px}
.menu-btn{display:none; font:inherit; font-weight:700; align-items:center; gap:10px; background:transparent; color:var(--band-ink); border:1px solid rgba(255,255,255,.25); border-radius:9px; padding:9px 14px; cursor:pointer}
.menu-btn span{display:grid; gap:4px}
.menu-btn span i{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s}
header.open .menu-btn span i:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.open .menu-btn span i:nth-child(2){opacity:0}
header.open .menu-btn span i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  nav{display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; margin-top:6px; border-top:1px solid rgba(255,255,255,.12)}
  header.open nav{display:flex}
  nav a{padding:14px 4px; border-radius:0; border-bottom:1px solid rgba(255,255,255,.12); font-size:1.1rem; color:var(--band-ink)}
  nav a.cta{margin:12px 0 4px; border-radius:9px; text-align:center; border:0}
  .logo{font-size:1rem}
}

/* Úvod */
.hero{background:var(--band); color:var(--band-ink); padding-block:56px 88px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; right:-10%; bottom:-40%; width:70%; height:90%; background:radial-gradient(closest-side, rgba(224,162,28,.2), transparent); pointer-events:none}
.hero-in{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center; position:relative}
.hero-text{display:grid; gap:22px; min-width:0}
.pill{justify-self:start; display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.88rem; font-weight:600; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--band-ink)}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.2rem); font-weight:800; letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lead{color:var(--band-muted); font-size:1.15rem}
.hero .btn:not(.main){color:var(--band-ink); border-color:rgba(255,255,255,.35)}
.proof{display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--band-muted); font-size:.95rem}
.proof span{display:inline-flex; align-items:center; gap:8px}
.proof svg{width:18px; height:18px; color:var(--accent); flex-shrink:0}

/* Notebook a mobil v úvodu */
.devices{position:relative; padding-bottom:30px; padding-right:24px; min-width:0}
.laptop{background:#0A1310; border-radius:14px 14px 4px 4px; padding:10px 10px 0; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08)}
.laptop img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:6px 6px 0 0}
.laptop::after{content:""; display:block; height:14px; margin:0 -22px; background:linear-gradient(#34413B,#141C18); border-radius:0 0 14px 14px}
.phone{position:absolute; right:0; bottom:0; width:29%; min-width:92px; background:#0A1310; border-radius:22px; padding:6px; box-shadow:0 24px 50px -16px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.1); transform:rotate(3deg)}
.phone img{display:block; width:100%; height:auto; aspect-ratio:9/18; object-fit:cover; object-position:top; border-radius:16px}
.float{position:absolute; left:-12px; bottom:46px; background:#FFFFFF; color:#16261E; border-radius:12px; padding:10px 14px; font-size:.85rem; line-height:1.35; box-shadow:0 16px 40px -12px rgba(0,0,0,.5); display:flex; gap:10px; align-items:center}
.float b{display:block; font-family:var(--font-display); font-size:1.02rem}
.float svg{width:28px; height:28px; color:#2E8B57; flex-shrink:0}
@media (max-width:880px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .devices{max-width:540px}
}
@media (max-width:420px){ .float{display:none} .perk{padding:14px} .perk b{font-size:1rem} }

/* Výhody */
.perks{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px; margin-top:-46px; position:relative; z-index:2}
.perk{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:6px; align-content:start; box-shadow:0 14px 34px -24px rgba(10,30,20,.5)}
.perk svg{width:30px; height:30px; color:var(--accent)}
.perk b{font-family:var(--font-display); font-size:1.08rem}
.perk span{color:var(--muted); font-size:.97rem; line-height:1.45}

/* Proč web */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px}
.why div{border-top:3px solid var(--accent); padding-top:14px; display:grid; gap:6px; align-content:start}
.why b{font-family:var(--font-display); font-size:1.25rem; line-height:1.2; color:var(--spruce)}
.why span{color:var(--muted)}
.for{display:flex; flex-wrap:wrap; gap:10px}
.for span{border:1px solid var(--line); background:var(--surface); padding:8px 14px; border-radius:999px; font-weight:600; font-size:.95rem}

/* Ukázky */
.works{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:32px 24px}
.work{display:grid; gap:12px; align-content:start; min-width:0}
.frame{border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:0 18px 40px -26px rgba(10,30,20,.55); transition:transform .2s}
.work:hover .frame{transform:translateY(-4px)}
.bar{display:flex; gap:6px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line)}
.bar i{width:9px; height:9px; border-radius:50%; background:var(--line); flex-shrink:0}
.shot{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top}
.work-meta{display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-top:4px}
.work h3{font-size:1.3rem}
.work p{color:var(--muted)}
.more:hover{text-decoration:underline; text-underline-offset:4px}

/* Ceník */
.picker{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px}
.pick{border:1px dashed var(--muted); border-radius:12px; padding:14px 18px; display:grid; gap:2px}
.pick span{color:var(--muted); font-size:.95rem}
.pick b{color:var(--spruce)}
.prices{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:18px; align-items:start; padding-top:8px}
.price{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; display:grid; gap:12px; align-content:start}
.price.top{border:2px solid var(--accent); box-shadow:0 20px 44px -26px rgba(224,162,28,.8)}
.price h3{font-size:1.35rem}
.was{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums}
.amount{font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--spruce); line-height:1; font-variant-numeric:tabular-nums}
.amount small{font-size:1rem; font-weight:600; color:var(--muted)}
.price ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; color:var(--muted)}
.price li{display:flex; gap:10px; align-items:baseline}
.price li::before{content:""; flex-shrink:0; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-3px) rotate(-45deg)}
.note{color:var(--muted); font-size:.95rem; max-width:72ch}
.split{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-variant-numeric:tabular-nums}
.split span{display:grid; gap:2px; padding:9px 12px}
.split span:first-child{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.split span + span{border-left:1px solid var(--line)}
.price .who{margin-top:-6px; color:var(--muted); font-size:.95rem; line-height:1.4}
.was .std{flex:1 1 180px; min-width:0; line-height:1.35}
.pay{display:grid; grid-template-columns:auto 1fr; gap:16px 20px; align-items:center; background:var(--surface); border:2px solid var(--accent); border-radius:16px; padding:20px 22px}
.pay-icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink)}
.pay-icon svg{width:28px; height:28px}
.pay h3{font-size:1.25rem}
.pay ol{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 12px}
.pay li{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.pay li b{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--spruce); color:var(--bg); font-size:.8rem}
.pay li + li::before{content:"→"; color:var(--muted); margin-right:4px}
@media (max-width:520px){ .pay{grid-template-columns:1fr} .pay li + li::before{display:none} .pay ol{flex-direction:column} }
.note b{color:var(--ink)}
.infos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:12px}
.info{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:14px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line)}
.info svg{width:24px; height:24px; color:var(--accent); margin-top:2px}
.info b{color:var(--ink)}
.info.hot{background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border:2px solid var(--accent)}

/* Měsíční služby */
.monthly{display:grid; gap:18px; margin-top:20px}
.monthly-head{display:grid; gap:8px}
.monthly-head h3{font-family:var(--font-display); font-size:clamp(1.4rem,3.4vw,1.9rem); color:var(--spruce)}
.monthly-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),440px)); gap:16px; align-items:start}
.mcard{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:grid; align-content:start}
.mcard.top{border:2px solid var(--accent)}
.mcard .art{background:var(--band); padding:16px 18px 0; display:grid; place-items:end center}
.mcard .art svg{display:block; width:100%; max-width:270px; height:auto}
.mcard .body{padding:18px 20px 20px; display:grid; gap:9px; align-content:start}
.mcard .badge{position:static; justify-self:start}
.mcard h3{font-family:var(--font-display); font-size:1.15rem; line-height:1.2}
.mcard .amount{font-size:1.9rem}
.limit{display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:9px; font-size:.9rem; background:color-mix(in srgb, var(--accent) 16%, transparent); font-weight:700; color:var(--ink)}
.limit svg{width:17px; height:17px; flex-shrink:0; color:var(--accent)}
.mcard ul{margin:0; padding:0; list-style:none; display:grid; gap:5px; color:var(--muted); font-size:.9rem; line-height:1.45}
.mcard li{display:flex; gap:10px; align-items:baseline}
.mcard li::before{content:""; flex-shrink:0; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-3px) rotate(-45deg)}
.mcard .fine{font-size:.8rem; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; line-height:1.45}
.combo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:20px 36px; background:var(--band); color:var(--band-ink); border:2px solid var(--accent); border-radius:16px; padding:26px 26px}
.combo .badge{position:static; justify-self:start}
.combo-head{display:grid; gap:10px; align-content:start}
.combo h3{font-family:var(--font-display); font-size:1.5rem; color:var(--band-ink)}
.combo .desc{color:var(--band-muted); font-size:.95rem; line-height:1.5}
.combo .was{color:var(--band-muted)}
.combo .amount{color:var(--band-ink); font-size:2.3rem}
.combo .amount small{color:var(--band-muted)}
.combo-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px 24px; align-content:start}
.combo h4{margin:0 0 8px; font-size:.95rem; color:var(--accent)}
.combo ul{margin:0; padding:0; list-style:none; display:grid; gap:6px; color:var(--band-ink); font-size:.92rem}
.combo li{display:flex; gap:10px; align-items:baseline}
.combo li::before{content:""; flex-shrink:0; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-3px) rotate(-45deg)}
.combo .fine{grid-column:1/-1; font-size:.8rem; color:var(--band-muted); border-top:1px solid rgba(255,255,255,.15); padding-top:12px; line-height:1.5}
@media (max-width:760px){ .combo{grid-template-columns:1fr; padding:22px 18px} }
.mcard .was{font-size:.85rem}


/* Postup */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; counter-reset:s}
.steps li{counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; display:grid; gap:8px; align-content:start}
.steps li::before{content:counter(s); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:800; font-size:1.1rem}
.steps b{font-family:var(--font-display); font-size:1.12rem}

/* Podklady a dotazy */
.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px; align-items:start}
.two-col > div{display:grid; gap:22px; min-width:0}
.need{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.need li{display:grid; grid-template-columns:auto 1fr; gap:0 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 16px}
.need li::before{content:""; grid-row:span 2; align-self:center; width:20px; height:20px; border-radius:6px; border:2px solid var(--accent)}
.need small{color:var(--muted)}
.faq{border-top:1px solid var(--line)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-family:var(--font-display); font-size:1.5rem; line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}

/* Kontakt */
.contact{scroll-margin-top:84px; background:var(--band); color:var(--band-ink); padding-block:72px; margin-top:24px; position:relative; overflow:hidden}
.contact::before{content:""; position:absolute; left:-15%; top:-50%; width:60%; height:120%; background:radial-gradient(closest-side, rgba(224,162,28,.16), transparent); pointer-events:none}
.contact-in{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:40px; align-items:center; position:relative}
.contact-text{display:grid; gap:18px}
.contact .label{color:var(--band-muted)}
.contact h2{color:var(--band-ink); font-size:clamp(2rem,5vw,3rem)}
.contact h2 em{font-style:normal; color:var(--accent)}
.contact .lead{color:var(--band-muted)}
.cards{display:grid; gap:12px}
.ccard{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:auto auto 1fr; gap:6px 10px; align-items:center}
.val{font-family:var(--font-display); font-size:clamp(1.05rem,3.6vw,1.35rem); font-weight:700; user-select:all; overflow-wrap:anywhere}
.copy{font:inherit; font-size:.95rem; font-weight:700; padding:10px 16px; min-height:44px; border-radius:8px; border:0; background:var(--accent); color:var(--accent-ink); cursor:pointer}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, .frame, .faq summary::after, .menu-btn span i{transition:none}
  .btn:hover, .work:hover .frame{transform:none}
}

/* Čitelnost a dotykové plochy */
.label{font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);font-size:.82rem;}
.lead{color:var(--muted); max-width:58ch;font-size:1.12rem;}
.bar span{margin-left:8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;font-size:.8rem;}
.tag{font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted);font-size:.76rem;}
.intro{font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:3px 8px; border-radius:4px;font-size:.75rem;}
.was, .mcard .was{font-size:.92rem}
.split small{font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);font-size:.74rem;}
.split b{color:var(--ink);font-size:1.02rem;}
.price ul, .mcard ul{font-size:.98rem}
.mcard .desc{color:var(--muted); line-height:1.5;font-size:.98rem;}
.price .fine-p{color:var(--muted); border-top:1px solid var(--line); padding-top:10px;font-size:.92rem; line-height:1.5;}
.mcard .fine, .combo .fine{font-size:.9rem; line-height:1.55}
.combo .save{color:var(--band-muted);font-size:.95rem;}
.info p{color:var(--muted); line-height:1.5;font-size:1rem;}
.ccard small{grid-column:1/-1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--band-muted);font-size:.82rem;}
.steps span{color:var(--muted);font-size:1rem;}
.faq p{color:var(--muted); margin-top:8px; max-width:62ch;font-size:1rem;}
.act{display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.3); color:var(--band-ink); text-decoration:none; font-weight:700; font-size:.95rem}
.act:hover{border-color:var(--accent)}
.more{font-weight:700; color:var(--spruce); text-decoration:none; justify-self:start;display:inline-flex; align-items:center; min-height:44px;}
.faq details{border-bottom:1px solid var(--line);padding-block:6px;}
.faq summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:16px;padding-block:10px; min-height:44px; align-items:center;}
.pill b{background:var(--accent); color:var(--accent-ink); letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px;font-size:.78rem;}
.badge{position:absolute; top:-13px; left:22px; background:var(--accent); color:var(--accent-ink); font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px;font-size:.78rem;}
@media (max-width:420px){ .perk span{font-size:.92rem} }
.ccard small, .ccard .val{grid-column:1/-1}
.ccard .val{overflow-wrap:normal; word-break:normal; font-size:clamp(1.05rem,4.4vw,1.4rem); margin-bottom:6px}
@media (max-width:560px){ .ccard{grid-template-columns:1fr 1fr} }
.ccard .copy, .ccard .act{justify-content:center;white-space:nowrap; text-align:center;}
@media (max-width:400px){ .ccard{grid-template-columns:1fr} }
.files{display:flex; flex-wrap:wrap; gap:10px}
.files span{display:grid; gap:2px; padding:12px 16px; border-radius:12px; background:var(--band); color:var(--band-muted); font-size:.95rem; min-width:0; flex:1 1 220px}
.files b{font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:1.05rem; color:var(--accent)}

/* Prémiové doladění */
/* Co je v ceně, firemní údaje a stránky s podmínkami */
.scope{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px 28px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px}
.scope h3{font-size:1.1rem; margin-bottom:10px; color:var(--ink)}
.scope ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; color:var(--muted)}
.scope li{display:flex; gap:10px; align-items:baseline}
.scope li::before{content:""; flex-shrink:0; width:12px; height:7px; border-left:2px solid var(--accent)}
.scope p{color:var(--muted)}
.scope-foot{grid-column:1/-1; border-top:1px solid var(--line); padding-top:14px}
.scope a, .note a, .legal a, .foot-legal a{font-weight:700; text-decoration:underline; text-underline-offset:3px}
.foot-legal{grid-column:1/-1; display:grid; gap:2px; font-size:.92rem}
.legal-links{display:flex; flex-wrap:wrap; gap:0 20px}
.legal-links a{min-height:40px; display:inline-flex; align-items:center; color:var(--muted)}
.legal-links a:hover{color:var(--ink)}
.doplnit{background:#FFE58A; color:#3A2A00; padding:1px 6px; border-radius:4px; font-weight:700; font-style:normal}
.page-head{display:grid; gap:14px; padding-block:clamp(40px,6vw,64px) 8px}
.page-head h1{font-size:clamp(2.1rem,5.4vw,3.2rem); font-weight:800; letter-spacing:-.02em; color:var(--spruce)}
.toc{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.toc a{display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-weight:600; text-decoration:none}
.toc a:hover{border-color:var(--accent)}
.legal{display:grid; gap:14px; max-width:780px}
.legal h3{font-size:1.15rem; color:var(--ink); margin-top:8px}
.legal p, .legal li, .legal dd{color:var(--muted); line-height:1.65}
.legal ul, .legal ol{margin:0; padding-left:1.25em; display:grid; gap:6px}
.legal strong, .legal dt{color:var(--ink)}
.facts{display:grid; grid-template-columns:max-content 1fr; gap:8px 20px; margin:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.facts dt{font-weight:700}
.facts dd{margin:0; overflow-wrap:anywhere}
.facts dd a{display:inline-block; padding-block:10px; margin-block:-10px}
@media (max-width:520px){ .facts{grid-template-columns:1fr; gap:2px} .facts dd{margin-bottom:10px} }
.cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:12px}
.case{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:grid; gap:8px; align-content:start}
.case b{color:var(--ink)}
.case p{font-size:.97rem}
.skip{position:absolute; left:16px; top:-60px; z-index:50; background:var(--accent); color:var(--accent-ink); font-weight:700; padding:10px 16px; border-radius:8px; text-decoration:none}
.skip:focus{top:12px}
h2{font-size:clamp(1.8rem,4.4vw,2.6rem); font-weight:800; letter-spacing:-.015em; color:var(--spruce);max-width:24ch;}
.head-block .lead{max-width:62ch}
section{scroll-margin-top:84px; display:grid; gap:28px;padding-block:clamp(48px,7vw,80px);}
.price, .mcard, .steps li, .perk{transition:border-color .2s, box-shadow .2s}
.price:hover, .mcard:hover{box-shadow:0 18px 40px -28px rgba(10,30,20,.55)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
footer{color:var(--muted); justify-content:space-between; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:20px 32px; padding-block:40px 32px; border-top:1px solid var(--line); margin-top:8px; font-size:.97rem;}
.foot-brand{display:grid; gap:6px; align-content:start}
.foot-brand b{font-family:var(--font-display); color:var(--spruce); font-size:1.1rem}
.foot-nav, .foot-contact{display:grid; gap:0; align-content:start}
.foot-nav a, .foot-contact a{color:var(--muted); text-decoration:none; min-height:40px; display:inline-flex; align-items:center; overflow-wrap:anywhere}
.foot-nav a:hover, .foot-contact a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.foot-copy{grid-column:1/-1; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); padding-top:16px}
@media (prefers-reduced-motion: reduce){ .price, .mcard, .steps li, .perk{transition:none} }
@media (max-width:520px){
  .perks{grid-template-columns:1fr; gap:10px}
  .perk{grid-template-columns:auto 1fr; column-gap:14px; align-items:start; padding:14px 16px}
  .perk svg{grid-row:span 2; width:26px; height:26px; margin-top:2px}
}
.card-cta{justify-content:center; margin-top:6px; padding:12px 18px; font-size:.98rem}
.price:not(.top) .card-cta, .mcard .card-cta{color:var(--spruce); border-color:color-mix(in srgb, var(--spruce) 45%, transparent)}
.price:not(.top) .card-cta:hover, .mcard .card-cta:hover{border-color:var(--spruce)}
.combo .card-cta{grid-column:1/-1; justify-self:start}
.chosen{background:rgba(255,255,255,.08); border:1px solid var(--accent); border-radius:10px; padding:10px 14px; color:var(--band-ink)}
.chosen b{color:var(--accent)}