/* Šablona STRÁNKY SLUŽBY ArchiBIMO (Tom 14. 11.: „každá služba jako stránka ekosystému, ne samostatný návrh“).
   Pořadí vždy stejné: hlavička → hero (nadpis + heslo + tlačítko, vpravo ukázka) → co nahrajete a co dostanete → 3 kroky →
   cena v kreditech se srovnáním → časté otázky → další služby → patička. Stejná stavba jako úvod, světlý styl z css/ds.css. */
.sl-hero { position: relative; background: var(--deska); color: var(--deska-text); overflow: hidden;
  padding: clamp(40px, 6vw, 96px) max(16px, 4vw) clamp(44px, 6vw, 96px);
  background-image: radial-gradient(60% 45% at 50% 0%, rgba(92,225,230,.18), transparent 70%), radial-gradient(40% 40% at 90% 70%, rgba(27,107,255,.16), transparent 70%), linear-gradient(var(--deska-cara) 1px, transparent 1px), linear-gradient(90deg, var(--deska-cara) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px; }
.sl-hero-in { max-width: var(--sirka); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.sl-modul { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--deska-mut); font-weight: 600; }
.sl-modul span { padding: 7px 14px; border-radius: 999px; background: rgba(92,225,230,.14); color: #5ce1e6; font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.sl-hero h1 { font: 300 clamp(38px, 4.6vw, 96px)/1.03 var(--display); letter-spacing: -.025em; margin: 18px 0 0; }
.sl-hero h1 em, .sl em.g { font-style: normal; font-weight: 800; background: linear-gradient(90deg, #5ce1e6, #1b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-heslo { font: 600 clamp(19px, 1.6vw, 30px)/1.3 var(--display); margin-top: 18px; max-width: 30ch; }
.sl-hero .perex { color: var(--deska-mut); margin-top: 14px; font-size: clamp(16px, 1.1vw, 20px); max-width: 640px; }
.sl-hero .cta { margin-top: 26px; }
.sl-hero .pozn { color: var(--deska-mut); font-size: 14px; margin-top: 14px; }
.sl-okno { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 -10px 90px rgba(92,225,230,.18), 0 40px 120px rgba(0,0,0,.5); }
.sl-okno img { display: block; width: 100%; height: auto; }
.sl-okno figcaption { background: #0f1b3a; color: #dfe7f7; padding: 12px 16px; font-weight: 600; font-size: 15px; }
.sl-okno figcaption b { color: #5ce1e6; }

/* sekce */
.sl-sek { padding: clamp(60px, 7vw, 130px) max(16px, 4vw); }
.sl-sek.svetla { background: #f3f6fb; }
.sl-sek.tmava { background: var(--deska); color: var(--deska-text); }
.sl-sek h2 { font: 300 clamp(30px, 3.6vw, 64px)/1.08 var(--display); letter-spacing: -.02em; }
.sl-sek h2 em { font-style: normal; font-weight: 800; color: var(--zelena, #1b6bff); }
.sl-sek.tmava h2 em { background: linear-gradient(90deg, #5ce1e6, #1b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-sek .uzky { text-align: center; margin-bottom: clamp(30px, 3.5vw, 60px); }
.sl-sek .uzky .perex { margin: 14px auto 0; }

/* co nahrajete → co dostanete */
.sl-pred-po { max-width: var(--sirka); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); gap: clamp(14px, 2vw, 32px); align-items: center; }
.sl-pred-po figure { margin: 0; background: #fff; border: 1px solid #dfe6f2; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(11,21,48,.10); }
.sl-pred-po img { display: block; width: 100%; height: auto; }
.sl-pred-po figcaption { padding: 14px 18px; font-size: 15px; color: var(--mut); }
.sl-pred-po figcaption b { display: block; font: 700 17px/1.3 var(--display); color: var(--ink); margin-bottom: 2px; }
.sl-sipka { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5ce1e6, #1b6bff); color: #fff; font: 800 28px/1 var(--display); box-shadow: 0 10px 30px rgba(27,107,255,.35); }
.sl-pred-po .sl-dve { display: grid; gap: 14px; }

/* 3 kroky */
.sl-kroky { max-width: var(--sirka); margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); counter-reset: k; }
.sl-kroky li { counter-increment: k; position: relative; padding: clamp(24px, 2.4vw, 40px); padding-top: clamp(64px, 5vw, 84px); border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.sl-kroky li::before { content: counter(k); position: absolute; top: clamp(20px, 2vw, 32px); left: clamp(24px, 2.4vw, 40px); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5ce1e6, #1b6bff); color: #06122e; font: 800 18px/1 var(--display); }
.sl-kroky b { display: block; font: 700 clamp(19px, 1.4vw, 26px)/1.25 var(--display); color: var(--sl-nadpis, #fff); }
.sl-kroky span { display: block; margin-top: 8px; color: var(--deska-mut); }

/* cena */
.sl-cena { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; overflow: hidden; border: 1px solid #dfe6f2; box-shadow: 0 30px 80px rgba(11,21,48,.12); }
.sl-cena > div { padding: clamp(26px, 3vw, 48px); }
.sl-cena-bezne { background: #fff; }
.sl-cena-tady { background: linear-gradient(160deg, #0b1530, #13265a); color: #fff; }
.sl-cena small { display: block; font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.sl-cena-tady small { color: #5ce1e6; }
.sl-cena s { display: block; margin-top: 12px; font: 700 clamp(22px, 2vw, 32px)/1.15 var(--display); color: var(--mut); text-decoration: none; } /* běžná cena neutrálně šedě, bez červeného škrtání (Tom 14. 11.) */
.sl-cena strong { display: block; margin-top: 12px; font: 800 clamp(30px, 3.2vw, 56px)/1.05 var(--display); background: linear-gradient(90deg, #5ce1e6, #8fb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-cena p { margin-top: 12px; color: var(--mut); } .sl-cena-tady p { color: #c6d3ef; }
.sl-cena .btn { margin-top: 20px; }
.sl-kredity-pozn { text-align: center; margin-top: 20px; color: var(--mut); }
.sl-kredity-pozn button { border: 0; background: none; color: var(--zelena, #1b6bff); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }

/* časté otázky */
.sl-faq { max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.sl-faq details { background: #fff; border: 1px solid #dfe6f2; border-radius: 16px; padding: 18px 22px; }
.sl-faq summary { cursor: pointer; font: 700 clamp(17px, 1.2vw, 20px)/1.35 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sl-faq summary::after { content: "+"; color: var(--zelena, #1b6bff); font-weight: 800; } .sl-faq details[open] summary::after { content: "–"; }
.sl-faq p { margin-top: 10px; color: var(--mut); }

/* další služby ekosystému */
.sl-dalsi { max-width: var(--sirka); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1280px) { .sl-dalsi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-dalsi a { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.sl-dalsi a:hover { transform: translateY(-3px); border-color: #5ce1e6; }
.sl-dalsi small { font: 700 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #5ce1e6; }
.sl-dalsi b { font: 700 19px/1.25 var(--display); color: var(--sl-nadpis, #fff); }
.sl-dalsi span { color: var(--deska-mut); font-size: 14px; }

@media (max-width: 1000px) {
  .sl-hero-in { grid-template-columns: 1fr; } .sl-hero h1 { font-size: clamp(38px, 9vw, 64px); }
  .sl-pred-po { grid-template-columns: 1fr; } .sl-sipka { justify-self: center; transform: rotate(90deg); }
  .sl-kroky { grid-template-columns: 1fr; } .sl-dalsi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) { .sl-cena { grid-template-columns: 1fr; } .sl-dalsi { grid-template-columns: 1fr; } .sl-hero .cta .btn { flex: 1 1 100%; } }

/* volné termíny (konzultace) */
.sl-terminy { background: #fff; color: var(--ink); padding: clamp(18px, 2vw, 28px); }
.sl-terminy h3 { font: 700 20px/1.2 var(--display); } .sl-terminy > p { color: var(--mut); font-size: 14px; margin: 4px 0 14px; }
.sl-terminy [data-terminy] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sl-den { border: 1px solid #dfe6f2; border-radius: 14px; padding: 12px; } .sl-den b { display: block; font-size: 14px; margin-bottom: 8px; text-transform: capitalize; }
.sl-den span { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-den a { padding: 7px 11px; border-radius: 10px; background: #eef4ff; color: #1b4fd1; font-weight: 700; text-decoration: none; font-size: 14px; } .sl-den a:hover { background: #1b6bff; color: #fff; }
.sl-term-nic { grid-column: 1 / -1; color: var(--mut); }
.sl-nahrat { display: grid; place-items: center; text-align: center; gap: 8px; min-height: 260px; margin: 18px; border: 2px dashed #b9c8e6; border-radius: 16px; background: #f6f9ff; color: var(--ink); padding: 24px; }
.sl-nahrat i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #1b6bff; color: #fff; font: 800 26px/1 var(--display); font-style: normal; }
.sl-nahrat b { font: 700 18px/1.3 var(--display); } .sl-nahrat small { color: var(--mut); }

/* Moje dispozice (body.sl.md) i ArchiBIMO: barvy, písmo a světlý styl dává design systém css/ds.css (html[data-ds], data-znacka). */