/* ============================================================
   web.css — MODRÝ theme + light/dark přepínač (override nad shared.css)
   Načítat PO shared.css. Dark = default. Light = [data-theme="light"].
   ============================================================ */

/* ---------- DARK (modrá) — výchozí ---------- */
:root{ --bg:#04060f; --lilac:#7fb2ff; --violet2:#5b9dff; }
body{ background:var(--bg); transition:background-color .55s ease,color .55s ease }
.glass,.btn-ghost,.pill,.nav-pill,.field,.nav,.nav-pill a,.price-card,.work-card,.step,.path,details.q,.contact-form,.brand-mark,h1,h2,h3,.lead,.faint,.muted,.eyebrow{
  transition:background-color .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease }

/* modré blury (světlejší) */
.light-glow{background:radial-gradient(circle,rgba(60,130,255,.17),rgba(120,170,255,.07) 42%,transparent 70%)}
.blob1{background:radial-gradient(circle,rgba(60,130,255,.6),transparent 64%)}
.blob2{background:radial-gradient(circle,rgba(120,170,255,.5),transparent 64%)}
.blob3{background:radial-gradient(circle,rgba(59,130,246,.56),transparent 64%)}
.blob4{background:radial-gradient(circle,rgba(96,165,250,.5),transparent 64%)}
.blob5{background:radial-gradient(circle,rgba(140,180,255,.44),transparent 66%)}

/* barevná tlačítka -> modrá + MULTI-SMĚROVÁ animace (ne jen tam-zpět) */
.grad-primary,.grad-blue{
  background:
    radial-gradient(120% 160% at 14% -8%,#62a6ff 0%,rgba(98,166,255,0) 42%),
    radial-gradient(130% 180% at 100% 112%,#2f7af0 0%,rgba(47,122,240,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#173bbf 0%,rgba(23,59,191,0) 54%),
    linear-gradient(135deg,#173fc4,#2f7af0);
  background-size:200% 200%,200% 200%,200% 200%,100% 100%;
  animation:meshFlow 2.8s ease-in-out infinite;
  color:#fff;
}
.nav-cta::before{
  background:
    radial-gradient(120% 160% at 14% -8%,#62a6ff 0%,rgba(98,166,255,0) 42%),
    radial-gradient(130% 180% at 100% 112%,#2f7af0 0%,rgba(47,122,240,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#173bbf 0%,rgba(23,59,191,0) 54%),
    linear-gradient(135deg,#173fc4,#2f7af0);
  background-size:200% 200%,200% 200%,200% 200%,100% 100%;
  animation:meshFlow 2.8s ease-in-out infinite;
}
@keyframes meshFlow{
  0%{background-position:0% 18%,100% 82%,40% 100%,0 0}
  25%{background-position:82% 0%,18% 100%,100% 46%,0 0}
  50%{background-position:100% 72%,0% 28%,58% 0%,0 0}
  75%{background-position:28% 100%,72% 0%,0% 58%,0 0}
  100%{background-position:0% 18%,100% 82%,40% 100%,0 0}
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"]{
  --bg:#f2f6ff; --ink:#13182b; --muted:rgba(19,24,43,.62); --faint:rgba(19,24,43,.45);
  --line:rgba(40,65,120,.10); --line2:rgba(40,65,120,.14); --lilac:#1d4ed8; --violet2:#1d4ed8;
}
[data-theme="light"] body{background:#f2f6ff}

/* světlé pozadí blury (světle modré pastely) */
[data-theme="light"] .base-glow{background:
  radial-gradient(85% 60% at 50% -8%,rgba(120,160,255,.18),transparent 62%),
  radial-gradient(70% 55% at 82% 108%,rgba(90,140,255,.14),transparent 66%),
  radial-gradient(70% 55% at 14% 96%,rgba(140,170,255,.12),transparent 66%)}
[data-theme="light"] .blob1{background:radial-gradient(circle,rgba(47,107,255,.17),transparent 64%)}
[data-theme="light"] .blob2{background:radial-gradient(circle,rgba(96,165,250,.14),transparent 64%)}
[data-theme="light"] .blob3{background:radial-gradient(circle,rgba(59,130,246,.15),transparent 64%)}
[data-theme="light"] .blob4{background:radial-gradient(circle,rgba(120,150,250,.13),transparent 64%)}
[data-theme="light"] .blob5{background:radial-gradient(circle,rgba(80,130,255,.12),transparent 66%)}
[data-theme="light"] .bg-blobs{opacity:.9}
[data-theme="light"] .dots-bg{background-image:radial-gradient(circle at center,rgba(40,70,140,.09) calc(var(--dot-r)*1px),transparent calc(var(--dot-r)*1px + .8px))}
[data-theme="light"] .dots-hover{background-image:radial-gradient(circle at center,rgba(40,70,140,.16) 1px,transparent 1.8px)}
[data-theme="light"] .light-glow{background:radial-gradient(circle,rgba(47,107,255,.14),rgba(96,165,250,.06) 42%,transparent 70%)}

/* správně BÍLÉ kontejnery + modrý liquid-glass odraz */
[data-theme="light"] .glass{
  background:rgba(255,255,255,.7);border-color:rgba(40,65,120,.10);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 12px rgba(30,55,110,.07),0 18px 46px rgba(40,70,150,.15)}
[data-theme="light"] .glass::before{background:radial-gradient(230px circle at var(--lx,50%) var(--ly,0%),rgba(47,107,255,.18),transparent 70%)}
[data-theme="light"] .glass::after,[data-theme="light"] .pill::after,[data-theme="light"] .nav-pill::after,[data-theme="light"] .btn-ghost::after{
  background:conic-gradient(from var(--la,0deg),
    rgba(47,107,255,.34),rgba(47,107,255,.05) 60deg,rgba(47,107,255,.02) 180deg,rgba(47,107,255,.05) 300deg,rgba(47,107,255,.34) 360deg)}
[data-theme="light"] .pill,[data-theme="light"] .nav-pill{
  background:rgba(255,255,255,.62);border-color:rgba(40,65,120,.10);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);color:var(--ink)}
[data-theme="light"] .nav-pill a{color:rgba(19,24,43,.58)}
[data-theme="light"] .nav-pill a:hover,[data-theme="light"] .nav-pill a.active{color:var(--ink)}
[data-theme="light"] .nav-indicator{background:rgba(40,65,120,.10);border-color:rgba(40,65,120,.14)}

/* bílá ghost tlačítka místo šedých */
[data-theme="light"] .btn-ghost{color:var(--ink);background:rgba(255,255,255,.66);border:1px solid rgba(40,65,120,.13);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-theme="light"] .btn-ghost:hover{background:rgba(255,255,255,.86)}

/* nav ztmavení -> v light prosvětlení */
[data-theme="light"] .nav{background:rgba(255,255,255,calc(var(--nav-a)*.72));border-bottom-color:rgba(40,65,120,calc(var(--nav-a)*.12))}
[data-theme="light"] .brand-mark{background:rgba(40,65,120,.06);border-color:rgba(40,65,120,.14);color:var(--ink)}
[data-theme="light"] .field{background:rgba(255,255,255,.6);border-color:rgba(40,65,120,.16);color:var(--ink)}
[data-theme="light"] .field::placeholder{color:rgba(19,24,43,.42)}
[data-theme="light"] .chip{color:#1d4ed8;background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.28)}

/* bílý LIFT halo za textem mimo kontejnery (aby nesplýval se světlým pozadím) */
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] .lead,[data-theme="light"] .eyebrow,[data-theme="light"] .price-note{
  text-shadow:none}

/* ---------- THEME TOGGLE ---------- */
.theme-toggle{position:relative;width:58px;height:32px;border-radius:999px;border:1px solid var(--line2);cursor:pointer;
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0;flex-shrink:0;
  transition:background .4s ease,border-color .4s ease}
.theme-toggle .tt-knob{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:#0c1020;font-size:15px;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
[data-theme="light"] .theme-toggle{background:rgba(40,65,120,.10)}
[data-theme="light"] .theme-toggle .tt-knob{transform:translateX(26px)}
.tt-knob .ph-sun{display:none}
[data-theme="light"] .tt-knob .ph-moon-stars{display:none}
[data-theme="light"] .tt-knob .ph-sun{display:block}

/* ===== HEADER = liquid glass (matné sklo, blur za sebou) ===== */
.nav{-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}

/* nav CTA text čitelný v obou stavech (tmavý ghost -> bílý když zmodrá) */
.nav-cta{color:color-mix(in srgb,#fff calc(var(--cta-on,0)*100%),var(--ink))}
[data-theme="light"] .nav-cta{
  background:rgba(255,255,255,calc(.55*(1 - var(--cta-on,0))));
  border-color:rgba(40,65,120,calc(.16*(1 - var(--cta-on,0))))}
/* jemnější okraj barevných tlačítek ve světlém (žádný ošklivý bílý outline) */
[data-theme="light"] .btn-primary::after,[data-theme="light"] .nav-cta::after{
  opacity:calc(var(--edge-i,1)*.4);
  background:conic-gradient(from var(--la,0deg),rgba(255,255,255,.5),rgba(255,255,255,.05) 60deg,transparent 180deg,rgba(255,255,255,.05) 300deg,rgba(255,255,255,.5) 360deg)}

/* ===== "draze" = animovaný měňavý gradient + Velvet Lift rotace slov ===== */
/* baseline-zarovnaná rotace: AKTIVNÍ slovo je v normálním toku (sedí na účaří),
   ostatní absolutní + 3D flip nahoru (otočí se, seknutí + zamlžení) */
.word-rot{display:inline-block;position:relative;z-index:2;vertical-align:baseline;overflow:visible;white-space:nowrap;perspective:680px}
.wc-word{position:absolute;left:0;top:0;display:inline-block;white-space:nowrap;will-change:transform,opacity,filter;
  transform-origin:50% 78%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(112deg,#3b82f6,#5e96ee 32%,#3b82f6 58%,#6a9ef0 82%,#3b82f6);
  background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:textFlow 9s ease-in-out infinite;
  opacity:0;transform:rotateX(60deg) translate3d(0,26%,0);filter:blur(7px);
  transition:opacity .48s ease,transform .66s cubic-bezier(.2,.85,.24,1),filter .48s ease}
.wc-word.is-active{position:relative;left:auto;top:auto;opacity:1;transform:rotateX(0deg) translate3d(0,0,0);filter:none}
.wc-word.is-exit{opacity:0;transform:rotateX(-52deg) translate3d(0,-22%,0);filter:blur(7px)}
[data-theme="light"] .wc-word{background:linear-gradient(112deg,#1d4ed8,#3463de 32%,#1d4ed8 58%,#3a6ae2 82%,#1d4ed8);background-size:300% 300%;-webkit-background-clip:text;background-clip:text}
@keyframes textFlow{0%{background-position:0% 0%}25%{background-position:100% 28%}50%{background-position:55% 100%}75%{background-position:18% 55%}100%{background-position:0% 0%}}

/* ===== LOGO Ukažme (light/dark přepínání) ===== */
.brand-mark{overflow:hidden;width:30px;height:30px}
.brand-mark img{width:18px;height:18px;object-fit:contain;display:block}
.brand-word{display:inline-flex;align-items:center}
.brand-word img{height:22px;width:auto;display:block}
.brand .mk-light,.brand .lg-light{display:none}
.brand .mk-dark,.brand .lg-dark{display:block}
[data-theme="light"] .brand .mk-dark,[data-theme="light"] .brand .lg-dark{display:none}
[data-theme="light"] .brand .mk-light,[data-theme="light"] .brand .lg-light{display:block}
@media (prefers-reduced-motion:reduce){.wc-word{animation:none}.wc-word.is-active,.wc-word{transition:none}}

/* FORCE brand rozměry (SVG bez intrinsic width + flex kolaps) */
.brand{flex-wrap:nowrap;white-space:nowrap}
.brand-mark{flex:0 0 30px!important;width:30px!important;height:30px!important}
.brand-mark img{flex:0 0 auto;width:18px!important;height:18px!important;max-width:none}
.brand-word{flex:0 0 auto}
.brand-word img{height:22px!important;width:auto!important;aspect-ratio:846 / 169!important;max-width:none;flex:0 0 auto}

/* ===== descender FIX #2: transform/will-change vytvářely clip-vrstvu ===== */
.wc-word{will-change:auto}
.wc-word.is-active{transform:none}

/* ===== header hover: theme toggle ===== */
.theme-toggle{transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.theme-toggle:hover{background:rgba(255,255,255,.14);box-shadow:0 0 0 4px rgba(110,160,255,.14),0 6px 18px rgba(0,0,0,.28);transform:translateY(-1px)}
[data-theme="light"] .theme-toggle:hover{background:rgba(40,65,120,.12);box-shadow:0 0 0 4px rgba(47,107,255,.12),0 6px 18px rgba(40,60,120,.12)}
.tt-knob i{transition:transform .4s var(--ease)}
.theme-toggle:hover .tt-knob i{transform:scale(1.18) rotate(-14deg)}

/* ===== header hover: "Chci web" -> ukáže modrou + lift (i když je už modrá) ===== */
.nav-cta{transition:transform .3s var(--ease),filter .3s var(--ease),box-shadow .35s var(--ease),background .4s var(--ease),border-color .4s var(--ease),color .3s var(--ease)}
.nav-cta:hover{transform:translateY(-2px);color:#fff;background:transparent;border-color:transparent;box-shadow:0 10px 28px rgba(47,107,255,.42),inset 0 1px 0 rgba(255,255,255,.25)}
.nav-cta:hover::before{opacity:1}

/* ===== descender FIX #3 (SKUTEČNÁ příčina): background-clip:text maluje jen ve svém
   boxu -> descender (p,f,y,g,j) přečuhuje pod box a nemá gradientovou výplň = useklý.
   Rozšíř malovací box nahoru i dolů paddingem, kompenzuj marginem (zarovnání beze změny). ===== */
.wc-word{padding:.2em 0 .42em!important;margin:-.2em 0 -.42em!important}

/* ===== descender FIX #4: italika přetéká i DOLEVA/doprava -> malovací box i horizontálně ===== */
.wc-word{padding:.22em .24em .46em .24em!important;margin:-.22em -.24em -.46em -.24em!important}

/* ===== HERO showcase: živá Soláry Hanák v browseru (užší, oseknuté strany) ===== */
.hero-browser{display:flex;flex-direction:column}
.hero-browser .browser-bar{flex-shrink:0;align-items:center}
.hb-url{margin-left:8px;font-size:11px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);padding:4px 11px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.hb-url i{color:#36d07a;font-size:12px}
.hero-screen{position:relative;flex:1;overflow:hidden;background:#0a1020}
.hero-screen iframe{position:absolute;top:0;left:0;width:260%;height:260%;transform:scale(.3846);transform-origin:0 0;border:0;pointer-events:none;background:#0a1020}

/* ============ hero showcase ladění v3.1 ============ */
/* +4 % větší kontejner (bez transform kvůli reveal:none konfliktu) */
.hero-grid{grid-template-columns:1.12fr .9fr!important}
.hero-visual{height:452px!important}
/* plovoucí karty: míň průsvitné -> text čitelný i nad bílým iframem */
.hero-visual .float{background:linear-gradient(162deg,rgba(13,21,44,.9),rgba(8,13,30,.87))!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 14px 38px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.12)}
/* URL bar jako reálná adresní lišta: 1 řádek, vycentrovaný */
.hero-browser .browser-bar{align-items:center;gap:8px;padding:11px 15px}
.hb-url{white-space:nowrap!important;flex:1 1 auto;justify-content:center;margin-left:6px;font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
/* iframe: −50 % gutter -> render ~1200px (= max-width containeru, nad 980px breakpointem) */
.hero-screen iframe{width:246%!important;height:246%!important;transform:scale(.4065)!important}

/* ============ hero showcase ladění v3.2 ============ */
/* čistý header browseru: pryč zelený zámek + URL text + šedá elipsa */
.hero-browser .hb-url{display:none!important}
/* "f" v italice (Playfair) je svisle delší než "p" -> ještě větší malovací box */
.wc-word{padding:.42em .28em .74em .28em!important;margin:-.42em -.28em -.74em -.28em!important}

/* ============ hero showcase ladění v3.3 ============ */
/* OPRAVA čitelnosti: plovoucí karty BÍLÉ + tmavý text -> čitelné v light I dark (nad proměnlivým pozadím) */
.hero-visual .float{background:rgba(255,255,255,.97)!important;border:1px solid rgba(15,30,60,.1)!important;box-shadow:0 18px 42px rgba(8,18,45,.32),0 2px 6px rgba(8,18,45,.12)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-visual .float,.hero-visual .float div{color:#0e1626!important;text-shadow:none!important}
.hero-visual .float .fl-eyebrow{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2f6bff!important}
.hero-visual .float .fl-eyebrow i{font-size:13px}
.hero-visual .float .fl-title{font-family:"Inter Tight";font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:1.2;margin-top:6px}
/* hover na kontejneru -> výzva "Zobrazit naši práci" (kontejner se NEhýbe, jen text fade+lift) */
.hero-browser{cursor:pointer}
.hero-cta-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:28px;opacity:0;transition:opacity .45s var(--ease);background:linear-gradient(to top,rgba(4,8,20,.66),rgba(4,8,20,.12) 40%,transparent 62%);pointer-events:none;z-index:6}
.hero-browser:hover .hero-cta-overlay{opacity:1}
.hero-cta-pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;background:rgba(18,28,58,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.24);padding:10px 18px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.4);transform:translateY(10px);transition:transform .45s var(--ease)}
.hero-browser:hover .hero-cta-pill{transform:translateY(0)}

/* ============ hero showcase ladění v3.4 ============ */
/* karty THEME-AWARE: tmavý glass+bílý text v DARK, bílé+tmavý text v LIGHT */
.hero-visual .float{background:linear-gradient(162deg,rgba(13,21,44,.92),rgba(8,13,30,.9))!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)!important}
.hero-visual .float,.hero-visual .float div{color:#fff!important}
.hero-visual .float .fl-eyebrow{color:#8fb4ff!important}
[data-theme="light"] .hero-visual .float{background:rgba(255,255,255,.97)!important;border:1px solid rgba(15,30,60,.1)!important;box-shadow:0 18px 42px rgba(8,18,45,.3),0 2px 6px rgba(8,18,45,.12)!important}
[data-theme="light"] .hero-visual .float,[data-theme="light"] .hero-visual .float div{color:#0e1626!important}
[data-theme="light"] .hero-visual .float .fl-eyebrow{color:#2f6bff!important}
/* hvězda vyplněná JEN v light módu */
.hero-visual .float .st-fill{display:none}
[data-theme="light"] .hero-visual .float .st-out{display:none}
[data-theme="light"] .hero-visual .float .st-fill{display:inline-block}
/* CTA "Zobrazit naši práci" POD mockem (nepřekrývá karty), míň kulatý, fade na hover; dark glass / light modrý */
.hero-visual{cursor:pointer}
.hero-cta-pill{position:absolute!important;left:50%;bottom:-16px;transform:translate(-50%,8px);opacity:0;pointer-events:none;z-index:7;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:13px;white-space:nowrap;transition:opacity .4s var(--ease),transform .4s var(--ease);background:rgba(18,28,58,.88);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-theme="light"] .hero-cta-pill{background:linear-gradient(120deg,#2f6bff,#1c4fd6);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 12px 30px rgba(47,107,255,.4)}
.hero-visual:hover .hero-cta-pill{opacity:1;transform:translate(-50%,0);pointer-events:auto}

/* ============ hero showcase ladění v3.5 ============ */
/* hvězda: stejný SVG, jen fill se přepíná podle módu (dark=outline, light=vyplněná stejnou barvou) */
.hero-visual .float .hv-star{flex:0 0 auto}
.hero-visual .float .hv-star path{fill:none;stroke:#fbbf24;stroke-width:1.8;stroke-linejoin:round}
[data-theme="light"] .hero-visual .float .hv-star path{fill:#fbbf24;stroke:#fbbf24}
/* CTA = STEJNÝ design jako karta "Hotovo za 8 dní" (radius/font/glass), bez hvězdy.
   Pod mockem s bufferem, objeví se shora dolů. Dark=tmavý glass, Light=modrý. */
.hero-cta-pill{position:absolute!important;left:50%!important;top:100%!important;bottom:auto!important;margin-top:12px!important;transform:translate(-50%,-12px)!important;opacity:0;pointer-events:none;z-index:7;display:inline-flex;align-items:center;gap:8px;font-size:13px!important;font-weight:600;padding:16px 20px!important;border-radius:18px!important;white-space:nowrap;transition:opacity .42s var(--ease),transform .42s var(--ease)!important;background:linear-gradient(162deg,rgba(13,21,44,.92),rgba(8,13,30,.9))!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-theme="light"] .hero-cta-pill{background:linear-gradient(120deg,#2f6bff,#1c4fd6)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 16px 40px rgba(47,107,255,.4)!important}
.hero-visual:hover .hero-cta-pill{opacity:1!important;transform:translate(-50%,0)!important;pointer-events:auto}

/* ============ v3.6: violet->modrá, hover lift všude, CTA 3s, footer, legal ============ */
/* .chip "nejčastější" mělo v DARK fialové pozadí (rgba(124,58,247) napevno) -> modrá */
.chip{background:rgba(47,107,255,.16)!important;border:1px solid rgba(47,107,255,.34)!important;color:#8fb4ff!important}
[data-theme="light"] .chip{background:rgba(47,107,255,.12)!important;border-color:rgba(47,107,255,.28)!important;color:#1d4ed8!important}
/* modrý hover stín primárních tlačítek (přebít fialový rgba(79,51,182)) */
.btn-primary:hover,.btn.grad-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 16px 40px rgba(47,107,255,.5)!important}

/* HOVER LIFT na kontejnery, co ho neměly (FAQ, hero-pill, contact-form, work-more, path ikona) */
details.q{transition:transform .35s var(--ease),border-color .35s var(--ease)}
details.q:hover{transform:translateY(-4px)}
.hero-pill{transition:transform .35s var(--ease)}
.hero-pill:hover{transform:translateY(-4px)}
.contact-form{transition:transform .4s var(--ease)}
.contact-form:hover{transform:translateY(-3px)}
.work-more{transition:transform .3s var(--ease),gap .3s var(--ease)!important}
.work-more:hover{transform:translateY(-2px);gap:13px!important}
.path .ico{transition:transform .35s var(--ease)}
.path:hover .ico{transform:translateY(-3px) scale(1.06)}

/* CTA 3s persistence (JS přidá/odebere .cta-on) */
.hero-visual.cta-on .hero-cta-pill{opacity:1!important;transform:translate(-50%,0)!important;pointer-events:auto}

/* ============ FOOTER (designový) ============ */
.site-footer{position:relative;z-index:3;border-top:1px solid var(--line);margin-top:48px;padding:58px 0 30px}
.site-footer .container{max-width:1280px}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1.3fr 1fr;gap:40px}
.foot-brand .brand{margin-bottom:16px;display:inline-flex}
.foot-tag{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:310px}
.foot-col h4{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col a{color:var(--muted);font-size:14.5px;text-decoration:none;transition:color .25s var(--ease),transform .25s var(--ease);width:fit-content}
.foot-col a:hover{color:var(--ink);transform:translateX(3px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px}
.foot-made{display:inline-flex;align-items:center;gap:6px}
@media(max-width:880px){.foot-top{grid-template-columns:1fr 1fr;gap:30px}.foot-bottom{flex-direction:column;text-align:center}}

/* ============ LEGAL stránky ============ */
.legal-wrap{position:relative;z-index:3;max-width:820px;margin:0 auto;padding:128px 28px 60px}
.legal-wrap h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.03em}
.legal-updated{color:var(--muted);font-size:14px;margin:10px 0 38px}
.legal-wrap h2{font-size:21px;margin:38px 0 12px;letter-spacing:-.02em;color:var(--ink)}
.legal-wrap h3{font-size:16.5px;margin:22px 0 8px;color:var(--ink)}
.legal-wrap p,.legal-wrap li{color:var(--muted);line-height:1.72;font-size:15.5px}
.legal-wrap ul{padding-left:20px;display:grid;gap:7px;margin:10px 0}
.legal-wrap strong,.legal-wrap b{color:var(--ink);font-weight:600}
.legal-wrap a{color:var(--lilac);text-decoration:underline;text-underline-offset:2px}
.legal-foot-note{margin-top:42px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint)}

/* ============ v3.7: audit fixes (fialová rezidua + hover záře + a11y) ============ */
/* base-glow: v DARK byl fialovo-indigo nádech přes CELOU stránku -> modrá */
.base-glow{background:radial-gradient(85% 60% at 50% -8%,rgba(20,42,112,.30),transparent 62%),radial-gradient(70% 55% at 82% 108%,rgba(16,36,98,.20),transparent 66%),radial-gradient(70% 55% at 14% 96%,rgba(24,52,122,.18),transparent 66%)}
/* indigo stíny tlačítek rgba(79,51,182) -> modrá (klidový stav + nav-cta) */
.btn-primary,.btn.grad-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(47,107,255,.38)}
.nav-cta{box-shadow:0 8px 24px rgba(47,107,255,calc(var(--cta-on,0)*.45))}
/* fialové fallback proměnné -> modrá (i v dark) */
:root{--violet:#2f6bff;--indigo:#1d4ed8}

/* HOVER ZÁŘE na karty (lift + modrý stín + okraj) jako reference solárů */
.work-card,.price-card,.step,.path,details.q,.contact-form{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)!important}
.work-card:hover,.price-card:hover,.step:hover,.path:hover{box-shadow:0 26px 58px rgba(47,107,255,.18);border-color:rgba(47,107,255,.32)}
details.q:hover{box-shadow:0 22px 50px rgba(47,107,255,.16);border-color:rgba(47,107,255,.3)}
details.q[open]{transform:none}
.contact-form:hover{box-shadow:0 28px 60px rgba(47,107,255,.15);border-color:rgba(47,107,255,.28)}
[data-theme="light"] .work-card:hover,[data-theme="light"] .price-card:hover,[data-theme="light"] .step:hover,[data-theme="light"] .path:hover,[data-theme="light"] details.q:hover,[data-theme="light"] .contact-form:hover{box-shadow:0 24px 54px rgba(47,107,255,.14)}

/* light-aware doladění (audit medium/low) */
[data-theme="light"] .work-prev .tag{background:rgba(255,255,255,.62);color:var(--ink)}
[data-theme="light"] .hero-screen,[data-theme="light"] .hero-screen iframe{background:#eaf1ff}
[data-theme="light"] .price-card.feat{box-shadow:0 24px 60px rgba(47,107,255,.16)}

/* a11y: viditelný focus-visible (klávesnice) */
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #2f6bff;outline-offset:2px}

/* ============ v3.8: CTA hover + smooth FAQ ============ */
/* CTA "Ukázat naši práci" — jemný smooth hover (lift + projasnění + stín), ať není mrtvý */
.hero-visual .hero-cta-pill{transition:opacity .42s var(--ease),transform .42s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease)!important}
.hero-visual .hero-cta-pill:hover{transform:translate(-50%,-3px)!important;filter:brightness(1.12)}
.hero-cta-pill:hover{box-shadow:0 18px 44px rgba(0,0,0,.5)}
[data-theme="light"] .hero-cta-pill:hover{box-shadow:0 18px 44px rgba(47,107,255,.5);filter:brightness(1.05)}

/* FAQ — plynulejší, pomalejší, víc ease-out otevírání (méně sekavé) */
details.q summary i{transition:transform .45s cubic-bezier(.16,1,.3,1)!important}
@supports selector(::details-content){
  html{interpolate-size:allow-keywords}
  details.q::details-content{opacity:0;block-size:0;overflow:clip;transition:opacity .5s cubic-bezier(.16,1,.3,1),block-size .5s cubic-bezier(.16,1,.3,1),content-visibility .5s allow-discrete;transition-behavior:allow-discrete}
  details.q[open]::details-content{opacity:1;block-size:auto}
}

/* ============ v3.9: footer zarovnání ============ */
/* zděděné footer{text-align:center} ze staré definice centrovalo nový footer -> vše DOLEVA */
.site-footer{text-align:left}
.foot-top{align-items:start}
.foot-brand .brand{display:inline-flex}
.foot-brand,.foot-col{align-items:flex-start;text-align:left}
.foot-bottom{text-align:left}

/* ============ v4.0: vertikální Postup (kroky pod sebou) ============ */
.steps-v{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.step-v{display:flex;gap:22px;align-items:center;padding:22px 26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.step-v:hover{transform:translateY(-4px);box-shadow:0 26px 58px rgba(47,107,255,.18);border-color:rgba(47,107,255,.32)}
.sv-num{flex:0 0 auto;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-family:"Inter Tight";font-weight:800;font-size:20px;color:#fff;background:linear-gradient(135deg,#3b82f6,#1c4fd6);box-shadow:0 8px 22px rgba(47,107,255,.34),inset 0 1px 0 rgba(255,255,255,.25)}
.step-v.step-done .sv-num{background:linear-gradient(135deg,#34d399,#16a34a);box-shadow:0 8px 22px rgba(34,197,94,.34),inset 0 1px 0 rgba(255,255,255,.25);font-size:24px}
.sv-body h3{font-size:18px;letter-spacing:-.01em}
.sv-body p{font-size:14.5px;margin-top:5px;line-height:1.55}
@media(max-width:560px){.step-v{padding:18px;gap:16px}.sv-num{width:44px;height:44px;font-size:18px}}

/* ============ v4.1: animované akcenty + živé reaktivní číslice + Hotovo modré ============ */
/* italické akcenty (do 10 dní, Neplatíte) — pomalý animovaný gradient, o trochu tmavší/modřejší */
.pf-anim{background:linear-gradient(110deg,#4d93ff,#2f6bff 28%,#1c4fd6 52%,#3b82f6 76%,#2f6bff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:pfFlow 9s ease-in-out infinite;padding:.06em .16em .36em .16em;margin:-.06em -.16em -.36em -.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@keyframes pfFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
[data-theme="light"] .pf-anim{background:linear-gradient(110deg,#2f6bff,#1c4fd6 30%,#1d4ed8 55%,#2f6bff 80%,#1c4fd6);background-size:300% 100%;-webkit-background-clip:text;background-clip:text}

/* číslice: pohyblivý modrý gradient + reaktivní světlo (jako okraje, --lx/--ly z shared.js) */
.sv-num{position:relative;overflow:hidden;background:linear-gradient(135deg,#3b82f6,#2f6bff 45%,#1c4fd6)!important;background-size:180% 180%!important;animation:numFlow 8s ease-in-out infinite}
@keyframes numFlow{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.sv-num::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(46px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.55),transparent 60%);opacity:calc(.25 + (var(--edge-i,.5) - .5)*1.4);pointer-events:none}
.sv-num>*,.sv-num{position:relative}
.sv-num i,.sv-num{z-index:1}
.sv-num::before{z-index:0}

/* Hotovo — modrý filled kontejner, větší, oslavný (shimmer) */
.step-v.step-done{background:linear-gradient(120deg,#2f6bff,#1c4fd6)!important;border:1px solid rgba(255,255,255,.22)!important;padding:30px 28px;box-shadow:0 22px 54px rgba(47,107,255,.4)!important;overflow:hidden}
.step-v.step-done .sv-body h3,.step-v.step-done .sv-body p,.step-v.step-done .sv-body b{color:#fff!important}
.step-v.step-done .sv-num{background:#fff!important;color:#1c4fd6;animation:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.step-v.step-done .sv-num::before{opacity:0}
.step-v.step-done::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);background-size:240% 100%;animation:doneShimmer 5s ease-in-out infinite;pointer-events:none}
@keyframes doneShimmer{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}
.step-v.step-done:hover{transform:translateY(-4px);box-shadow:0 28px 64px rgba(47,107,255,.52)!important}
/* fix: reaktivní specular pod číslo (čitelnost) */
.sv-num{isolation:isolate}
.sv-num::before{z-index:-1}

/* ============ v4.2: sekce Reference (recenze) ============ */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.review:hover{transform:translateY(-5px);box-shadow:0 26px 58px rgba(47,107,255,.18);border-color:rgba(47,107,255,.32)}
.review .stars{color:#fbbf24;font-size:15px;letter-spacing:3px;line-height:1}
.review .quote{font-size:15px;line-height:1.62;color:var(--ink)}
.review .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.review .av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:"Inter Tight";font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#3b82f6,#1c4fd6);box-shadow:0 6px 16px rgba(47,107,255,.3)}
.review .who .n{display:block;font-weight:600;font-size:14.5px}
.review .who .b{display:block;font-size:13px;color:var(--muted)}
@media(max-width:880px){.reviews{grid-template-columns:1fr}}

/* ============ v4.3: hvězdy theme-aware + Hotovo theme-aware + progress line ============ */
/* hvězdy: DARK = amber outline, LIGHT = amber fill; podpora půlhvězdy přes ořez */
.stars{display:inline-flex;gap:3px;line-height:0}
.rs{position:relative;width:16px;height:16px;display:inline-block}
.rs .rs-bg,.rs .rs-fg{position:absolute;inset:0}
.rs .rs-fg{overflow:hidden}
.rs .rs-fg>span{display:block;width:16px;height:16px}
.rs svg{width:16px;height:16px;display:block}
.rs-bg svg path{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.6;stroke-linejoin:round}
.rs-fg svg path{fill:none;stroke:#fbbf24;stroke-width:1.9;stroke-linejoin:round}
[data-theme="light"] .rs-bg svg path{fill:none;stroke:rgba(20,30,60,.18)}
[data-theme="light"] .rs-fg svg path{fill:#fbbf24;stroke:#fbbf24}

/* Hotovo: DARK = tmavý glass + modrá ikonka (nevyčnívá); LIGHT = modrý oslavný */
.step-v.step-done{background:linear-gradient(162deg,rgba(13,21,44,.6),rgba(8,13,30,.5))!important;border:1px solid var(--line2)!important;box-shadow:none!important;padding:24px 26px}
.step-v.step-done .sv-body h3{color:var(--ink)!important}
.step-v.step-done .sv-body p,.step-v.step-done .sv-body b{color:var(--muted)!important}
.step-v.step-done .sv-num{background:linear-gradient(135deg,#3b82f6,#1c4fd6)!important;color:#fff!important;box-shadow:0 8px 22px rgba(47,107,255,.34)!important}
.step-v.step-done::after{content:none}
.step-v.step-done:hover{box-shadow:0 26px 58px rgba(47,107,255,.16)!important;border-color:rgba(47,107,255,.3)!important}
[data-theme="light"] .step-v.step-done{background:linear-gradient(120deg,#2f6bff,#1c4fd6)!important;border-color:rgba(255,255,255,.25)!important;box-shadow:0 22px 54px rgba(47,107,255,.3)!important;padding:30px 28px}
[data-theme="light"] .step-v.step-done .sv-body h3,[data-theme="light"] .step-v.step-done .sv-body p,[data-theme="light"] .step-v.step-done .sv-body b{color:#fff!important}
[data-theme="light"] .step-v.step-done .sv-num{background:#fff!important;color:#1c4fd6!important;box-shadow:0 6px 18px rgba(0,0,0,.18)!important}
[data-theme="light"] .step-v.step-done::after{content:"";display:block}

/* PROGRESS LINE — vertikální uprostřed za kontejnery, plní se scrollem (ease) */
.steps-v{position:relative}
.steps-v::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.12);border-radius:2px;z-index:0}
.steps-v::after{content:"";position:absolute;left:50%;top:8px;width:2px;transform:translateX(-50%);height:calc((100% - 16px) * var(--progress,0));background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.5));box-shadow:0 0 14px rgba(255,255,255,.45);border-radius:2px;z-index:0;transition:height .3s cubic-bezier(.22,.61,.36,1)}
.step-v{position:relative;z-index:1}
[data-theme="light"] .steps-v::before{background:rgba(47,107,255,.18)}
[data-theme="light"] .steps-v::after{background:linear-gradient(180deg,#2f6bff,#1c4fd6);box-shadow:0 0 14px rgba(47,107,255,.4)}

/* ============ v4.4: dark Hotovo = 1:1 jako ostatní karty (glass), light beze změny ============ */
.step-v.step-done{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 10px rgba(0,0,0,.22),0 20px 52px rgba(0,0,0,.34)!important;padding:22px 26px!important}
[data-theme="light"] .step-v.step-done{background:linear-gradient(120deg,#2f6bff,#1c4fd6)!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 22px 54px rgba(47,107,255,.3)!important;padding:30px 28px!important}
@media(max-width:560px){.step-v.step-done{padding:18px!important}}

/* ============ v4.5: portfolio showreel na hlavním webu ============ */
.reel-wrap{position:relative;z-index:3}
.reel-vp{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:7px 0}
.reel-track{display:flex;width:max-content;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.reel-frame{width:392px;margin-right:22px;flex:0 0 auto;border-radius:18px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 10px 26px rgba(0,0,0,.2);transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.reel-frame:hover{border-color:rgba(47,107,255,.55);box-shadow:0 16px 40px rgba(47,107,255,.26)}
[data-theme="light"] .reel-frame{background:rgba(255,255,255,.5);border-color:rgba(40,65,120,.12);box-shadow:0 10px 26px rgba(20,40,90,.1)}
.rf-screen{aspect-ratio:16/9.7;overflow:hidden;background:#0a1020;margin:11px 11px 0;border-radius:11px}
.rf-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.rf-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}
.reel-frame .w-n{text-transform:uppercase;font-weight:700;font-size:14.5px;letter-spacing:.01em}
.reel-frame .w-dom{font-size:13px;color:var(--muted);margin-top:2px}
.reel-frame .w-tag{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#8fb4ff;background:rgba(47,107,255,.16);border:1px solid rgba(47,107,255,.3);padding:3px 9px;border-radius:999px;white-space:nowrap}
[data-theme="light"] .reel-frame .w-tag{color:#1d4ed8;background:rgba(47,107,255,.12)}
.reel-frame .mb{display:flex;gap:6px;padding:11px 14px}
.reel-frame .mb span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
[data-theme="light"] .reel-frame .mb span{background:rgba(40,65,120,.25)}
/* nav indikátor fade (skrytý na heru) */
.nav-indicator{transition:transform .35s var(--ease),width .35s var(--ease),opacity .3s var(--ease)}

/* ============ v4.6: zúžené sekce + confidence logo band ============ */
.section{padding:clamp(48px,6vw,80px) 0}
/* svislý animovaný scroll indikátor (jako v heru Devětsilu) — vycentrovaný, bez popisku */
.soft-divider{display:flex;justify-content:center;padding:8px 0 16px;position:relative;z-index:3}
.soft-divider .sd-cue{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:sdCue 2.4s var(--ease) infinite}
@keyframes sdCue{0%{transform:scaleY(.3);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
[data-theme="light"] .soft-divider .sd-cue{background:linear-gradient(rgba(19,24,43,.55),transparent)}

/* ============ v4.7: hover overlay na portfolio rámečku (klikni → web) ============ */
.rf-screen{position:relative}
.rf-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;
  background:rgba(6,9,20,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .5s ease-in-out;pointer-events:none}
.reel-frame:hover .rf-ov{opacity:1}
.rf-ov-t{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:"Inter Tight",system-ui,sans-serif;
  font-weight:700;font-size:16px;letter-spacing:.01em;
  transform:translateY(9px) scale(.97);opacity:0;transition:transform .5s ease-in-out,opacity .5s ease-in-out}
.reel-frame:hover .rf-ov-t{transform:translateY(0) scale(1);opacity:1}
.rf-ov-t i{font-size:20px}
[data-theme="light"] .rf-ov{background:rgba(8,12,24,.8)}

/* ===== v4.8: FAQ scroll progress čára (jako Postup) ===== */
.faq{position:relative}
.faq::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.12);border-radius:2px;z-index:0}
.faq::after{content:"";position:absolute;left:50%;top:6px;width:2px;transform:translateX(-50%);height:calc((100% - 12px) * var(--progress,0));background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.5));box-shadow:0 0 14px rgba(255,255,255,.45);border-radius:2px;z-index:0;transition:height .3s cubic-bezier(.22,.61,.36,1)}
[data-theme="light"] .faq::before{background:rgba(47,107,255,.16)}
[data-theme="light"] .faq::after{background:linear-gradient(180deg,#2f6bff,#1c4fd6);box-shadow:0 0 14px rgba(47,107,255,.4)}
.faq .q{position:relative;z-index:1}

/* ===== v4.9: sekce Jak funguje platba ===== */
.pay-flow{display:flex;align-items:stretch;justify-content:center;gap:16px;max-width:1020px;margin:0 auto}
.pay-step{flex:1;padding:30px 26px;border-radius:20px;text-align:center;position:relative;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.pay-step:hover{transform:translateY(-5px);border-color:rgba(47,107,255,.4);box-shadow:0 24px 56px rgba(47,107,255,.18)}
.pay-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7fa9ff;margin-bottom:13px}
.pay-amt{font-family:"Inter Tight";font-weight:800;font-size:clamp(38px,4.5vw,52px);letter-spacing:-.03em;line-height:1;margin-bottom:10px;
  background:linear-gradient(110deg,#4d93ff,#2f6bff 28%,#1c4fd6 52%,#3b82f6 76%,#2f6bff);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:pfFlow 9s ease-in-out infinite;padding-bottom:.08em}
[data-theme="light"] .pay-amt{background:linear-gradient(110deg,#2f6bff,#1c4fd6 30%,#1d4ed8 55%,#2f6bff 80%,#1c4fd6);background-size:300% 100%}
.pay-step h3{font-family:"Inter Tight";font-weight:700;font-size:18.5px;letter-spacing:-.01em;margin-bottom:8px}
.pay-step p{color:var(--muted);font-size:14px;line-height:1.6}
.pay-arrow{display:flex;align-items:center;color:var(--faint);font-size:26px;flex:0 0 auto}
.pay-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:36px}
.pay-trust span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink)}
.pay-trust i{color:#6ea0ff;font-size:18px;flex-shrink:0}
@media(max-width:760px){.pay-flow{flex-direction:column;align-items:stretch}.pay-arrow{transform:rotate(90deg);justify-content:center;padding:2px 0}}

/* ===== v5.0: CTA sekce — záložky hovor / formulář + booking ===== */
.cta-tabs{display:flex;gap:12px;justify-content:center;max-width:700px;margin:0 auto 24px;flex-wrap:wrap}
.cta-tab{flex:1;min-width:240px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:16px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);transition:all .35s var(--ease)}
.cta-tab i{font-size:19px}
.cta-tab:hover{color:var(--ink);border-color:rgba(47,107,255,.35)}
.cta-tab.on{background:linear-gradient(135deg,#2f6bff,#1c4fd6);border-color:transparent;color:#fff;box-shadow:0 14px 34px rgba(47,107,255,.34)}
[data-theme="light"] .cta-tab:not(.on){background:rgba(255,255,255,.6)}
.cta-panel{padding:clamp(26px,3.4vw,42px);border-radius:22px;max-width:1000px;margin:0 auto}
.cta-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,48px);align-items:center}
.cta-info h3{font-family:"Inter Tight";font-weight:800;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em}
.cta-info>p{margin-top:12px;font-size:15px;line-height:1.6}
.cta-pts{list-style:none;display:grid;gap:9px;margin-top:18px}
.cta-pts li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);font-weight:500}
.cta-pts i{color:#6ea0ff;font-size:17px;flex-shrink:0}
.bk-label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.bk-days{display:flex;gap:9px;margin-bottom:16px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;padding-bottom:2px}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:1;min-width:56px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px;border-radius:13px;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:all .3s var(--ease)}
.bk-day span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bk-day b{font-family:"Inter Tight";font-weight:800;font-size:18px;color:var(--ink)}
.bk-day small{font-size:10.5px;color:var(--faint)}
.bk-day:hover{border-color:rgba(47,107,255,.4)}
.bk-day.on{background:linear-gradient(135deg,#2f6bff,#1c4fd6);border-color:transparent}
.bk-day.on span,.bk-day.on b,.bk-day.on small{color:#fff}
.bk-times{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;padding-bottom:2px}
.bk-times::-webkit-scrollbar{display:none}
.bk-time{padding:9px 15px;border-radius:11px;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);transition:all .3s var(--ease)}
.bk-time:hover{border-color:rgba(47,107,255,.4)}
.bk-time.on{background:rgba(47,107,255,.18);border-color:rgba(47,107,255,.5)}
.bk-cta{width:100%;justify-content:center}
.bk-note{font-size:12.5px;margin-top:12px;text-align:center}
[data-theme="light"] .bk-day,[data-theme="light"] .bk-time{background:rgba(255,255,255,.6)}
.bk-dur{color:var(--faint);font-weight:600;text-transform:none;letter-spacing:0}
.bk-time.taken{opacity:.4;text-decoration:line-through;cursor:not-allowed;border-style:dashed;background:rgba(255,255,255,.02)}
.bk-time.taken:hover{border-color:var(--line);transform:none}
.consent-mini{font-size:11px;line-height:1.45;color:var(--muted);margin:0}
.consent-mini a{color:var(--lilac);text-decoration:underline;text-underline-offset:2px}
/* horizontální scroll dnů i hodin — fixní šířka položek, fade na okrajích, drag myší */
/* KLÍČOVÉ: min-width:0 na flex/grid předcích, jinak scroll-řádek nafoukne celý panel ven */
.cta-split,.cta-info,.booking,.bk-days,.bk-times{min-width:0}
.bk-day,.bk-time{flex:0 0 auto}
.bk-days.drag,.bk-times.drag{cursor:grabbing;scroll-behavior:auto;user-select:none}
.bk-days,.bk-times{-webkit-mask:linear-gradient(90deg,#000 0,#000 90%,transparent);mask:linear-gradient(90deg,#000 0,#000 90%,transparent)}
.bk-days.scrolled,.bk-times.scrolled{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent)}
.bk-days.at-end,.bk-times.at-end{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000);mask:linear-gradient(90deg,transparent,#000 6%,#000)}
/* oba CTA panely stejně vysoké (desktop) — ale SKRYTÝ panel zůstává skrytý (jen jeden zároveň) */
@media(min-width:761px){.cta-panel:not([hidden]){display:flex;flex-direction:column;justify-content:center;min-height:600px}.cta-panel>.cta-split{width:100%}}
/* form „Odeslat poptávku" stejně velký (full-width + stejná výška/font) jako booking „Vybrat termín a rezervovat" */
.form-grid button[type="submit"]{width:100%;justify-content:center}
.cta-panel .btn{line-height:1.5}  /* sjednotí výšku <a> booking i <button> form (jinak se liší kvůli UA line-height) */
/* logo v headeru o 3 % menší, stále vertikálně vycentrované vlevo */
.nav .brand{transform:scale(.97);transform-origin:left center}
@media(max-width:760px){.cta-split{grid-template-columns:1fr;gap:26px}}