/* =====================================================================
   pages/sluzby.css  /sluzby/ index + 4 service details (zf /services + service template)
   Page-local on top of zf.css. Values: zf (03-services.md) unless noted "spec 8.1".
   ===================================================================== */

/* section rhythm: zf py_60 / 40 <=991 / 24 <=575 */
.ss { padding: 60px 0; position: relative; }
.ss--first { padding-top: 24px; }
@media (max-width: 991px) { .ss { padding: 40px 0; } }
@media (max-width: 575px) { .ss { padding: 24px 0; } }

/* HERO (owner rework 2026-11-04): big headline, lead + two buttons below, dot field on the free right side */
.svh { position: relative; padding: 56px 0 64px; border-bottom: 1px solid var(--line); background: var(--bg); overflow: clip; }
.svh::after { content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 42%; pointer-events: none;
  background: radial-gradient(circle, rgba(173, 150, 241, .55) 1.2px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(70% 70% at 85% 45%, #000 10%, transparent 75%); mask: radial-gradient(70% 70% at 85% 45%, #000 10%, transparent 75%); }
.svh > .container { position: relative; z-index: 1; }
.svh__row { margin-top: 48px; }
.svh__l { max-width: 900px; min-width: 0; }
.svh__h { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.svh__p { max-width: 600px; margin-top: 24px; font-size: 18px; line-height: 28px; color: var(--text-2); }
.svh__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 991px) { .svh { padding: 24px 0 40px; } .svh::after { width: 60%; opacity: .6; } .svh__row { margin-top: 32px; } }
@media (max-width: 575px) {
  .svh::after { display: none; }
  .svh__row { margin-top: 24px; }
  .svh__h { font-size: 40px; line-height: 44px; letter-spacing: -0.8px; }
  .svh__p { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .svh__cta { margin-top: 24px; }
  .svh__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* STICKY SUB-NAV (zf 4.2, spec 8.1: top under our solid header) ------------- */
.svc-body { position: relative; }
.snav { position: sticky; top: var(--header-h); z-index: 5; padding: 24px 0 8px; background: var(--bg); }
.snav .container { position: relative; }
.snav__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.snav__list::-webkit-scrollbar { display: none; }
.snav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: var(--r-tag); font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; color: var(--muted); transition: color var(--dur-2), background-color var(--dur-2); }
.snav__link:hover, .snav__link.is-active { color: var(--accent); background: var(--accent-wash); }
.snav__toggle { display: none; }
@media (max-width: 575px) {
  .snav { padding: 8px 0; }
  .snav__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 10px; font-size: 16px; line-height: 20px; font-weight: 500; text-align: left; }
  .snav__toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms ease; }
  .snav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .snav__list { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); flex-direction: column; gap: 2px; padding: 8px; overflow: visible; background: var(--card); border: 1px solid var(--muted); border-top: 0; border-radius: 0 0 10px 10px; }
  .snav--open .snav__list { display: flex; }
  .snav__link { padding: 12px 14px; }
}
.svc-body section[id] { scroll-margin-top: calc(var(--header-h) + 76px); }   /* only under the sticky sub-nav; elsewhere html scroll-padding */
@media (max-width: 575px) { .svc-body section[id] { scroll-margin-top: calc(var(--header-h) + 64px); } }

/* SECTION HEAD (eyebrow + H2 left, text right; zf who-we-help header) ------- */
.shead { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; margin-bottom: 48px; }
.shead__l { max-width: 520px; min-width: 0; }
.shead__h { margin-top: 16px; font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -0.72px; text-wrap: balance; }
.shead__p { max-width: 630px; padding-top: 6px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.band--paper .shead__p { color: var(--ink-2); }
.band--paper .shead__h { color: var(--ink); }
@media (max-width: 991px) { .shead { flex-direction: column; gap: 16px; } .shead__p { padding-top: 0; } }
@media (max-width: 575px) { .shead { margin-bottom: 24px; } .shead__h { line-height: 40px; } }

/* hairline grids: 4 cols down to 2 at <=1200 (zf), 1 col at 575 (zf.css) ---- */
@media (min-width: 576px) and (max-width: 1200px) { .hgrid--4 { grid-template-columns: repeat(2, 1fr); } }
/* audience cells (zf: no icon, title + text at the bottom, gap 126 / 40) */
.hgrid--aud .hcell__t { font-weight: 600; }
.hcell--cta .btn--dark:hover { background: #fff; }

/* SIGNS SLAB (zf 4.4, spec 8.1) ---------------------------------------------- */
/* zf #the-gap sits inside #who-we-are, under the audience grid (mb_60) */
.hgrid--aud + .slab { margin-top: 60px; }
.slab { display: grid; grid-template-columns: minmax(100px, 508px) 1fr; gap: 48px; padding: 60px 32px; border-radius: var(--r-media); background: #fff; color: var(--ink); }
.slab__img { align-self: stretch; min-height: 320px; border-radius: 8px; overflow: hidden; background: #0B0A12; }
.slab__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* wide chat screenshot (800x392): box takes its ratio so no text is cropped */
.slab__img:has(img[src*="demo-ai"]) { align-self: center; min-height: 0; height: auto; aspect-ratio: 800 / 392; }
.slab__img img[src*="demo-ai"] { object-fit: contain; }
.slab__h { font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -0.72px; color: var(--ink); text-wrap: balance; }
.slab__sub { margin: 16px 0 12px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.slab__list { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; margin-bottom: 24px; }
.slab__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 24px; color: var(--ink); }
.slab__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
@media (max-width: 991px) { .slab { grid-template-columns: 1fr; padding: 32px; } .slab__img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 575px) { .slab { padding: 24px 16px; gap: 24px; } .slab__img { aspect-ratio: auto; height: 229px; } .slab__h { line-height: 36px; } }

/* PROCESS (zf 4.6: 3 steps + dark image cell on paper) ---------------------- */
.pcell { --cell-gap: 40px; }
.pcell__b { max-width: 330px; }
.pcell .hcell__t { color: var(--ink); }
.pbul { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pbul li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.pbul svg { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hgrid--paper .hcell.pcta { padding: 0; gap: 0; background: #0B0909; color: #fff; }
.pcta__img { width: 100%; height: 193px; object-fit: cover; object-position: top left; }
.pcta__b { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; padding: 20px; background: #09090B; }
.pcta__t { font-size: 20px; line-height: 24px; font-weight: 500; }
.pcta__p { font-size: 16px; line-height: 24px; color: #E4E4E7; }
.pcta .btn { margin-top: auto; }
@media (max-width: 575px) { .pcell { --cell-gap: 24px; } }

/* DEMO (stands in for zf tools block) ---------------------------------------- */
.demo { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 64px; align-items: center; }
.demo__p { margin: 16px 0 32px; max-width: 460px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.demo__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.demo__m { min-width: 0; }
.demo__stage { width: 100%; }
.demo__shot { border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--card); padding: 16px; }
.demo__shot img { width: 100%; height: auto; border-radius: var(--r-media); }
@media (max-width: 991px) { .demo { grid-template-columns: 1fr; gap: 32px; } }

/* RELATED PROJECTS ---------------------------------------------------------- */
.band--surface .shead__h { color: #fff; }
.work-grid--2 { grid-template-columns: repeat(2, 1fr); }
.work-tile { min-height: 220px; }
.rel__all { margin-top: 32px; }
@media (max-width: 991px) { .work-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .work-grid--2 { grid-template-columns: 1fr; } }

/* FAQ paper variant (zf 4.10, spec 2.8) --------------------------------------- */
.faq--paper { display: block; }
.faq--paper .faq__list { display: block; border: 1px solid var(--paper-line); border-radius: var(--r-grid); background: #fff; overflow: hidden; }
.faq--paper .faq__item { border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--paper-line); }
.faq--paper .faq__item:last-child { border-bottom: 0; }
.faq--paper .faq__q { min-height: 64px; padding: 24px; gap: 16px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); }
.faq--paper .faq__icon { width: 28px; height: 28px; border-radius: 8px; border-color: var(--paper-line); background: var(--paper); }
.faq--paper .faq__icon::before, .faq--paper .faq__icon::after { background: var(--ink); }
.faq--paper .faq__item.is-open .faq__icon { background: var(--accent-ink); border-color: var(--accent-ink); }
.faq--paper .faq__item.is-open .faq__icon::before { background: #fff; }
.faq--paper .faq__a p { max-width: 665px; padding: 0 24px 24px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
@media (max-width: 575px) { .faq--paper .faq__q { padding: 20px 16px; } .faq--paper .faq__a p { padding: 0 16px 20px; } }

/* INDEX: sticky-left group + 2-col cards (zf 3.2) ---------------------------- */
.grp { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 775px); gap: 48px; align-items: start; }
.grp__l { position: sticky; top: calc(var(--header-h) + 44px); }
.grp__h { font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -0.72px; }
.grp__p { padding: 12px 0 32px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.grp__img { border-radius: var(--r-media); overflow: hidden; }
.grp__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }   /* photoreal mockup card */
.grp__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.acard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 237px; padding: 24px; border-radius: var(--r-media); background: var(--card); border-top: .6px solid var(--line); border-left: .6px solid var(--line); }
.acard::before { content: ""; position: absolute; width: 500px; height: 500px; top: -300px; left: -250px; border-radius: 50%; filter: blur(50px); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) ease;
  background: radial-gradient(circle, rgba(88, 246, 177, .22) 0, rgba(88, 246, 177, .10) 30%, rgba(88, 246, 177, .04) 60%, transparent 75%); }
.acard > * { position: relative; }
.acard .hcell__icon { align-self: flex-start; }
.acard__t { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 600; }
.acard__p { font-size: 16px; line-height: 24px; color: var(--text-2); }
.acard__a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 16px; line-height: 24px; color: #F5F4F4; text-decoration: underline; text-underline-offset: 3px; }
.acard__a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acard--cta { background: var(--accent-2); border-color: var(--accent-2); color: #010102; }
.acard--cta::before { display: none; }
.acard--cta .acard__p { color: #010102; }
.acard--cta .acard__a { color: #010102; }
.acard--cta .hcell__icon { background: #010102; border-color: #010102; color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .acard:hover::before { opacity: 1; } }
@media (max-width: 991px) { .grp { grid-template-columns: 1fr; } .grp__l { position: static; } .grp__img { display: none; } .grp__p { padding-bottom: 8px; } }
@media (max-width: 575px) { .grp__cards { grid-template-columns: 1fr; } .grp__h { line-height: 40px; } .acard { min-height: 0; } }

@media (prefers-reduced-motion: reduce) { .snav__toggle svg { transition: none; } }

/* QA 2026-11-04: zf /services + /services/web-design at 390 render H2 24/32, glass title 16/24, card H3 16/24 */
@media (max-width: 575px) {
  .shead__h, .slab__h, .grp__h { font-size: 24px; line-height: 32px; }
  .acard__t, .hgrid--aud .hcell__t { font-size: 16px; line-height: 24px; }
}

/* zf /services index: hero padding-bottom 26, first group keeps its 60 top */
@media (min-width: 992px) { .svh--index { padding-bottom: 26px; } }
/* zf #faq on the service template is py_80 (24 phone) */
#otazky.ss { padding: 80px 0; }
@media (max-width: 991px) { #otazky.ss { padding: 40px 0; } }
@media (max-width: 575px) { #otazky.ss { padding: 24px 0; } }
/* zf service template buttons: 16/24 w500, padding 8 16 (hero card primary 5 16); min-height 44 kept (owner bar) */
.svh .btn, .ss .btn:not(.btn--soft) { font-size: 16px; line-height: 24px; font-weight: 500; padding: 8px 16px; }
.svh .btn--primary { padding: 5px 16px; }