/* ═══════════════════════════════════════════════════════════════
   Khoder.cz — 1:1 match of prototype design
   M3 token naming applied over prototype's native values
   ═══════════════════════════════════════════════════════════════ */

@layer tokens, reset, layout, components, variants, utilities, themes;

/* ────── TOKENS ────── */
@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:      #FFD83A;
    --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: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --f-serif:   "Instrument Serif", "Source Serif 4", Georgia, serif;

    /* 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;
  }
}

/* ────── RESET ────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h-scrolled) + var(--nav-offset) - 28px);
  }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur-4), color var(--dur-4);
    /* Defeats the 100vw-scrollbar bug: .office-strip uses width:100vw to break out
       of its container, but 100vw includes vertical-scrollbar width while actual
       document width doesn't → stray horizontal scrollbar. `clip` trims the overflow
       without creating a scroll container, so position:sticky descendants still work. */
    overflow-x: clip;
  }
  h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-display); letter-spacing: -0.02em; font-weight: 700; }
  h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
  h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.028em; }
  h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; }
  h4 { font-size: 18px; line-height: 1.3; }
  p { margin: 0 0 14px; }
  a { color: inherit; text-decoration: none; }
  img, svg, video { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
  mark { background: transparent; color: inherit; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ────── LAYOUT & TYPE ────── */
@layer layout {
  .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
  .sec { padding: clamp(32px, 4vw, 56px) 0; position: relative; }
  .sec--tight { padding-top: 0; }
  .sec--tint  { background: var(--surface-2); }

  .svc-sec { padding-top: clamp(36px, 4vw, 56px); }
  .cli-sec { padding-top: clamp(20px, 2.5vw, 36px); }
  .svc-sec { padding-bottom: clamp(20px, 2.5vw, 36px); }

  .lead {
    font-size: clamp(17px, 1.25vw, 19px);
    color: var(--ink-2);
    line-height: 1.55;
  }
  .micro {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
  }
  .center { text-align: center; }

  .section-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    margin-bottom: 16px;
  }
  .section-label::before {
    content: ""; width: 28px; height: 2px;
    background: var(--ink); border-radius: 2px;
  }
  .section-head { max-width: 820px; margin-bottom: clamp(28px, 3vw, 40px); }
  .section-title { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.028em; }
  .section-title .ser,
  .ser {
    font-family: var(--f-serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--ink-2);
  }
  .section-head .lead { margin-top: 18px; }

  .mark {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 0 .15em;
    border-radius: 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .ink-chip {
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 0 .35em;
    border-radius: 6px;
    font-weight: 600;
  }
}

/* ────── COMPONENTS ────── */
@layer components {

  /* ═══ Buttons ═══ */
  .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;
    transition: transform var(--dur-2), box-shadow var(--dur-3), background-color var(--dur-3);
    overflow: hidden; isolation: isolate;
  }
  .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), 0 10px 24px rgba(255,216,58,.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 {
    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; }

  /* ═══ Pills ═══ */
  .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;
  }
  .chip-dark {
    /* Always-dark badge with fixed yellow text — never inverse-flipped, so the
       brand accent keeps contrast against the chip in both themes. */
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: #141218; color: var(--accent);
    font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700;
  }

  /* ═══ Top app bar — transparent over hero; floating pill when scrolled ═══ */
  .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; }
  /* M3 state-layer pattern: currentColor overlay via ::before.
     Direct-child selector `> a` excludes nested mega-menu items. */
  .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;
    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: #fff; }
  /* Pill theme switch — sliding thumb, DARK/LIGHT labels, active side highlighted */
  .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: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .4;
    transition: opacity var(--dur-2);
    line-height: 1;
  }
  /* Default (light mode): LIGHT label active */
  .theme-switch__lbl--light { opacity: 1; }
  /* Dark mode: DARK label active instead */
  .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;
  }
  /* Over hero (non-sticky light mode), white thumb disappears — tint it dark */
  .topnav:not(.is-scrolled) .theme-switch__thumb {
    background: #141218;
  }

  /* Hide labels on mobile to save space */
  @media (max-width: 560px) {
    .theme-switch__lbl { display: none; }
  }

  /* Scrolled: floating pill — detached from top, bg, border, radius, shadow, blur */
  .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; }
    .topnav.is-scrolled .topnav__wrap { height: 60px;margin: 0px 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: 0; right: 0; 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); }
    .topnav__nav.is-open .topnav__trigger { color: var(--ink); }
  }

  /* ═══ Mega menu (Služby dropdown) ═══ */
  .topnav__item { position: relative; display: inline-flex; align-items: center; }
  .topnav__trigger {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    font: inherit;
    position: relative;
    padding: 10px 10px 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    color: rgba(255,255,255,.9);
    font-weight: 500;
    letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color var(--dur-5) var(--easing-emphasized);
    overflow: hidden; isolation: isolate;
  }
  .topnav__trigger::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__trigger:hover::before,
  .topnav__item--mega:hover > .topnav__trigger::before,
  .topnav__item--mega:focus-within > .topnav__trigger::before,
  .topnav__trigger[aria-expanded="true"]::before { opacity: var(--state-hover); }
  .topnav__trigger:focus-visible::before { opacity: var(--state-focus); }
  .topnav.is-scrolled .topnav__trigger { color: var(--ink-2); }
  .topnav.is-scrolled .topnav__trigger:hover,
  .topnav.is-scrolled .topnav__item--mega:hover > .topnav__trigger,
  .topnav.is-scrolled .topnav__trigger[aria-expanded="true"] { color: var(--ink); }

  .topnav__chev {
    font-size: 18px; line-height: 1;
    transition: transform var(--dur-3) var(--easing-emphasized);
  }
  .topnav__item--mega:hover .topnav__chev,
  .topnav__item--mega:focus-within .topnav__chev,
  .topnav__trigger[aria-expanded="true"] .topnav__chev { transform: rotate(180deg); }

  /* Hover bridge — prevents gap between trigger and panel from closing the menu */
  .topnav__item--mega::after {
    content: "";
    position: absolute;
    top: 100%; left: -8px; right: -8px;
    height: 12px;
    pointer-events: none;
  }
  .topnav__item--mega:hover::after,
  .topnav__item--mega:focus-within::after { pointer-events: auto; }

  /* Mega panel */
  .mega {
    position: absolute;
    top: calc(100% + 10px);
    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 var(--dur-3) var(--easing-standard),
                transform var(--dur-3) var(--easing-emphasized),
                visibility var(--dur-3);
    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;
    position: relative; isolation: isolate;
    transition: background-color var(--dur-2);
    align-items: start;
  }
  .mega__item:hover { background: var(--surface-2); }
  .mega__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .mega__item[aria-current="page"] {
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .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: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  .mega__item--soon .mega__icon {
    background: var(--surface-3, #EEE8D9);
    color: var(--ink-2);
  }

  .mega__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mega__title {
    font-weight: 600; font-size: 14px; line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .mega__desc {
    font-size: 12.5px; line-height: 1.4;
    color: var(--muted);
    font-weight: 400;
  }
  .mega__badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--line);
  }

  /* Mobile: flatten mega into the hamburger menu */
  @media (max-width: 1120px) {
    .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 ═══ */
  .hero {
    position: relative;
    width: 100%;
    min-height: clamp(640px, 92vh, 920px);
    padding: 0;
    overflow: hidden;
    color: #fff;
    display: flex; flex-direction: column;
    isolation: isolate;
  }
  .hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    --t: clamp(0, (100vw - 300px) / 200px, 1);
    object-position:
      calc(60% - 20% * var(--t))
      calc(18% + 10% * var(--t));
    z-index: 0;
  }
  .hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(14,14,15,.24) 0%, rgba(14,14,15,.04) 18%, rgba(14,14,15,0) 48%, rgba(14,14,15,.08) 72%, rgba(14,14,15,.38) 100%),
      linear-gradient(90deg, rgba(14,14,15,.42) 0%, rgba(14,14,15,.18) 38%, rgba(14,14,15,.04) 60%, rgba(14,14,15,0) 80%);
  }
  .hero__body {
    position: relative; z-index: 2;
    flex: 1; display: flex; align-items: center;
    padding: clamp(40px, 6vw, 72px) 0;
  }
  .hero__body-inner {
    width: 100%;
    text-align: left;
  }
  /* Fluid text container — 720px on desktop, shrinks to 85vw on mobile */
  .hero__body-inner > * { max-width: min(720px, 85vw); margin-left: 0; }
  .hero__title {
    margin-top: 18px;
    color: #fff;
    /* Fluid size: 32px @ 375px viewport  →  68px @ 1200px */
    font-size: clamp(32px, calc(16px + 4.3vw), 68px);
    line-height: 1.05;
    animation: heroIn var(--dur-5) var(--easing-emphasized-decelerate) both;
    animation-delay: 60ms;
  }
  .hero__title-alt {
    display: block;
    font-family: var(--f-serif);
    font-weight: 400; font-style: italic;
    color: rgba(255,255,255,.9);
    letter-spacing: -0.02em;
  }
  .hero__lead {
    margin-top: 18px;
    color: rgba(255,255,255,.9);
    animation: heroIn var(--dur-5) var(--easing-emphasized-decelerate) both;
    animation-delay: 160ms;
  }
  /* Reserve right-side space only when the hero chart is actually visible
     (≥1024px). Below that, text falls back to the parent 85vw constraint. */
  @media (min-width: 1024px) {
    .hero__title { max-width: min(720px, 55vw); }
    .hero__lead  { max-width: min(560px, 55vw); }
  }
  .hero__cta {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 26px;
    animation: heroIn var(--dur-5) var(--easing-emphasized-decelerate) both;
    animation-delay: 240ms;
  }
  .hero .pill--glass {
    animation: heroIn var(--dur-5) var(--easing-emphasized-decelerate) both;
  }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  .hero__foot {
    position: relative; z-index: 2;
    padding-bottom: clamp(24px, 3vw, 36px);
    animation: heroIn var(--dur-5) var(--easing-emphasized-decelerate) both;
    animation-delay: 340ms;
  }
  .hero__foot-inner {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
  }
  .hero__trust {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.18);
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 28px;
    max-width: 780px; flex: 1 1 420px;
  }
  .hero__trust-label {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.7);
    font-weight: 600; white-space: nowrap;
  }
  .logo-strip {
    display: flex; align-items: center; gap: 60px; flex-wrap: wrap;
    opacity: .7;
  }
  .logo-strip img {
    height: 28px; width: auto;
    filter: grayscale(1) contrast(1.1);
  }
  .logo-strip--dark {
    gap: 28px; opacity: 1;
  }
  .logo-strip--dark img {
    height: 22px; max-width: 110px;
    filter: brightness(0) invert(1) contrast(1.1);
    opacity: .72;
    transition: opacity var(--dur-3), filter var(--dur-3);
  }
  /* logo already delivered in white — skip the bleach filter */
  .logo-strip--dark img[src$="-w.png"],
  .logo-strip--dark img[src$="-w.svg"],
  .logo-strip--dark img[src$="-white.png"],
  .logo-strip--dark img[src$="-white.svg"] {
    filter: none;
  }
  .logo-strip--dark img:hover { opacity: 1; filter: none; }
  /* White-native variants have no colors to reveal — suppress the hover shift
     so they stay visually consistent with their resting state. */
  .logo-strip--dark img[src$="-w.png"]:hover,
  .logo-strip--dark img[src$="-w.svg"]:hover,
  .logo-strip--dark img[src$="-white.png"]:hover,
  .logo-strip--dark img[src$="-white.svg"]:hover {
    opacity: .72;
  }

  .floatcard {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-2);
    display: flex; align-items: center; gap: 12px;
    color: var(--ink);
    transition: transform var(--dur-2);
  }
  .floatcard:hover { transform: translateY(-2px); }
  .floatcard__g {
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    border: 1px solid var(--line);
    flex-shrink: 0;
  }
  .floatcard__stars { color: var(--star); letter-spacing: 1px; font-size: 13px; line-height: 1; }
  .floatcard__row { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
  .floatcard__score { font-weight: 700; font-size: 15px; line-height: 1; }
  .floatcard__small { font-size: 11px; color: var(--muted); line-height: 1; }

  @media (max-width: 1120px) {
    /* Hero body content must start below the fixed 76px topnav; center-alignment
       on tall content collapses padding, so switch to flex-start with an explicit
       top offset that clears the bar plus breathing room. */
    .hero__body {
      align-items: flex-start;
      padding-top: clamp(96px, 14vw, 120px);
    }
  }
  @media (max-width: 900px) {
    .hero { min-height: 620px; }
    .hero__trust { grid-template-columns: 1fr; gap: 14px; }
  }
  @media (max-width: 640px) {
    /* Stronger left-side scrim so text remains readable over any image content.
       Gradient can't fluidly clamp like positions/widths — stays media-query-based. */
    .hero__scrim {
      background:
        linear-gradient(180deg, rgba(14,14,15,.32) 0%, rgba(14,14,15,.08) 25%, rgba(14,14,15,0) 55%, rgba(14,14,15,.2) 78%, rgba(14,14,15,.5) 100%),
        linear-gradient(90deg, rgba(14,14,15,.62) 0%, rgba(14,14,15,.42) 38%, rgba(14,14,15,.2) 68%, rgba(14,14,15,0) 95%);
    }
    .hero__cta { flex-wrap: wrap; }
    .logo-strip--dark { gap: 18px !important; }
    .logo-strip--dark img { height: 18px; }
  }

  /* ═══ STATS ═══ */
  .stats-section { padding: 0; }
  .stats-section .wrap { padding-top: clamp(16px, 2vw, 28px); padding-bottom: 0; }
  .stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .stats__item { padding: 28px 24px; border-right: 1px solid var(--line); }
  .stats__item:last-child { border-right: 0; }
  .stats__num {
    font-family: var(--f-display);
    font-size: 44px;
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 700;
  }
  .stats__dot { color: var(--accent); }
  .stats__lbl { color: var(--muted); font-size: 13px; margin-top: 8px; }
  @media (max-width: 900px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats__item { border-bottom: 1px solid var(--line); }
    .stats__item:nth-child(2n) { border-right: 0; }
  }
}

/* ────── VARIANTS — split-chrome services / index clients / kontakt b / tabs rail ────── */
@layer variants {

  /* ═══ Feature (split-chrome) ═══ */
  .feature {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 0;
    margin-bottom: 56px;
  }
  .feature--reverse { grid-template-columns: 1fr 1fr; }
  .feature__text {
    padding: clamp(32px, 4vw, 56px);
    position: relative;
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
  }
  .feature--reverse .feature__text { order: 2; border-right: 0; border-left: 1px solid var(--line); }
  .feature__text::before {
    content: attr(data-num);
    position: absolute;
    top: 20px; right: 24px;
    font-family: var(--f-display);
    font-size: 120px; line-height: 1; font-weight: 700;
    color: rgba(14,14,15,.05);
    letter-spacing: -0.04em;
    pointer-events: none;
  }
  .feature__text .pill--accent {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 10.5px;
    padding: 5px 11px;
    align-self: flex-start;
  }
  .feature__title {
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -0.022em;
    line-height: 1.15;
    margin: 18px 0 16px;
  }
  .feature__text .lead { margin-bottom: 0; }

  .bullets {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px dashed var(--line-2);
    display: grid; gap: 10px;
  }
  /* Absolute-positioned dot keeps layout robust against any inline HTML content
     (multiple <b>, <code>, alternating text — text flows naturally as a block). */
  .bullets li {
    position: relative;
    padding-left: 30px;
    font-size: 15.5px;
    color: var(--ink-2);
  }
  .bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 5px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent);
    background-image: radial-gradient(circle at 50% 50%, var(--ink) 0 3px, transparent 3.5px);
  }

  .metric {
    margin-top: 28px;
    padding: 14px 18px;
    background: var(--accent);
    border-radius: 10px;
    display: flex; align-items: baseline; gap: 10px;
  }
  .metric__v {
    font-family: var(--f-display);
    font-size: 24px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--accent-ink);
  }
  .metric__l { font-size: 13px; color: rgba(14,14,15,.7); }

  .feature__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

  .feature__media {
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    background: #F2ECDB;
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 480px;
  }
  .feature__media::before {
    content: "";
    position: absolute;
    top: 16px; left: 20px;
    z-index: 2;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff5f57;
    box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840;
  }
  .feature__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    position: absolute; inset: 0;
  }

  @media (max-width: 900px) {
    .feature, .feature--reverse { grid-template-columns: 1fr; }
    .feature__text { border-right: 0; border-bottom: 1px solid var(--line); }
    /* Always stack text above image on mobile, even for reverse variant */
    .feature--reverse .feature__text { border-left: 0; order: 0; }
    .feature--reverse .feature__media { order: 1; }
    .feature__media { min-height: 320px; }
  }

  /* ═══ Showcase ═══ */
  .showcase {
    position: relative;
    background: linear-gradient(180deg, #FAFAF7 0%, #F2F0E9 100%);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px) clamp(32px, 3vw, 48px);
    margin-bottom: 56px;
  }
  .showcase::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(900px 500px at 82% 10%, rgba(14,14,15,.04), transparent 60%),
      radial-gradient(700px 400px at 8% 95%, rgba(14,14,15,.03), transparent 60%);
  }
  .showcase > * { position: relative; z-index: 1; }
  .showcase__meta {
    max-width: 780px;
    margin: 0 auto clamp(32px, 4vw, 48px);
    text-align: center;
  }
  .showcase__meta .chip-dark { margin-bottom: 18px; }
  .showcase__title {
    font-family: var(--f-display);
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-weight: 700;
  }
  .showcase__title .ser { font-family: var(--f-serif); font-weight: 400; font-style: italic; color: var(--ink-2); }
  .showcase__sub {
    margin: 16px auto 0;
    max-width: 620px;
    color: var(--ink-2);
    font-size: 15.5px; line-height: 1.55;
  }

  /* Rail (tabs variant) — sticky pill within .showcase bounds */
  .rail {
    position: sticky;
    top: calc(var(--nav-offset) + var(--nav-h-scrolled) + 12px);
    z-index: 10;
    display: flex;
    gap: 2px;
    padding: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 1040px;
    margin: 0 auto clamp(28px, 3vw, 40px);
    scrollbar-width: none;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(14,14,15,.05), 0 2px 6px rgba(14,14,15,.03);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__item {
    appearance: none;
    position: relative;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    transition: color var(--dur-2);
    font-family: var(--f-sans);
    overflow: hidden; isolation: isolate;
  }
  .rail__item::before {
    content: "";
    position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    transition: opacity var(--dur-2);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }
  .rail__item > * { position: relative; z-index: 1; }
  .rail__item::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 2px;
    height: 2px; background: transparent;
    border-radius: 2px;
    transition: background-color var(--dur-2);
    z-index: 1;
  }
  .rail__item:hover { color: var(--ink); }
  .rail__item:hover::before { opacity: var(--state-hover); }
  .rail__item:focus-visible::before { opacity: var(--state-focus); }
  .rail__item:active::before { opacity: var(--state-pressed); }
  .rail__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .rail__item.is-active { color: var(--ink); }
  .rail__item.is-active::after { background: var(--accent); }
  .rail__n {
    font-family: var(--f-display);
    font-size: 11px; letter-spacing: .14em; font-weight: 700;
    color: var(--muted);
    transition: all var(--dur-2);
  }
  .rail__item.is-active .rail__n {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 3px 7px;
    border-radius: 5px;
  }
  .rail__l { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; }

  /* Browser mockup */
  .browser {
    position: relative;
    max-width: 1040px; margin: 0 auto;
    border-radius: 14px;
  }
  .nav-arrow {
    position: absolute; top: 50%;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: 0 6px 20px rgba(14,14,15,.14), 0 2px 6px rgba(14,14,15,.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    cursor: pointer;
    z-index: 5;
    transform: translateY(-50%);
    transition:
      background-color var(--dur-2),
      transform var(--dur-2) var(--easing-emphasized),
      box-shadow var(--dur-2),
      opacity var(--dur-2);
  }
  .nav-arrow .material-symbols-outlined {
    font-size: 24px !important;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  .nav-arrow--prev { left: -22px; }
  .nav-arrow--next { right: -22px; }
  /* In large desktop, push arrows outside showcase/timeline content */
  .browser > .nav-arrow--prev,
  .timeline-wrap > .nav-arrow--prev { left: -71px; }
  .browser > .nav-arrow--next,
  .timeline-wrap > .nav-arrow--next { right: -71px; }
  .nav-arrow:hover:not(:disabled) {
    background: var(--accent);
    color: var(--md-sys-color-on-primary);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 24px rgba(14,14,15,.22), 0 3px 8px rgba(14,14,15,.12);
  }
  .nav-arrow:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .nav-arrow:disabled {
    opacity: .32;
    cursor: not-allowed;
    box-shadow: 0 2px 6px rgba(14,14,15,.06);
  }

  /* Below 1280px the wrap hits the viewport edge — pull arrows back inside */
  @media (max-width: 1280px) {
    .browser > .nav-arrow--prev,
    .timeline-wrap > .nav-arrow--prev { left: -22px; }
    .browser > .nav-arrow--next,
    .timeline-wrap > .nav-arrow--next { right: -22px; }
  }
  @media (max-width: 960px) {
    .nav-arrow .material-symbols-outlined { font-size: 22px !important; }
    .nav-arrow--prev,
    .browser > .nav-arrow--prev,
    .timeline-wrap > .nav-arrow--prev { left: 6px; }
    .nav-arrow--next,
    .browser > .nav-arrow--next,
    .timeline-wrap > .nav-arrow--next { right: 6px; }
  }
  .browser__chrome {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 14px;
    position: relative; z-index: 2;
  }
  .browser__dots { display: flex; gap: 7px; }
  .browser__dots span { width: 11px; height: 11px; border-radius: 50%; }
  .browser__dots span:nth-child(1) { background: #ff5f57; }
  .browser__dots span:nth-child(2) { background: #febc2e; }
  .browser__dots span:nth-child(3) { background: #28c840; }
  .browser__addr {
    flex: 1;
    padding: 6px 14px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    font-size: 12px; color: var(--muted); letter-spacing: .01em;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .browser__body {
    background: #F7F3E5;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    aspect-ratio: 3/2;
    position: relative; z-index: 2;
    box-shadow: 0 40px 80px rgba(14,14,15,.14), 0 20px 40px rgba(14,14,15,.10);
    isolation: isolate;
  }
  /* Mobile: flip browser mockup to portrait so dashboard content has usable height */
  @media (max-width: 480px) {
    .browser__body { aspect-ratio: 1/2; }
  }
  .browser__body img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    position: absolute; inset: 0;
    transition: opacity var(--dur-4);
  }
  .browser__body img[hidden] { display: none; }

  /* ─── Interactive dashboard (tab 01) ─── */
  .dash {
    position: absolute; inset: 0;
    overflow-y: auto;
    background: #FFFDF7;
    color: var(--ink);
    font-size: 11px; line-height: 1.4;
    padding: 14px 18px 16px;
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .dash::-webkit-scrollbar { width: 8px; }
  .dash::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
  .dash[hidden] { display: none; }
  .dash > * { flex-shrink: 0; }

  .dash__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .dash__title {
    font-family: var(--f-display);
    font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
    margin: 0;
  }
  .dash__sub { font-size: 10px; color: var(--muted); margin: 2px 0 0; }
  .dash__muted { color: var(--muted); font-weight: 400; }
  .dash__range {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 10px; font-weight: 500;
    white-space: nowrap;
  }
  .dash__range .material-symbols-outlined { font-size: 12px !important; }

  .dash__kpis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    list-style: none; padding: 0; margin: 0;
  }
  .dash__kpi {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
  }
  .dash__kpi:hover { border-color: var(--line-2); box-shadow: 0 2px 4px rgba(14,14,15,.04); }
  .dash__kpi--accent { background: var(--accent); border-color: transparent; }
  .dash__kpi-k {
    font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
  }
  .dash__kpi--accent .dash__kpi-k { color: rgba(0,0,0,.65); }
  .dash__kpi-v {
    font-family: var(--f-display);
    font-size: 20px; font-weight: 700; letter-spacing: -0.028em;
    line-height: 1.1; margin-top: 4px;
  }
  .dash__kpi-u { font-size: 10px; color: var(--muted); letter-spacing: 0; margin-left: 2px; font-weight: 500; }
  .dash__kpi--accent .dash__kpi-u { color: rgba(0,0,0,.6); }
  .dash__kpi-d { font-size: 10px; color: var(--muted); margin-top: 3px; }
  .dash__kpi-d--up { color: var(--ok); font-weight: 600; }
  .dash__kpi--accent .dash__kpi-d { color: rgba(0,0,0,.7); }

  .dash__charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
  .dash__chart {
    background: #fff; border: 1px solid var(--line);
    border-radius: 8px; padding: 10px 12px; margin: 0;
    min-height: 150px; position: relative;
  }
  .dash__chart figcaption {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin-bottom: 6px;
  }
  .dash__chart-title {
    font-size: 10.5px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--ink);
  }
  .dash__legend {
    display: inline-flex; gap: 10px;
    font-size: 9px; color: var(--muted);
  }
  .dash__legend span { display: inline-flex; align-items: center; gap: 4px; }
  .dash__legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

  .dash__svg { width: 100%; height: 140px; display: block; cursor: crosshair; }
  .dash__tooltip {
    position: absolute; top: 28px;
    background: var(--ink); color: #fff;
    padding: 6px 9px; border-radius: 6px;
    font-size: 9.5px; line-height: 1.3;
    pointer-events: none; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 2;
  }
  .dash__tooltip b { font-weight: 700; }
  .dash__tooltip .t-rev { color: var(--accent); }
  .dash__tooltip .t-prof { color: #FFB089; }

  .dash__donut-wrap {
    display: flex; align-items: center; gap: 12px;
    padding-top: 4px;
  }
  .dash__donut { width: 96px; height: 96px; flex-shrink: 0; }
  .dash__donut path {
    transition: transform var(--dur-2), opacity var(--dur-2);
    transform-origin: 60px 60px; cursor: pointer;
  }
  .dash__donut path:hover { transform: scale(1.04); }
  .dash__donut-legend {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 3px;
    font-size: 10px; flex: 1; min-width: 0;
  }
  .dash__donut-legend li {
    display: grid; grid-template-columns: 10px 1fr auto; gap: 6px;
    align-items: center;
    padding: 2px 4px; border-radius: 3px;
    transition: background-color var(--dur-2);
  }
  .dash__donut-legend li:hover { background: var(--surface-2); }
  .dash__donut-legend i { width: 8px; height: 8px; border-radius: 2px; }
  .dash__donut-legend .pct { color: var(--muted); font-variant-numeric: tabular-nums; }

  .dash__table-wrap {
    background: #fff; border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden;
  }
  .dash__table-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .dash__table-head .dash__muted { font-size: 9.5px; }
  .dash__table-scroll { overflow-x: auto; scrollbar-width: thin; }
  .dash__table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 10.5px; min-width: 640px;
  }
  .dash__table th, .dash__table td {
    padding: 7px 10px; text-align: left;
    border-bottom: 1px solid var(--line);
  }
  .dash__table thead th {
    position: sticky; top: 0;
    background: var(--surface);
    font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    z-index: 1;
  }
  .dash__table tbody tr { transition: background-color var(--dur-2); }
  .dash__table tbody tr:hover { background: rgba(255,216,58,.12); }
  .dash__table tbody tr:last-child td { border-bottom: 0; }
  .dash__table tfoot th {
    background: var(--bg);
    font-family: var(--f-display); font-weight: 700;
    font-size: 10.5px; color: var(--ink);
    letter-spacing: -0.005em; text-transform: none;
    border-top: 1px solid var(--line);
  }
  .dash__table .num {
    text-align: right; font-variant-numeric: tabular-nums;
    font-family: var(--f-display); letter-spacing: -0.015em;
    white-space: nowrap;
  }
  .dash__table td.num { font-weight: 600; }
  .dash__table .hm-pos-1 { background: rgba(46,125,91,.08); }
  .dash__table .hm-pos-2 { background: rgba(46,125,91,.18); }
  .dash__table .hm-pos-3 { background: rgba(46,125,91,.32); }
  .dash__table .hm-neg-1 { background: rgba(179,38,30,.08); }
  .dash__table .hm-neg-2 { background: rgba(179,38,30,.18); color: #7a1a15; }
  .dash__table .hm-neg-3 { background: rgba(179,38,30,.32); color: #5a0f0b; }

  /* ─── Dashboard variant: Výkon kampaní ─── */
  .cmp__cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    list-style: none; padding: 0; margin: 0;
  }
  .cmp__card {
    position: relative;
    padding: 12px 14px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2);
  }
  .cmp__card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--ch);
  }
  .cmp__card:hover {
    border-color: var(--line-2);
    box-shadow: 0 4px 12px rgba(14,14,15,.06);
    transform: translateY(-1px);
  }
  .cmp__card > header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
  }
  .cmp__dot {
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--ch);
  }
  .cmp__name {
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink);
  }
  .cmp__cost {
    font-family: var(--f-display);
    font-size: 22px; font-weight: 700; letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
  }
  .cmp__u { font-size: 11px; color: var(--muted); letter-spacing: 0; font-weight: 500; margin-left: 2px; }
  .cmp__meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px;
    padding: 3px 0;
    color: var(--muted);
  }
  .cmp__meta b {
    font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em;
    font-size: 11px; color: var(--ink);
  }
  .cmp__roas {
    display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 4px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--line);
    align-items: baseline;
  }
  .cmp__roas-k { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .cmp__roas-v {
    justify-self: end;
    font-family: var(--f-display); font-size: 14px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--ch);
  }
  .cmp__bar {
    grid-column: 1 / -1;
    height: 4px; border-radius: 2px;
    background: var(--surface-2);
    overflow: hidden;
  }
  .cmp__bar i {
    display: block; height: 100%;
    background: var(--ch);
    border-radius: 2px;
    animation: cmpBarIn var(--dur-5) var(--easing-emphasized) both;
  }
  @keyframes cmpBarIn { from { width: 0 !important; } }

  /* Stacked bars chart */
  .dash__chart--stack .dash__svg {
    height: 150px;
    cursor: pointer;
  }
  .cmp-bar-group rect { transition: opacity var(--dur-2); }
  .cmp-bar-group:hover rect { opacity: .85; }
  .cmp-bar-group.is-active rect { opacity: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }

  /* Tab switcher + attribution */
  .cmp__detail {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .cmp__tabs {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .cmp__tab {
    position: relative;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  }
  .cmp__tab:hover { background: #fff; }
  .cmp__tab.is-active {
    background: var(--ink); color: #fff;
    border-color: var(--ink);
  }
  .cmp__attribution {
    margin-left: auto;
    font-size: 9.5px; letter-spacing: .04em;
    color: var(--muted);
    font-style: italic;
  }
  .dash--cmp .dash__table { min-width: 560px; }

  /* ─── Dashboard variant: Denní statistiky výkonu ─── */
  .dash__svg--daily { height: 260px; cursor: crosshair; }
  .dash--daily .dash__kpis { grid-template-columns: repeat(4, 1fr); }
  .dash--daily .dash__table { min-width: 780px; }
  .dash--daily .dash__table td.num { font-variant-numeric: tabular-nums; }

  .daily-series-area { transition: opacity var(--dur-2); }
  .daily-series-line { transition: stroke-width var(--dur-2), opacity var(--dur-2); }
  .daily-series-dot  { transition: r var(--dur-2), opacity var(--dur-2); }
  .daily-series-label { pointer-events: none; user-select: none; }

  .dash__chart--daily[data-focus="google"]   .daily-series[data-ch="google"]   { opacity: 1; }
  .dash__chart--daily[data-focus="google"]   .daily-series:not([data-ch="google"])   { opacity: .28; }
  .dash__chart--daily[data-focus="facebook"] .daily-series[data-ch="facebook"] { opacity: 1; }
  .dash__chart--daily[data-focus="facebook"] .daily-series:not([data-ch="facebook"]) { opacity: .28; }
  .dash__chart--daily[data-focus="seznam"]   .daily-series[data-ch="seznam"]   { opacity: 1; }
  .dash__chart--daily[data-focus="seznam"]   .daily-series:not([data-ch="seznam"])   { opacity: .28; }

  .daily-hover-slice { cursor: crosshair; }
  .daily-hover-slice:hover ~ .daily-indicator,
  .daily-indicator.is-on { opacity: 1; }

  @media (max-width: 820px) {
    .dash--daily .dash__kpis { grid-template-columns: repeat(2, 1fr); }
    .dash__svg--daily { height: 220px; }
  }

  /* ─── Dashboard variant: Meziroční srovnání ─── */
  .dash__svg--yoy { height: 300px; cursor: crosshair; }
  .dash--yoy .dash__table { min-width: 680px; }
  .yoy-bar { transition: opacity var(--dur-2), filter var(--dur-2); cursor: crosshair; }
  .yoy-bar:hover { filter: brightness(1.08) drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
  .yoy-label { pointer-events: none; user-select: none; }
  .yoy-legend-be-dash {
    width: 14px !important; height: 0 !important;
    border-radius: 0 !important;
    border-top: 1.5px dashed #3a3a40;
    background: transparent !important;
  }

  @media (max-width: 820px) {
    .dash__svg--yoy { height: 240px; }
  }

  /* ─── Dashboard variant: Prodeje produktů ─── */
  .dash__svg--sales { height: 340px; cursor: default; }
  .dash--sales .dash__table { min-width: 780px; }
  .dash--sales .dash__table td:first-child { max-width: 260px; }
  .dash--sales .dash__table td:first-child .sales-row-sub {
    display: block; font-size: 9px; color: var(--muted); font-weight: 500;
    margin-top: 1px; letter-spacing: .02em;
  }

  .sales__selectors {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: stretch;
  }
  .sales__tabs {
    flex: 1 1 auto; min-width: 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
  }
  .sales__tabs-label {
    font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    padding: 0 8px 0 4px;
    align-self: center;
    white-space: nowrap;
  }

  .sales-bar { transition: opacity var(--dur-2), filter var(--dur-2); cursor: pointer; }
  .sales-bar:hover { filter: brightness(1.06); }
  .sales-bar-bg { fill: var(--surface-2); }
  .sales-bar-label, .sales-bar-value, .sales-bar-sub {
    pointer-events: none; user-select: none;
    font-family: Inter, sans-serif;
  }

  @media (max-width: 820px) {
    .dash__svg--sales { height: 300px; }
    .sales__selectors { flex-direction: column; }
  }

  /* ─── Dashboard variant: Zásoby a ležáci ─── */
  .dash__svg--stock { height: 340px; cursor: crosshair; }
  .dash--stock .dash__table { min-width: 900px; }
  .dash--stock .dash__table td code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10px;
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0;
  }

  .stock-zone-risk { fill: #C13030; opacity: .08; }
  .stock-zone-dead { fill: #B06A1E; opacity: .08; }
  .stock-zone-label {
    font-family: Inter, sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    pointer-events: none; user-select: none;
  }
  .stock-dot {
    transition: r var(--dur-2), filter var(--dur-2), opacity var(--dur-2);
    cursor: crosshair;
  }
  .stock-dot:hover { filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
  .dash__chart--stock[data-focus="risk"] .stock-dot:not([data-c="risk"]) { opacity: .22; }
  .dash__chart--stock[data-focus="dead"] .stock-dot:not([data-c="dead"]) { opacity: .22; }

  .stock-score {
    display: inline-block;
    min-width: 34px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #C8913A, #A5691E);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: -0.01em;
  }

  @media (max-width: 820px) {
    .dash__svg--stock { height: 280px; }
  }

  @media (max-width: 820px) {
    .dash { padding: 10px 12px; font-size: 10px; }
    .dash__kpis { grid-template-columns: repeat(2, 1fr); }
    .dash__charts { grid-template-columns: 1fr; }
    .dash__donut-wrap { justify-content: flex-start; }
    .cmp__cards { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .dash__head { gap: 8px; }
    .dash__range { font-size: 9px; padding: 4px 8px; }
  }

  .showcase__benefits {
    max-width: 1040px;
    margin: 0 auto clamp(28px, 3vw, 40px);
  }
  .showcase__hook {
    font-family: var(--f-display);
    font-size: clamp(18px, 2.2vw, 23px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.017em;
    color: var(--ink);
    max-width: 920px;
    margin: 0 0 clamp(20px, 2.5vw, 32px);
    transition: opacity 180ms var(--easing-standard, ease-out);
  }
  .showcase__benefits-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  .showcase__bk {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink); font-weight: 700;
    margin-bottom: 8px;
    display: inline-flex; gap: 8px; align-items: center;
  }
  .showcase__bk::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255,216,58,.25);
  }
  .showcase__bv {
    font-size: 15px; color: var(--ink-2); line-height: 1.45;
    transition: opacity 180ms var(--easing-standard, ease-out);
  }
  .showcase__benefits.is-switching .showcase__hook,
  .showcase__benefits.is-switching .showcase__bv { opacity: 0; }
  @media (max-width: 900px) { .showcase__benefits-grid { grid-template-columns: 1fr; gap: 18px; } }

  /* ═══ Svc tiles (3-col default) ═══ */
  .svc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .svc-tile {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 28px;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 280px;
    transition: transform var(--dur-3), box-shadow var(--dur-3);
  }
  .svc-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .svc-tile--accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
  .svc-tile--accent .svc-tile__h,
  .svc-tile--accent .svc-tile__more { color: var(--accent-ink); }
  .svc-tile--accent .svc-tile__p { color: rgba(14,14,15,.78); }
  .svc-tile--accent .ink-chip {
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
  }
  .svc-tile__ic {
    width: 44px; height: 44px; border-radius: var(--shape-m);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
  }
  .svc-tile__ic .material-symbols-outlined { font-size: 22px; }
  .svc-tile--accent .svc-tile__ic { background: rgba(0,0,0,.08); }
  .svc-tile__h {
    font-family: var(--f-display);
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .svc-tile__p { font-size: 14.5px; color: var(--ink-2); margin-top: 10px; }
  .svc-tile__more {
    margin-top: 18px;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 14px;
    border-radius: 4px;
  }
  .svc-tile__more::after { content: "→"; transition: transform var(--dur-2); }
  .svc-tile__more:hover::after { transform: translateX(3px); }
  .svc-tile__more:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
  }
  @media (max-width: 900px) { .svc-tiles { grid-template-columns: 1fr; } }

  /* ═══ Cases (index variant) ═══ */
  .cases {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .case {
    display: grid;
    grid-template-columns: 60px 1fr 1.1fr;
    gap: clamp(32px, 4vw, 72px);
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid var(--line);
    align-items: center;
  }
  .case:first-child { border-top: 0; }
  .case::before {
    content: attr(data-idx);
    font-family: var(--f-display);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    align-self: start;
    padding-top: 8px;
  }
  .case__text { padding: 0; position: relative; }
  .case__logo {
    height: 28px; width: auto;
    margin-bottom: 14px;
    object-fit: contain; object-position: left;
  }
  .case__title {
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.022em;
    line-height: 1.15;
    font-weight: 600;
    font-family: var(--f-display);
  }
  .case__title--serif {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .case__body {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-top: 12px;
  }
  .case__meta {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin-top: 20px; padding-top: 0; border-top: 0;
  }
  .case__m {
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .case__m b {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .case__media {
    aspect-ratio: 16/11;
    background: var(--surface-2);
    background-image: radial-gradient(600px 200px at 80% 20%, rgba(255,216,58,.18), transparent 60%),
                      linear-gradient(160deg, #eee9d9, #ded9c6);
    border-radius: var(--radius-l);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-5); }
  .case:hover .case__media img { transform: scale(1.02); }

  @media (max-width: 900px) {
    .case { grid-template-columns: 1fr; gap: 20px; }
    .case::before { font-size: 40px; }
  }

  /* ═══ Reference (editorial bento) ═══ */
  .ref-sec { background: var(--surface-2); }
  .ref-sec .section-head { margin-bottom: clamp(24px, 3vw, 36px); }

  .ref-trust {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 14px 22px 14px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(14,14,15,.05), 0 2px 4px rgba(14,14,15,.03);
    margin-bottom: clamp(28px, 3.5vw, 44px);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-3), box-shadow var(--dur-3), border-color var(--dur-3);
  }
  .ref-trust:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(14,14,15,.08), 0 3px 6px rgba(14,14,15,.04);
    border-color: var(--line-2);
  }
  .ref-trust__g {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .ref-trust__score { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .ref-trust__num {
    font-family: var(--f-display);
    font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  }
  .ref-trust__stars { color: var(--star); letter-spacing: 2px; font-size: 13px; }
  .ref-trust__meta {
    display: inline-flex; flex-direction: column; gap: 3px;
    font-size: 13px; color: var(--ink-2); line-height: 1.4;
  }
  .ref-trust__meta strong { color: var(--ink); font-weight: 600; }
  .ref-trust__cta {
    font-size: 12px; color: var(--ink);
    letter-spacing: .02em;
    border-bottom: 1px solid var(--line-2);
    align-self: flex-start; padding-bottom: 1px;
    transition: border-color var(--dur-2);
  }
  .ref-trust:hover .ref-trust__cta { border-bottom-color: var(--ink); }

  /* Carousel aligned with page content; arrows sit outside in wrap margin */
  .ref-carousel {
    position: relative;
    padding: 0;
  }
  .ref-carousel__viewport {
    overflow: hidden;
    padding: 6px 3px 10px;
  }
  .ref-carousel__track {
    display: flex; gap: 10px;
    transition: transform 500ms var(--easing-emphasized);
    will-change: transform;
  }
  /* Arrows float outside carousel in the wrap's outer space */
  .ref-carousel > .nav-arrow--prev { left: -56px; }
  .ref-carousel > .nav-arrow--next { right: -56px; }
  /* Below 1280px the wrap hits the viewport edge — pull arrows back inside */
  @media (max-width: 1280px) {
    .ref-carousel { padding: 0 52px; }
    .ref-carousel > .nav-arrow--prev { left: 0; }
    .ref-carousel > .nav-arrow--next { right: 0; }
  }

  .ref-card {
    position: relative;
    margin: 0;
    flex: 0 0 calc((100% - 30px) / 4);
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: clamp(26px, 2.4vw, 32px) clamp(16px, 1.5vw, 20px) clamp(16px, 1.5vw, 20px);
    display: flex; flex-direction: column; gap: 10px;
    min-height: 280px;
    overflow: hidden;
    transition: transform var(--dur-3), box-shadow var(--dur-3), border-color var(--dur-3);
  }
  /* Top accent bar on hover */
  .ref-card::after {
    content: "";
    position: absolute; top: 0; left: 50%;
    width: 0; height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
    transform: translateX(-50%);
    transition: width var(--dur-5) var(--easing-emphasized);
  }
  .ref-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(14,14,15,.09), 0 3px 8px rgba(14,14,15,.05);
    border-color: var(--ink);
  }
  .ref-card:hover::after { width: 44px; }

  .ref-card__stars {
    color: var(--star); letter-spacing: 2px; font-size: 13px;
    position: relative; z-index: 1;
  }
  .ref-card__q {
    margin: 0; font-size: 13.5px; line-height: 1.5;
    color: var(--ink); text-wrap: pretty;
    position: relative; z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ref-card__more {
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 2px;
    font-size: 12px; font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    letter-spacing: -.005em;
    border-bottom: 1.5px solid var(--accent);
    padding-bottom: 1px;
    transition: color var(--dur-2), border-color var(--dur-2);
    position: relative; z-index: 1;
    font-family: inherit;
  }
  /* Expand tap target to 44px without altering visual layout */
  .ref-card__more::after {
    content: "";
    position: absolute;
    inset: -15px -8px;
  }
  .ref-card__more:hover { border-bottom-color: var(--ink); }
  .ref-card__more:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .ref-card__auth {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    position: relative; z-index: 1;
  }
  .ref-card__av {
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--ink); font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--f-display);
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #FFE97A, #FFC83A);
  }
  /* Rotating avatar color palette */
  .ref-card:nth-child(6n+2) .ref-card__av { background: linear-gradient(135deg, #A9D0FF, #5B92D4); color: #fff; }
  .ref-card:nth-child(6n+3) .ref-card__av { background: linear-gradient(135deg, #FFB892, #E57339); color: #fff; }
  .ref-card:nth-child(6n+4) .ref-card__av { background: linear-gradient(135deg, #B9E8C5, #5EB37C); color: #fff; }
  .ref-card:nth-child(6n+5) .ref-card__av { background: linear-gradient(135deg, #D4B8FF, #9B6FE6); color: #fff; }
  .ref-card:nth-child(6n+6) .ref-card__av { background: linear-gradient(135deg, #FFC5D6, #E57A99); color: #fff; }

  .ref-card__name { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.25; }
  .ref-card__meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .ref-card__g {
    position: absolute; top: 16px; right: 16px;
    width: 16px; height: 16px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
  }

  /* Dots — elongated active state */
  .ref-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: clamp(20px, 2vw, 28px);
  }
  .ref-dots button {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--line-2);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--dur-4), width var(--dur-5) var(--easing-emphasized);
  }
  .ref-dots button:hover { background: var(--muted); }
  .ref-dots button.is-active {
    background: var(--ink);
    width: 32px;
  }

  @media (max-width: 1099px) {
    .ref-card { flex: 0 0 calc((100% - 20px) / 3); }
  }
  @media (max-width: 899px) {
    .ref-card { flex: 0 0 calc((100% - 10px) / 2); min-height: 260px; }
    .ref-card__q { -webkit-line-clamp: 7; }
  }
  @media (max-width: 599px) {
    .ref-carousel { padding: 0 44px; }
    .ref-card { flex: 0 0 100%; min-height: auto; }
    .ref-card__q { -webkit-line-clamp: 8; }
    .ref-trust { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  }

  /* Modal for full review */
  .ref-modal {
    border: 0;
    padding: 0;
    max-width: 620px;
    width: calc(100vw - 32px);
    border-radius: var(--radius-l);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 40px 100px rgba(14,14,15,.3), 0 10px 30px rgba(14,14,15,.15);
    overflow: visible;
  }
  .ref-modal::backdrop {
    background: rgba(14, 14, 15, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .ref-modal__inner {
    position: relative;
    padding: clamp(28px, 3.5vw, 44px);
  }
  .ref-modal__close {
    position: absolute;
    top: -18px; right: -18px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    border: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(14,14,15,.3);
    transition: transform var(--dur-2), background-color var(--dur-2);
    z-index: 2;
  }
  .ref-modal__close:hover {
    transform: scale(1.08);
    background: var(--accent);
    color: var(--md-sys-color-on-primary);
  }
  .ref-modal__close .material-symbols-outlined { font-size: 22px !important; }
  .ref-modal__g {
    width: 32px; height: 32px;
    margin-bottom: 14px;
    opacity: .85;
  }
  .ref-modal__stars {
    color: var(--star);
    letter-spacing: 3px;
    font-size: 15px;
    margin-bottom: 18px;
  }
  .ref-modal__q {
    margin: 0 0 24px;
    font-family: var(--f-serif);
    font-size: clamp(17px, 1.9vw, 22px);
    font-style: italic;
    line-height: 1.42;
    color: var(--ink);
    font-weight: 400;
    text-wrap: pretty;
  }
  .ref-modal__auth {
    display: flex; align-items: center; gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .ref-modal__av {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #FFE97A, #FFC83A);
    color: var(--ink); font-weight: 700; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--f-display);
  }
  .ref-modal__name { font-weight: 600; font-size: 15px; color: var(--ink); }
  .ref-modal__meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

  /* ═══ Timeline (bar variant) ═══ */
  .timeline-wrap { position: relative; }
  .timeline {
    position: relative;
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-bottom: 0;
  }
  .timeline::before {
    content: "";
    position: absolute; left: 6%; right: 6%; top: 34px;
    height: 2px; background: var(--line);
    z-index: 0;
  }
  .tl-step {
    position: relative; z-index: 1;
    background: transparent; border: 0; cursor: pointer;
    padding: 0 8px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    color: var(--ink);
    transition: opacity var(--dur-3);
    font-family: inherit;
    border-radius: var(--shape-s);
  }
  .tl-step:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
  }
  .tl-step:focus-visible .tl-num { color: var(--ink); }
  .tl-num {
    font-family: var(--f-display);
    font-weight: 600; font-size: 40px; letter-spacing: -0.03em;
    line-height: 1;
    color: var(--muted);
    transition: color var(--dur-3), transform var(--dur-3);
  }
  .tl-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--line);
    transition: background-color var(--dur-3), border-color var(--dur-3), transform var(--dur-3), box-shadow var(--dur-3);
  }
  .tl-lbl {
    font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
    color: var(--ink-2);
    transition: color var(--dur-3);
  }
  .timeline[data-has-active="true"] .tl-step:not(.is-active) { opacity: .45; }
  .timeline[data-has-active="true"] .tl-step:not(.is-active):hover { opacity: .75; }
  .tl-step.is-active .tl-num { color: var(--ink); transform: translateY(-2px); }
  .tl-step.is-active .tl-dot {
    background: var(--accent);
    border-color: var(--ink);
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(255,216,58,.25);
  }
  .tl-step.is-active .tl-lbl { color: var(--ink); font-weight: 600; }

  .timeline__panel {
    margin-top: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: clamp(28px, 3.4vw, 48px);
    box-shadow: var(--shadow-1);
    position: relative; overflow: hidden;
  }
  .timeline__panel::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--accent);
  }
  .timeline__panel::after {
    content: attr(data-active-num);
    position: absolute; right: clamp(24px, 3vw, 48px); top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-display); font-weight: 600;
    font-size: clamp(120px, 15vw, 220px);
    line-height: 1; letter-spacing: -0.04em;
    color: rgba(14,14,15,.04);
    pointer-events: none; user-select: none;
    z-index: 0;
  }
  .tl-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; position: relative; z-index: 1; }
  .tl-chip {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
    background: #141218; color: #fff; font-weight: 600;
  }
  .tl-dur {
    font-size: 13px; color: var(--muted);
    padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  }
  .tl-title {
    font-family: var(--f-display);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15; letter-spacing: -0.025em;
    margin: 0 0 14px; font-weight: 600;
    max-width: 820px;
    position: relative; z-index: 1;
  }
  .tl-lead {
    font-size: 16px; color: var(--ink-2); line-height: 1.55;
    margin: 0 0 24px;
    max-width: 720px;
    position: relative; z-index: 1;
  }
  .tl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; z-index: 1; }
  .tl-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
  }
  .tl-card-k {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    margin-bottom: 6px;
  }
  .tl-card-v { font-size: 15px; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
  .tl-list { display: grid; gap: 10px; position: relative; z-index: 1; }
  .tl-list li {
    position: relative; padding-left: 28px;
    font-size: 15px; color: var(--ink-2); line-height: 1.5;
  }
  .tl-list li::before {
    content: ""; position: absolute; left: 0; top: .6em;
    width: 16px; height: 2px; background: var(--accent);
  }
  @media (max-width: 900px) {
    .timeline { grid-template-columns: repeat(3, 1fr); }
    .timeline::before { display: none; }
    .tl-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 18px 8px; }
    .tl-num { font-size: 32px; }
    .tl-grid { grid-template-columns: 1fr; }
  }

  /* ═══ Process aside ═══ */
  .proc-aside {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    margin-top: 20px;
  }
  .proc-note {
    position: relative;
    padding: clamp(28px, 3vw, 44px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .proc-note::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--ink);
  }
  .proc-note .micro { display: inline-block; margin-bottom: 10px; }
  .proc-note__h { margin: 10px 0 14px; }
  .proc-note p { color: var(--ink-2); }

  /* ═══ Price CTA ═══ */
  .price-cta {
    background: linear-gradient(135deg, var(--accent) 0%, #ffe768 100%);
    border-radius: var(--radius-l);
    padding: clamp(32px, 4vw, 56px);
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-1);
    color: var(--accent-ink);
  }
  .price-cta__big {
    font-family: var(--f-display);
    font-size: clamp(56px, 8vw, 96px);
    letter-spacing: -0.04em;
    line-height: .95;
    font-weight: 700;
    color: var(--accent-ink);
  }
  .price-cta__big sup {
    font-size: .35em; font-weight: 600;
    top: -1.4em; margin-left: .2em;
    letter-spacing: .02em;
    color: rgba(14,14,15,.7);
  }
  .price-cta__sub { font-size: 17px; max-width: 460px; color: rgba(14,14,15,.78); margin: 14px 0 18px; }
  .price-cta__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; margin-top: 18px; }
  .price-cta__badge {
    display: inline-flex; gap: 8px; align-items: center;
    padding: 8px 14px;
    background: rgba(14,14,15,.08); border-radius: 999px;
    font-size: 13px; font-weight: 600;
    color: var(--accent-ink);
  }

  @media (max-width: 900px) { .proc-aside { grid-template-columns: 1fr; } }

  /* ═══ Office strip (expanding spotlight) ═══ */
  .office-sec .section-head { margin-bottom: clamp(28px, 3vw, 44px); }
  .office-strip {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    height: clamp(380px, 52vw, 640px);
    background: #0E0E0F;
    overflow: hidden;
  }
  .office-strip__item {
    position: relative;
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    transition: flex 500ms var(--easing-emphasized);
    border-left: 1px solid rgba(255,255,255,.04);
  }
  .office-strip__item:first-child { border-left: 0; }
  .office-strip__item:focus { outline: none; }
  .office-strip__item:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
    z-index: 3;
  }
  .office-strip__item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: grayscale(.55) brightness(.62) contrast(1.05);
    transform: scale(1.06);
    transition: filter 500ms var(--easing-standard), transform 700ms var(--easing-emphasized);
  }
  .office-strip__item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(14,14,15,.75) 100%);
    opacity: 0;
    transition: opacity var(--dur-5) var(--easing-standard);
    pointer-events: none;
    z-index: 1;
  }
  .office-strip__item.is-active { flex: 3.4; }
  .office-strip__item.is-active img {
    filter: grayscale(0) brightness(1) contrast(1);
    transform: scale(1.02);
  }
  .office-strip__item.is-active::after { opacity: 1; }

  .office-strip__cap {
    position: absolute;
    left: clamp(20px, 2.2vw, 40px);
    bottom: clamp(20px, 2.2vw, 36px);
    color: #fff;
    display: flex; align-items: baseline; gap: 14px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms 180ms var(--easing-standard), transform 500ms 180ms var(--easing-emphasized);
    z-index: 2;
    pointer-events: none;
  }
  .office-strip__cap-n {
    font-family: var(--f-display);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--accent);
    line-height: 1;
  }
  .office-strip__cap-t {
    font-family: var(--f-display);
    font-size: clamp(15px, 1.4vw, 20px);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    white-space: nowrap;
  }
  .office-strip__item.is-active .office-strip__cap {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 640px) {
    .office-strip {
      width: auto;
      margin: 0 var(--pad);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6px;
      height: auto;
      background: transparent;
    }
    .office-strip__item,
    .office-strip__item.is-active { flex: none; aspect-ratio: 1 / 1; border-left: 0; border-radius: var(--radius); }
    .office-strip__item img { filter: none; transform: none; }
    .office-strip__item::after,
    .office-strip__cap { display: none; }
  }

  /* ═══ Pricing table ═══ */
  .ptable {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--surface);
  }
  .ptable th, .ptable td {
    padding: 18px 22px;
    text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
  }
  .ptable thead th {
    background: var(--surface-2);
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
  }
  .ptable tbody tr:last-child td { border-bottom: 0; }
  .ptable__svc b {
    font-family: var(--f-display);
    font-size: 17px; letter-spacing: -0.01em;
  }
  .ptable__svc span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
  .ptable__num {
    font-family: var(--f-display);
    font-size: 19px; letter-spacing: -0.02em;
    font-weight: 600; white-space: nowrap;
  }
  .ptable__num--muted { color: var(--muted); font-weight: 400; }
  .ptable tbody tr:hover td { background: rgba(255,216,58,.06); }
  .ptable__note { margin-top: 14px; }
  @media (max-width: 760px) {
    .ptable th:nth-child(3), .ptable td:nth-child(3) { display: none; }
    .ptable th, .ptable td { padding: 14px 16px; }
    .ptable__svc b { font-size: 15.5px; }
    .ptable__svc span { font-size: 12.5px; }
    .ptable__num { font-size: 17px; }
  }

  /* ═══ KONTAKT (variant B: full-bleed split) ═══ */
  .kontakt { padding-bottom: 0; }
  .kontakt .wrap.kontakt__head {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 var(--pad);
  }
  .kontakt__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    gap: 0;
    align-items: stretch;
  }
  .kontakt__map {
    position: relative;
    /* Smooth ramp 760px → 480px across 1400 → 900 viewport, then fixed 340 below 900. */
    min-height: clamp(480px, calc(480px + (100vw - 900px) * 0.56), 760px);
  }
  .kontakt__map .contact-map {
    border-radius: 0; aspect-ratio: auto;
    position: absolute; inset: 0; height: 100%;
    box-shadow: none;
  }
  .kontakt__right {
    display: flex; flex-direction: column;
  }
  .kontakt__intro {
    padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px) 20px clamp(32px, 4vw, 56px);
  }
  .kontakt__intro .lead { margin: 0; max-width: 560px; }
  .kontakt__info {
    padding: 0 clamp(32px, 4vw, 56px) 28px clamp(32px, 4vw, 56px);
  }
  .k-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .k-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .k-item__ic {
    width: 36px; height: 36px; border-radius: var(--shape-m);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .k-item__ic .material-symbols-outlined { font-size: 20px; }
  .k-item__k { font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
  .k-item__v {
    font-family: var(--f-display);
    font-size: 15px; letter-spacing: -0.01em;
    margin-top: 3px; line-height: 1.3;
  }
  .k-item__v a { color: inherit; }
  .k-item__v a:hover { color: var(--ink); }

  .contact-map {
    border-radius: var(--radius-xl);
    overflow: hidden; position: relative;
    box-shadow: var(--shadow-2);
    aspect-ratio: 16/10;
  }
  /* object-position locked to the pin's % coordinates (below) — with object-fit: cover
     this guarantees the image pixel at (88%, 74%) always sits at the container's
     (88%, 74%) point, so the pin tip stays on the landmark at every viewport size. */
  .contact-map img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 80% 74%;
  }
  .contact-map__pin {
    position: absolute; top: 74%; left: 80%;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: #141218; color: #fff;
    font-weight: 600; font-size: 13px;
    letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
    box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 12px 28px rgba(14,14,15,.35);
    transform: translate(-50%, -100%);
  }
  .contact-map__pin::before {
    content: "";
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); flex: none;
  }
  .contact-map__pin::after {
    content: ""; position: absolute; bottom: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #141218;
  }

  .kontakt__form {
    padding: 0 clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px) clamp(32px, 4vw, 56px);
    background: transparent;
    border: 0; box-shadow: none;
  }
  .kontakt__form-h { margin-bottom: 8px; }
  .kontakt__form-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
  .field { display: grid; gap: 6px; margin-bottom: 14px; }
  .field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .field input, .field textarea {
    font: inherit;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--shape-m);
    background: var(--bg);
    color: var(--ink);
    outline: none;
    transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
  }
  .field input:hover, .field textarea:hover { border-color: var(--line-2); }
  .field input:focus, .field textarea:focus {
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--focus-ring);
  }
  .field textarea { min-height: 120px; resize: vertical; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .kontakt__fine { margin-top: 14px; }

  @media (max-width: 900px) {
    .kontakt__stage { grid-template-columns: 1fr; }
    .kontakt__map { min-height: 340px; }
    .kontakt__map .contact-map { position: relative; border-radius: var(--radius-xl);padding: 20px; }
    .kontakt__intro, .kontakt__info, .kontakt__form {
      padding-left: clamp(24px, 5vw, 60px);
      padding-right: clamp(24px, 5vw, 60px);
      padding-top: 24px;
    }
    .k-info-grid { grid-template-columns: 1fr 1fr; }
    .field-row { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) { .k-info-grid { grid-template-columns: 1fr; } }

  /* ═══ Footer ═══ */
  .footer {
    padding: 60px 0 40px;
    border-top: 1px solid var(--line);
    margin-top: 80px;
  }
  .footer__grid {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px;
  }
  .footer__brand img { height: 36px; 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 {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 2px;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--dur-2);
  }
  .theme-link:hover { color: var(--ink); }
  .theme-link__ic { font-size: 16px !important; }
  .theme-link__lbl { white-space: nowrap; }
  .theme-ic--dark { display: none; }
  .dark .theme-ic--light { display: none; }
  .dark .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; } }

  /* ═══ Legal / text-heavy pages ═══ */
  .legal-main {
    padding: calc(var(--nav-h-scrolled) + var(--nav-offset) + 48px) 0 clamp(48px, 6vw, 96px);
  }
  .legal {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ink);
  }
  .legal__head {
    margin-bottom: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--line);
  }
  .legal__head .section-label { margin-bottom: 14px; }
  .legal__head h1 {
    font-family: var(--f-display);
    font-size: clamp(36px, 4.4vw, 56px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .legal__eff {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
  }
  .legal section { margin-top: clamp(28px, 3vw, 44px); }
  .legal h2 {
    font-family: var(--f-display);
    font-size: clamp(22px, 2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--ink);
  }
  .legal h3 {
    font-family: var(--f-sans);
    font-size: 16px;
    letter-spacing: -0.005em;
    line-height: 1.3;
    font-weight: 600;
    margin: 24px 0 10px;
    color: var(--ink);
  }
  .legal p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 14px;
  }
  .legal ul, .legal ol {
    padding-left: 20px;
    margin: 0 0 14px;
  }
  .legal li {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: 6px;
  }
  .legal li::marker { color: var(--muted); }
  .legal strong { color: var(--ink); font-weight: 600; }
  .legal a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--dur-2);
  }
  .legal a:hover { text-decoration-color: var(--ink); }
  .legal__nest { padding-left: 24px; }
  .legal__part {
    margin: clamp(36px, 4vw, 56px) 0 clamp(24px, 3vw, 32px);
    padding: 12px 0;
    text-align: center;
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .legal__sign {
    margin-top: clamp(36px, 4vw, 56px);
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.8;
  }

  /* ═══ Toast ═══ */
  .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 ────── */
@layer themes {
  .dark {
    --bg:          #141218;
    --surface:     #1D1B20;
    --surface-2:   #211F26;
    --surface-3:   #2B2930;
    --ink:         #E6E1E5;
    --ink-2:       #CAC4D0;
    --muted:       #938F99;
    --line:        #36343B;
    --line-2:      #49454F;
    --accent:      #FFE262;
    --accent-ink:  #141218;
    --accent-soft: #544300;

    --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);
  }

  .dark .hero__bg { filter: brightness(.7); }
  .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); }

  /* Mega menu in dark mode */
  .dark .topnav.is-scrolled .topnav__trigger { color: var(--ink-2); }
  .dark .topnav.is-scrolled .topnav__trigger:hover,
  .dark .topnav.is-scrolled .topnav__item--mega:hover > .topnav__trigger,
  .dark .topnav.is-scrolled .topnav__trigger[aria-expanded="true"] { color: var(--ink); }
  .dark .mega {
    background: var(--surface-2);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3);
  }
  .dark .mega__item:hover { background: rgba(255,255,255,.04); }
  .dark .mega__item[aria-current="page"] { background: rgba(255,255,255,.04); }
  .dark .mega__item--soon .mega__icon { background: rgba(255,255,255,.06); color: var(--ink-2); }
  .dark .mega__badge { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
  .dark .logo-strip img { filter: grayscale(1) contrast(1.1) brightness(1.6); opacity: .75; }

  .dark .feature__media { background: var(--surface-3); }
  .dark .feature__text::before { color: rgba(255,255,255,.04); }
  .dark .feature__text .pill--accent { background: transparent; border-color: var(--ink); color: var(--ink); }

  .dark .showcase { background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%); }
  .dark .showcase::before {
    background:
      radial-gradient(900px 500px at 82% 10%, rgba(255,226,98,.08), transparent 60%),
      radial-gradient(700px 400px at 8% 95%, rgba(255,255,255,.03), transparent 60%);
  }
  /* In dark mode, lift the always-dark chip off the dark page bg with surface-3. */
  .dark .chip-dark { background: var(--surface-3); }

  /* Dashboard mockup stays light — it represents an actual product screenshot.
     Re-scope theme variables so everything inside uses light-theme colors. */
  .dark .browser {
    --bg:          #FAF9F4;
    --surface:     #FFFFFF;
    --surface-2:   #F2F0EA;
    --surface-3:   #ECE9DF;
    --ink:         #0E0E0F;
    --ink-2:       #2B2B2E;
    --muted:       #6C6A5F;
    --line:        #E6E3D9;
    --line-2:      #D9D5C7;
    --accent-ink:  #141218;
    color: var(--ink);
  }
  .dark .browser__body img { background: #F7F3E5; }
  .dark .rail {
    background: rgba(29,27,32,.82);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  }
  .dark .rail__item:hover { background: rgba(255,255,255,.05); }

  .dark .svc-tile { background: var(--surface); }
  .dark .svc-tile--accent { background: var(--accent); border-color: transparent; }

  .dark .case__media {
    background: var(--surface-2);
    background-image: radial-gradient(600px 200px at 80% 20%, rgba(255,226,98,.08), transparent 60%),
                      linear-gradient(160deg, var(--surface-2), var(--surface-3));
  }
  .dark .ref-sec { background: var(--bg); }
  .dark .ref-trust, .dark .ref-trust__g { background: var(--surface); }
  .dark .ref-card { background: var(--surface); }
  .dark .ref-dots button { background: var(--line-2); }
  .dark .ref-dots button.is-active { background: var(--ink); }

  .dark .timeline__panel, .dark .proc-note, .dark .tl-card { background: var(--surface); }

  .dark .office-strip { background: #000; }
  .dark .ptable { background: var(--surface); }
  .dark .ptable thead th { background: var(--surface-2); }
  .dark .ptable tbody tr:hover td { background: rgba(255,226,98,.08); }

  .dark .kontakt__stage { background: var(--surface); }
  .dark .k-item { background: var(--surface-2); border-color: var(--line); }
  .dark .k-item__ic { background: var(--surface-3); }
  .dark .field input, .dark .field textarea { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
  .dark .field input:focus, .dark .field textarea:focus { background: var(--surface); border-color: var(--ink); }

  .dark .contact-map__pin { box-shadow: 0 0 0 4px rgba(20,18,24,.7), 0 12px 28px rgba(0,0,0,.5); }

  .dark .footer { background: var(--surface-2); }
  .dark .footer__brand img { filter: brightness(0) invert(1); }
  .dark .toast { background: var(--surface-3); color: var(--ink); }
}

/* ────── UTILITIES ────── */
@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  /* Honeypot — visible to bots, hidden from humans */
  .hp {
    position: absolute !important;
    left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }
  .cf-btn-loading { opacity: .6; pointer-events: none; }
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
}

/* ════════════════════════════════════════════════════════════════
   Landing page components — reporting-pro-eshopy
   ═══════════════════════════════════════════════════════════════ */
@layer components {

  /* TL;DR / Direct-answer card for AI extraction */
  .tldr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
    max-width: 980px;
    margin: 0 auto;
  }
  .tldr__head {
    margin-bottom: 18px;
  }
  .tldr__head .section-title {
    margin-top: 6px;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.15;
  }
  .tldr__head .section-label {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .tldr .lead {
    margin: 0 0 22px;
  }
  .tldr__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--line);
  }
  .tldr__item {
    margin: 0;
  }
  .tldr__item dt {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .tldr__item dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
  }
  @media (max-width: 599px) {
    .tldr__grid { grid-template-columns: 1fr; gap: 16px; }
  }

  /* FAQ accordion */
  .faq {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m, 14px);
    overflow: hidden;
    transition: border-color var(--dur-2);
  }
  .faq__item[open] {
    border-color: var(--ink);
  }
  .faq__q {
    cursor: pointer;
    list-style: none;
    padding: 18px 56px 18px 22px;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    position: relative;
    line-height: 1.35;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-3) var(--easing-emphasized);
  }
  .faq__item[open] .faq__q::after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .faq__q:hover { color: var(--ink); background: var(--surface-2); }
  .faq__q:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
  }
  .faq__a {
    padding: 0 22px 20px;
    color: var(--ink-2);
  }
  .faq__a p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
  }
  .faq__a p + p { margin-top: 10px; }
  .faq__a code {
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
  }

  /* Pricing table — featured row */
  .ptable__row--featured > td {
    background: var(--accent-soft);
    position: relative;
  }
  .ptable__row--featured > td:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
  }
}

/* Internal-linking affordance on HP in-content links (subtle dashed underline) */
@layer themes {
  .ptable__link,
  .case__body a,
  .feature__text a:not(.btn) {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--line-2);
    transition: border-color var(--dur-2);
  }
  .ptable__link:hover,
  .case__body a:hover,
  .feature__text a:not(.btn):hover {
    border-bottom-color: var(--ink);
  }
}

/* Feature grid min-content fix — prevents text column collapse when image is wide.
   Scoped to desktop only so the mobile `grid-template-columns: 1fr` stacking rule wins. */
@layer themes {
  @media (min-width: 901px) {
    .feature {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  .feature__text { min-width: 0; }
  .feature__media { min-width: 0; }
  .bullets { min-width: 0; }
}

/* Dark-mode + badge overrides — must be in themes layer to win over variants */
@layer themes {
  /* Base badge styling — overrides .ptable__svc span from variants layer */
  .ptable__svc .ptable__badge {
    display: inline-block;
    width: auto;
    margin: 0 0 0 8px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
  }
  .dark .tldr,
  .dark .faq__item {
    background: var(--surface);
  }
  .dark .ptable__row--featured > td {
    background: rgba(255, 216, 58, 0.08);
  }
  .dark .ptable__svc .ptable__badge {
    background: var(--accent);
    color: var(--accent-ink);
  }
}

/* ════════════════════════════════════════════════════════════════
   Reporting LP — hero visualization + exploded reports
   ═══════════════════════════════════════════════════════════════ */
@layer components {

  /* Hero background (reporting variant — no person photo) */
  .hero--reporting {
    background:
      radial-gradient(ellipse at 82% 18%, rgba(255, 216, 58, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 12% 88%, rgba(70, 130, 240, 0.10) 0%, transparent 50%),
      linear-gradient(135deg, #14141A 0%, #242430 50%, #14141A 100%);
  }
  .hero--reporting .hero__scrim {
    background:
      linear-gradient(90deg, rgba(14,14,15,.55) 0%, rgba(14,14,15,.25) 35%, rgba(14,14,15,0) 55%, rgba(14,14,15,0) 100%),
      linear-gradient(180deg, rgba(14,14,15,.10) 0%, rgba(14,14,15,0) 30%, rgba(14,14,15,.25) 100%);
  }

  /* Hero visualization — YoY bar chart, transparent (closer to text) */
  .hero__viz {
    position: absolute;
    right: clamp(40px, 12%, 200px);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
    display: none;
    width: clamp(300px, 34vw, 420px);
  }
  @media (min-width: 1024px) {
    .hero__viz { display: block; }
  }

  .hv-big {
    will-change: transform;
    color: #fff;
  }
  .hv-big__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
  }
  .hv-big__title {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
  }
  .hv-big__sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, 0.55);
  }
  .hv-big__chart {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
  }
  .hv-big__legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: center;
  }
  .hv-big__legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.005em;
  }
  .hv-big__legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .hv-big__legend .hv-legend-dash {
    width: 14px;
    height: 0;
    border-radius: 0;
    border-top: 1.5px dashed #E57339;
  }

  /* ───────── Reports container (exploded showcase) ───────── */
  .reports {
    padding-top: clamp(20px, 3vw, 32px);
  }

  .rep-sec {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: clamp(64px, 9vw, 120px);
    position: relative;
  }
  .rep-sec:last-child { margin-bottom: 0; }

  .rep-sec__text {
    position: relative;
    z-index: 2;
  }
  .rep-sec__num {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .rep-sec__title {
    font-family: var(--f-display);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .rep-sec__lead {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 22px;
    text-wrap: pretty;
  }
  .rep-sec__facets {
    margin: 0;
    display: grid;
    gap: 14px;
  }
  .rep-sec__facets > div {
    border-left: 2px solid var(--accent);
    padding-left: 14px;
  }
  .rep-sec__facets dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
  }
  .rep-sec__facets dd {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
  }

  .rep-sec__visual {
    position: relative;
    z-index: 1;
    min-width: 0;
  }
  .rep-sec__visual .browser {
    margin: 0;
    max-width: none;
    width: 100%;
  }

  /* Desktop zig-zag layout — clean, text vertically centered next to browser */
  @media (min-width: 960px) {
    .rep-sec {
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 56px;
      align-items: center;
    }
    .rep-sec--right .rep-sec__text { grid-column: 1; grid-row: 1; }
    .rep-sec--right .rep-sec__visual { grid-column: 2; grid-row: 1; }
    .rep-sec--left {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    }
    .rep-sec--left .rep-sec__text { grid-column: 2; grid-row: 1; }
    .rep-sec--left .rep-sec__visual { grid-column: 1; grid-row: 1; }
  }
}

/* ─────── About section (O mně medallion) ─────── */
@layer components {
  .about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
  }
  .about__media {
    position: relative;
    margin: 0;
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--surface-2);
  }
  .about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 25%;
    display: block;
  }
  .about__text .section-label {
    display: block;
    margin-bottom: 10px;
  }
  .about__text .section-title {
    margin: 0 0 18px;
    font-size: clamp(28px, 3.2vw, 40px);
  }
  .about__text .lead {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--ink);
  }
  .about__text p {
    margin: 0 0 18px;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.6;
  }
  .about__bullets {
    list-style: none;
    margin: 4px 0 28px;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  .about__bullets li {
    padding-left: 26px;
    position: relative;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
  }
  .about__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 16px;
    height: 2px;
    background: var(--accent);
  }
  .about__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  @media (min-width: 860px) {
    .about {
      grid-template-columns: minmax(260px, 380px) 1fr;
      gap: 56px;
    }
  }
}

/* Dark-mode overrides (hero is dark by default, donut needs no adjustment) */