/* =========================================================
   SAZA Digital — design system
   ========================================================= */

:root {
  /* Brand */
  --brick:        #C5483A;   /* primary CTA, brand mark, accents */
  --brick-hover:  #A83A2D;
  --brick-active: #8A2F23;

  /* Surfaces */
  --cream:      #FAF8F4;   /* page background (default section bg) */
  --sand:       #F2EDE3;   /* alternating section bg */
  --sand-deep:  #E8E3DA;   /* image placeholders */
  --white:      #FFFFFF;   /* card surfaces */
  --navy:       #1A1F2E;   /* dark band background, primary text */
  --navy-deep:  #0F1320;   /* footer background only */

  /* Text */
  --ink:            #1A1F2E;
  --ink-body:       #4B5563;
  --ink-muted:      #6B7280;
  --ink-light:      #FAF8F4;
  --ink-light-body: #C7C2B6;

  /* Borders */
  --border-soft:   rgba(26, 31, 46, 0.08);
  --border:        rgba(26, 31, 46, 0.12);
  --border-strong: rgba(26, 31, 46, 0.20);

  /* Type */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', -apple-system, system-ui, sans-serif;

  --type-display:   4.5rem;
  --type-h1:        3rem;
  --type-h2:        2.25rem;
  --type-h3:        1.5rem;
  --type-h4:        1.125rem;
  --type-body-lg:   1.125rem;
  --type-body:      1.0625rem;
  --type-body-sm:   0.875rem;
  --type-caption:   0.75rem;
  --type-eyebrow:   0.6875rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --border-w: 1px;
}

@media (max-width: 767px) {
  :root {
    --type-display: 2.75rem;
    --type-h1: 2.25rem;
    --type-h2: 1.875rem;
    --type-h3: 1.375rem;
  }
}

/* =========================================================
   RESET
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

/* Smooth in-page navigation for anchor links (CTAs, nav #cennik, etc.). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Stop the sticky header from covering whatever the anchor lands on. */
:where([id]) { scroll-margin-top: 110px; }
.admin-bar :where([id]) { scroll-margin-top: 142px; }

body {
  background: var(--cream);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Safety net against sideways scroll on phones. `clip` rather than `hidden`
     because `hidden` would turn body into a scroll container and break the
     sticky header. Layout bugs should still be fixed at the source. */
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--font-serif); color: var(--ink); font-weight: 500; }

h2 { font-size: var(--type-h2); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */

.sd-outer { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-5); }
@media (min-width: 1024px) { .sd-outer { padding: 0 var(--space-7); } }

.sd-inner { max-width: 1200px; margin: 0 auto; }

.sd-section { padding: var(--space-8) 0; }
@media (min-width: 768px)  { .sd-section { padding: var(--space-9) 0; } }
@media (min-width: 1024px) { .sd-section { padding: var(--space-10) 0; } }

.sd-section--cream { background: var(--cream); }
.sd-section--sand  { background: var(--sand); }
.sd-section--navy  { background: var(--navy); color: var(--ink-light-body); }
.sd-section--navy h2 { color: var(--ink-light); }

.sd-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brick);
  margin-bottom: var(--space-3);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--radius-sm);
  transition: background 120ms ease, color 120ms ease;
}

.btn--primary { background: var(--brick); color: #FFFFFF; }
.btn--primary:hover { background: var(--brick-hover); }
.btn--primary:active { background: var(--brick-active); }

.btn--outline { background: transparent; color: var(--ink); border: 0.5px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--cream); }

.btn--dark { background: var(--navy); color: var(--cream); }
.btn--dark:hover { background: var(--navy-deep); color: var(--cream); }

.btn--large { padding: 1rem 1.75rem; font-size: var(--type-body); }

/* =========================================================
   HEADER / NAV
   ========================================================= */

/* Skip link */
.sd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1rem;
  font-size: var(--type-body-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.sd-skip-link:focus { left: var(--space-4); top: var(--space-4); }

.sd-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 0.5px solid transparent;
  transition: border-color 150ms ease;
}
.sd-nav.is-scrolled { border-bottom-color: var(--border); }

.admin-bar .sd-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .sd-nav { top: 46px; } }

.sd-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
@media (max-width: 767px) { .sd-nav__inner { padding: var(--space-4) var(--space-5); } }

.sd-nav__logo {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.sd-nav__logo span { color: var(--brick); }

.sd-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.sd-nav__links li { list-style: none; }

.sd-nav__links a {
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink-body);
  transition: color 120ms ease;
  white-space: nowrap;
}
.sd-nav__links a:hover { color: var(--ink); }

/* Current page — set in header.php by sd_nav_current_attrs(), and on the
   Cenník anchor by the scroll spy in main.js. Covers the desktop bar, the
   mega panel and the mobile overlay in one place; the mega's own title span
   inherits so the service name turns brick rather than just its wrapper. */
.sd-nav__links a.is-current,
.sd-nav__links a.is-current:hover,
.sd-nav__links a.is-current .sd-mega__title {
  color: var(--brick);
}
/* The overlay's service sub-links force their muted colour with !important,
   so the active one has to answer in kind. */
.sd-nav__overlay .sd-nav__sub a.is-current { color: var(--brick) !important; }

.sd-nav__cta { flex-shrink: 0; margin-left: var(--space-4); }

/* iPad landscape and small laptops: the full bar (logo + 5 links + language
   switcher + CTA) is ~110px too wide here in the longest language, which cut
   the CTA off. Tighten spacing rather than dropping the button. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .sd-nav__inner { padding-left: var(--space-5); padding-right: var(--space-5); gap: var(--space-5); }
  .sd-nav__logo  { font-size: 1.5rem; }
  .sd-nav__links { gap: 1.125rem; }
  .sd-nav__links a { font-size: 0.8125rem; }
  .sd-nav__lang  { margin-left: var(--space-2); }
  .sd-nav__lang .sd-langswitch__item { padding: 5px 5px; font-size: 0.75rem; }
  .sd-nav__cta   { margin-left: var(--space-3); padding: 0.7rem 1rem; font-size: 0.8125rem; }
}

/* Hamburger */
.sd-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.sd-nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.sd-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sd-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sd-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay
   Two things made the first items (Naše služby …) slide under the logo:

   1. z-index 99 sat *below* the sticky bar's 100, so the bar painted over the
      menu. Raising it above covers the bar for as long as the menu is open —
      the overlay carries its own close button, and the focus trap in main.js
      keeps focus inside the overlay, so the bar's hamburger is unreachable by
      keyboard anyway and nothing is lost by hiding it.
   2. `justify-content: center` centres an overflowing list on the *overflow*
      box, pushing its first items above the scroll origin where they can't be
      scrolled back into view. Auto margins centre the same way when there is
      spare room but collapse to zero once the content is taller, so the long
      services list simply starts at the top and scrolls. */
.sd-nav__overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 101;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-5) var(--space-7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              visibility 0s linear var(--motion-base);
}
/* Flex items keep their intrinsic height in a scrolling column. */
.sd-nav__overlay > * { flex-shrink: 0; }
/* Safe centring: soaks up spare space, collapses when there is none. */
.sd-nav__overlay > .sd-nav__links { margin-top: auto; }
.sd-nav__overlay > .btn { margin-bottom: auto; }

/* The admin bar is fixed at z-index 99999 and stays on top; keep the close
   button clear of it. */
.admin-bar .sd-nav__overlay { padding-top: calc(var(--space-8) + 32px); }
@media screen and (max-width: 782px) { .admin-bar .sd-nav__overlay { padding-top: calc(var(--space-8) + 46px); } }
.sd-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .sd-nav__overlay,
  .sd-nav__overlay.is-open { transition: none; transform: none; }
}

.sd-nav__overlay .sd-nav__links {
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  text-align: center;
  /* The overlay owns the outer padding now — this used to add 4rem on top of
     it, which is what pushed the list past the viewport in the first place. */
  padding: 0;
}
.sd-nav__overlay .sd-nav__links a { font-size: var(--type-h4); }
.sd-nav__sub a { font-size: var(--type-body-sm) !important; color: var(--ink-muted) !important; }

.sd-nav__overlay-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-muted);
  /* Comfortable touch target — the glyph alone is well under 44px. */
  min-width: 44px;
  min-height: 44px;
}
.admin-bar .sd-nav__overlay-close { top: calc(var(--space-5) + 32px); }
@media screen and (max-width: 782px) { .admin-bar .sd-nav__overlay-close { top: calc(var(--space-5) + 46px); } }

/* Below 1024px the mega can't fit — collapse everything into the overlay. */
@media (max-width: 1023px) {
  .sd-nav__inner .sd-nav__links,
  .sd-nav__cta { display: none; }
  .sd-nav__hamburger { display: flex; }
  .sd-mega { display: none; }
}

/* =========================================================
   MEGA DROPDOWN
   ========================================================= */

.sd-nav__item--has-mega {
  position: static;              /* panel aligns to the nav bar, not the item */
  /* Extends the hit area downward so the cursor never crosses a dead gap
     between trigger and panel, which would close it mid-move. */
  padding-bottom: 22px;
  margin-bottom: -22px;
}

.sd-nav__trigger::after {
  content: '▾';
  font-size: 0.7em;
  margin-left: 4px;
  opacity: 0.45;
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}
.sd-nav__item--has-mega:hover .sd-nav__trigger::after,
.sd-nav__item--has-mega:focus-within .sd-nav__trigger::after,
.sd-nav__item--has-mega.is-open .sd-nav__trigger::after {
  transform: rotate(180deg);
  opacity: 0.7;
}

.sd-mega {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(-6px);
  width: min(880px, calc(100vw - 48px));
  background: var(--cream);
  border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -12px rgba(26,31,46,0.18), 0 8px 24px rgba(26,31,46,0.06);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  /* Visibility lags 300ms on close so a slow cursor heading for the panel
     doesn't lose its target halfway. */
  transition: opacity 300ms var(--ease-out),
              transform 300ms var(--ease-out),
              visibility 0s linear 300ms;
}

/* Brick gradient stripe across the top edge */
.sd-mega::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brick) 0%, var(--brick) 30%, rgba(197,72,58,0) 100%);
}

/* Invisible bridge covering the gap between nav bottom and panel top. */
.sd-mega::after {
  content: '';
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  background: transparent;
}

.sd-nav__item--has-mega:hover > .sd-mega,
.sd-nav__item--has-mega:focus-within > .sd-mega,
.sd-nav__item--has-mega.is-open > .sd-mega,
.sd-mega:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              visibility 0s linear 0s;
}

.sd-mega__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  padding: var(--space-6);
}

.sd-mega__col { padding: 0 var(--space-5); position: relative; }

.sd-mega__col--services .sd-mega__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-3);
}

.sd-mega__col--feature {
  background: var(--sand);
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: space-between;
  border-left: var(--border-w) solid var(--border-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.sd-mega__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

.sd-mega__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.sd-mega__list li + li { margin-top: 2px; }

.sd-mega__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.sd-mega__link:hover,
.sd-mega__link:focus-visible {
  background: rgba(197,72,58,0.06);
  transform: translateX(2px);
}

.sd-mega__title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
}
.sd-mega__link:hover .sd-mega__title,
.sd-mega__link:focus-visible .sd-mega__title { color: var(--brick); }

.sd-mega__desc { display: block; font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.45; }

/* Selectors are scoped through .sd-nav__links so they outrank the generic
   `.sd-nav__links a { color: var(--ink-body) }` rule, which was otherwise
   turning both of these grey. */
.sd-nav__links .sd-mega__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-3);
  padding: 0.5rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brick);
  background: transparent;
  border: 1px solid var(--brick);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              gap var(--motion-fast) var(--ease-out);
}
.sd-nav__links .sd-mega__more:hover,
.sd-nav__links .sd-mega__more:focus-visible {
  background: var(--brick);
  color: #fff;
  gap: 10px;
}

.sd-mega__feature-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.sd-mega__feature-body { font-size: 0.8125rem; color: var(--ink-body); line-height: 1.5; margin: 0; }

.sd-nav__links .sd-mega__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0.625rem 1rem;
  background: var(--brick);
  color: #fff;
  font-size: var(--type-body-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(197, 72, 58, 0.25);
  transition: background var(--motion-fast) var(--ease-out), gap var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.sd-nav__links .sd-mega__feature-cta:hover,
.sd-nav__links .sd-mega__feature-cta:focus-visible {
  background: var(--brick-hover);
  color: #fff;
  gap: 10px;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(197, 72, 58, 0.35);
}
.sd-nav__links .sd-mega__feature-cta:active { transform: translateY(0); background: var(--brick-active); }

@media (prefers-reduced-motion: reduce) {
  .sd-mega, .sd-mega__link, .sd-mega__more, .sd-mega__feature-cta { transition: none; }
}

/* =========================================================
   HERO
   ========================================================= */

.hero { background: var(--cream); }

.hero__headline {
  font-size: var(--type-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* Authored breaks only apply where there's width for them. */
@media (max-width: 767px) {
  .hero__headline br { display: none; }
}

/* Disturbing factor: the closing phrase drops a line and shifts right so the
   type fills the width. Only at >=1280px — below that there isn't room for the
   offset to read as deliberate rather than broken. */
.hero__headline-overlap { display: inline; }

@media (min-width: 1280px) {
  .hero__headline-overlap {
    display: inline-block;
    position: relative;
    left: 18%;
    top: 0.14em;
    white-space: nowrap;
    color: var(--brick);
  }
}

/* Copy + CTA left, product mocks right.
   minmax(0, 1fr) is load-bearing: without it the single column sizes to the
   mock cards' max-content (556px) and blows the whole page out horizontally
   on phones, cutting off the subhead. */
.hero__foot { margin-top: var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 1024px) {
  .hero__foot {
    grid-template-columns: minmax(0, 44ch) 1fr;
    align-items: center;
    gap: var(--space-8);
  }
}

.hero__subhead { font-size: var(--type-body-lg); color: var(--ink-body); margin: 0; }

/* CTA sits directly under the copy it belongs to — headline → subhead → action
   follows reading order. Left-aligned to match the rest of the hero; centring it
   would orphan it from the left-aligned text above. */
.hero__ctas { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Two primary CTAs are in the markup; exactly one is ever shown. Desktop gets
   the consultation, phones and tablets get the free audit (different label and
   destination). `display: none` also removes the hidden one from the
   accessibility tree and from keyboard order, so it isn't a duplicate link.
   1023px is the same breakpoint the nav collapses to the hamburger at. */
.hero__cta--sm { display: none; }
@media (max-width: 1023px) {
  .hero__cta--lg { display: none; }
  .hero__cta--sm { display: inline-flex; }
}

/* ---- Hero product mocks ---- */

.hero__cards {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  min-height: 320px;
}

/* min-width: 0 lets the flex items shrink below the images' intrinsic width —
   without it they refuse to shrink on narrow screens. */
.hero-card { margin: 0; min-width: 0; }
.hero-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Capped below native resolution (400px and 572px) so they stay sharp. */
.hero-card--search   { width: 232px; }
.hero-card--analytics { width: 300px; }

/* Below the desktop layout the pair scales with the viewport, keeping its
   232:300 proportion but never exceeding the available width. */
@media (max-width: 1023px) {
  .hero__cards { min-height: 0; gap: var(--space-4); }
  .hero-card--search    { width: 40%; max-width: 232px; }
  .hero-card--analytics { width: 52%; max-width: 300px; }
}

@media (min-width: 1024px) {
  .hero__cards { justify-content: flex-end; gap: var(--space-6); }
  .hero-card--search   { width: 260px; align-self: flex-start; }
  .hero-card--analytics { width: 340px; align-self: flex-end; }
}

/* Gentle, desynchronised drift — enough to feel alive, not enough to distract. */
@keyframes sd-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.hero-card--search    { animation: sd-drift 6s ease-in-out infinite; }
.hero-card--analytics { animation: sd-drift 7.5s ease-in-out infinite 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .hero-card--search, .hero-card--analytics { animation: none; }
}

/* =========================================================
   PROOF STRIP
   ========================================================= */

.proof-strip {
  background: var(--sand);
  padding: var(--space-8) 0;
  border-top: 0.5px solid var(--border-soft);
  border-bottom: 0.5px solid var(--border-soft);
}

.proof-strip__caption {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
  text-align: center;
}

/* Edges fade out so logos enter and leave the band rather than being clipped. */
.proof-strip__logos {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* The track holds two identical passes of the logo list; translating -50%
   moves it exactly one pass, so the loop is seamless. */
.proof-strip__logo-track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  animation: sd-logo-ticker 40s linear infinite;
  cursor: default;
}

.proof-strip__logo-track:hover { animation-play-state: paused; }

@keyframes sd-logo-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.proof-strip__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.proof-strip__logo img {
  height: 52px;
  width: auto;
  display: block;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity 150ms ease;
}

@media (max-width: 767px) {
  .proof-strip__logo img { height: 40px; }
}

.proof-strip__logo img:hover { opacity: 1; }

/* Light artwork would vanish once greyscaled against the sand band, so invert
   it: white becomes near-black and reads at the same weight as the others. */
.proof-strip__logo--light img { filter: grayscale(1) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .proof-strip__logo-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .proof-strip__logo { transition: none; }
  .proof-strip__logo:hover { transform: none; }
}

/* =========================================================
   PILLARS ("Prečo my")
   ========================================================= */

.pillars__header { max-width: 680px; margin-bottom: var(--space-8); }
.pillars__heading { margin-bottom: var(--space-4); }
.pillars__intro { font-size: var(--type-body-lg); color: var(--ink-body); line-height: 1.65; }
.pillars__grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }

.pillar { border-left: 2px solid var(--brick); padding-left: var(--space-4); }
.pillar__num { font-family: var(--font-serif); font-size: var(--type-body-sm); color: var(--brick); display: block; margin-bottom: var(--space-2); }
.pillar__title { font-family: var(--font-sans); font-size: var(--type-h4); font-weight: 500; color: var(--ink); margin-bottom: var(--space-2); }
.pillar__body { font-size: var(--type-body-sm); color: var(--ink-body); }

/* =========================================================
   SERVICES
   ========================================================= */

.services__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-7); }
.services__link { font-size: var(--type-body-sm); color: var(--brick); font-weight: 500; }

.services__grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
}
.service-card__title { font-size: var(--type-h4); font-weight: 500; color: var(--ink); font-family: var(--font-sans); margin-bottom: var(--space-3); }
.service-card__body { font-size: var(--type-body-sm); color: var(--ink-body); margin-bottom: var(--space-4); }
.service-card__link { font-size: var(--type-caption); color: var(--brick); font-weight: 500; }

/* =========================================================
   PLACEHOLDER SECTIONS (case studies, team — pending content)
   ========================================================= */

.sd-placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--type-body-sm);
}

/* =========================================================
   NAŠE SLUŽBY PAGE
   ========================================================= */

.svc-hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--ink);
  max-width: 24ch;
  margin: var(--space-2) 0 var(--space-5);
}

.svc-hero__headline .accent { color: var(--brick); }

.svc-hero__sub {
  font-size: var(--type-body-lg);
  color: var(--ink-body);
  line-height: 1.65;
  max-width: 62ch;
}

/* ── Service cards ────────────────────────────────────── */

.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 767px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: inherit;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.svc-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(26,31,46,0.08);
}

/* The agentic card spans the full row and splits its list into two columns. */
.svc-card--featured { grid-column: 1 / -1; border-color: var(--brick); }
@media (min-width: 768px) {
  .svc-card--featured .svc-card__list { columns: 2; column-gap: var(--space-6); }
}

.svc-card__eyebrow { color: var(--ink-muted); margin-bottom: 0; }

/* PPC card only: eyebrow holds real per-platform links instead of plain
   text, since this one card is a <div> (not the whole-card <a> the other
   cards use) — a link can't nest inside another link. */
.svc-card__eyebrow--links > span { color: var(--ink-light); }
.svc-card__eyebrow--links a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.svc-card__eyebrow--links a:hover,
.svc-card__eyebrow--links a:focus-visible {
  color: var(--brick);
  border-bottom-color: currentColor;
}

.svc-card__title {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.svc-card__desc { font-size: var(--type-body); color: var(--ink-body); line-height: 1.65; margin: 0; }

.svc-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.svc-card--featured .svc-card__list { display: block; }
.svc-card--featured .svc-card__list li { margin-bottom: var(--space-2); break-inside: avoid; }

.svc-card__list li {
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.55;
  padding-left: var(--space-4);
  position: relative;
}
.svc-card__list li::before { content: '–'; position: absolute; left: 0; color: var(--border-strong); }

.svc-card__cta {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brick);
  margin-top: var(--space-2);
}

/* ── Process ──────────────────────────────────────────── */

.svc-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 900px) { .svc-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .svc-process { grid-template-columns: 1fr; } }

.svc-process__step { display: flex; flex-direction: column; gap: var(--space-3); }

.svc-process__num {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1;
}

.svc-process__title {
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.svc-process__step p { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.65; margin: 0; }

/* ── Closing CTA ──────────────────────────────────────── */

.svc-cta__eyebrow { color: var(--brick); }

.svc-cta__headline {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 400;
  color: var(--ink-light);
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: var(--space-2) 0 var(--space-4);
}
@media (max-width: 767px) { .svc-cta__headline { font-size: var(--type-h2); } }

.svc-cta__body {
  font-size: var(--type-body-lg);
  color: var(--ink-light-body);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.svc-cta__micro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.svc-cta__micro span { font-size: var(--type-caption); color: var(--ink-light-body); }

/* =========================================================
   KONTAKT PAGE
   ========================================================= */

/* Intro+contacts on the left, form on the right so both sit at the same level. */
.contact-hero__grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) { .contact-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); } }

.contact-formbox {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
  padding: var(--space-6);
}
@media (max-width: 640px) { .contact-formbox { padding: var(--space-5); } }

.contact-formbox__title {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}

/* Inside the boxed form the fields stack full-width. */
.contact-formbox .analyza-form { margin-top: 0; }
.contact-formbox .analyza-form button[type="submit"] { align-self: stretch; text-align: center; }

.contact-hero__headline {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: var(--space-5);
}
@media (max-width: 767px) { .contact-hero__headline { font-size: var(--type-h2); } }

.contact-hero__sub { font-size: var(--type-body-lg); color: var(--ink-body); line-height: 1.65; max-width: 50ch; }

/* ── Contact details card ─────────────────────────────── */

.contact-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) ease;
}
.contact-card__row:hover { background: rgba(197, 72, 58, 0.06); }

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--brick);
  flex-shrink: 0;
}
.contact-card__icon svg { width: 20px; height: 20px; }

.contact-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.contact-card__label {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* The e-mail is a single long token. `break-word` used to split it mid-word
   ("…gmail.co / m"), so it now scales down on narrow screens instead and only
   breaks as a last resort. */
.contact-card__value {
  font-size: var(--type-body);
  font-weight: 500;
  color: var(--ink);
  word-break: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 430px) {
  .contact-card__value { font-size: 0.9375rem; letter-spacing: -0.01em; }
}
@media (max-width: 360px) {
  .contact-card__value { font-size: 0.875rem; }
}

.contact-card__socials {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) 0;
  margin-top: var(--space-2);
  border-top: 0.5px solid var(--border-soft);
}
.contact-card__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--ink-body);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.contact-card__socials a:hover { background: var(--brick); color: #fff; border-color: var(--brick); }
.contact-card__socials svg { width: 17px; height: 17px; }

/* ── Service pictograms ───────────────────────────────── */

.contact-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (max-width: 1023px) { .contact-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .contact-services { grid-template-columns: 1fr; } }

.contact-service {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.contact-service:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(26,31,46,0.08); }

.contact-service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--sand);
  color: var(--brick);
  margin-bottom: var(--space-4);
}
.contact-service__icon svg { width: 24px; height: 24px; }

.contact-service__name {
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.contact-service__desc { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.55; }

/* ── Legal / billing details ──────────────────────────── */

.contact-form-wrap { max-width: 760px; }

.contact-legal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 767px) { .contact-legal { grid-template-columns: 1fr; gap: var(--space-7); } }

.contact-legal__heading {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

.contact-legal__company {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.contact-legal__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-legal__list li { font-size: var(--type-body-sm); color: var(--ink-body); }
.contact-legal__list li span { color: var(--ink-muted); display: inline-block; min-width: 62px; }

.contact-legal__address { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.7; }

.contact-legal__link {
  display: inline-block;
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--brick);
  text-decoration: underline;
  text-decoration-color: rgba(197, 72, 58, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
.contact-legal__link:hover { text-decoration-color: var(--brick); }

/* =========================================================
   ANALÝZA / AUDIT PAGE
   ========================================================= */

.analyza-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .analyza-hero__grid { grid-template-columns: 1.25fr 1fr; } }

.analyza-hero__headline {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: var(--space-5);
}
@media (max-width: 767px) { .analyza-hero__headline { font-size: var(--type-h2); } }

.analyza-hero__headline .accent { color: var(--brick); font-weight: 600; }

.analyza-hero__sub { font-size: var(--type-body-lg); color: var(--ink-body); line-height: 1.65; max-width: 52ch; }

.analyza-hero__trust {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.analyza-hero__trust li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--type-body-sm);
  color: var(--ink-body);
}
.analyza-hero__trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brick);
  font-weight: 600;
}

.analyza-hero__visual { display: flex; justify-content: center; }
.analyza-hero__cover {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--radius-md);
}

/* ── What we check ────────────────────────────────────── */

.analyza-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (max-width: 1023px) { .analyza-checks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .analyza-checks { grid-template-columns: 1fr; } }

.analyza-check { border-left: 2px solid var(--brick); padding-left: var(--space-4); }
.analyza-check__num { font-family: var(--font-serif); font-size: var(--type-body-sm); color: var(--brick); display: block; margin-bottom: var(--space-2); }
.analyza-check__title { font-family: var(--font-sans); font-size: var(--type-h4); font-weight: 500; color: var(--ink); margin-bottom: var(--space-2); }
.analyza-check__body { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.6; }

/* ── Tiers ────────────────────────────────────────────── */

.analyza-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-8);
}
@media (max-width: 900px) { .analyza-tiers { grid-template-columns: 1fr; } }

.analyza-tier {
  position: relative;
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
}
.analyza-tier--recommended { border: 1.5px solid var(--brick); }

.analyza-tier__ribbon {
  position: absolute;
  top: -11px;
  left: var(--space-6);
  background: var(--brick);
  color: #fff;
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

.analyza-tier__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.analyza-tier__name {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}

.analyza-tier__price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 0.5px solid var(--border-soft);
}

.analyza-tier__price-was {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  color: var(--ink-muted);
  text-decoration: line-through;
}

.analyza-tier__price {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
@media (max-width: 767px) { .analyza-tier__price { font-size: var(--type-h2); } }

.analyza-tier__price-note { font-size: var(--type-body-sm); color: var(--ink-muted); }

.analyza-tier__desc { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.6; margin-bottom: var(--space-5); }

.analyza-tier__features {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.analyza-tier__features li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.5;
}
.analyza-tier__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brick);
  font-weight: 600;
}

.analyza-tier .btn { align-self: flex-start; }

/* ── Steps ────────────────────────────────────────────── */

.analyza-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (max-width: 900px) { .analyza-steps { grid-template-columns: 1fr; } }

.analyza-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brick);
  color: #fff;
  font-family: var(--font-serif);
  font-size: var(--type-body-lg);
  margin-bottom: var(--space-4);
}
.analyza-step__title { font-family: var(--font-sans); font-size: var(--type-h4); font-weight: 500; color: var(--ink); margin-bottom: var(--space-2); }
.analyza-step__body { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.6; }

/* ── Form ─────────────────────────────────────────────── */

.analyza-form-wrap { max-width: 760px; }

.analyza-form { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }

.analyza-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px) { .analyza-form__row { grid-template-columns: 1fr; } }

.analyza-form__field { display: flex; flex-direction: column; gap: var(--space-2); }

.analyza-form__label {
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink);
}
.analyza-form__label .req { color: var(--brick); }

.analyza-form input[type="text"],
.analyza-form input[type="email"],
.analyza-form select,
.analyza-form textarea {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  color: var(--ink);
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.analyza-form input:focus,
.analyza-form select:focus,
.analyza-form textarea:focus {
  outline: none;
  border-color: var(--brick);
  box-shadow: 0 0 0 3px rgba(197, 72, 58, 0.12);
}
.analyza-form .is-invalid { border-color: var(--brick); background: rgba(197, 72, 58, 0.04); }

.analyza-form__fieldset { border: none; padding: 0; margin: 0; }
.analyza-form__fieldset legend { padding: 0; margin-bottom: var(--space-3); }

.analyza-form__choices { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.analyza-form__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  cursor: pointer;
}
.analyza-form__choice input { accent-color: var(--brick); width: auto; }

.analyza-form__choice.is-disabled { opacity: 0.45; cursor: not-allowed; }
.analyza-form__choice.is-disabled input { cursor: not-allowed; }

.analyza-form__hint {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-top: var(--space-3);
}

/* ── Access instructions accordion ────────────────────── */

/* Sits below the form, so it needs to visibly announce itself — tinted card,
   brick edge, and an open first item that shows it's expandable. */
.analyza-access {
  margin-top: var(--space-8);
  padding: var(--space-7);
  background: var(--sand);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--brick);
  border-radius: var(--radius-md);
}

.analyza-access__heading {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

.analyza-access__intro {
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.6;
  margin-bottom: var(--space-5);
  max-width: 60ch;
}

/* Brief highlight when arrived at via the in-form pointer link. */
@keyframes sd-access-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 72, 58, 0); }
  25%      { box-shadow: 0 0 0 6px rgba(197, 72, 58, 0.18); }
}
.analyza-access:target { animation: sd-access-flash 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .analyza-access:target { animation: none; } }

.analyza-form__pointer { margin-top: var(--space-3); }
.analyza-form__pointer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--brick);
  text-decoration: underline;
  text-decoration-color: rgba(197, 72, 58, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
.analyza-form__pointer a:hover { text-decoration-color: var(--brick); }

.analyza-access__item {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.analyza-access__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  user-select: none;
  transition: color 120ms ease;
}
.analyza-access__item summary::-webkit-details-marker { display: none; }
.analyza-access__item summary:hover { color: var(--brick); }

.analyza-access__item summary::after {
  content: '+';
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: transform 150ms ease, color 120ms ease;
}
.analyza-access__item[open] summary::after { content: '−'; color: var(--brick); }

.analyza-access__body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 0.5px solid var(--border-soft);
  padding-top: var(--space-4);
}

.analyza-access__body ol {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: decimal;
}
.analyza-access__body li { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.55; }

.analyza-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.5;
  cursor: pointer;
}
.analyza-form__consent input { accent-color: var(--brick); margin-top: 3px; flex-shrink: 0; }
.analyza-form__consent a { color: var(--brick); text-decoration: underline; }
.analyza-form__consent.is-invalid { color: var(--brick); }

/* Honeypot — visually hidden but still reachable by bots. */
.analyza-form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.analyza-form button[type="submit"] { align-self: flex-start; }

.analyza-notice {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-sm);
  line-height: 1.55;
}
.analyza-notice--ok {
  background: rgba(26, 127, 55, 0.09);
  border-left: 3px solid #1a7f37;
  color: #14532d;
  font-weight: 500;
}
.analyza-notice--err { background: rgba(197, 72, 58, 0.07); border-left: 3px solid var(--brick); color: var(--ink); }

/* Landing on a form result must not animate. The browser carries the original
   #objednavka fragment across the redirect, which `scroll-behavior: smooth`
   would turn into a slide back down to the form; <html> gets .sd-form-result
   on those requests so the notice is simply in place on arrival. */
html.sd-form-result { scroll-behavior: auto; }
#sd-form-notice:focus { outline: none; }

/* =========================================================
   BLOG (ported from gasper&co)
   ========================================================= */

/* ── Archive hero ─────────────────────────────────────── */

.blog-archive-hero { background: var(--cream); padding-bottom: var(--space-7); }

.blog-archive-hero__heading {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  max-width: 600px;
}
@media (max-width: 767px) { .blog-archive-hero__heading { font-size: var(--type-h2); } }

.blog-archive-hero__sub {
  font-size: var(--type-body-lg);
  color: var(--ink-body);
  max-width: 560px;
  line-height: 1.65;
  margin: 0;
}

.blog-archive { background: var(--cream); }

/* ── Featured post ────────────────────────────────────── */

.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
@media (max-width: 767px) { .blog-featured { grid-template-columns: 1fr; gap: 0; } }

.blog-featured__image-link { display: block; height: 100%; min-height: 280px; }
.blog-featured__image { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .blog-featured__image-link { min-height: 200px; } }

.blog-featured__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 767px) { .blog-featured__body { padding: var(--space-5); } }

.blog-featured__title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.blog-featured__title a { color: inherit; transition: color 120ms ease; }
.blog-featured__title a:hover { color: var(--brick); }

.blog-featured__excerpt {
  font-size: var(--type-body);
  color: var(--ink-body);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Cards grid ───────────────────────────────────────── */

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .blog-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .blog-grid, .blog-grid--3 { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.blog-card:hover { box-shadow: 0 6px 28px rgba(26,31,46,0.1); transform: translateY(-2px); }

.blog-card__image-link { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.blog-card:hover .blog-card__image { transform: scale(1.03); }

.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }

.blog-card__tag {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brick);
}

.blog-card__title {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.blog-card__title a { color: inherit; transition: color 120ms ease; }
.blog-card__title a:hover { color: var(--brick); }

.blog-card__excerpt {
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  margin: auto 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.blog-card__link {
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--brick);
  transition: color 120ms ease;
  margin-top: var(--space-2);
}
.blog-card__link:hover { color: var(--brick-hover); }

/* ── Pagination ───────────────────────────────────────── */

.blog-pagination { margin-top: var(--space-8); display: flex; justify-content: center; }
.blog-pagination .nav-links { display: flex; align-items: center; gap: var(--space-2); }

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink-body);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.blog-pagination .page-numbers:hover { background: var(--sand); color: var(--ink); border-color: var(--border-strong); }
.blog-pagination .page-numbers.current { background: var(--brick); color: #fff; border-color: var(--brick); }

.blog-empty { font-size: var(--type-body); color: var(--ink-muted); padding: var(--space-9) 0; text-align: center; }

/* ── Single post hero ─────────────────────────────────── */

.post-hero { background: var(--cream); }
.post-hero__cat { display: inline-block; margin-bottom: var(--space-3); }
.post-hero__cat:hover { color: var(--brick-hover); }

.post-hero__title {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 780px;
  margin-bottom: var(--space-5);
}
@media (max-width: 767px) { .post-hero__title { font-size: var(--type-h2); } }

.post-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.post-hero__avatar { width: 32px !important; height: 32px !important; border-radius: 50%; object-fit: cover; }
.post-hero__author { font-size: var(--type-body-sm); font-weight: 500; color: var(--ink-body); }
.post-hero__sep { color: var(--ink-muted); font-size: var(--type-body-sm); }
.post-hero__date, .post-hero__readtime { font-size: var(--type-body-sm); color: var(--ink-muted); }
.post-hero__readtime { display: flex; align-items: center; gap: 4px; }
.post-hero__readtime svg { flex-shrink: 0; }

/* ── Featured image ───────────────────────────────────── */

.post-thumbnail { margin-bottom: var(--space-2); }
.post-thumbnail__img { width: 100%; max-height: 480px; object-fit: cover; display: block; border-radius: var(--radius-md); }

/* ── Article typography ───────────────────────────────── */

.post-body { background: var(--cream); }
.post-content { max-width: 720px; margin: 0 auto; }
.post-content > * + * { margin-top: var(--space-5); }

.post-content h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.post-content h3 {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.post-content h4 {
  font-size: var(--type-body-lg);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.post-content p { font-size: var(--type-body); color: var(--ink-body); line-height: 1.75; margin: 0 0 var(--space-4); }

.post-content a {
  color: var(--brick);
  text-decoration: underline;
  text-decoration-color: rgba(197,72,58,0.35);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.post-content a:hover { color: var(--brick-hover); text-decoration-color: var(--brick-hover); }

.post-content ul, .post-content ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { font-size: var(--type-body); color: var(--ink-body); line-height: 1.65; }

.post-content blockquote {
  border-left: 3px solid var(--brick);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--sand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-content blockquote p {
  font-family: var(--font-serif);
  font-size: var(--type-body-lg);
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

.post-content img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: var(--space-6) 0; }
.post-content figure { margin: var(--space-6) 0; }
.post-content figcaption { font-size: var(--type-caption); color: var(--ink-muted); text-align: center; margin-top: var(--space-2); }
.post-content hr { border: none; border-top: 0.5px solid var(--border); margin: var(--space-7) 0; }

.post-content code {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.875em;
  background: var(--sand);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink);
}
.post-content pre {
  background: var(--navy);
  color: var(--ink-light);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--type-body-sm);
  line-height: 1.6;
  margin: var(--space-6) 0;
}
.post-content pre code { background: none; padding: 0; color: inherit; }

.post-content table { width: 100%; border-collapse: collapse; font-size: var(--type-body-sm); margin: var(--space-6) 0; }
.post-content th { background: var(--sand); font-weight: 600; color: var(--ink); padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); }
.post-content td { padding: var(--space-3) var(--space-4); color: var(--ink-body); border-bottom: 0.5px solid var(--border-soft); }

/* ── Post tags ─────────────────────────────────────────── */

.post-tags { max-width: 720px; margin: var(--space-7) auto 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-tag {
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--ink-muted);
  border: 0.5px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color 120ms ease, color 120ms ease;
}
.post-tag:hover { color: var(--ink); border-color: var(--border-strong); }

/* ── Author bio ────────────────────────────────────────── */

.post-author-section { background: var(--sand); padding: var(--space-7) 0; border-top: 0.5px solid var(--border-soft); }
.post-author-card { max-width: 720px; margin: 0 auto; display: flex; gap: var(--space-4); align-items: flex-start; }
.post-author-card__avatar { width: 64px !important; height: 64px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.post-author-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.post-author-card__label { font-size: var(--type-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 500; }
.post-author-card__name { font-size: var(--type-body); font-weight: 600; color: var(--ink); }
.post-author-card__bio { font-size: var(--type-body-sm); color: var(--ink-body); line-height: 1.6; margin: 0; }

/* ── Related posts ─────────────────────────────────────── */

.post-related { background: var(--cream); }
.post-related__heading { font-family: var(--font-serif); font-size: var(--type-h2); font-weight: 400; color: var(--ink); letter-spacing: -0.02em; margin-bottom: var(--space-6); }

/* ── Post CTA ──────────────────────────────────────────── */

.post-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.post-cta__heading { font-family: var(--font-serif); font-size: var(--type-h2); font-weight: 400; color: var(--ink-light); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.post-cta__sub { font-size: var(--type-body); color: var(--ink-light-body); line-height: 1.6; max-width: 480px; margin: 0; }
@media (max-width: 767px) {
  .post-cta__inner { flex-direction: column; align-items: flex-start; }
  .post-cta__inner .btn { width: 100%; text-align: center; }
}

/* =========================================================
   O NÁS
   ========================================================= */

.sd-measure { max-width: 720px; }

.sd-lead { font-size: var(--type-body-lg); color: var(--ink-body); margin-top: var(--space-5); }

.about-hero__headline {
  font-size: var(--type-h1);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.about-hero__subhead { font-size: var(--type-body-lg); color: var(--ink-body); margin-top: var(--space-5); }

.promises { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 768px) { .promises { grid-template-columns: repeat(3, 1fr); } }

.promise { border-left: 2px solid var(--brick); padding-left: var(--space-4); }
.promise__num { font-family: var(--font-serif); font-size: var(--type-body-sm); color: var(--brick); display: block; margin-bottom: var(--space-2); }
.promise__title { font-family: var(--font-sans); font-size: var(--type-h4); font-weight: 500; color: var(--ink); margin-bottom: var(--space-2); }
.promise__body { font-size: var(--type-body-sm); color: var(--ink-body); }

.about-philosophy__closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-body-lg);
  color: var(--ink);
  margin-top: var(--space-5);
}

/* =========================================================
   TESTIMONIALS (Recenzie)
   ========================================================= */

.testimonials__grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 768px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }

.testimonial-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: 0 2px 16px rgba(26,31,46,0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.testimonial-card__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-body);
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

/* Slovak typographic quotation marks, added here rather than stored in the
   text so every testimonial gets them automatically and consistently. */
.testimonial-card__quote::before { content: "\201E"; }
.testimonial-card__quote::after  { content: "\201C"; }

.testimonial-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
}

.testimonial-card__name { display: block; font-weight: 500; font-size: var(--type-body-sm); color: var(--ink); }
.testimonial-card__role { display: block; font-size: var(--type-caption); color: var(--ink-muted); }
.testimonial-card__role a:hover { color: var(--brick); }

.testimonial-card__logo img {
  max-height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

/* =========================================================
   PRICING (ported from gasper&co)
   ========================================================= */

.pricing__header { max-width: 680px; margin-bottom: var(--space-8); }

.pricing__heading {
  font-size: var(--type-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) { .pricing__heading { font-size: var(--type-h2); } }

.pricing__intro { font-size: var(--type-body-lg); color: var(--ink-body); line-height: 1.65; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 767px) { .pricing__grid { grid-template-columns: 1fr; } }

.pricing-card {
  padding: var(--space-6);
  position: relative;
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(26, 31, 46, 0.06);
}

.pricing-card--recommended { border: 1.5px solid var(--brick); }

.pricing-card__ribbon {
  display: inline-block;
  background: var(--brick);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.pricing-card__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.pricing-card__name {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
  line-height: 1.15;
}
@media (max-width: 767px) { .pricing-card__name { font-size: 1.375rem; } }

.pricing-card__price-block {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 0.5px solid var(--border-soft);
}

.pricing-card__price {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
@media (max-width: 767px) { .pricing-card__price { font-size: var(--type-h2); } }

.pricing-card__suffix {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  color: var(--ink-muted);
  margin-left: 6px;
}

/* Secondary-currency price (e.g. HUF under the EUR on the HU pricing).
   Sits just a touch below the main price so both read as prices. */
.pricing-card__caveat {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-body);
  margin-top: var(--space-3);
}
@media (max-width: 767px) { .pricing-card__caveat { font-size: 1.875rem; } }

.pricing-card__desc {
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.pricing-card__features {
  list-style: none;
  margin: 0 0 var(--space-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing-card__features li {
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  padding-left: var(--space-4);
  position: relative;
  line-height: 1.45;
}

.pricing-card__features li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--ink-muted);
}

.pricing__footer-note {
  text-align: center;
  font-size: var(--type-body-sm);
  color: var(--ink-muted);
  margin-top: var(--space-7);
  letter-spacing: 0.01em;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.final-cta__headline { font-size: var(--type-h1); color: var(--ink-light); line-height: 1.08; letter-spacing: -0.022em; max-width: 18ch; }
.final-cta__row { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.final-cta__bullets { display: flex; flex-direction: column; gap: var(--space-2); }
.final-cta__bullets li { font-size: var(--type-caption); color: var(--ink-light-body); }

/* =========================================================
   FOOTER
   ========================================================= */

/* ── Footer (ported from gasper&co) ─────────────────────── */

.sd-footer {
  background: var(--navy-deep);
  padding: var(--space-9) 0 var(--space-6);
  color: var(--ink-light-body);
}

.sd-footer__inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-7); }
@media (max-width: 767px) { .sd-footer__inner { padding: 0 var(--space-5); } }

.sd-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(199, 194, 182, 0.12);
}
@media (max-width: 1023px) { .sd-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 540px)  { .sd-footer__cols { grid-template-columns: 1fr; gap: var(--space-5); } }

.sd-footer__logo {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--cream);
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) { .sd-footer__logo { font-size: 1.75rem; } }
.sd-footer__logo span { color: var(--brick); }

.sd-footer__tag {
  font-size: var(--type-body-sm);
  color: var(--ink-light-body);
  margin: 0 0 var(--space-4);
  max-width: 32ch;
  line-height: 1.55;
}

.sd-footer__social { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-3); }

.sd-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(199, 194, 182, 0.2);
  color: var(--ink-light-body);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.sd-footer__social a:hover, .sd-footer__social a:focus-visible {
  background: var(--brick); color: var(--cream); border-color: var(--brick);
}

.sd-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 var(--space-4);
}

.sd-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.sd-footer__links a, .sd-footer__link-btn {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  color: var(--ink-light-body);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color var(--motion-fast) ease;
}
.sd-footer__links a:hover, .sd-footer__links a:focus-visible,
.sd-footer__link-btn:hover, .sd-footer__link-btn:focus-visible { color: var(--cream); }

.sd-footer__legal-note {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  line-height: 1.6;
  margin-top: var(--space-2);
}

.sd-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  flex-wrap: wrap;
}

.sd-footer__copy { font-size: var(--type-caption); font-weight: 500; color: var(--ink-muted); letter-spacing: 0.02em; }

.sd-footer__top {
  font-size: var(--type-caption);
  color: var(--ink-light-body);
  letter-spacing: 0.02em;
  transition: color var(--motion-fast) ease;
}
.sd-footer__top:hover, .sd-footer__top:focus-visible { color: var(--cream); }


/* =============================================================
   SERVICE DETAIL — capability cards + fit scenarios
   Used by page-google-ads.php and future per-service templates.
   Ported from gasper&co.
   ============================================================= */

/* ── Capability cards (2-col grid) ──────────────────────────── */

.svc-caps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-7);
}

@media (max-width: 767px) {
    .svc-caps { grid-template-columns: 1fr; }
}

.svc-caps__item {
    background: var(--white);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.svc-caps__label {
    font-size: var(--type-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.svc-caps__title {
    font-family: var(--font-sans);
    font-size: var(--type-h4);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}

.svc-caps__text {
    font-size: var(--type-body-sm);
    color: var(--ink-body);
    line-height: 1.65;
    margin: 0;
}

/* ── Fit scenarios (stacked, hairline-separated) ────────────── */

.svc-fit {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-7);
}

.svc-fit__item {
    padding: var(--space-6) 0;
    border-bottom: 0.5px solid var(--border);
    max-width: 65ch;
}

.svc-fit__item:first-child { padding-top: 0; }
.svc-fit__item:last-child  { border-bottom: none; }

.svc-fit__heading {
    font-family: var(--font-sans);
    font-size: var(--type-h4);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: var(--space-3);
}

.svc-fit__text {
    font-size: var(--type-body-sm);
    color: var(--ink-body);
    line-height: 1.65;
    margin: 0;
}


/* =============================================================
   SERVICE DETAIL — platform divider + comparison table
   Introduced for the Sklik a Bing page, which covers two
   platforms on one page rather than the usual single-service layout.
   ============================================================= */

/* ── Platform divider ───────────────────────────────────────── */

.svc-platform {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
}

.svc-platform__name {
    font-family: var(--font-serif);
    font-size: var(--type-h3);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.svc-platform__meta {
    font-size: var(--type-caption);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Comparison table ───────────────────────────────────────── */
/* Wrapper scrolls independently so the page body never scrolls
   sideways on narrow screens. */

.svc-compare {
    overflow-x: auto;
    margin-top: var(--space-6);
    -webkit-overflow-scrolling: touch;
}

.svc-compare table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    background: var(--white);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.svc-compare th,
.svc-compare td {
    text-align: left;
    padding: var(--space-4);
    border-bottom: 0.5px solid var(--border);
    font-size: var(--type-body-sm);
    line-height: 1.6;
    vertical-align: top;
}

.svc-compare thead th {
    background: var(--sand);
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--ink);
    font-size: var(--type-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.svc-compare tbody th {
    font-weight: 500;
    color: var(--ink);
    width: 26%;
}

.svc-compare td { color: var(--ink-body); }

.svc-compare tbody tr:last-child th,
.svc-compare tbody tr:last-child td { border-bottom: none; }

.svc-compare__note {
    font-size: var(--type-caption);
    color: var(--ink-muted);
    margin-top: var(--space-3);
}

/* Worded price ("Po dohode") — sized above the tier name (h3) but below
   the h1 numeral style, which would overflow a third-width card. */
.pricing-card__price--text {
  font-size: var(--type-h2);
  letter-spacing: -0.015em;
  white-space: nowrap;
}


/* =============================================================
   HOMEPAGE — FAQ (Časté otázky)
   Ported from gasper&co. Their stylesheet spreads these rules across
   three places (base, shared card block, late override block); merged
   here into the final computed result.
   ============================================================= */

.faq {
  background: var(--sand);
}

.faq__heading {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--space-7);
}
@media (max-width: 767px) { .faq__heading { font-size: 1.875rem; } }

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 767px) { .faq__grid { grid-template-columns: 1fr; } }

.faq-item {
  background: var(--cream);
  border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: visible;
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

.faq-item:hover {
  background: var(--white);
  border-color: var(--border-strong);
}

.faq-item[open] {
  background: var(--white);
  border-color: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 31, 46, 0.05), 0 1px 2px rgba(26, 31, 46, 0.03);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
  user-select: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary:hover { color: var(--brick); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: -2px;
}

.faq-item__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.15em;
  color: var(--ink-muted);
  transition: transform var(--motion-base) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}

.faq-item[open] .faq-item__chevron {
  transform: rotate(90deg);
  color: var(--brick);
}

.faq-item__answer {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.65;
  animation: sd-faq-reveal 0.28s var(--ease-out) both;
}

@keyframes sd-faq-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__answer { animation: none; }
}

/* Tier 3 has no eyebrow. Reserve the line anyway so the name and price of all
   three cards stay on the same baseline. */
.pricing-card__eyebrow { min-height: 1.4em; }

/* A single card stranded on the last row spans the full grid width instead of
   sitting alone beside two empty slots. Below 768px the grid is 1-up anyway,
   so this is a no-op there. */
.service-card--wide { grid-column: 1 / -1; }


/* Service card pictogram — brick accent above the title. */
.service-card__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: var(--space-4);
  color: var(--brick);
}

/* Two adjacent sections sharing a background read as one block, so their
   facing paddings stack into a single oversized gap (e.g. services →
   testimonials, both sand). Drop the second one's top padding so the pair
   is separated by one section's worth of space, not two. */
.sd-section--sand + .sd-section--sand,
.sd-section--cream + .sd-section--cream {
  padding-top: 0;
}

/* Platform shortcuts above a service-card title (PPC → Google Ads, Meta…). */
.service-card__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--space-2);
  font-size: var(--type-caption);
  line-height: 1.4;
}
.service-card__platforms a {
  color: var(--ink-muted);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.service-card__platforms a:hover,
.service-card__platforms a:focus-visible {
  color: var(--brick);
  border-bottom-color: currentColor;
}
.service-card__platforms-sep { color: var(--ink-light); }


/* =============================================================
   LEGAL DOCUMENTS — privacy policy, terms
   Long-form prose: readable measure, clear heading rhythm, lists.
   ============================================================= */

.legal__meta {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  margin-top: var(--space-4);
}

.legal h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}
.legal > h2:first-child { margin-top: 0; }

.legal h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: 500;
  color: var(--ink);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.legal p {
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.legal ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.legal ul li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--type-body-sm);
  color: var(--ink-body);
  line-height: 1.7;
}
.legal ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--border-strong);
}

.legal a { color: var(--brick); }

.legal strong { color: var(--ink); font-weight: 500; }

.legal code {
  font-size: 0.9em;
  background: var(--sand-deep);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.legal__entity {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  line-height: 1.7;
}

/* Cookie-settings trigger rendered inline inside a paragraph. */
.legal__link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brick);
  text-decoration: underline;
  cursor: pointer;
}

/* The legal-basis table needs a tighter first column than the service
   comparison it borrows its styling from. */
.legal .svc-compare { margin-bottom: var(--space-5); }
.legal .svc-compare tbody th { width: 34%; }

/* Visible placeholder for legally-required data that is still missing.
   Deliberately loud so it cannot ship to production unnoticed. */
.legal__todo {
  background: #FFE9A8;
  color: #6B4E00;
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-weight: 500;
}

/* =========================================================
   LANGUAGE SWITCHER (custom multilanguage module)
   ========================================================= */

.sd-langswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.sd-nav__lang { margin-left: var(--space-4); }

.sd-langswitch__item {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

a.sd-langswitch__item:hover { color: var(--ink); background: var(--sand); }

.sd-langswitch__item.is-active {
  color: var(--ink);
  background: var(--sand-deep);
  cursor: default;
}

/* Hide the inline (desktop) switcher where the bar collapses to a hamburger. */
@media (max-width: 1023px) {
  .sd-nav__lang { display: none; }
}

/* Overlay (mobile) switcher: larger, centered, above the CTA. */
.sd-nav__overlay-lang {
  margin-top: var(--space-5);
  gap: var(--space-2);
}
/* Only the sizing is overlay-specific. The colours used to be the light-on-dark
   set (--ink-light on white alphas), which was left over from a dark overlay —
   on the cream background that rendered the active language as a near-invisible
   white chip. Inheriting the base dark-on-light colours instead. */
.sd-nav__overlay-lang .sd-langswitch__item {
  font-size: 0.95rem;
  padding: 8px 12px;
}