/* design-system.css - Sjednoceny design system pro Khoder.cz
   Vytvoreno: 2026-05-14 (konsolidace chrome.css + sections.css)
   Pouzito: index.html, reporting-pro-eshopy.html, webova-analytika-pro-eshopy.html,
            tvorba-webovych-stranek.html, google-shopping-pro-eshopy.html
   Vyresene konflikty:
   - --ink #13131A (sections.css verze)
   - --accent-ink #13131A (sjednoceno)
   - --f-display 'Roboto Flex' (sections.css priorita)
   - Dark mode pouze html.dark (chrome.css zachovan)
   - Button API: zachovany obe (.btn = chrome, .pill-btn = sections)
*/

/* chrome.css — extracted topnav + footer + chrome rules from production styles.css.
   Scoped to: .topnav, .mega, .theme-switch, .theme-link, .footer, .btn, .icon-btn, .wrap, .pill, .toast, :root vars, @font-face, html.dark.
   Used by reporting-pro-eshopy.html alongside its B.2 inline styles. */

@layer tokens {
:root {
    /* Prototype palette */
    --bg:          #FAFAF7;
    --surface:     #FFFFFF;
    --surface-2:   #F2F0EA;
    --surface-3:   #ECE9DF;
    --ink:         #0E0E0F;
    --ink-2:       #2B2B2E;
    --muted:       #6B6B70;
    --line:        #E6E3D9;
    --line-2:      #D9D5C7;

    --accent:      #fbc32f;
    --accent-ink:  #141218;
    --accent-soft: #FFF4C2;

    --ok:          #2E7D5B;
    --ok-soft:     #E3F2EA;

    /* M3 aliases (pixel-council architecture) */
    --md-sys-color-primary:              var(--accent);
    --md-sys-color-on-primary:           var(--accent-ink);
    --md-sys-color-surface:              var(--surface);
    --md-sys-color-surface-container-low: var(--surface-2);
    --md-sys-color-surface-container:    var(--surface-3);
    --md-sys-color-on-surface:           var(--ink);
    --md-sys-color-on-surface-variant:   var(--muted);
    --md-sys-color-outline-variant:      var(--line);
    --md-sys-color-inverse-surface:      #141218;
    --md-sys-color-inverse-on-surface:   #FFFFFF;
    --md-sys-color-error:                #B3261E;
    --md-sys-color-on-error:             #FFFFFF;
    --focus-ring:                        rgba(14, 14, 15, .08);

    /* Shape scale — M3 naming with brand-direction sharper values.
       M3 baseline is 4/8/12/16/28/full; our design runs sharper (6/8/12/14/28/full). */
    --shape-xs:   6px;
    --shape-s:    8px;
    --shape-m:    12px;
    --shape-l:    14px;
    --shape-xl:   28px;
    --shape-full: 999px;

    /* Legacy aliases — prefer --shape-* in new styles */
    --radius:    var(--shape-xs);
    --radius-s:  var(--shape-xs);
    --radius-l:  var(--shape-s);
    --radius-xl: var(--shape-m);

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(14,14,15,.04), 0 2px 8px rgba(14,14,15,.04);
    --shadow-2: 0 4px 14px rgba(14,14,15,.06), 0 12px 40px rgba(14,14,15,.08);
    --shadow-3: 0 12px 32px rgba(14,14,15,.10), 0 40px 80px rgba(14,14,15,.10);

    /* Motion */
    --easing-emphasized:           cubic-bezier(0.2, 0.0, 0, 1.0);
    --easing-emphasized-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --easing-standard:             cubic-bezier(0.4, 0, 0.2, 1);
    --dur-2: 150ms;
    --dur-3: 200ms;
    --dur-4: 300ms;
    --dur-5: 400ms;

    /* State layers */
    --state-hover: 0.08;
    --state-focus: 0.10;
    --state-pressed: 0.10;

    /* Typography */
    --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --f-display: "Roboto Flex", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --f-serif:   "Source Serif 4", Georgia, serif;
    --f-mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* Layout */
    --container: 1200px;
    --pad: clamp(20px, 3vw, 40px);
    --nav-h: 96px;            /* resting height over hero */
    --nav-h-scrolled: 60px;   /* scrolled pill height */
    --nav-offset: 12px;       /* gap between scrolled pill and browser top edge */

    --star: #F4B400;
  }

}
@layer reset {
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h-scrolled) + var(--nav-offset) - 28px);
  }

}
@layer layout {
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

}
@layer components {
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 22px;
    min-height: 44px;
    border-radius: 999px;
    font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: transform var(--dur-2), box-shadow var(--dur-3), background-color var(--dur-3);
    overflow: hidden; isolation: isolate;
  }
.pill-btn { text-decoration: none; }
.btn::before {
    content: ""; position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    transition: opacity var(--dur-2);
    pointer-events: none; z-index: 0;
  }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:hover::before { opacity: var(--state-hover); }
.btn:focus-visible::before { opacity: var(--state-focus); }
.btn:active::before { opacity: var(--state-pressed); }
.btn__ic { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.btn--accent {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 2px 2px 7px 0px rgba(251,195,47,.4);
  }
.btn--ink {
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
  }
.btn--ink::before { background: var(--md-sys-color-inverse-on-surface); }
.btn--ink:hover { box-shadow: var(--shadow-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--glass {
    background: rgba(255,255,255,.10);
    color: #fff;
    border-color: rgba(255,255,255,.26);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
.btn--glass::before { background: #fff; }
.btn--glass:hover { background: rgba(255,255,255,.18); }
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--lg { padding: 15px 24px; font-size: 16px; }
.btn--block { width: 100%; justify-content: center; margin-top: 6px; }
.icon-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    position: relative;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    transition: background-color var(--dur-2);
    overflow: hidden; isolation: isolate;
  }
.icon-btn::before {
    content: ""; position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    transition: opacity var(--dur-2);
  }
.icon-btn:hover::before { opacity: var(--state-hover); }
.icon-btn:focus-visible::before { opacity: var(--state-focus); }
.icon-btn > * { position: relative; z-index: 1; }
.icon-btn .material-symbols-outlined { font-size: 22px; }
.pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 13px; color: var(--ink-2); font-weight: 500;
  }
.pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 4px var(--ok-soft);
  }
.pill--glass {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
.pill--accent {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 7px 14px;
  }
.topnav {
    position: fixed; left: 0; right: 0; top: 0;
    z-index: 50;
    pointer-events: none;
    transition: top var(--dur-5) var(--easing-emphasized);
  }
.topnav__wrap {
    pointer-events: auto;
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--nav-h);
    gap: 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    transition:
      height var(--dur-5) var(--easing-emphasized),
      background-color var(--dur-5) var(--easing-emphasized),
      box-shadow var(--dur-5) var(--easing-emphasized),
      border-color var(--dur-5) var(--easing-emphasized),
      border-radius var(--dur-5) var(--easing-emphasized);
  }
.topnav__brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; letter-spacing: -0.02em; font-size: 18px;
    flex-shrink: 0;
  }
.topnav__brand img {
    height: 44px; width: auto;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: height var(--dur-5) var(--easing-emphasized), filter var(--dur-5) var(--easing-emphasized);
  }
.topnav__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topnav__nav a {
    position: relative;
    padding: 10px 14px; border-radius: 999px; font-size: 14px;
    color: rgba(255,255,255,.9); font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: color var(--dur-5) var(--easing-emphasized);
    overflow: hidden; isolation: isolate;
  }
.topnav__nav a::before {
    content: ""; position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    transition: opacity var(--dur-2) var(--easing-standard);
    border-radius: inherit;
    pointer-events: none;
  }
.topnav__nav a:hover::before { opacity: var(--state-hover); }
.topnav__nav a:focus-visible::before { opacity: var(--state-focus); }
.topnav__nav a:active::before { opacity: var(--state-pressed); }
.topnav__right { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.topnav__right .icon-btn { color: #fff; }
.topnav__menu { display: none; color: var(--ink); }
.theme-switch {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: color var(--dur-5) var(--easing-emphasized);
  }
.topnav.is-scrolled .theme-switch { color: var(--ink); }
.theme-switch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 999px;
  }
.theme-switch__lbl {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .4;
    transition: opacity var(--dur-2);
    line-height: 1;
  }
.theme-switch__lbl--light { opacity: 1; }
.dark .theme-switch__lbl--light { opacity: .4; }
.dark .theme-switch__lbl--dark { opacity: 1; }
.theme-switch__track {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: currentColor;
    opacity: .22;
    transition: opacity var(--dur-2);
    flex-shrink: 0;
  }
.theme-switch:hover .theme-switch__track { opacity: .32; }
.theme-switch__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    color: #141218;
    display: inline-flex; align-items: center; justify-content: center;
    transform: translateX(18px);
    transition: transform var(--dur-4) var(--easing-emphasized),
                background-color var(--dur-3),
                color var(--dur-3);
    box-shadow: 0 1px 2px rgba(14,14,15,.25);
  }
.dark .theme-switch__thumb {
    transform: translateX(0);
    background: #141218;
    color: #fff;
  }
.topnav:not(.is-scrolled) .theme-switch__thumb {
    background: #141218;
  }
@media (max-width: 560px) {
.theme-switch__lbl { display: none; }

}
.topnav.is-scrolled { top: var(--nav-offset); }
.topnav.is-scrolled .topnav__wrap {
    height: var(--nav-h-scrolled);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(14,14,15,.10), 0 3px 8px rgba(14,14,15,.06);
  }
.topnav.is-scrolled .topnav__brand img { height: 30px; filter: none; }
.topnav.is-scrolled .topnav__nav a { color: var(--ink-2); }
.topnav.is-scrolled .topnav__nav a:hover { color: var(--ink); }
.topnav.is-scrolled .topnav__right .icon-btn { color: var(--ink); }
.topnav.is-scrolled .topnav__menu { color: var(--ink); }
@media (max-width: 1120px) {
.topnav__nav { display: none; }
.topnav__wrap { height: 76px; margin: 0 10px; }
.topnav.is-scrolled .topnav__wrap { height: 60px; margin: 0 10px; }
.topnav__menu { display: inline-flex; }
.topnav__right { margin-left: auto; }
.topnav__right .btn { display: none; }
.topnav__nav.is-open {
      display: flex; flex-direction: column; align-items: stretch;
      position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
      padding: 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(14,14,15,.10), 0 3px 8px rgba(14,14,15,.06);
      gap: 2px;
    }
.topnav.is-scrolled .topnav__nav.is-open a,
.topnav__nav.is-open a { color: var(--ink); }

  /* Mobile: flatten mega menu into the hamburger drawer */
  .topnav__item { display: block; width: 100%; }
  .topnav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
  }
  .topnav__item--mega::after { display: none; }
  .mega {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0;
    padding: 4px 0 8px 0;
    background: transparent;
    gap: 2px;
    display: none;
    transition: none;
  }
  .topnav__trigger[aria-expanded="true"] + .mega { display: grid; }
  .mega__item { padding: 10px 12px; }
  .mega__icon { width: 36px; height: 36px; border-radius: 8px; }
  .mega__icon .material-symbols-outlined { font-size: 20px; }
}
.hero .pill--glass {
    animation: heroIn var(--dur-5) var(--easing-emphasized-decelerate) both;
  }
.stats-section .wrap { padding-top: clamp(16px, 2vw, 28px); padding-bottom: 0; }

}
@layer variants {
.feature__text .pill--accent {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 11px;
    padding: 5px 11px;
    align-self: flex-start;
  }
.kontakt .wrap.kontakt__head {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 var(--pad);
  }
.footer {
    padding: 60px 0 40px;
    margin-top: 0;
  }
.footer a { text-decoration: none; color: inherit; }
.footer__grid {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px;
  }
.footer__brand img { height: 36px; width: auto; margin-bottom: 14px; }
.footer__brand p {
    color: var(--muted); font-size: 14px; max-width: 320px; margin: 0;
  }
.footer h6 {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 12px; font-weight: 600;
    font-family: var(--f-sans);
  }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.footer ul a:hover { color: var(--ink); }
.footer__plain li { color: var(--ink-2); }
.footer__legal {
    grid-column: 1 / -1;
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 13px; color: var(--muted);
    display: flex; gap: 20px; flex-wrap: wrap;
  }
.footer__legal a:hover { color: var(--ink); }
.theme-link {
    appearance: none;
    background: transparent;
    border: 0;
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 2px;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--dur-2);
  }
.theme-link:hover { color: var(--ink); }
.theme-link__ic { font-size: 16px !important; }
.theme-link__lbl { white-space: nowrap; }
/* Show only the icon/label appropriate for the current theme */
.theme-link .theme-ic--dark { display: none; }
.dark .theme-link .theme-ic--light { display: none; }
.dark .theme-link .theme-ic--dark { display: inline-flex; }
@media (max-width: 900px) {
.footer__grid { grid-template-columns: 1fr 1fr; }

}
@media (max-width: 560px) {
.footer__grid { grid-template-columns: 1fr; }

}
.toast {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 20px);
    padding: 14px 20px;
    background: var(--ink); color: #fff;
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-3);
    font-size: 14px; font-weight: 500;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-4) var(--easing-emphasized), opacity var(--dur-3);
    max-width: 90vw;
  }
.toast.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
.toast.is-error {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
  }

}
/* Dark theme — full token override. Uses html.dark for higher specificity than
   sections.css :root (sections.css loads after chrome.css, so :root in sections
   would otherwise win). M3-aligned, mirrors styles.css for cross-page parity. */
html.dark {
    --bg:          #141218;
    --surface:     #1D1B20;
    --surface-2:   #211F26;
    --surface-3:   #2B2930;
    --ink:         #E6E1E5;
    --ink-2:       #CAC4D0;
    --ink-3:       #B5B0BA;
    --ink-4:       #938F99;
    --muted:       #938F99;
    --line:        #36343B;
    --line-2:      #49454F;
    --line-strong: #49454F;
    --accent:      #fbc32f;
    --accent-ink:  #141218;
    --accent-soft: #544300;
    --brand:       #fbc32f;
    --brand-soft:  #3a2e00;
    --brand-deep:  #fbc32f;
    --bg-tint:     #211F26;
    --md-sys-color-inverse-surface:      #E6E1E5;
    --md-sys-color-inverse-on-surface:   #141218;
    --md-sys-color-error:                #F2B8B5;
    --md-sys-color-on-error:             #601410;
    --focus-ring:                        rgba(230, 225, 229, .12);
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
    --shadow-2: 0 4px 14px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.3);
    --shadow-3: 0 12px 32px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.4);
  }
/* Product screenshots (browser mockup + its children) keep light tokens —
   they represent an actual product UI that always stays bright. */
html.dark .module-shot .browser,
html.dark .b2-stage .browser,
html.dark .showcase__media .browser,
html.dark .case-shot .browser {
    --bg:          #FAF9F4;
    --surface:     #FFFFFF;
    --surface-2:   #F2F0EA;
    --surface-3:   #ECE9DF;
    --ink:         #0E0E0F;
    --ink-2:       #2B2B2E;
    --ink-3:       #6B6B70;
    --ink-4:       #6B6B70;
    --muted:       #6B6B70;
    --line:        #E6E3D9;
    --line-strong: #D9D5C7;
  }
/* Showcase theme variants (.theme-light/brand/cream) are intentional light cards.
   Re-scope their tokens to light values so all child rules render correctly. */
html.dark .showcase.theme-light,
html.dark .showcase.theme-brand,
html.dark .showcase.theme-cream {
    --bg:          #FAF9F4;
    --surface:     #FFFFFF;
    --surface-2:   #F2F0EA;
    --surface-3:   #ECE9DF;
    --ink:         #0E0E0F;
    --ink-2:       #2B2B2E;
    --ink-3:       #6B6B70;
    --ink-4:       #6B6B70;
    --muted:       #6B6B70;
    --line:        #E6E3D9;
    --line-strong: #D9D5C7;
    --bg-tint:     #F2F0EA;
  }
/* Floating accent badges sit OVER product screenshots, so they also stay light */
html.dark .module-shot .accent,
html.dark .case-shot .accent {
    --surface:     #FFFFFF;
    --ink:         #0E0E0F;
    --ink-2:       #2B2B2E;
    --ink-3:       #6B6B70;
    --line:        #E6E3D9;
  }
/* Showcase wrapper uses var(--ink) as bg in inline style — which inverts in
   dark mode (ink becomes light). Re-pin to --bg so wrapper stays dark. */
html.dark .showcase:not(.theme-light):not(.theme-cream):not(.theme-brand) {
    background: var(--bg);
  }
/* Theme toggle thumb (white pill) stays white — it's an indicator, not a card */
html.dark .topnav.is-scrolled .theme-switch__lbl--light { opacity: .4; }
html.dark .topnav.is-scrolled .theme-switch__lbl--dark { opacity: 1; }
.dark .hero .pill--glass {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
  }
.dark .topnav.is-scrolled .topnav__wrap {
    background: rgba(29,27,32,.92);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.3);
  }
.dark .topnav.is-scrolled .topnav__brand img { filter: brightness(0) invert(1); }
.dark .topnav.is-scrolled .topnav__nav a { color: var(--ink-2); }
.dark .topnav.is-scrolled .topnav__nav a:hover { color: var(--ink); }
.dark .topnav.is-scrolled .topnav__right .icon-btn,
.dark .topnav.is-scrolled .topnav__menu { color: var(--ink); }
.dark .feature__text .pill--accent { background: transparent; border-color: var(--ink); color: var(--ink); }
.dark .footer { background: var(--surface-2); }
.dark .footer__brand img { filter: brightness(0) invert(1); }
.dark .toast { background: var(--surface-3); color: var(--ink); }

/* ============================================================================
   SECTIONS - content layouts a komponenty z sections.css
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════
   sections.css — sdílený systém pro celý web khoder.cz
   Použito: reporting-pro-eshopy v2.html, index v2.html, ostatní LP v2
   ════════════════════════════════════════════════════════════════════ */

/* ════ Tokens ════ */
:root{
  --brand:#fbc32f;
  --accent:#fbc32f; /* unify with --brand */
  --accent-ink:#13131A;
  --accent-soft:#FFF1B8;
  --brand-deep:#E0A100;
  --brand-soft:#FFF1B8;
  --ink:#13131A;
  --ink-2:#2A2A33;
  --ink-3:#4A4A55;
  --ink-4:#6E6E78;
  --line:rgba(20,20,30,.08);
  --line-strong:rgba(20,20,30,.14);
  --surface:#ffffff;
  --surface-1:#FAF8F3;
  --surface-2:#F2EFE6;
  --bg:#F8F6F0;
  --bg-tint:#FCFAF5;
}

/* ════ Reset ════ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Roboto Flex','Roboto',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
figure{margin:0;}
a{color:inherit;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}

/* ════ Layout ════ */
.container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,3vw,40px);box-sizing:border-box;}
.container-wide{max-width:1200px;margin:0 auto;padding:0 clamp(20px,3vw,40px);box-sizing:border-box;}

/* ════ Typography ════ */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);margin:0 0 20px;display:inline-flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);}
h1.display{font-family:'Roboto Flex',sans-serif;font-size:64px;line-height:1.02;letter-spacing:-2.2px;font-weight:600;margin:0 0 28px;color:var(--ink);text-wrap:balance;}
h2.display{font-family:'Roboto Flex',sans-serif;font-size:48px;line-height:1.06;letter-spacing:-1.4px;font-weight:600;margin:0 0 24px;color:var(--ink);text-wrap:balance;}
h3.title{font-family:'Roboto Flex',sans-serif;font-size:32px;line-height:1.1;letter-spacing:-.7px;font-weight:600;margin:0 0 16px;color:var(--ink);}
.lead{font-size:17px;line-height:1.5;color:var(--ink-3);max-width:54ch;margin:0 0 36px;text-wrap:pretty;}
.body{font-size:17px;line-height:1.55;color:var(--ink-3);text-wrap:pretty;}
/* em inside .display renders as plain text — no italic accent */
.display em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:inherit;}

/* ════ Buttons ════ */
.pill-btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;border-radius:9999px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;text-decoration:none;letter-spacing:.1px;transition:filter .2s,transform .2s;}
.pill-btn.brand{background:var(--brand);color:var(--ink);}
.pill-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);}
.pill-btn:hover{filter:brightness(.96);transform:translateY(-1px);}
.pill-btn .material-symbols-outlined{font-size:18px;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ════ Breadcrumbs (B4) — viditelna drobeckova navigace nad hero ════ */
/* Sedi na zacatku <main>, pred .hero. padding-top vyklizi fixni .topnav (--nav-h). */
/* absolutni -> hero zustava na vrchu (jeho pozadi jde az pod navigaci), breadcrumb plave pres nej; zadny bily pas, zadny posun obsahu */
.breadcrumb{position:absolute;top:calc(var(--nav-h) - 14px);left:0;right:0;margin:0 auto;max-width:var(--container);padding:0 clamp(20px,3vw,40px);z-index:5;}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--ink-3);}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb li+li::before{content:"/";color:var(--ink-3);opacity:.5;}
.breadcrumb a{color:var(--ink-3);text-decoration:none;transition:color .2s;}
.breadcrumb a:hover{color:var(--ink);}
.breadcrumb [aria-current="page"]{color:var(--ink-2);font-weight:500;}
/* Desktop: hero si nechava svuj puvodni horni padding (breadcrumb plave nad obsahem v
   ramci toho paddingu) -> nulovy posun. Mobil (<=960px): hero ma jen ~96px (= vyska nav),
   takze pridame misto pro plovouci breadcrumb, jinak by se prekryl s obsahem hero. */
@media (max-width:960px){ .breadcrumb + .hero{padding-top:calc(var(--nav-h) + 20px);} }

/* ════ Browser chrome (used in hero, modules, klienti) ════ */
.browser{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);}
.browser-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;background:linear-gradient(#FBFAF7,#F4F2EC);border-bottom:1px solid var(--line);}
.dots{display:flex;gap:7px;}
.dot{width:12px;height:12px;border-radius:50%;background:#E5E1D9;}
.dot.r{background:#F1735C;}
.dot.y{background:#F5BD41;}
.dot.g{background:#62C554;}
.url{flex:1;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;font-size:12px;color:#7a7a85;font-family:'Roboto Mono',ui-monospace,monospace;gap:6px;letter-spacing:.1px;}
.url .lock{font-size:13px;color:#9a9aa3;}
.url .host{color:var(--ink-2);font-weight:500;}
.url .path{color:#9a9aa3;}
.browser-actions{display:flex;gap:8px;color:#9a9aa3;font-size:18px;}
.browser-shot{display:block;width:100%;}

/* ════ Generic accent badges (floating around media) ════ */
.accent{position:absolute;z-index:2;}
.accent.kpi{background:var(--surface);border-radius:14px;padding:12px 16px;box-shadow:0 18px 40px -8px rgba(20,20,30,.18),0 0 0 1px var(--line);display:flex;flex-direction:column;gap:2px;min-width:128px;font-size:12px;}
.accent.kpi.brand{background:var(--brand);}
.accent.kpi .l{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3);font-weight:600;}
.accent.kpi.brand .l{color:rgba(20,20,30,.65);}
.accent.kpi .v{font-size:22px;font-weight:600;letter-spacing:-.3px;color:var(--ink);font-variant-numeric:tabular-nums;}
.accent.tag{background:var(--surface);border-radius:12px;padding:10px 14px;box-shadow:0 18px 40px -8px rgba(20,20,30,.18),0 0 0 1px var(--line);font-size:12px;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink-2);}
.accent.tag .material-symbols-outlined{font-size:16px;color:var(--brand-deep);}
.accent.tag.brand{background:var(--brand);color:var(--ink);}
.accent.tag.brand .material-symbols-outlined{color:var(--ink);}

/* ════ Float drift animations ════ */
.float-a{animation:driftA 9s ease-in-out infinite;}
.float-b{animation:driftB 11s ease-in-out infinite;}
.float-c{animation:driftC 13s ease-in-out infinite;}
.float-d{animation:driftD 10s ease-in-out infinite;}
@keyframes driftA{0%,100%{transform:translate(0,0);}50%{transform:translate(0,-12px);}}
@keyframes driftB{0%,100%{transform:translate(0,0);}50%{transform:translate(-8px,-14px);}}
@keyframes driftC{0%,100%{transform:translate(0,0);}50%{transform:translate(6px,-10px);}}
@keyframes driftD{0%,100%{transform:translate(0,0);}50%{transform:translate(-4px,-16px);}}
@keyframes pulseGlow{
  0%,100%{opacity:.9;transform:translateX(-50%) scale(1);}
  50%{opacity:1;transform:translateX(-50%) scale(1.08);}
}

/* ════ Reveal on scroll ════ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:translateY(40px) scale(.985);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);}
.reveal-scale.in{opacity:1;transform:translateY(0) scale(1);}

/* ════ TRUST band ════ */
.trust{padding:30px 0;text-align:center;}
.trust .lbl{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:var(--ink-4);margin-bottom:28px;}
.trust-logos{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;color:var(--ink-3);}
.trust-logos .logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.2px;font-size:18px;color:var(--ink-2);opacity:.78;transition:opacity .3s;}
.trust-logos .logo:hover{opacity:1;}
.trust-logos .trust-ico{width:26px;height:26px;object-fit:contain;display:block;}

/* ════ STATS BAND (4-col KPI under hero) ════ */
.stats-band{padding:50px 0 0;background:transparent;}
.stats-band__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.stats-band__item{padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:6px;transition:transform .3s ease,box-shadow .3s ease;}
.stats-band__item:hover{transform:translateY(-2px);box-shadow:0 24px 48px -24px rgba(20,20,30,.14);}
.stats-band__num{font-family:'Roboto Flex',sans-serif;font-size:38px;font-weight:600;letter-spacing:-1px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:6px;}
.stats-band__num .small{font-size:18px;color:var(--brand-deep);font-weight:500;letter-spacing:0;}
.stats-band__lbl{font-size:14px;line-height:1.4;color:var(--ink-3);font-weight:500;}

/* ════ PILLARS (3-col with icon) ════ */
.pillars{padding:60px 0 96px;}
.pillars-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.pillar{padding:0;}
.pillar .icon{width:48px;height:48px;border-radius:14px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:var(--accent-ink);margin-bottom:24px;}
.pillar .icon .material-symbols-outlined{font-size:26px;}
.pillar h3{font-size:22px;line-height:1.2;font-weight:600;margin:0 0 12px;letter-spacing:-.4px;}
.pillar p{font-size:15px;line-height:1.55;color:var(--ink-3);margin:0;}

/* ════ QUICK ANSWER ("Co je X?") ════ */
.quick-answer{padding:96px 0;background:var(--bg-tint);}
.quick-answer__card{max-width:880px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:48px clamp(28px,5vw,64px);box-shadow:0 40px 80px -32px rgba(20,20,30,.10);}
.quick-answer__card .eyebrow{margin-bottom:14px;}
.quick-answer__card h2{margin:0 0 24px;font-family:'Roboto Flex',sans-serif;font-size:36px;line-height:1.12;letter-spacing:-.8px;font-weight:600;color:var(--ink);text-wrap:balance;}
.quick-answer__card p{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;text-wrap:pretty;}
.quick-answer__card p strong{color:var(--ink);font-weight:600;}
.quick-answer__card p:last-child{margin-bottom:0;}
.quick-answer__facts{margin:28px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.quick-answer__facts > div{background:var(--surface);padding:16px 20px;}
.quick-answer__facts dt{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 4px;}
.quick-answer__facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);}
@media(max-width:640px){.quick-answer__facts{grid-template-columns:1fr;}}

/* ════ MODULE / FEATURE rows (split image + copy with accent badges) ════ */
.module{padding:96px 0;position:relative;overflow:hidden;}
.module:nth-of-type(even){background:var(--bg-tint);}
.module-row{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center;}
.module-row.reverse{grid-template-columns:7fr 5fr;}
.module-row.reverse .module-copy{order:2;}
.module-row.reverse .module-shot{order:1;}
.module-copy .eyebrow{margin-bottom:16px;}
.module-shot{position:relative;}
.module-shot .browser{box-shadow:0 30px 60px -24px rgba(20,20,30,.18),0 12px 24px -10px rgba(20,20,30,.08);transition:transform .6s cubic-bezier(.22,1,.36,1);}
.module-shot::before{
  content:"";position:absolute;left:-40px;right:-40px;top:30%;bottom:-30px;
  background:radial-gradient(50% 40% at 50% 50%,rgba(251,195,47,.14),transparent 70%);
  filter:blur(24px);z-index:-1;pointer-events:none;
}
.module-bullets{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px;}
.module-bullets li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--ink-2);}
.module-bullets li .check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;margin-top:2px;}
.module-bullets li .check svg{width:13px;height:13px;display:block;}

/* Module screenshots use absolute .accent badges */
.module-shot .accent{}

/* ════ Play button overlay (for video-on-image) ════ */
.has-video{position:relative;}
.has-video .stage-media{position:relative;display:block;background:#000;}
.has-video .stage-media .browser-shot{display:block;width:100%;transition:opacity .25s ease;}
.has-video .stage-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;pointer-events:none;transition:opacity .35s ease;}
.has-video.playing .stage-media video{opacity:1;pointer-events:auto;}
.has-video.playing .stage-media .browser-shot{opacity:0;}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:0;background:var(--brand);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;transition:transform .25s ease,background .25s ease,opacity .25s ease,box-shadow .25s ease;box-shadow:0 18px 40px -10px rgba(20,20,30,.30);}
.play-btn::before,.play-btn::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(251,195,47,.55);opacity:0;transform:scale(.9);animation:playPulse 2.4s ease-out infinite;pointer-events:none;}
.play-btn::after{animation-delay:1.2s;}
@keyframes playPulse{0%{opacity:.55;transform:scale(.95);}80%{opacity:0;transform:scale(1.45);}100%{opacity:0;transform:scale(1.45);}}
.play-btn:hover{background:var(--brand-deep);transform:translate(-50%,-50%) scale(1.06);}
.play-btn:focus-visible{outline:3px solid var(--brand);outline-offset:4px;}
.play-btn .material-symbols-outlined{font-size:36px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40;margin-left:4px;}
.play-btn .lbl{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--ink-3);white-space:nowrap;}
.has-video.playing .play-btn{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85);}
.has-video.playing .play-btn::before,.has-video.playing .play-btn::after{animation:none;}
.stop-btn{position:absolute;top:60px;right:16px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(19,19,26,.78);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .2s;}
.stop-btn:hover{background:var(--ink);}
.stop-btn .material-symbols-outlined{font-size:20px;}
.has-video.playing .stop-btn{display:flex;}

/* ════ MORE-MODULES (3 compact cards) ════ */
.more-modules{padding:96px 0;background:var(--bg-tint);}
.more-head{text-align:center;max-width:680px;margin:0 auto 48px;}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.more-card{background:var(--surface);border-radius:20px;padding:32px;border:1px solid var(--line);display:flex;flex-direction:column;gap:16px;min-height:220px;transition:transform .3s ease,box-shadow .3s ease;}
.more-card:hover{transform:translateY(-3px);box-shadow:0 28px 60px -20px rgba(20,20,30,.16);}
.more-card .icon{width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--ink);display:flex;align-items:center;justify-content:center;}
.more-card .icon .material-symbols-outlined{font-size:22px;}
.more-card h4{font-family:'Roboto Flex',sans-serif;font-size:20px;line-height:1.2;font-weight:600;margin:0;letter-spacing:-.3px;}
.more-card p{font-size:15px;line-height:1.5;color:var(--ink-3);margin:0;}

/* ════ HOW IT WORKS (3-stage flow + 5-step timeline) ════ */
.how{padding:100px 0;position:relative;overflow:hidden;}
.how-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.how-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;align-items:stretch;max-width:1180px;margin:0 auto 100px;}
.how-flow .stage{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px;min-height:300px;transition:transform .3s ease,box-shadow .3s ease;}
.how-flow .stage:hover{transform:translateY(-3px);box-shadow:0 28px 60px -20px rgba(20,20,30,.14);}
.how-flow .stage .stage-head{display:flex;align-items:flex-start;gap:14px;}
.how-flow .stage .stage-head .ic{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.how-flow .stage .stage-head .ic .material-symbols-outlined{font-size:22px;}
.how-flow .stage .stage-head .titles h4{font-family:'Roboto Flex',sans-serif;font-size:17px;font-weight:600;margin:0 0 2px;letter-spacing:-.2px;line-height:1.2;}
.how-flow .stage .stage-head .titles span{font-size:13px;color:var(--ink-3);}
.how-flow .stage .src-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.how-flow .stage .src-list li{font-size:14px;color:var(--ink-3);line-height:1.4;display:flex;align-items:baseline;gap:10px;}
.how-flow .stage .src-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:0 0 auto;transform:translateY(-2px);}
.how-flow .stage.warehouse{background:var(--ink);color:#fff;border-color:transparent;align-items:center;justify-content:center;text-align:center;gap:14px;}
.how-flow .stage.warehouse .ic-big{width:64px;height:64px;border-radius:16px;background:var(--brand);color:var(--ink);display:flex;align-items:center;justify-content:center;}
.how-flow .stage.warehouse .ic-big .material-symbols-outlined{font-size:32px;}
.how-flow .stage.warehouse h4{font-size:22px;color:#fff;font-family:'Roboto Flex',sans-serif;letter-spacing:-.3px;margin:0;}
.how-flow .stage.warehouse .meta{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:1.2px;text-transform:uppercase;font-weight:600;}
.how-flow .stage.warehouse .bq-tags{display:flex;flex-direction:column;gap:8px;margin-top:4px;width:100%;}
.how-flow .stage.warehouse .bq-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:9999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:500;justify-content:flex-start;}
.how-flow .stage.warehouse .bq-tag .dotmark{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;}
.how-flow .arrow{width:56px;height:2px;background:linear-gradient(90deg,var(--line-strong),var(--brand));position:relative;align-self:center;}
.how-flow .arrow::after{content:"";position:absolute;right:-1px;top:50%;width:10px;height:10px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:translateY(-50%) rotate(45deg);}

.how-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:1180px;margin:0 auto;align-items:start;position:relative;}
.how-steps::before{content:"";position:absolute;left:10%;right:10%;top:44px;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 14px);z-index:0;}
.how-step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 8px;}
.how-step .step-ic{width:88px;height:88px;border-radius:24px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 14px 30px -14px rgba(20,20,30,.10);}
.how-step .step-ic .material-symbols-outlined{font-size:36px;color:var(--brand-deep);}
.how-step .step-num{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--ink-4);}
.how-step h5{font-family:'Roboto Flex',sans-serif;font-size:16px;font-weight:600;margin:0;letter-spacing:-.2px;line-height:1.2;}
.how-step p{font-size:13px;line-height:1.5;color:var(--ink-3);margin:0;max-width:20ch;}

/* ════ PROCESS TIMELINE (alternative to how-steps, more editorial) ════ */
.process{padding:0 0 100px;position:relative;overflow:hidden;background:var(--bg-tint);}
.process-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1180px;margin:0 auto;align-items:start;position:relative;}
.process-steps::before{content:"";position:absolute;left:10%;right:10%;top:35px;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 14px);z-index:0;pointer-events:none;}
.process-step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 4px;}
.process-step__num{position:relative;z-index:2;width:72px;height:72px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 14px 30px -14px rgba(20,20,30,.10);font-family:'Roboto Flex',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.4px;}
.process-step p{max-width:22ch;margin:0 auto;}
.process-step__lbl{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--ink-4);margin:0;}
.process-step h5{font-family:'Roboto Flex',sans-serif;font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.2px;line-height:1.2;}
.process-step p{font-size:14px;line-height:1.55;color:var(--ink-3);margin:0;}

/* ════ LOKALITA / region section ════ */
.lokalita{padding:100px 0;background:var(--bg-tint);position:relative;overflow:hidden;}
.lokalita__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.lokalita__map{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#f6f1e2 0%,#e6dfc8 100%);border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -24px rgba(20,20,30,.14);}
.lokalita__map svg{width:80%;height:80%;}
.lokalita__pin{position:absolute;background:var(--ink);color:#fff;padding:8px 16px 8px 12px;border-radius:9999px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:9px;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 12px 28px rgba(14,14,15,.32);letter-spacing:-.1px;}
.lokalita__pin::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);}
.lokalita__pin.litomerice{top:36%;left:50%;}
.lokalita__pin.usti{top:24%;left:34%;}
.lokalita__copy h2{margin-bottom:24px;}
.lokalita__copy .lead{max-width:54ch;margin:0 0 28px;}
.lokalita__cities{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 32px;}
.lokalita__city{display:inline-flex;align-items:center;padding:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:9999px;font-size:13px;font-weight:500;color:var(--ink-2);box-shadow:0 4px 12px -6px rgba(20,20,30,.06);}

/* ════ ABOUT ════ */
.about{padding:100px 0;background:var(--bg-tint);position:relative;overflow:hidden;}
.about::before{
  content:"";position:absolute;left:-200px;top:30%;width:700px;height:600px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(251,195,47,.10),transparent 70%);
  filter:blur(22px);z-index:0;pointer-events:none;
}
.about .container{position:relative;z-index:1;}
.about-grid{display:grid;grid-template-columns:420px 1fr;gap:88px;align-items:center;}
.about-photo{position:relative;overflow:visible;}
.about-photo__frame{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:linear-gradient(170deg,#F2EFE6 0%,#E8E1CC 100%);box-shadow:0 40px 80px -28px rgba(20,20,30,.18),0 12px 24px -12px rgba(20,20,30,.08);}
.about-photo__frame::before{content:"";position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(251,195,47,.55) 0%,rgba(251,195,47,.25) 50%,transparent 80%);filter:blur(12px);}
.about-photo__frame img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:104%;height:104%;object-fit:contain;object-position:bottom center;display:block;}
.about-photo .badge{position:absolute;background:var(--surface);border-radius:16px;padding:12px 16px;box-shadow:0 18px 40px -8px rgba(20,20,30,.18),0 0 0 1px var(--line);display:flex;align-items:center;gap:12px;z-index:2;}
.about-photo .badge-rating{left:-22px;bottom:48px;animation:driftA 9s ease-in-out infinite;}
.about-photo .badge-rating .glogo{width:34px;height:34px;border-radius:50%;background:conic-gradient(from -45deg,#4285F4 0deg,#EA4335 90deg,#FBBC05 180deg,#34A853 270deg,#4285F4 360deg);position:relative;flex:0 0 auto;}
.about-photo .badge-rating .glogo::after{content:"G";position:absolute;inset:3px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink);}
.about-photo .badge-rating .num{font-size:22px;font-weight:600;letter-spacing:-.4px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
.about-photo .badge-rating .stars{color:var(--brand-deep);font-size:12px;letter-spacing:1px;margin-top:2px;}
.about-photo .badge-rating .meta{font-size:11px;letter-spacing:.4px;color:var(--ink-3);line-height:1.3;font-weight:500;}
.about-photo .badge-experience{right:-20px;top:48px;background:var(--brand);color:var(--ink);box-shadow:0 18px 40px -8px rgba(20,20,30,.18);flex-direction:column;align-items:flex-start;gap:2px;min-width:128px;animation:driftC 11s ease-in-out infinite;}
.about-photo .badge-experience .l{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;font-weight:600;opacity:.72;}
.about-photo .badge-experience .v{font-size:22px;font-weight:600;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums;}
.about-photo .badge-experience .s{font-size:11px;font-weight:500;opacity:.82;margin-top:2px;}
.about-copy .display{margin-bottom:24px;}
.about-copy .lead{max-width:54ch;margin:0 0 22px;}
.about-copy .lead strong{color:var(--ink);font-weight:600;}
.about-bullets{list-style:none;padding:0;margin:32px 0 36px;display:flex;flex-direction:column;gap:14px;}
.about-bullets li{display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.55;color:var(--ink-2);}
.about-bullets li::before{content:"";width:22px;height:2px;background:var(--brand);flex:0 0 auto;margin-top:12px;}
.about-bullets li strong{font-weight:600;color:var(--ink);}

/* ════ KLIENTI / case studies ════ */
.clients{padding:100px 0;position:relative;overflow:hidden;}
.clients .container{position:relative;}
.clients-head{text-align:center;max-width:920px;margin:0 auto 56px;}
/* Klient row — jemný "tab/dossier" rámec, jiný styl než features karty */
.case-row{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:56px 48px;margin-bottom:32px;background:rgba(255,255,255,.55);border-radius:24px;border-bottom:1px solid var(--line);}
.case-row::before{content:"";position:absolute;left:48px;top:0;width:80px;height:2px;background:var(--brand);}
.case-row:last-child{margin-bottom:0;}
.case-row.reverse{grid-template-columns:7fr 5fr;}
.case-row.reverse .case-copy{order:2;}
.case-row.reverse .case-shot{order:1;}
.case-num{display:inline-flex;align-items:center;gap:8px;font-family:'Roboto Mono',monospace;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:9999px;}
.case-num::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);}
.case-logo{height:36px;width:auto;display:block;margin:0 0 22px;opacity:.92;}
.case-copy h3{font-family:'Roboto Flex',sans-serif;font-size:32px;line-height:1.1;letter-spacing:-.7px;font-weight:600;margin:0 0 20px;color:var(--ink);text-wrap:balance;}
.case-copy p{font-size:17px;line-height:1.55;color:var(--ink-3);margin:0 0 28px;max-width:52ch;}
.case-copy p strong{color:var(--ink);font-weight:600;}
.case-copy p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand);text-decoration-thickness:2px;}
.case-meta{display:flex;flex-wrap:wrap;gap:24px;}
.case-meta__item{display:flex;align-items:center;gap:10px;}
.case-meta__item .v{background:var(--brand);color:var(--accent-ink);font-weight:700;font-size:13px;letter-spacing:-.1px;padding:5px 11px;border-radius:6px;font-variant-numeric:tabular-nums;}
.case-meta__item .lbl{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--ink-3);line-height:1.3;}
.case-shot{position:relative;}
.case-shot::before{
  content:"";position:absolute;left:-40px;right:-40px;top:20%;bottom:-30px;
  background:radial-gradient(50% 40% at 50% 50%,rgba(251,195,47,.14),transparent 70%);
  filter:blur(24px);z-index:-1;pointer-events:none;
}
.case-shot__media{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#F2EFE6;box-shadow:0 30px 60px -24px rgba(20,20,30,.20),0 12px 24px -10px rgba(20,20,30,.08);}
.case-shot__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
/* Client metrics relocated onto the visualization as a glass overlay (JS moves it; CSS styles it) */
.case-shot .case-meta{position:absolute;left:18px;right:18px;bottom:-32px;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;padding:16px 20px;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 34px -16px rgba(20,20,30,.30);}
html.dark .case-shot .case-meta{background:rgba(29,27,32,.82);border-color:rgba(255,255,255,.12);}
/* Bottom-anchored floating badges in case-shot collide with the metrics overlay — pull them to the top */
.case-shot .accent[style*="bottom:-"]{top:-18px!important;bottom:auto!important;}

/* ════ REVIEWS / Google ════ */
.reviews{padding:100px 0;background:var(--bg-tint);position:relative;overflow:hidden;}
.reviews::before{
  content:"";position:absolute;right:-200px;top:20%;width:700px;height:600px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(251,195,47,.10),transparent 70%);
  filter:blur(22px);z-index:0;pointer-events:none;
}
.reviews .container{position:relative;z-index:1;}
.reviews-head{text-align:center;max-width:780px;margin:0 auto 24px;}
.g-summary-wrap{display:flex;justify-content:center;margin-bottom:48px;}
.g-summary{display:inline-flex;align-items:center;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:9999px;padding:14px 28px 14px 14px;box-shadow:0 14px 30px -16px rgba(20,20,30,.10);text-decoration:none;color:inherit;}
.g-summary .g-logo{width:48px;height:48px;border-radius:50%;background:conic-gradient(from -45deg,#4285F4 0deg,#EA4335 90deg,#FBBC05 180deg,#34A853 270deg,#4285F4 360deg);position:relative;flex:0 0 auto;}
.g-summary .g-logo::after{content:"G";position:absolute;inset:4px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:var(--ink);}
.g-summary .g-num-block{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.g-summary .g-num{font-size:30px;font-weight:700;letter-spacing:-.5px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
.g-summary .g-stars{color:var(--brand-deep);font-size:13px;letter-spacing:1px;margin-top:4px;}
.g-summary .g-meta{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:24px;}
.g-summary .g-meta .t{font-weight:600;font-size:14px;color:var(--ink);}
.g-summary .g-meta .s{font-size:12px;color:var(--ink-3);}
.g-summary .g-link{font-size:13px;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9999px;background:var(--surface-2);transition:background .2s;}
.g-summary .g-link:hover{background:var(--brand-soft);}
.reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:18px;min-height:300px;transition:transform .3s ease,box-shadow .3s ease;}
.review-card:hover{transform:translateY(-3px);box-shadow:0 28px 60px -20px rgba(20,20,30,.12);}
.review-card .top{display:flex;justify-content:space-between;align-items:flex-start;}
.review-card .stars{color:var(--brand-deep);font-size:14px;letter-spacing:1px;}
.review-card .g-mark{width:22px;height:22px;border-radius:50%;background:conic-gradient(from -45deg,#4285F4 0deg,#EA4335 90deg,#FBBC05 180deg,#34A853 270deg,#4285F4 360deg);position:relative;flex:0 0 auto;}
.review-card .g-mark::after{content:"G";position:absolute;inset:2px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink);}
.review-card .quote{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;flex:1;}
.review-card .more{font-size:13px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.review-card .author{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line);}
.review-card .avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;flex:0 0 auto;letter-spacing:-.2px;}
.review-card .author .name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2;}
.review-card .author .role{font-size:12px;color:var(--ink-3);}

/* ════ REVIEWS CAROUSEL + MODAL (jednotná DB, content/reviews.json) ════ */
.reviews-carousel{position:relative;display:flex;align-items:center;gap:10px;}
.reviews-viewport{overflow:hidden;flex:1;min-width:0;}
.reviews-track{display:flex;gap:20px;align-items:stretch;transition:transform .45s cubic-bezier(.22,1,.36,1);will-change:transform;}
.reviews-track > .review-card{flex:0 0 calc((100% - 20px*3)/4);min-height:300px;}
/* arrows — staví na .icon-btn, ale s pozadím/rámečkem ať vyniknou vedle karet */
.rev-nav{flex:0 0 auto;width:46px;height:46px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 22px -12px rgba(20,20,30,.22);}
.rev-nav:hover{background:var(--surface);}
.rev-nav:disabled{opacity:.32;pointer-events:none;box-shadow:none;}
.rev-nav .rev-chevron{width:22px;height:22px;stroke:currentColor;fill:none;}
.rev-nav:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}
/* dots */
.reviews-dots{display:flex;justify-content:center;gap:8px;margin-top:28px;}
.reviews-dots button{width:8px;height:8px;border-radius:999px;border:0;background:var(--line-strong);padding:0;cursor:pointer;transition:width .2s ease,background .2s ease;}
.reviews-dots button:hover{background:var(--ink-4);}
.reviews-dots button.is-active{width:22px;background:var(--brand-deep);}
.reviews-dots button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
/* quote line-clamp + "Číst celou recenzi" jako tlačítko (otevírá modal, ne Google) */
/* flex:0 0 auto → výška = přesně 6 řádků (ne natažené flexem) → čistý ořez bez půlřádku */
.review-card .quote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 auto;}
.reviews-track .review-card .author{margin-top:auto;align-items:flex-start;}
.review-card .author .role{line-height:1.55;}
.review-card .rev-role,.review-card .rev-company,.review-card .rev-date{display:block;}
.review-card .more{align-self:flex-start;appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:0;}
.review-card .more:hover{color:var(--brand-deep);}
.review-card .more[hidden]{display:none;}
.review-card .more:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;}
/* logo místo iniciály */
.avatar--logo{background:#fff !important;overflow:hidden;border:1px solid var(--line);}
.avatar--logo img{width:100%;height:100%;object-fit:contain;display:block;}
/* modal — celá recenze v překryvu */
.rev-modal{border:0;padding:0;background:transparent;max-width:640px;width:calc(100% - 32px);color:var(--ink);}
.rev-modal::backdrop{background:rgba(15,15,20,.55);backdrop-filter:blur(2px);}
.rev-modal__card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:0 40px 90px -30px rgba(20,20,30,.45);}
.rev-modal__close{position:absolute;top:10px;right:10px;color:var(--ink-3);}
.rev-modal__close:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.rev-modal__top{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.rev-modal__top .stars{color:var(--brand-deep);font-size:15px;letter-spacing:1px;}
.rev-modal__q{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 24px;max-height:60vh;overflow:auto;white-space:pre-line;}
.rev-modal__auth{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px;}
.rev-modal__auth .avatar{width:40px;height:40px;}
.rev-modal__name{font-size:15px;font-weight:600;color:var(--ink);line-height:1.2;}
.rev-modal__meta{font-size:12px;color:var(--ink-3);}
/* responzivita — shodné breakpointy s perView() v app.js (1100/900/600) */
@media (max-width:1100px){.reviews-track > .review-card{flex-basis:calc((100% - 20px*2)/3);}}
@media (max-width:900px){.reviews-track > .review-card{flex-basis:calc((100% - 20px)/2);}}
@media (max-width:600px){.reviews-track > .review-card{flex-basis:100%;}.reviews-carousel{gap:6px;}.rev-nav{width:40px;height:40px;}.rev-modal__card{padding:24px;}}
@media (prefers-reduced-motion:reduce){.reviews-track{transition:none;}}
/* dark mode (html.dark má vyšší specificitu → vyhrává bez ohledu na pořadí) */
html.dark .rev-nav{background:var(--surface);border-color:var(--line);}
html.dark .reviews-dots button{background:rgba(255,255,255,.20);}
html.dark .reviews-dots button.is-active{background:var(--brand-deep);}
html.dark .rev-modal__card{background:var(--surface);border-color:var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);}
html.dark .rev-modal__q{color:var(--ink-2);}
html.dark .rev-modal__name{color:var(--ink);}
html.dark .avatar--logo{border-color:var(--line);}

/* ════ OFFICE GALLERY (full-bleed strip) ════ */
.office{padding:100px 0 0;position:relative;overflow:hidden;}
.office-head{text-align:center;max-width:760px;margin:0 auto 40px;}
/* Office strip — full-bleed, photos touch with no gaps; active item ~3.5× wider */
.office-strip{display:flex;width:100vw;margin-left:calc(50% - 50vw);height:540px;background:var(--ink);overflow:hidden;}
.office-strip__item{position:relative;flex:1;margin:0;overflow:hidden;cursor:pointer;transition:flex .7s cubic-bezier(.22,1,.36,1);outline:none;}
.office-strip__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.65);transition:filter .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.office-strip__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.55) 100%);opacity:.6;transition:opacity .7s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.office-strip__item.is-active{flex:3.4;}
.office-strip__item.is-active img{filter:saturate(1) brightness(1);}
.office-strip__item.is-active::after{opacity:1;}
.office-strip__cap{position:absolute;left:18px;right:18px;bottom:18px;color:#fff;display:flex;flex-direction:column;gap:3px;pointer-events:none;z-index:2;}
.office-strip__cap-n{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6);}
.office-strip__cap-t{font-size:13px;font-weight:500;color:rgba(255,255,255,.85);opacity:0;transition:opacity .3s ease .15s;text-wrap:balance;}
.office-strip__item.is-active .office-strip__cap-t{opacity:1;font-size:18px;font-weight:600;letter-spacing:-.2px;color:#fff;}
.office-strip__item.is-active .office-strip__cap-n{color:rgba(255,255,255,.85);}

/* ════ FAQ ════ */
.faq{padding:100px 0;}
.faq-head{text-align:center;max-width:800px;margin:0 auto 48px;}
.faq-list{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease;}
.faq-item[open]{border-color:var(--line-strong);box-shadow:0 18px 40px -22px rgba(20,20,30,.12);}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.1px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:transform .25s ease,background .25s ease,color .25s ease;flex:0 0 auto;font-size:18px;}
.faq-item[open] summary .chev{transform:rotate(180deg);background:var(--brand);color:var(--ink);}
.faq-body{padding:0 28px 26px;font-size:15px;line-height:1.65;color:var(--ink-3);max-width:64ch;}
.faq-body strong{color:var(--ink);font-weight:600;}
.faq-body p{margin:0 0 12px;}
.faq-body p:last-child{margin-bottom:0;}

/* ════ PRICING ════ */
.pricing{padding:100px 0;background:var(--bg-tint);position:relative;overflow:hidden;}
.pricing::before{
  content:"";position:absolute;left:50%;top:-100px;width:1200px;height:500px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(251,195,47,.10),transparent 70%);
  filter:blur(22px);z-index:0;pointer-events:none;
}
.pricing .container{position:relative;z-index:1;}
.pricing-head{text-align:center;max-width:820px;margin:0 auto 48px;}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -32px rgba(20,20,30,.14),0 12px 24px -12px rgba(20,20,30,.06);}
.price-table{width:100%;border-collapse:collapse;background:transparent;font-size:15px;}
.price-table thead th{text-align:left;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:22px 28px;border-bottom:1px solid var(--line);background:#FAFAF7;}
.price-table thead th:nth-child(2),.price-table thead th:nth-child(3){text-align:right;}
.price-table tbody tr{border-bottom:1px solid var(--line);transition:background .2s;}
.price-table tbody tr:last-child{border-bottom:0;}
.price-table tbody tr:hover{background:rgba(251,195,47,.04);}
.price-table tbody td{padding:22px 28px;vertical-align:top;}
.price-table tbody td:nth-child(2),.price-table tbody td:nth-child(3){text-align:right;white-space:nowrap;font-weight:600;color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums;}
.price-table .svc{display:flex;flex-direction:column;gap:6px;}
.price-table .svc .name{font-weight:600;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:-.1px;}
.price-table .svc .name a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand);text-decoration-thickness:2px;}
.price-table .svc .name .badge{background:var(--brand);color:var(--ink);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;font-weight:600;}
.price-table .svc .desc{font-size:13px;color:var(--ink-3);line-height:1.5;}
.price-table .highlight{background:var(--brand-soft);position:relative;}
.price-table .highlight td:first-child{border-left:3px solid var(--brand);}
.price-table tbody tr.highlight:hover{background:var(--brand-soft);}
.price-foot{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:24px;text-align:center;}

/* ════ CONTACT ════ */
.contact{padding:100px 0 0;background:var(--bg);overflow:visible;}
.contact .container{position:relative;}
.contact-head{text-align:center;max-width:760px;margin:0 auto 48px;}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:0;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -28px rgba(20,20,30,.16),0 12px 24px -12px rgba(20,20,30,.08);min-height:680px;}
.contact-photo{position:relative;overflow:hidden;background:#3a7195;}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:74% 64%;display:block;position:absolute;inset:0;}
.contact-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,30,0) 40%,rgba(20,20,30,.45) 100%);}
.contact-photo .pin-label{position:absolute;left:74%;top:62%;transform:translate(-50%,-100%);background:#141218;color:#fff;padding:9px 16px 9px 14px;border-radius:9999px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:9px;z-index:2;letter-spacing:-.2px;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 12px 28px rgba(14,14,15,.4);white-space:nowrap;}
.contact-photo .pin-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);}
.contact-photo .pin-label::after{content:"";position:absolute;left:50%;bottom:-11px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(255,255,255,.9);transform:translateX(-50%);filter:drop-shadow(0 3px 4px rgba(14,14,15,.25));}
.contact-photo .ph-label{position:absolute;left:24px;bottom:24px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:600;z-index:2;font-family:'Roboto Mono',monospace;}
.contact-body{padding:56px;display:flex;flex-direction:column;gap:28px;}
.contact-intro{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0;}
.contact-intro strong{color:var(--ink);font-weight:600;}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.contact-card{background:var(--bg-tint);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;}
.contact-card .ic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.contact-card .ic .material-symbols-outlined{font-size:20px;}
.contact-card .ck-lbl{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 0 4px;}
.contact-card .ck-val{font-size:14px;line-height:1.4;color:var(--ink);font-weight:500;}
.contact-card .ck-val a{color:inherit;text-decoration:none;}
.contact-card .ck-val a:hover{text-decoration:underline;}
.contact-form{display:flex;flex-direction:column;gap:14px;}
.contact-form .form-title{font-family:'Roboto Flex',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0 0 4px;color:var(--ink);}
.contact-form .form-sub{font-size:13px;color:var(--ink-3);margin:0 0 8px;}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:13px;font-weight:500;color:var(--ink-2);}
.form-row input,.form-row textarea{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);transition:border-color .2s,box-shadow .2s;}
.form-row input:focus,.form-row textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(251,195,47,.2);}
.form-row textarea{resize:vertical;min-height:96px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.submit-row{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.submit-btn{width:100%;height:56px;background:var(--brand);color:var(--ink);border:0;border-radius:9999px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:filter .2s,transform .2s;box-shadow:0 14px 30px -10px rgba(251,195,47,.5);}
.submit-btn:hover{filter:brightness(.96);transform:translateY(-1px);}
.submit-btn .material-symbols-outlined{font-size:20px;}
.form-foot{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:center;}

/* ════ CTA ════ */
.cta{position:relative;padding:100px 0 80px;text-align:center;overflow:hidden;}
.cta::before{
  content:"";position:absolute;left:50%;top:50%;width:1400px;height:600px;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(251,195,47,.28),transparent 70%);
  filter:blur(20px);z-index:0;animation:pulseGlow 9s ease-in-out infinite;
}
.cta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;}
.cta h2.display{font-size:64px;letter-spacing:-1.8px;}
.cta .btn-row{justify-content:center;margin-top:8px;}

/* ════ Mega menu — base button reset (all viewports) ════ */
.topnav__trigger{appearance:none;background:transparent;border:0;cursor:pointer;font:inherit;color:var(--ink-2);position:relative;display:flex;align-items:center;gap:4px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:-.005em;transition:color .25s ease;overflow:hidden;isolation:isolate;}
.topnav__trigger:hover{color:var(--ink);}
.topnav__trigger::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s ease;border-radius:inherit;pointer-events:none;}
.topnav__chev{font-size:18px;line-height:1;transition:transform .2s ease;}
/* Desktop-only mega menu (popup), mobile <=1120px handled by chrome.css */
@media (min-width:1121px){
  .topnav__item{position:relative;display:inline-flex;align-items:center;}
  .topnav__trigger{padding:10px 10px 10px 14px;display:inline-flex;}
  .topnav__item--mega:hover>.topnav__trigger::before,
  .topnav__item--mega:focus-within>.topnav__trigger::before,
  .topnav__trigger[aria-expanded="true"]::before{opacity:.08;}
  .topnav__item--mega:hover .topnav__chev,
  .topnav__item--mega:focus-within .topnav__chev,
  .topnav__trigger[aria-expanded="true"] .topnav__chev{transform:rotate(180deg);}
  .topnav__item--mega::after{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:14px;pointer-events:none;}
  .topnav__item--mega:hover::after,
  .topnav__item--mega:focus-within::after{pointer-events:auto;}
  .mega{position:absolute;top:calc(100% + 20px);left:0;width:min(640px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(14,14,15,.14),0 4px 10px rgba(14,14,15,.06);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:100;}
  .topnav__item--mega:hover>.mega,
  .topnav__item--mega:focus-within>.mega,
  .topnav__trigger[aria-expanded="true"]+.mega{opacity:1;visibility:visible;transform:translateY(0);}
}
.mega__item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:12px;border-radius:10px;color:var(--ink);text-decoration:none;transition:background-color .15s ease;align-items:start;}
.mega__item:hover{background:var(--surface-2);}
.mega__icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent);color:var(--accent-ink);flex-shrink:0;}
.mega__icon .material-symbols-outlined{font-size:22px;}
.mega__body{min-width:0;display:flex;flex-direction:column;gap:4px;}
.mega__title{font-weight:600;font-size:14px;line-height:1.3;color:var(--ink);letter-spacing:-.005em;}
.mega__desc{font-size:12px;line-height:1.4;color:var(--ink-3);font-weight:400;}

/* ════ Topnav: identical look in non-sticky and sticky state ════
   Always 12px top offset, 60px height, .94 white glass, 14px radius. */
.topnav{top:var(--nav-offset,12px);}
.topnav .topnav__wrap,
.topnav.is-scrolled .topnav__wrap{
  height:60px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(20,18,24,.08);
  border-radius:14px;
  backdrop-filter:saturate(120%) blur(15px);
  -webkit-backdrop-filter:saturate(120%) blur(15px);
  box-shadow:0 10px 28px rgba(14,14,15,.10),0 3px 8px rgba(14,14,15,.06);
}
.topnav .topnav__brand img,
.topnav.is-scrolled .topnav__brand img{height:30px;filter:none;}
/* Logo: dark in light mode (image stays color), white in dark mode (inverted) */
html.dark .topnav .topnav__brand img{filter:brightness(0) invert(1);}
/* Nav links + icon-btn in topnav use ink-2/ink (always readable on pill) */
.topnav__nav a,
.topnav__nav .topnav__trigger{color:var(--ink-2);}
.topnav__nav a:hover,
.topnav__nav .topnav__trigger:hover,
.topnav__nav .topnav__trigger[aria-expanded="true"]{color:var(--ink);}
.topnav__right .icon-btn,
.topnav__menu{color:var(--ink);}
.topnav .theme-switch{color:var(--ink);}
html.dark .topnav .theme-switch{color:var(--ink);}
/* Track: use rgba bg + opacity:1 so the thumb (child) doesn't inherit .22 fade */
.topnav .theme-switch__track{background:rgba(20,18,24,.22);opacity:1;}
html.dark .topnav .theme-switch__track{background:rgba(255,255,255,.22);opacity:1;}
.topnav .theme-switch:hover .theme-switch__track{background:rgba(20,18,24,.32);}
html.dark .topnav .theme-switch:hover .theme-switch__track{background:rgba(255,255,255,.32);}
/* Thumb: dark in light mode, white in dark mode (override chrome.css :not rules) */
.topnav .theme-switch__thumb{background:#141218;color:#fff;}
html.dark .topnav .theme-switch__thumb{background:#fff;color:#141218;}
body{padding-top:0;}

/* Buttons override unlayered a{color:inherit} above — explicit per variant. */
a.btn--accent,.btn--accent{color:var(--accent-ink);}
a.btn--ink,.btn--ink{color:var(--md-sys-color-inverse-on-surface,#fff);}
a.btn--ghost,.btn--ghost{color:var(--ink);}
a.btn--glass,.btn--glass{color:#fff;}

/* ════ Responsive ════ */
@media (max-width:960px){
  h1.display{font-size:48px;letter-spacing:-1.4px;}
  h2.display{font-size:36px;letter-spacing:-.8px;}
  .pillars-grid{grid-template-columns:1fr;gap:32px;}
  .stats-band__grid{grid-template-columns:repeat(2,1fr);}
  .more-grid{grid-template-columns:1fr;}
  .module-row,.module-row.reverse{grid-template-columns:1fr;gap:48px;}
  .module-row.reverse .module-copy{order:1;}
  .module-row.reverse .module-shot{order:2;}
  .module{padding:80px 0;}
  .how-flow{grid-template-columns:1fr;gap:16px;}
  .how-flow .arrow{display:none;}
  /* How steps + Process steps: 2-col compact grid on mobile */
  .how-steps,.process-steps{grid-template-columns:repeat(2,1fr);gap:24px 16px;}
  .how-step,.process-step{padding:0;}
  .how-steps::before,.process-steps::before{display:none;}
  .about-grid{grid-template-columns:1fr;gap:48px;}
  /* Hide floating badges on mobile — they overlap text when photo stacks */
  .about-photo .badge{display:none;}
  /* About bullets: switch from flex (creates separate items per text run) to
     block with absolute bullet so <strong> + text flow as one paragraph */
  .about-bullets li{display:block;position:relative;padding-left:36px;}
  .about-bullets li::before{position:absolute;left:0;top:.7em;margin:0;}
  /* Pillar: icon inline with heading on mobile (not stacked above) */
  .pillar{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:center;}
  .pillar .icon{width:40px;height:40px;border-radius:10px;margin-bottom:0;}
  .pillar .icon .material-symbols-outlined{font-size:22px;}
  .pillar h3{grid-column:2;margin:0;font-size:18px;line-height:1.25;}
  .pillar p{grid-column:1 / -1;margin-top:6px;}
  .about-photo{max-width:340px;margin:0 auto;}
  .about-photo .badge-rating{left:auto;right:-16px;bottom:24px;}
  .about-photo .badge-experience{right:-16px;top:24px;}
  .case-row,.case-row.reverse{grid-template-columns:1fr;gap:32px;padding:36px 24px;margin-bottom:20px;}
  .case-row::before{left:24px;right:24px;}
  /* Mobile: metrics back to a normal block under the visualization (overlay too tight on small images) */
  .case-shot .case-meta{position:static;left:auto;right:auto;bottom:auto;margin-top:18px;padding:0;gap:18px 24px;justify-content:flex-start;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
  html.dark .case-shot .case-meta{background:transparent;}
  .case-row.reverse .case-copy{order:1;}
  .case-row.reverse .case-shot{order:2;}
  .reviews-grid{grid-template-columns:1fr;}
  .office-strip{flex-direction:column;height:auto;}
  .office-strip__item{flex:none !important;aspect-ratio:16/10;}
  .office-strip__item img{filter:saturate(1) brightness(.85) !important;}
  .office-strip__cap-t{font-size:18px !important;opacity:1 !important;}
  .price-table thead th,.price-table tbody td{padding:16px 14px;font-size:13px;}
  .contact-grid{grid-template-columns:1fr;min-height:auto;}
  .contact-photo{min-height:280px;}
  .contact-body{padding:40px 28px;}
  .contact-cards,.form-grid{grid-template-columns:1fr;}
  .lokalita__grid{grid-template-columns:1fr;gap:40px;}
  .cta h2.display{font-size:36px;letter-spacing:-.8px;}
  .module-shot .accent,.case-shot .accent{display:none;}
  /* Google reviews summary card: compact on mobile */
  /* Google reviews summary: rectangular card on mobile (not pill), compact */
  .g-summary-wrap{margin:0 16px 32px;}
  .g-summary{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;}
  .g-summary .g-logo{width:36px;height:36px;}
  .g-summary .g-logo::after{font-size:16px;inset:3px;}
  .g-summary .g-num{font-size:22px;}
  .g-summary .g-stars{font-size:11px;}
  .g-summary .g-meta{padding-left:12px;border-left:1px solid var(--line);}
  .g-summary .g-meta .t{font-size:13px;}
  .g-summary .g-meta .s{font-size:11px;}
  .g-summary .g-link{margin-left:auto;font-size:12px;padding:6px 10px;}
  .g-summary .g-link span{display:none;}
}
@media (max-width:600px){
  .play-btn{width:64px;height:64px;}
  .play-btn .material-symbols-outlined{font-size:30px;}
  /* Hide URL slug on mobile (browser mockup URL bar) */
  .url .path{display:none;}
  /* Eyebrow dot fragmenting on wrapped centered eyebrows on mobile — hide */
  .eyebrow::before{display:none;}
  /* Process steps: shrink icons so 5 fit on narrow phones */
  .process-step__num{width:56px;height:56px;font-size:18px;border-radius:16px;}
  .process-steps{gap:16px 12px;}
  /* Office strip: cancel full-bleed on small phones (overflow) */
  .office-strip{width:100%;margin-left:0;}
  /* Price table: allow horizontal scroll, prevent overflow */
  .price-card{overflow-x:auto;}
  .price-table{font-size:13px;min-width:520px;}
  /* Showcase bullets: tighter spacing */
  .showcase__bullets{gap:8px 16px;font-size:12px;}
}
@media (max-width:480px){
  /* Office strip safe height */
  .office-strip{height:auto;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ═══ Dark-mode special-case overrides for v2 sections ═══
   Token tokens are defined in chrome.css :root.dark — these are component
   tweaks that need higher specificity or extra color tuning. */
html.dark .pill-btn { background: var(--ink); color: var(--bg); }
html.dark .pill-btn.brand { background: var(--brand); color: var(--accent-ink); }
html.dark .pill-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
html.dark .form-row input:focus,
html.dark .form-row textarea:focus { background: var(--surface); border-color: var(--brand); }
html.dark .review-card .quote,
html.dark .review-card .name,
html.dark .faq-item summary,
html.dark .faq-item .faq-q { color: var(--ink); }
html.dark .review-card .role,
html.dark .faq-item__body { color: var(--ink-2); }
html.dark .price-table thead th { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
html.dark .price-table td { border-color: var(--line); color: var(--ink-2); }
html.dark .price-table .svc .name { color: var(--ink); }
html.dark .price-table tbody tr:hover { background: rgba(251,195,47,.06); }
html.dark .mega__item { color: var(--ink); }
html.dark .mega__item:hover { background: var(--surface-3); }
html.dark .mega__title { color: var(--ink); }
html.dark .mega__desc { color: var(--ink-2); }
html.dark .contact-card .ck-lbl { color: var(--ink-3); }
html.dark .contact-card .ck-val,
html.dark .contact-card .ck-val a { color: var(--ink); }
html.dark .contact-card .ic { background: var(--surface-2); color: var(--ink); }
html.dark .ph-label,
html.dark .pin-label { background: rgba(20,18,24,.78); color: var(--ink); }
/* Office strip caption — text already has good contrast via rgba whites */
html.dark .submit-btn { background: var(--brand); color: var(--accent-ink); }
html.dark .submit-btn:hover { filter: brightness(.95); }
html.dark .pill-num { background: var(--brand); color: var(--accent-ink); }
html.dark .eyebrow { color: var(--ink-3); }
html.dark .feature__media { background: var(--surface-2); }
html.dark .feature__metric { background: var(--surface-3); }
html.dark .feature__metric .l { color: var(--ink-2); }
html.dark .stats-band__num .small { color: var(--brand-deep); }
html.dark .case-meta__item .lbl { color: var(--ink-3); }
html.dark .clients-head .lead,
html.dark .reviews-head .lead,
html.dark .pricing-head .lead,
html.dark .contact-head .lead,
html.dark .features-head .lead { color: var(--ink-2); }
html.dark mark { color: var(--ink); }
html.dark .feature__copy h3 mark { background-image: linear-gradient(180deg, transparent 62%, rgba(251,195,47,.28) 62%); }
/* Elements that use var(--ink) as background (inverts in dark) — re-pin them */
html.dark .how-flow .stage.warehouse { background: var(--surface-3); color: var(--ink); }
html.dark .how-flow .stage.warehouse h4 { color: var(--ink); }
html.dark .lokalita__pin { background: var(--surface-3); color: var(--ink); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.32); }
html.dark .pill-btn { background: var(--surface-3); color: var(--ink); }
html.dark .case-shot__media { background: var(--surface-2); }
html.dark .about-photo__frame { background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface-3) 100%); }
html.dark .feature { border-color: var(--line); }
/* ─── CASE ROW FIX (M3) ───
   Light mode uses rgba(255,255,255,.55) which renders semi-white over warm bg.
   Dark mode needs solid surface-container-low (#1D1B20 per M3 dark theme).
   Selector specificity must beat .case-row (0,0,1,0) and the original rule
   has no !important, so html.dark .case-row (0,0,2,1) wins cleanly. */
html.dark .case-row { background: var(--surface); border-bottom-color: var(--line); }
/* Reveal animations: tweak shadow only (cards already use --surface) */
html.dark .feature, html.dark .more-card, html.dark .review-card,
html.dark .faq-item, html.dark .price-card, html.dark .contact-grid,
html.dark .stats-band__item, html.dark .case-row, html.dark .more-card { box-shadow: 0 30px 60px -32px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.3); }

/* Topnav dark mode — identical pill in both states (M3 surface-container-low at .92) */
html.dark .topnav .topnav__wrap,
html.dark .topnav.is-scrolled .topnav__wrap {
  background: rgba(29, 27, 32, .92);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .3);
}
html.dark .price-cta-card { background: var(--surface-3); color: var(--ink); }
html.dark .price-cta-card .badge { background: var(--brand); color: var(--accent-ink); }
html.dark .price-cta-card .big { color: var(--ink); }
html.dark .price-cta-card .big sup { color: var(--ink-3); }
html.dark .price-cta-card p { color: var(--ink-2); }
html.dark .price-cta-card p strong { color: var(--ink); }
/* showcase__chip floats — fix base dark variant */
html.dark .showcase__chip { background: rgba(255,255,255,.10); color: rgba(255,255,255,.85); }
/* mega__item hover in dark */
html.dark .mega__item:hover { background: rgba(255,255,255,.06); }
/* CTA section background flip */
html.dark .cta { background: var(--bg); }
/* Topnav dark glass (homepage uses inline !important for light glass) */
html.dark .topnav .topnav__wrap { background: rgba(29,27,32,.78) !important; box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3) !important; }
html.dark .topnav.is-scrolled .topnav__wrap { background: rgba(29,27,32,.92) !important; box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35) !important; }
html.dark .topnav__brand img { filter: brightness(0) invert(1); }
html.dark .topnav__nav > a,
html.dark .topnav__nav .topnav__trigger { color: var(--ink); }
/* Footer in dark */
html.dark .footer { background: var(--surface-2); border-top-color: transparent; }
html.dark .footer__brand img { filter: brightness(0) invert(1); }
html.dark .footer h6,
html.dark .footer__legal { color: var(--muted); }
html.dark .footer ul a:hover { color: var(--ink); }