/* ====================================================
   LDC — Luxent Design Concierge
   Homepage CSS — clean build, no legacy dependencies
   Namespace : .ldc-clean-
   Font      : Nunito Sans (Google Fonts)
   Version   : 1.0
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&display=swap');

/* ────────────────────────────────────────────────────
   DESIGN TOKENS — brand palette v2 (grafik 2025)
   ──────────────────────────────────────────────────── */
:root {
  /* ── Bordeaux brand palette (exact, graphic designer) */
  --ldc-50:   #F8EEF0;
  --ldc-100:  #EBC9CF;
  --ldc-200:  #CC8C98;
  --ldc-400:  #A84D5F;
  --ldc-600:  #7D2E3E;   /* base accent */
  --ldc-800:  #561A27;
  --ldc-900:  #2E0C13;

  /* ── UI state aliases */
  --ldc-accent:          #7D2E3E;   /* default */
  --ldc-accent-hover:    #6A2535;   /* hover */
  --ldc-accent-pressed:  #561A27;   /* pressed */
  --ldc-accent-disabled: #CC8C98;   /* disabled */
  --ldc-accent-dark:     #561A27;
  --ldc-accent-pale:     #F8EEF0;   /* palette 50 */

  /* ── Backgrounds */
  --ldc-bg:       #ffffff;
  --ldc-bg-warm:  #F8EEF0;   /* palette 50 — light background */
  --ldc-bg-muted: #EBC9CF;   /* palette 100 — deeper warm bg */

  /* ── Hero left panel (dark bordeaux / ink — premium contrast) */
  --ldc-hero-panel: #2E0C13;

  /* ── Text (warm palette-aligned) */
  --ldc-ink:      #2E0C13;   /* default text — palette 900 */
  --ldc-ink-mid:  #561A27;   /* body text — palette 800 */
  --ldc-ink-soft: #A84D5F;   /* muted text — palette 400 */
  --ldc-ink-xs:   #CC8C98;   /* very subtle — palette 200 */

  /* ── Lines */
  --ldc-line:      #EBC9CF;   /* palette 100 */
  --ldc-line-soft: #F8EEF0;   /* palette 50 */

  /* ── Typography */
  --ldc-font: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── Easing — premium smooth */
  --ldc-ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ldc-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout */
  --ldc-container: 1280px;
  --ldc-section-v: clamp(80px, 9vw, 128px);

  /* Viewport-edge bleed used by horizontal carousels.
     = distance from the container's right edge to the viewport's right edge.
     Cards extend visibly off-screen to suggest more content (Luxent pattern). */
  --ldc-bleed: max(24px, calc((100vw - var(--ldc-container)) / 2));

  /* ── Shadows */
  --ldc-shadow-sm: 0 2px 16px rgba(46,12,19,.05);
  --ldc-shadow:    0 6px 32px rgba(46,12,19,.07);
  --ldc-shadow-md: 0 16px 56px rgba(46,12,19,.11);
}

/* ────────────────────────────────────────────────────
   RESET & BASE
   ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ldc-font);
  color: var(--ldc-ink);
  background: var(--ldc-bg);
  line-height: 1.5;
  font-size: 16px;
}

img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ────────────────────────────────────────────────────
   LAYOUT UTILITIES
   ──────────────────────────────────────────────────── */

.ldc-clean-container {
  width: min(var(--ldc-container), calc(100% - 48px));
  margin: 0 auto;
}

.ldc-clean-section {
  padding: var(--ldc-section-v) 0;
}

.ldc-clean-section--warm {
  background: var(--ldc-bg-warm);
}

/* Section header pattern: eyebrow + title left, optional link right */
.ldc-clean-section-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
}

.ldc-clean-section-hd__title {
  margin-top: 10px;
}

/* ────────────────────────────────────────────────────
   TYPOGRAPHY
   ──────────────────────────────────────────────────── */

.ldc-clean-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  margin-bottom: 14px;
}

.ldc-clean-title {
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.033em;
  font-weight: 700;
  color: var(--ldc-ink);
}

.ldc-clean-title--lg {
  font-size: clamp(32px, 4vw, 56px);
}

.ldc-clean-lead {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ldc-ink-mid);
  max-width: 640px;
}

/* ────────────────────────────────────────────────────
   BUTTON SYSTEM
   ──────────────────────────────────────────────────── */

.ldc-clean-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--ldc-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.26s var(--ldc-ease),
              color 0.26s var(--ldc-ease),
              border-color 0.26s var(--ldc-ease);
  cursor: pointer;
}

/* Primary — bordeaux solid */
.ldc-clean-btn--primary {
  background: var(--ldc-600);
  border-color: var(--ldc-600);
  color: #fff;
}
.ldc-clean-btn--primary:hover {
  background: var(--ldc-accent-hover);
  border-color: var(--ldc-accent-hover);
}
.ldc-clean-btn--primary:active {
  background: var(--ldc-accent-pressed);
  border-color: var(--ldc-accent-pressed);
}

/* Outline — ink border */
.ldc-clean-btn--outline {
  background: transparent;
  border-color: var(--ldc-line);
  color: var(--ldc-ink);
}
.ldc-clean-btn--outline:hover {
  border-color: var(--ldc-ink-soft);
}

/* Ghost (hero panel) — white border on dark bg */
.ldc-clean-btn--ghost {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.ldc-clean-btn--ghost:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.8);
}

/* Inline link CTA */
.ldc-clean-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldc-ink-mid);
  border-bottom: 1px solid var(--ldc-line);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.ldc-clean-link-cta:hover {
  color: var(--ldc-ink);
  border-color: var(--ldc-ink-soft);
}

.ldc-clean-link-cta--white {
  color: rgba(255,255,255,.72);
  border-bottom-color: rgba(255,255,255,.28);
}
.ldc-clean-link-cta--white:hover {
  color: #fff;
  border-color: rgba(255,255,255,.65);
}

/* ────────────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────────────── */

.ldc-clean-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-clean-header__inner {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Brand / logo */
.ldc-clean-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.ldc-clean-header__logo {
  height: 60px;
  width: auto;
  display: block;
}

/* Fallback when logo img fails */
.ldc-clean-header__brand-fallback {
  display: none;
  align-items: center;
  gap: 10px;
}

.ldc-clean-header__brand-mark {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--ldc-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ldc-ink);
}

.ldc-clean-header__brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldc-ink);
}

/* Navigation */
.ldc-clean-header__nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.ldc-clean-header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ldc-ink-mid);
  letter-spacing: 0.015em;
  transition: color 0.22s var(--ldc-ease);
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
}
.ldc-clean-header__nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--ldc-accent);
  transition: right 0.28s var(--ldc-ease);
}
.ldc-clean-header__nav a:hover { color: var(--ldc-ink); }
.ldc-clean-header__nav a:hover::after { right: 0; }

/* Actions */
.ldc-clean-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.ldc-clean-header__login {
  font-size: 13px;
  font-weight: 500;
  color: var(--ldc-ink-mid);
  transition: color 0.18s;
}
.ldc-clean-header__login:hover { color: var(--ldc-ink); }

.ldc-clean-header__mobile-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ldc-line);
  border-radius: 2px;
  background: transparent;
  font-size: 16px;
  color: var(--ldc-ink);
  align-items: center;
  justify-content: center;
}

/* ────────────────────────────────────────────────────
   HERO — SPLIT PANEL (new, no legacy classes)
   ──────────────────────────────────────────────────── */

.ldc-clean-hero {
  background: var(--ldc-bg);
  overflow: hidden;
}

/* CSS Grid — left taupe panel + right photo */
.ldc-clean-hero__inner {
  display: grid;
  grid-template-columns: minmax(380px, 32vw) 1fr;
  min-height: 720px;
  width: 100%;
}

/* ── LEFT PANEL — dark palette (no overlay on photo) ── */
.ldc-clean-hero__panel {
  background: var(--ldc-hero-panel);
  color: #fff;
  padding: clamp(72px, 9vw, 128px) clamp(36px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

.ldc-clean-hero__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 24px;
  transition: opacity 0.36s var(--ldc-ease), transform 0.36s var(--ldc-ease);
}

.ldc-clean-hero__title {
  font-family: var(--ldc-font);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 28px;
  transition: opacity 0.36s var(--ldc-ease), transform 0.36s var(--ldc-ease);
}

.ldc-clean-hero__sub {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255,255,255,.82);
  max-width: 340px;
  margin: 0 0 40px;
  transition: opacity 0.36s var(--ldc-ease), transform 0.36s var(--ldc-ease);
}

/* Fade transition during slide change */
.ldc-clean-hero__inner.is-changing .ldc-clean-hero__eyebrow,
.ldc-clean-hero__inner.is-changing .ldc-clean-hero__title,
.ldc-clean-hero__inner.is-changing .ldc-clean-hero__sub {
  opacity: 0;
  transform: translateY(8px);
}
.ldc-clean-hero__inner.is-changing .ldc-clean-hero__image {
  opacity: 0.35;
}

/* Hero primary CTA — strict palette default / hover / pressed */
.ldc-clean-hero .ldc-clean-btn--primary {
  background: var(--ldc-600);
  border-color: var(--ldc-600);
  color: #fff;
}
.ldc-clean-hero .ldc-clean-btn--primary:hover {
  background: var(--ldc-accent-hover);
  border-color: var(--ldc-accent-hover);
}
.ldc-clean-hero .ldc-clean-btn--primary:active {
  background: var(--ldc-accent-pressed);
  border-color: var(--ldc-accent-pressed);
}

.ldc-clean-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* ── RIGHT PANEL — photo only ── */
.ldc-clean-hero__image {
  display: block;
  min-height: 720px;
  background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=82');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.45s var(--ldc-ease);
}

/* ────────────────────────────────────────────────────
   HERO NAVIGATION — dots + slide counter (Luxent-style)
   ──────────────────────────────────────────────────── */

.ldc-clean-hero-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 32px 48px;
  background: var(--ldc-bg);
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-clean-hero-nav__dots {
  display: flex;
  align-items: center;
  gap: 4px;     /* hit zones are big — minimal gap keeps dots visually close */
}

/* Big invisible hit area around visual dot for accessible click target */
.ldc-clean-hero-nav__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background 0.22s var(--ldc-ease);
}

.ldc-clean-hero-nav__dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ldc-100);
  transition: background 0.28s var(--ldc-ease),
              transform 0.3s var(--ldc-ease-out),
              width 0.36s var(--ldc-ease-out);
}

.ldc-clean-hero-nav__dot--active::before {
  background: var(--ldc-accent);
  width: 28px;
  border-radius: 4px;          /* pill for active */
}

.ldc-clean-hero-nav__dot:hover:not(.ldc-clean-hero-nav__dot--active)::before {
  background: var(--ldc-400);
  transform: scale(1.25);
}

.ldc-clean-hero-nav__dot:hover {
  background: var(--ldc-50);
}

.ldc-clean-hero-nav__dot:focus-visible {
  outline: 2px solid var(--ldc-accent);
  outline-offset: 2px;
}

.ldc-clean-hero-nav__counter {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ldc-ink-soft);
  min-width: 48px;
  text-align: center;
}

/* Prev/next arrows — larger click target, palette hover */
.ldc-clean-hero-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ldc-line);
  border-radius: 50%;
  background: var(--ldc-bg);
  color: var(--ldc-ink-mid);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.22s var(--ldc-ease),
              color 0.22s var(--ldc-ease),
              background 0.22s var(--ldc-ease),
              transform 0.22s var(--ldc-ease);
}
.ldc-clean-hero-nav__arrow:hover {
  border-color: var(--ldc-600);
  color: var(--ldc-600);
  background: var(--ldc-50);
  transform: translateY(-1px);
}
.ldc-clean-hero-nav__arrow:active {
  background: var(--ldc-100);
  transform: translateY(0);
}

/* ────────────────────────────────────────────────────
   CATEGORY STRIP
   ──────────────────────────────────────────────────── */

.ldc-clean-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ldc-bg);
  border-bottom: 1px solid var(--ldc-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.ldc-clean-strip::-webkit-scrollbar { display: none; }

.ldc-clean-strip__item {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  height: 58px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  border-right: 1px solid var(--ldc-line-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s;
  text-decoration: none;
}
.ldc-clean-strip__item:first-child {
  border-left: 1px solid var(--ldc-line-soft);
}
.ldc-clean-strip__item:hover {
  color: var(--ldc-ink);
}
.ldc-clean-strip__item--active {
  color: var(--ldc-accent);
}

/* ────────────────────────────────────────────────────
   ABOUT / INTRO — two-column editorial
   ──────────────────────────────────────────────────── */

.ldc-clean-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
  overflow: hidden;
}

.ldc-clean-intro__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 100px) clamp(40px, 6vw, 88px);
  background: var(--ldc-bg-warm);
}

.ldc-clean-intro__copy .ldc-clean-eyebrow {
  margin-bottom: 18px;
}

.ldc-clean-intro__copy .ldc-clean-title {
  margin-bottom: 32px;
}

.ldc-clean-intro__lead {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ldc-ink-mid);
  max-width: 480px;
  margin-top: 0;
  margin-bottom: 44px;
}

.ldc-clean-intro__image {
  background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1200&q=80');
  background-size: cover;
  background-position: center;
}

/* ────────────────────────────────────────────────────
   STEPS — numbered editorial list
   ──────────────────────────────────────────────────── */

.ldc-clean-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ldc-line);
  margin-top: 48px;
}

.ldc-clean-step {
  padding: 36px 32px 36px 0;
  border-right: 1px solid var(--ldc-line);
}
.ldc-clean-step:last-child {
  border-right: none;
  padding-right: 0;
}
.ldc-clean-step:not(:first-child) {
  padding-left: 32px;
}

.ldc-clean-step__num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ldc-ink-xs);
  margin-bottom: 20px;
}

.ldc-clean-step__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ldc-ink);
  margin-bottom: 12px;
  line-height: 1.25;
}

.ldc-clean-step__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ldc-ink-mid);
}

/* ────────────────────────────────────────────────────
   SERVICES — Luxent-style horizontal band + viewport-edge overflow
   ──────────────────────────────────────────────────── */

.ldc-clean-services-section {
  overflow-x: clip;            /* contain the bleed on parent, not on the rail */
}

.ldc-clean-services-band {
  display: grid;
  grid-template-columns: minmax(280px, 30%) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: 8px;
}

.ldc-clean-services-band__intro {
  max-width: 420px;
  padding-right: 8px;
  padding-top: 4px;
}

.ldc-clean-services-band__title {
  margin-bottom: 28px;
}

.ldc-clean-services-band__lead {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ldc-ink-mid);
  margin: 0 0 36px;
  max-width: 380px;
}

.ldc-clean-svc-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}

.ldc-clean-svc-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border-top: 1px solid var(--ldc-line);
  font-size: 14px;
  font-weight: 500;
  color: var(--ldc-ink-mid);
  text-decoration: none;
  transition: color 0.22s var(--ldc-ease),
              padding-left 0.22s var(--ldc-ease),
              border-color 0.22s var(--ldc-ease);
}

.ldc-clean-svc-nav__item:last-child {
  border-bottom: 1px solid var(--ldc-line);
}

.ldc-clean-svc-nav__item:hover {
  color: var(--ldc-600);
  padding-left: 8px;
  border-top-color: var(--ldc-200);
}
.ldc-clean-svc-nav__item:hover + .ldc-clean-svc-nav__item {
  border-top-color: var(--ldc-200);
}

.ldc-clean-svc-nav__item--active {
  color: var(--ldc-600);
  font-weight: 700;
}

.ldc-clean-svc-nav__all {
  display: inline-block;
  margin-top: 8px;
}

/* RAIL — bleed to viewport edge on the right */
.ldc-clean-services-band__rail {
  position: relative;
  min-width: 0;
  /* break out of the container's right padding to reach the viewport edge */
  margin-right: calc(-1 * var(--ldc-bleed));
  /* compensate the shadow padding below so layout doesn't visually drop */
  margin-top: -20px;
  margin-bottom: -40px;
}

.ldc-clean-services-scroll {
  /* overflow-y forced to auto by browsers when x is auto;
     instead we give the scroll container generous vertical padding
     so hover lift+shadow has physical room and never clips */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 36px 0 64px 0;
  /* inner padding so the last card still has breathing room when fully scrolled */
  padding-right: var(--ldc-bleed);
}

.ldc-clean-services-scroll::-webkit-scrollbar { display: none; }

.ldc-clean-services-track {
  display: flex;
  gap: 24px;
  padding: 0;
}

.ldc-clean-svc-card {
  flex: 0 0 clamp(280px, 26vw, 340px);
  scroll-snap-align: start;
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.32s var(--ldc-ease),
              transform 0.32s var(--ldc-ease),
              border-color 0.32s var(--ldc-ease);
}

.ldc-clean-svc-card:hover {
  box-shadow: 0 18px 50px rgba(46, 12, 19, 0.12);
  transform: translateY(-6px);
  border-color: var(--ldc-100);
}

.ldc-clean-svc-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ldc-50);
}

.ldc-clean-svc-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--ldc-ease);
}

.ldc-clean-svc-card:hover .ldc-clean-svc-card__image {
  transform: scale(1.03);
}

.ldc-clean-svc-card__body {
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--ldc-line-soft);
  flex: 1;
}

.ldc-clean-svc-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-svc-card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ldc-ink);
  line-height: 1.22;
  transition: color 0.22s var(--ldc-ease);
}

.ldc-clean-svc-card:hover .ldc-clean-svc-card__name {
  color: var(--ldc-600);
}

.ldc-clean-svc-card__text {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.62;
}

/* Scroll arrows — shared with news (sit inside the container, right-aligned) */
.ldc-clean-scroll-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-right: 0;
}

/* Services arrows live inside the bleed-rail — pull them back into the container */
.ldc-clean-services-band__rail .ldc-clean-scroll-nav {
  margin-right: var(--ldc-bleed);
}

.ldc-clean-scroll-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ldc-line);
  background: var(--ldc-bg);
  color: var(--ldc-ink-mid);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.26s var(--ldc-ease),
              color 0.26s var(--ldc-ease),
              background 0.26s var(--ldc-ease),
              box-shadow 0.26s var(--ldc-ease),
              transform 0.26s var(--ldc-ease);
}

.ldc-clean-scroll-btn:hover {
  border-color: var(--ldc-600);
  color: var(--ldc-600);
  background: var(--ldc-50);
  box-shadow: var(--ldc-shadow-sm);
  transform: translateY(-1px);
}

.ldc-clean-scroll-btn:active {
  transform: translateY(0);
  background: var(--ldc-100);
}

/* ────────────────────────────────────────────────────
   PRICING — clean, no SaaS style
   ──────────────────────────────────────────────────── */

.ldc-clean-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: transparent;
  border: none;
  margin-top: 48px;
  align-items: stretch;
  overflow: visible;
  padding: 36px 0 16px;
}

.ldc-clean-pricing-card {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.36s var(--ldc-ease),
              box-shadow 0.36s var(--ldc-ease),
              border-color 0.36s var(--ldc-ease);
  z-index: 1;
}

.ldc-clean-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(46, 12, 19, 0.12);
  border-color: var(--ldc-100);
  z-index: 2;
}

/* PRO — visually higher (lift), highlighted background, premium shadow */
.ldc-clean-pricing-card--featured {
  background: var(--ldc-bg-warm);
  border-color: var(--ldc-100);
  margin-top: -28px;
  padding-top: 68px;
  padding-bottom: 56px;
  box-shadow: 0 22px 58px rgba(46, 12, 19, 0.14);
  z-index: 3;
}

.ldc-clean-pricing-card--featured:hover {
  transform: translateY(-34px);
  box-shadow: 0 32px 80px rgba(46, 12, 19, 0.2);
  border-color: var(--ldc-200);
}

.ldc-clean-pricing-card__badge {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ldc-600);
  border: 1px solid var(--ldc-600);
  padding: 6px 12px;
}

.ldc-clean-pricing-card__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ldc-ink);
  margin-bottom: 6px;
}

.ldc-clean-pricing-card__desc {
  font-size: 13px;
  color: var(--ldc-ink-soft);
  line-height: 1.5;
  margin-bottom: 24px;
}

.ldc-clean-pricing-card__price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ldc-ink);
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ldc-line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ldc-clean-pricing-card__price del {
  font-size: 15px;
  font-weight: 400;
  color: var(--ldc-ink-xs);
  text-decoration: line-through;
}

.ldc-clean-pricing-card__list {
  display: grid;
  gap: 12px;
  flex: 1;
  margin-bottom: 32px;
}

.ldc-clean-pricing-card__list li {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  display: block;
  line-height: 1.45;
}

.ldc-clean-pricing-card__list li::before { content: none; }

/* ────────────────────────────────────────────────────
   REFERENCES — real photo layer + readable overlay
   ──────────────────────────────────────────────────── */

.ldc-clean-refs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.ldc-clean-ref {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  background: var(--ldc-50);
  transition: box-shadow 0.36s var(--ldc-ease),
              transform 0.36s var(--ldc-ease);
}

.ldc-clean-ref:hover {
  box-shadow: 0 22px 64px rgba(46, 12, 19, 0.18);
  transform: translateY(-4px);
}

.ldc-clean-ref__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.75s var(--ldc-ease);
  z-index: 0;
}

.ldc-clean-ref:hover .ldc-clean-ref__photo {
  transform: scale(1.03);
}

/* Subtle gradient — only the lower portion to keep photo dominant */
.ldc-clean-ref__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(46, 12, 19, 0.62) 0%,
    rgba(46, 12, 19, 0.18) 36%,
    rgba(46, 12, 19, 0.02) 58%,
    transparent 72%
  );
  transition: background 0.35s var(--ldc-ease);
}

.ldc-clean-ref:hover .ldc-clean-ref__overlay {
  background: linear-gradient(
    to top,
    rgba(46, 12, 19, 0.74) 0%,
    rgba(46, 12, 19, 0.26) 40%,
    rgba(46, 12, 19, 0.06) 64%,
    transparent 78%
  );
}

.ldc-clean-ref__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 28px 28px;
  color: #fff;
  z-index: 2;
  transform: translateY(0);
  transition: transform 0.42s var(--ldc-ease-out);
}

.ldc-clean-ref:hover .ldc-clean-ref__meta {
  transform: translateY(-4px);
}

.ldc-clean-ref__loc {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  line-height: 1.12;
}

.ldc-clean-ref__desc {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}

/* CTA — own row, separator line, animates in on hover */
.ldc-clean-ref__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  transition: letter-spacing 0.26s var(--ldc-ease),
              border-color 0.26s var(--ldc-ease);
}

.ldc-clean-ref:hover .ldc-clean-ref__cta {
  letter-spacing: 0.2em;
  border-top-color: rgba(255, 255, 255, 0.6);
}

/* ────────────────────────────────────────────────────
   BENEFITS / PROČ LDC
   ──────────────────────────────────────────────────── */

.ldc-clean-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.ldc-clean-benefits__lead {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ldc-ink-mid);
  margin-bottom: 36px;
  max-width: 440px;
}

.ldc-clean-benefit-list {
  display: grid;
  gap: 0;
}

.ldc-clean-benefit-item {
  padding: 20px 0;
  border-top: 1px solid var(--ldc-line);
}
.ldc-clean-benefit-item:last-child {
  border-bottom: 1px solid var(--ldc-line);
}

.ldc-clean-benefit-item__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ldc-ink);
  margin-bottom: 4px;
}

.ldc-clean-benefit-item__text {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.62;
}

.ldc-clean-benefits__visual {
  aspect-ratio: 4 / 5;
  background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80');
  background-size: cover;
  background-position: center;
}

/* ────────────────────────────────────────────────────
   NEWS / LIFESTYLE — horizontal editorial carousel
   Same Luxent overflow pattern as services
   ──────────────────────────────────────────────────── */

.ldc-clean-news-section {
  overflow-x: clip;            /* contain bleed so it doesn't scroll the page */
}

.ldc-clean-news-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.ldc-clean-news-top__link {
  flex-shrink: 0;
}

.ldc-clean-news-band {
  position: relative;
  /* bleed the rail to viewport edge */
  margin-right: calc(-1 * var(--ldc-bleed));
  /* compensate the shadow padding below so layout doesn't visually drop */
  margin-top: -20px;
  margin-bottom: -40px;
}

.ldc-clean-news-scroll {
  /* overflow-y forced to auto by browsers — use padding to make shadow room */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 36px 0 60px 0;
  padding-right: var(--ldc-bleed);
}

.ldc-clean-news-scroll::-webkit-scrollbar { display: none; }

.ldc-clean-news-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 0;
}

/* Uniform news card — same size for all, white panel under image */
.ldc-clean-news-card {
  flex: 0 0 clamp(300px, 24vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  cursor: pointer;
  transition: transform 0.32s var(--ldc-ease),
              box-shadow 0.32s var(--ldc-ease),
              border-color 0.32s var(--ldc-ease);
}

.ldc-clean-news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(46, 12, 19, 0.12);
  border-color: var(--ldc-100);
}

.ldc-clean-news-card__visual {
  position: relative;
}

.ldc-clean-news-card__image-wrap {
  overflow: hidden;
  background: var(--ldc-50);
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
}

.ldc-clean-news-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--ldc-ease);
}

.ldc-clean-news-card:hover .ldc-clean-news-card__image {
  transform: scale(1.03);
}

/* White text panel — flush below image, no gap with date strip */
.ldc-clean-news-card__panel {
  padding: 20px 22px 24px;
  background: var(--ldc-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Editorial date strip — sits at the visible bottom of the image,
   white bg matches the panel below, visually connecting the two */
.ldc-clean-news-card__date {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 16px 9px;
  background: var(--ldc-bg);
  color: var(--ldc-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 3;
  white-space: nowrap;
}

.ldc-clean-news-card__cat {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-news-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ldc-ink);
  transition: color 0.24s var(--ldc-ease);
}

.ldc-clean-news-card:hover .ldc-clean-news-card__title {
  color: var(--ldc-600);
}

.ldc-clean-news-card__text {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.65;
}

.ldc-clean-news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldc-600);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.24s var(--ldc-ease),
              border-color 0.24s var(--ldc-ease),
              letter-spacing 0.24s var(--ldc-ease);
  align-self: flex-start;
}

.ldc-clean-news-card:hover .ldc-clean-news-card__link {
  color: var(--ldc-accent-hover);
  border-bottom-color: var(--ldc-accent-hover);
  letter-spacing: 0.16em;
}

/* News arrows — keep inside container even though rail bleeds right */
.ldc-clean-news-band .ldc-clean-scroll-nav {
  margin-right: var(--ldc-bleed);
}

/* ────────────────────────────────────────────────────
   CTA SECTION — deep bordeaux
   ──────────────────────────────────────────────────── */

.ldc-clean-cta {
  background: var(--ldc-accent-dark);
  padding: clamp(64px, 9vw, 110px) 0;
}

.ldc-clean-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}

.ldc-clean-cta__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 16px;
}

.ldc-clean-cta__title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 16px;
}

.ldc-clean-cta__text {
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255,255,255,.68);
  max-width: 520px;
}

.ldc-clean-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
}

.ldc-clean-cta .ldc-clean-btn {
  justify-content: center;
  width: 100%;
}

/* ────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────── */

.ldc-clean-footer {
  background: var(--ldc-bg-warm);
  padding: 72px 0 48px;
}

.ldc-clean-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--ldc-line);
}

.ldc-clean-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ldc-clean-footer__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  object-position: left;
  display: block;
  opacity: 0.72;
}

.ldc-clean-footer__brand-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldc-ink);
}

.ldc-clean-footer__tagline {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.65;
  max-width: 260px;
}

.ldc-clean-footer__col-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldc-ink);
  margin-bottom: 22px;
}

.ldc-clean-footer__links {
  display: grid;
  gap: 14px;
}

.ldc-clean-footer__links a {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  transition: color 0.22s var(--ldc-ease);
}
.ldc-clean-footer__links a:hover { color: var(--ldc-accent); }

.ldc-clean-footer__tagline {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.7;
  max-width: 280px;
}

.ldc-clean-footer__bottom {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ldc-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ldc-ink-soft);
  gap: 16px;
  flex-wrap: wrap;
}

/* ────────────────────────────────────────────────────
   MOBILE CTA STRIP (fixed bottom, mobile only)
   ──────────────────────────────────────────────────── */

.ldc-clean-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 12px 16px;
  background: rgba(255,255,255,.95);
  border-top: 1px solid var(--ldc-line-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ldc-clean-mobile-cta .ldc-clean-btn {
  width: 100%;
  height: 48px;
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .ldc-clean-header__mobile-btn { display: inline-flex; }

  .ldc-clean-hero__inner { grid-template-columns: minmax(300px, 44%) 1fr; }

  .ldc-clean-intro { grid-template-columns: 1fr; }
  .ldc-clean-intro__image { min-height: 360px; order: -1; }

  .ldc-clean-steps { grid-template-columns: repeat(2, 1fr); }
  .ldc-clean-step:nth-child(2) { border-right: none; }
  .ldc-clean-step:nth-child(3) { border-top: 1px solid var(--ldc-line); }

  .ldc-clean-services-band {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* keep the viewport-edge bleed at narrow viewports too — cards still extend off-screen */

  .ldc-clean-footer__grid { grid-template-columns: 1fr 1fr; }

  .ldc-clean-cta__inner { grid-template-columns: 1fr; gap: 40px; }
  .ldc-clean-cta__actions { flex-direction: row; min-width: 0; }
}

@media (max-width: 960px) {
  .ldc-clean-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ldc-clean-hero__image {
    order: -1;
    min-height: 420px;
  }
  .ldc-clean-hero__panel { padding: 56px 36px; }

  .ldc-clean-benefits { grid-template-columns: 1fr; gap: 48px; }
  .ldc-clean-benefits__visual { aspect-ratio: 16 / 9; }

  .ldc-clean-pricing-card--featured {
    margin-top: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    transform: none;
    box-shadow: none;
  }

  .ldc-clean-pricing-card:hover,
  .ldc-clean-pricing-card--featured:hover {
    transform: translateY(-4px);
  }

  .ldc-clean-pricing {
    align-items: stretch;
    padding-top: 0;
  }

  .ldc-clean-refs { grid-template-columns: 1fr 1fr; }
  .ldc-clean-pricing { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --ldc-section-v: clamp(52px, 8vw, 80px); }

  .ldc-clean-hero__image { min-height: 260px; }
  .ldc-clean-hero__panel { padding: 44px 24px; }
  .ldc-clean-hero__title { font-size: clamp(36px, 12vw, 52px); }

  .ldc-clean-strip__item { padding: 0 18px; height: 52px; font-size: 10px; }

  .ldc-clean-steps { grid-template-columns: 1fr; }
  .ldc-clean-step {
    border-right: none;
    border-top: 1px solid var(--ldc-line);
    padding: 24px 0;
  }
  .ldc-clean-step:first-child { border-top: none; }
  .ldc-clean-step:not(:first-child) { padding-left: 0; }

  .ldc-clean-svc-card {
    flex: 0 0 min(280px, 78vw);
  }

  .ldc-clean-news-card {
    flex: 0 0 min(280px, 82vw);
  }

  .ldc-clean-refs { grid-template-columns: 1fr; }

  .ldc-clean-section-hd { flex-direction: column; align-items: flex-start; }

  .ldc-clean-cta { padding: 52px 0; }
  .ldc-clean-cta__actions { flex-direction: column; }

  .ldc-clean-footer__grid { grid-template-columns: 1fr; }
  .ldc-clean-footer { padding-bottom: 80px; }
  .ldc-clean-mobile-cta { display: block; }

  .ldc-clean-hero-nav { gap: 20px; padding: 18px 24px; }
}

/* ────────────────────────────────────────────────────
   MOBILE HEADER — drawer navigation
   Drawer styles activate alongside the hamburger button (≤1200px).
   Logo shrink + "Začít projekt" hide are reserved for phones (≤768px).
   ──────────────────────────────────────────────────── */

/* Backdrop element — hidden by default */
.ldc-clean-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46, 12, 19, 0.42);
  z-index: 102;
  opacity: 0;
  transition: opacity 0.28s var(--ldc-ease);
  pointer-events: none;
}

/* Hamburger button + drawer styles — same range as desktop-nav hiding */
@media (max-width: 1200px) {
  /* Header sits above the drawer; logo + hamburger remain visible */
  .ldc-clean-header {
    position: sticky;
    top: 0;
    z-index: 110;
    /* backdrop-filter creates a containing block: fixed nav inside header would be
       clipped to ~header height (~80px). Drop blur here so drawer covers full viewport. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }

  /* Hamburger — visible & tappable */
  .ldc-clean-header__mobile-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    font-size: 22px;
    line-height: 1;
    position: relative;
    z-index: 115;
    transition: background 0.22s var(--ldc-ease),
                border-color 0.22s var(--ldc-ease),
                color 0.22s var(--ldc-ease);
  }
  .ldc-clean-header__mobile-btn:hover,
  .ldc-clean-header__mobile-btn[aria-expanded="true"] {
    background: var(--ldc-50);
    border-color: var(--ldc-200);
    color: var(--ldc-600);
  }

  /* Drawer: full-width overlay below the header, fades + slides down */
  .ldc-clean-header__nav {
    display: flex;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    width: 100%;
    /* explicit height: not only top+bottom — fixes clipping when fixed is tied to header CB */
    height: calc(100dvh - 76px);
    min-height: calc(100vh - 76px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 32px clamp(24px, 6vw, 56px) 48px;
    padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
    background: var(--ldc-bg);
    box-shadow: 0 18px 48px rgba(46, 12, 19, 0.10);
    z-index: 108;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.34s var(--ldc-ease),
                opacity 0.28s var(--ldc-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .ldc-clean-header__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer links — larger, stacked, with subtle dividers */
  .ldc-clean-header__nav a {
    width: 100%;
    padding: 22px 4px;
    border-top: 1px solid var(--ldc-line-soft);
    font-size: clamp(20px, 4vw, 24px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ldc-ink);
    transition: color 0.22s var(--ldc-ease),
                padding-left 0.22s var(--ldc-ease);
  }
  .ldc-clean-header__nav a:first-of-type {
    border-top: none;
  }
  .ldc-clean-header__nav a::after {
    display: none;
  }
  .ldc-clean-header__nav a:hover,
  .ldc-clean-header__nav a:focus-visible {
    color: var(--ldc-600);
    padding-left: 8px;
  }

  /* Show backdrop when drawer is open */
  .ldc-clean-nav-backdrop.is-visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* Lock page scroll behind drawer */
  body.ldc-clean-nav-open {
    overflow: hidden;
  }
}

/* Phone-only tweaks: smaller header, smaller logo, hide CTA button */
@media (max-width: 768px) {
  .ldc-clean-header__inner {
    min-height: 68px;
    gap: 16px;
  }

  /* Shrink logo so it never overflows narrow viewports (375, 390, 430) */
  .ldc-clean-header__logo {
    height: 38px;
    max-height: 38px;
    max-width: min(58vw, 220px);
    width: auto;
    object-fit: contain;
  }

  /* Hide "Začít projekt" CTA in mobile header (mobile-cta strip handles it lower) */
  .ldc-clean-header__actions .ldc-clean-btn--primary {
    display: none;
  }

  .ldc-clean-header__actions {
    gap: 0;
  }

  /* Drawer starts just below the smaller mobile header */
  .ldc-clean-header__nav {
    top: 68px;
    height: calc(100dvh - 68px);
    min-height: calc(100vh - 68px);
  }
}

/* ════════════════════════════════════════════════════
   PREMIUM ANIMATIONS — reveal on scroll, ken-burns,
   subtle header compaction, button arrow micro-motion.
   All animations are opt-in via JS class hooks and respect
   prefers-reduced-motion + scale down on small viewports.
   ════════════════════════════════════════════════════ */

/* ── 1. Reveal on scroll ─────────────────────────────
   JS adds .ldc-clean-reveal to candidate elements and
   .is-visible once they enter the viewport. Stagger is
   passed via inline style as --ldc-reveal-delay. */

.ldc-clean-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 1.15s var(--ldc-ease-out),
              transform 1.15s var(--ldc-ease-out);
  transition-delay: var(--ldc-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.ldc-clean-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Cards / cells inside scroll rails reveal slightly horizontally
   from where they sit — same easing, no horizontal layout shift */
.ldc-clean-reveal--soft {
  transform: translate3d(0, 8px, 0);
}

/* ── 2. Header — subtle visual state on scroll ───────
   We DON'T shrink the header height (avoids layout shift on sticky).
   Just refine shadow / background opacity for premium depth cue. */

.ldc-clean-header {
  transition: box-shadow 0.32s var(--ldc-ease),
              background-color 0.32s var(--ldc-ease),
              border-color 0.32s var(--ldc-ease);
}

.ldc-clean-header.is-scrolled {
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 6px 24px rgba(46, 12, 19, 0.06);
  border-bottom-color: var(--ldc-line);
}

/* ── 3. Hero — slow ken-burns + cleaner crossfade ──── */

@keyframes ldcKenBurns {
  0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-0.5%, -0.5%, 0); }
}

.ldc-clean-hero__image {
  animation: ldcKenBurns 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Smoother fade for hero content during slide change.
   Existing .is-changing rules in the hero block already handle
   eyebrow/title/sub; we just lengthen image opacity transition. */
.ldc-clean-hero__image {
  transition: opacity 0.6s var(--ldc-ease);
}

/* ── 4. Buttons & CTA links — gentle motion ────────── */

/* Add transform/box-shadow into the button transition surface.
   We keep the existing background/color/border transitions in the
   base rule; this rule augments them additively. */
.ldc-clean-btn {
  transition: background 0.26s var(--ldc-ease),
              color 0.26s var(--ldc-ease),
              border-color 0.26s var(--ldc-ease),
              transform 0.32s var(--ldc-ease-out),
              box-shadow 0.32s var(--ldc-ease-out);
}

.ldc-clean-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(46, 12, 19, 0.18);
}
.ldc-clean-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(46, 12, 19, 0.18);
}

.ldc-clean-btn--outline:hover,
.ldc-clean-btn--ghost:hover {
  transform: translateY(-1px);
}

/* Link CTA — arrow nudges out via letter-spacing + gap */
.ldc-clean-link-cta {
  transition: color 0.24s var(--ldc-ease),
              border-color 0.24s var(--ldc-ease),
              gap 0.24s var(--ldc-ease),
              letter-spacing 0.24s var(--ldc-ease);
}
.ldc-clean-link-cta:hover {
  gap: 10px;
  letter-spacing: 0.115em;
}

/* ── 5. Horizontal rails — smoother momentum scroll ── */

.ldc-clean-services-scroll,
.ldc-clean-news-scroll {
  scroll-behavior: smooth;
}

/* Scroll arrow buttons — already have hover; add a tiny
   spring on active so taps feel tactile */
.ldc-clean-scroll-btn:active {
  transform: translateY(0) scale(0.97);
}

/* ── 6. Reduced motion — disable everything decorative ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .ldc-clean-reveal {
    opacity: 1;
    transform: none;
  }

  .ldc-clean-hero__image {
    animation: none;
  }
}

/* ── 7. Mobile — shorter, lighter reveals + skip ken-burns ── */
@media (max-width: 768px) {
  .ldc-clean-reveal {
    transform: translate3d(0, 10px, 0);
    transition-duration: 0.85s;
  }

  /* ken-burns on the hero image disabled on phones to save GPU */
  .ldc-clean-hero__image {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════
   SUBPAGE EXTENSIONS — sluzby, detail, balicky, blog
   Namespace remains .ldc-clean-
   ════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   ACTIVE NAV ITEM (current page indicator)
   ──────────────────────────────────────────────────── */

.ldc-clean-header__nav a[aria-current="page"] {
  color: var(--ldc-600);
}

.ldc-clean-header__nav a[aria-current="page"]::after {
  right: 0;
  background: var(--ldc-600);
}

/* ────────────────────────────────────────────────────
   SUBPAGE HERO — dark full-width banner (no carousel)
   ──────────────────────────────────────────────────── */

.ldc-clean-subhero {
  background: var(--ldc-hero-panel);
  color: #fff;
  padding: clamp(72px, 10vw, 120px) 0 clamp(56px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}

.ldc-clean-subhero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: 0;
  transition: opacity 0.6s var(--ldc-ease);
}

.ldc-clean-subhero--image-strong .ldc-clean-subhero__bg {
  opacity: 0.38;
}

.ldc-clean-subhero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.ldc-clean-subhero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.38);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}

.ldc-clean-subhero__breadcrumb a {
  color: rgba(255,255,255,.38);
  transition: color 0.2s;
}

.ldc-clean-subhero__breadcrumb a:hover {
  color: rgba(255,255,255,.72);
}

.ldc-clean-subhero__breadcrumb-sep {
  color: rgba(255,255,255,.22);
  font-size: 10px;
}

.ldc-clean-subhero__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 20px;
}

.ldc-clean-subhero__title {
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.97;
  color: #fff;
  margin-bottom: 26px;
}

.ldc-clean-subhero__sub {
  font-size: 16px;
  line-height: 1.74;
  color: rgba(255,255,255,.72);
  max-width: 580px;
  margin-bottom: 40px;
}

.ldc-clean-subhero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ────────────────────────────────────────────────────
   SERVICES GRID — 3-column card grid (sluzby page)
   ──────────────────────────────────────────────────── */

.ldc-clean-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.ldc-clean-svc-grid-card {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.32s var(--ldc-ease),
              transform 0.32s var(--ldc-ease),
              border-color 0.32s var(--ldc-ease);
}

.ldc-clean-svc-grid-card:hover {
  box-shadow: var(--ldc-shadow-md);
  transform: translateY(-5px);
  border-color: var(--ldc-100);
}

.ldc-clean-svc-grid-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ldc-50);
}

.ldc-clean-svc-grid-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--ldc-ease);
}

.ldc-clean-svc-grid-card:hover .ldc-clean-svc-grid-card__image {
  transform: scale(1.04);
}

.ldc-clean-svc-grid-card__body {
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  border-top: 1px solid var(--ldc-line-soft);
}

.ldc-clean-svc-grid-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-svc-grid-card__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ldc-ink);
  line-height: 1.2;
  transition: color 0.22s var(--ldc-ease);
}

.ldc-clean-svc-grid-card:hover .ldc-clean-svc-grid-card__name {
  color: var(--ldc-600);
}

.ldc-clean-svc-grid-card__text {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.68;
  flex: 1;
}

.ldc-clean-svc-grid-card__cta {
  margin-top: 8px;
}

/* ────────────────────────────────────────────────────
   PROCESS STEPS — vertical numbered (detail pages)
   ──────────────────────────────────────────────────── */

.ldc-clean-vprocess {
  margin-top: 52px;
  border-top: 1px solid var(--ldc-line);
}

.ldc-clean-vprocess-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--ldc-line);
}

.ldc-clean-vprocess-step__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ldc-ink-xs);
  padding-top: 4px;
}

.ldc-clean-vprocess-step__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ldc-ink);
  margin-bottom: 10px;
  line-height: 1.22;
}

.ldc-clean-vprocess-step__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ldc-ink-mid);
  max-width: 640px;
}

/* ────────────────────────────────────────────────────
   SERVICE INCLUDES — 2-col checklist
   ──────────────────────────────────────────────────── */

.ldc-clean-includes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--ldc-line);
  margin-top: 40px;
}

.ldc-clean-includes__item {
  padding: 18px 24px;
  border-bottom: 1px solid var(--ldc-line-soft);
  border-right: 1px solid var(--ldc-line-soft);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ldc-clean-includes__item:nth-child(even) {
  border-right: none;
}

.ldc-clean-includes__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--ldc-50);
  border: 1px solid var(--ldc-200);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ldc-600);
  font-weight: 700;
  margin-top: 1px;
}

.ldc-clean-includes__text {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────
   AUDIENCE / WHO IT'S FOR — tag chips
   ──────────────────────────────────────────────────── */

.ldc-clean-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.ldc-clean-audience__tag {
  padding: 10px 20px;
  border: 1px solid var(--ldc-line);
  background: var(--ldc-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--ldc-ink-mid);
  letter-spacing: 0.01em;
}

/* ────────────────────────────────────────────────────
   DETAIL BODY — 2-col main + sidebar layout
   ──────────────────────────────────────────────────── */

.ldc-clean-detail-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

.ldc-clean-sidebar-box {
  background: var(--ldc-bg-warm);
  border: 1px solid var(--ldc-line);
  padding: 36px 32px;
  margin-bottom: 24px;
}

.ldc-clean-sidebar-box__title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  margin-bottom: 20px;
}

.ldc-clean-sidebar-box__list {
  display: grid;
  gap: 12px;
}

.ldc-clean-sidebar-box__list li {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  display: block;
  line-height: 1.5;
  padding: 4px 0;
}

.ldc-clean-sidebar-box__list li::before { content: none; }

.ldc-clean-sidebar-box--sticky {
  position: sticky;
  top: 108px;
}

.ldc-clean-sidebar-box--cta {
  background: var(--ldc-hero-panel);
  border-color: transparent;
  color: #fff;
}

.ldc-clean-sidebar-box--cta .ldc-clean-sidebar-box__title {
  color: rgba(255,255,255,.45);
}

.ldc-clean-sidebar-box--cta p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
  margin-bottom: 24px;
}

/* ────────────────────────────────────────────────────
   FEATURES COMPARISON TABLE (balicky page)
   ──────────────────────────────────────────────────── */

.ldc-clean-features {
  margin-top: 72px;
  border: 1px solid var(--ldc-line);
  overflow: hidden;
}

.ldc-clean-features__head {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  background: var(--ldc-bg-warm);
  border-bottom: 2px solid var(--ldc-line);
}

.ldc-clean-features__head-cell {
  padding: 20px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  border-right: 1px solid var(--ldc-line-soft);
}

.ldc-clean-features__head-cell:last-child {
  border-right: none;
}

.ldc-clean-features__head-cell--featured {
  background: var(--ldc-50);
  color: var(--ldc-600);
}

.ldc-clean-features__group {
  background: var(--ldc-bg-warm);
  border-bottom: 1px solid var(--ldc-line);
}

.ldc-clean-features__group-title {
  grid-column: 1 / -1;
  padding: 12px 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-features__row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-clean-features__row:last-child {
  border-bottom: none;
}

.ldc-clean-features__cell {
  padding: 15px 24px;
  font-size: 14px;
  color: var(--ldc-ink-mid);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--ldc-line-soft);
}

.ldc-clean-features__cell:last-child {
  border-right: none;
}

.ldc-clean-features__cell--label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ldc-ink);
}

.ldc-clean-features__cell--featured {
  background: rgba(248, 238, 240, 0.5);
}

.ldc-clean-features__check {
  color: var(--ldc-600);
  font-weight: 700;
  font-size: 14px;
}

.ldc-clean-features__dash {
  color: var(--ldc-ink-xs);
}

/* ────────────────────────────────────────────────────
   FAQ — native <details> accordion
   ──────────────────────────────────────────────────── */

.ldc-clean-faq {
  margin-top: 52px;
  border-top: 1px solid var(--ldc-line);
}

details.ldc-clean-faq-item {
  border-bottom: 1px solid var(--ldc-line);
}

summary.ldc-clean-faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ldc-ink);
  cursor: pointer;
  letter-spacing: -0.012em;
  list-style: none;
  user-select: none;
}

summary.ldc-clean-faq-item__question::-webkit-details-marker {
  display: none;
}

.ldc-clean-faq-item__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--ldc-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 300;
  color: var(--ldc-ink-soft);
  transition: transform 0.28s var(--ldc-ease),
              background 0.22s var(--ldc-ease),
              color 0.22s var(--ldc-ease),
              border-color 0.22s var(--ldc-ease);
  line-height: 1;
}

details.ldc-clean-faq-item[open] summary .ldc-clean-faq-item__icon {
  transform: rotate(45deg);
  background: var(--ldc-50);
  color: var(--ldc-600);
  border-color: var(--ldc-200);
}

.ldc-clean-faq-item__answer {
  padding: 0 0 28px;
  font-size: 15px;
  line-height: 1.74;
  color: var(--ldc-ink-mid);
  max-width: 760px;
}

/* ────────────────────────────────────────────────────
   BLOG CATEGORY TAGS
   ──────────────────────────────────────────────────── */

.ldc-clean-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 52px;
}

.ldc-clean-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--ldc-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  background: var(--ldc-bg);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  text-decoration: none;
}

.ldc-clean-tag:hover {
  color: var(--ldc-600);
  border-color: var(--ldc-200);
  background: var(--ldc-50);
}

.ldc-clean-tag--active {
  color: var(--ldc-600);
  border-color: var(--ldc-600);
  background: var(--ldc-50);
}

/* ────────────────────────────────────────────────────
   BLOG FEATURED ARTICLE — large editorial card
   ──────────────────────────────────────────────────── */

.ldc-clean-blog-featured {
  display: grid;
  grid-template-columns: 1fr 420px;
  border: 1px solid var(--ldc-line);
  overflow: hidden;
  margin-bottom: 52px;
  cursor: pointer;
  transition: box-shadow 0.32s var(--ldc-ease),
              transform 0.32s var(--ldc-ease);
}

.ldc-clean-blog-featured:hover {
  box-shadow: var(--ldc-shadow-md);
  transform: translateY(-4px);
}

.ldc-clean-blog-featured__image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--ldc-50);
  min-height: 400px;
}

.ldc-clean-blog-featured__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--ldc-ease);
}

.ldc-clean-blog-featured:hover .ldc-clean-blog-featured__image {
  transform: scale(1.03);
}

.ldc-clean-blog-featured__body {
  padding: 48px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ldc-bg-warm);
  border-left: 1px solid var(--ldc-line);
}

.ldc-clean-blog-featured__badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--ldc-600);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
  align-self: flex-start;
}

.ldc-clean-blog-featured__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  margin-bottom: 12px;
  display: block;
}

.ldc-clean-blog-featured__title {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ldc-ink);
  line-height: 1.16;
  margin-bottom: 14px;
  transition: color 0.22s;
}

.ldc-clean-blog-featured:hover .ldc-clean-blog-featured__title {
  color: var(--ldc-600);
}

.ldc-clean-blog-featured__meta {
  font-size: 12px;
  color: var(--ldc-ink-soft);
  margin-bottom: 18px;
}

.ldc-clean-blog-featured__text {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.72;
  margin-bottom: 30px;
}

/* ────────────────────────────────────────────────────
   BLOG GRID — article listing
   ──────────────────────────────────────────────────── */

.ldc-clean-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ldc-clean-blog-card {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.32s var(--ldc-ease),
              transform 0.32s var(--ldc-ease),
              border-color 0.32s var(--ldc-ease);
}

.ldc-clean-blog-card:hover {
  box-shadow: var(--ldc-shadow);
  transform: translateY(-5px);
  border-color: var(--ldc-100);
}

.ldc-clean-blog-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ldc-50);
}

.ldc-clean-blog-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--ldc-ease);
}

.ldc-clean-blog-card:hover .ldc-clean-blog-card__image {
  transform: scale(1.04);
}

.ldc-clean-blog-card__date {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 7px 14px 8px;
  background: var(--ldc-bg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ldc-ink);
  z-index: 2;
}

.ldc-clean-blog-card__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ldc-clean-blog-card__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-blog-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.28;
  color: var(--ldc-ink);
  transition: color 0.22s var(--ldc-ease);
}

.ldc-clean-blog-card:hover .ldc-clean-blog-card__title {
  color: var(--ldc-600);
}

.ldc-clean-blog-card__text {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.65;
  flex: 1;
}

.ldc-clean-blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldc-600);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.24s var(--ldc-ease),
              letter-spacing 0.24s var(--ldc-ease);
  align-self: flex-start;
}

.ldc-clean-blog-card:hover .ldc-clean-blog-card__link {
  border-bottom-color: var(--ldc-600);
  letter-spacing: 0.16em;
}

/* ────────────────────────────────────────────────────
   ARTICLE LAYOUT — blog detail (content + sidebar)
   ──────────────────────────────────────────────────── */

.ldc-clean-article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(52px, 7vw, 96px);
  align-items: start;
}

.ldc-clean-article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-clean-article__meta-date {
  font-size: 13px;
  color: var(--ldc-ink-soft);
}

.ldc-clean-article__meta-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--ldc-line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-article__meta-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  margin-left: auto;
}

.ldc-clean-article__meta-sep {
  color: var(--ldc-line);
}

.ldc-clean-article__content {
  font-size: 16px;
  line-height: 1.82;
  color: var(--ldc-ink-mid);
}

.ldc-clean-article__content p {
  margin-bottom: 28px;
}

.ldc-clean-article__content h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ldc-ink);
  margin: 52px 0 20px;
  line-height: 1.15;
}

.ldc-clean-article__content h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ldc-ink);
  margin: 38px 0 14px;
  line-height: 1.22;
}

.ldc-clean-article__content ul {
  list-style: none;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}

.ldc-clean-article__content ul li {
  padding-left: 0;
  position: relative;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ldc-ink-mid);
}

.ldc-clean-article__content ul li::before { content: none; }

/* ────────────────────────────────────────────────────
   QUOTE & CALLOUT BLOCKS
   ──────────────────────────────────────────────────── */

.ldc-clean-quote-block {
  border-left: 3px solid var(--ldc-600);
  background: var(--ldc-50);
  padding: 30px 36px;
  margin: 40px 0;
}

.ldc-clean-quote-block__text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.56;
  color: var(--ldc-ink);
  letter-spacing: -0.012em;
  font-style: italic;
}

.ldc-clean-quote-block__source {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-callout {
  border: 1px solid var(--ldc-line);
  background: var(--ldc-bg-warm);
  padding: 28px 32px;
  margin: 36px 0;
}

.ldc-clean-callout__title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldc-600);
  margin-bottom: 12px;
}

.ldc-clean-callout__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ldc-ink-mid);
}

/* ────────────────────────────────────────────────────
   RELATED CONTENT GRID
   ──────────────────────────────────────────────────── */

.ldc-clean-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

/* ────────────────────────────────────────────────────
   PRICING — extended for balicky page
   ──────────────────────────────────────────────────── */

.ldc-clean-pricing-card__sub-list {
  display: grid;
  gap: 8px;
  margin-top: -16px;
  margin-bottom: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--ldc-line-soft);
}

.ldc-clean-pricing-card__sub-list li {
  font-size: 12px;
  color: var(--ldc-ink-xs);
  display: block;
  line-height: 1.4;
}

.ldc-clean-pricing-card__sub-list li::before { content: none; }

/* ────────────────────────────────────────────────────
   RESPONSIVE — subpage extensions
   ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ldc-clean-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldc-clean-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldc-clean-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldc-clean-blog-featured {
    grid-template-columns: 1fr;
  }

  .ldc-clean-blog-featured__image-wrap {
    aspect-ratio: 16 / 9;
    min-height: 300px;
  }

  .ldc-clean-blog-featured__body {
    border-left: none;
    border-top: 1px solid var(--ldc-line);
  }

  .ldc-clean-detail-body {
    grid-template-columns: 1fr;
  }

  .ldc-clean-article-layout {
    grid-template-columns: 1fr;
  }

  .ldc-clean-sidebar-box--sticky {
    position: static;
  }
}

@media (max-width: 768px) {
  .ldc-clean-svc-grid {
    grid-template-columns: 1fr;
  }

  .ldc-clean-blog-grid {
    grid-template-columns: 1fr;
  }

  .ldc-clean-related-grid {
    grid-template-columns: 1fr;
  }

  .ldc-clean-includes {
    grid-template-columns: 1fr;
  }

  .ldc-clean-includes__item:nth-child(even) {
    border-right: 1px solid var(--ldc-line-soft);
  }

  .ldc-clean-features {
    overflow-x: auto;
  }

  .ldc-clean-vprocess-step {
    grid-template-columns: 48px 1fr;
    gap: 0 18px;
  }

  .ldc-clean-blog-featured__body {
    padding: 30px 24px;
  }

  .ldc-clean-article__meta-brand {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .ldc-clean-subhero {
    padding: clamp(52px, 8vw, 72px) 0 clamp(40px, 6vw, 56px);
  }

  .ldc-clean-blog-featured__image-wrap {
    min-height: 220px;
  }

  .ldc-clean-quote-block {
    padding: 22px 24px;
  }

  .ldc-clean-callout {
    padding: 22px 24px;
  }
}

/* ════════════════════════════════════════════════════
   PARTNERI PAGE — partner type cards grid
   ════════════════════════════════════════════════════ */

.ldc-clean-partner-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.ldc-clean-partner-card {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: box-shadow 0.32s var(--ldc-ease),
              transform 0.32s var(--ldc-ease),
              border-color 0.32s var(--ldc-ease);
}

.ldc-clean-partner-card:hover {
  box-shadow: var(--ldc-shadow-md);
  transform: translateY(-5px);
  border-color: var(--ldc-100);
}

.ldc-clean-partner-card--muted {
  background: var(--ldc-bg-warm);
  border-style: dashed;
}

.ldc-clean-partner-card__icon {
  width: 52px;
  height: 52px;
  background: var(--ldc-50);
  border: 1px solid var(--ldc-line);
  display: grid;
  place-items: center;
  color: var(--ldc-600);
  flex-shrink: 0;
}

.ldc-clean-partner-card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ldc-ink);
  line-height: 1.2;
}

.ldc-clean-partner-card__text {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.7;
  flex: 1;
}

/* ════════════════════════════════════════════════════
   KONTAKT PAGE — contact layout & form
   ════════════════════════════════════════════════════ */

.ldc-clean-contact-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(48px, 6vw, 80px);
  align-items: start;
}

.ldc-clean-contact-info {
  position: sticky;
  top: 108px;
}

.ldc-clean-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-clean-contact-item:first-of-type {
  border-top: 1px solid var(--ldc-line-soft);
  margin-top: 32px;
}

.ldc-clean-contact-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--ldc-50);
  border: 1px solid var(--ldc-line);
  display: grid;
  place-items: center;
  color: var(--ldc-600);
}

.ldc-clean-contact-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ldc-clean-contact-item__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldc-ink-xs);
}

.ldc-clean-contact-item__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ldc-ink);
  letter-spacing: -0.012em;
  transition: color 0.2s;
}

a.ldc-clean-contact-item__value:hover {
  color: var(--ldc-600);
}

.ldc-clean-contact-item__note {
  font-size: 12px;
  color: var(--ldc-ink-soft);
}

.ldc-clean-contact-response {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--ldc-ink-mid);
}

.ldc-clean-contact-response__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf82;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(76,175,130,.18);
}

/* Contact form */

.ldc-clean-contact-form-wrap {
  background: var(--ldc-bg-warm);
  border: 1px solid var(--ldc-line);
  padding: clamp(32px, 4vw, 52px);
}

.ldc-clean-contact-form-header {
  margin-bottom: 0;
}

.ldc-clean-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ldc-clean-form-row {
  display: grid;
  gap: 20px;
}

.ldc-clean-form-row--2col {
  grid-template-columns: 1fr 1fr;
}

.ldc-clean-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldc-clean-form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-clean-form-label span {
  color: var(--ldc-600);
  margin-left: 2px;
}

.ldc-clean-form-input {
  font-family: var(--ldc-font);
  font-size: 15px;
  color: var(--ldc-ink);
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 13px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.22s var(--ldc-ease), box-shadow 0.22s var(--ldc-ease);
  appearance: none;
  -webkit-appearance: none;
}

.ldc-clean-form-input::placeholder {
  color: var(--ldc-ink-xs);
}

.ldc-clean-form-input:focus {
  border-color: var(--ldc-600);
  box-shadow: 0 0 0 3px rgba(125,46,62,.10);
}

.ldc-clean-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A84D5F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.ldc-clean-form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.ldc-clean-form-consent {
  margin-top: 4px;
}

.ldc-clean-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.6;
  cursor: pointer;
}

.ldc-clean-form-checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ldc-600);
  cursor: pointer;
}

.ldc-clean-form-checkbox-label a {
  color: var(--ldc-600);
  text-decoration: underline;
}

.ldc-clean-form-submit {
  align-self: flex-start;
  margin-top: 8px;
}

/* Contact paths (začít projekt / pro partnery) */

.ldc-clean-contact-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 52px;
}

.ldc-clean-contact-path {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.ldc-clean-contact-path__icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  display: grid;
  place-items: center;
  color: var(--ldc-600);
}

.ldc-clean-contact-path__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ldc-ink);
  margin-bottom: 10px;
}

.ldc-clean-contact-path__text {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.7;
}

/* Compact subhero variant */
.ldc-clean-subhero--compact {
  padding: clamp(60px, 8vw, 96px) 0 clamp(44px, 6vw, 72px);
}

/* ════════════════════════════════════════════════════
   GDPR / LEGAL PAGE — text layout with sidebar nav
   ════════════════════════════════════════════════════ */

.ldc-clean-subhero--minimal {
  background: var(--ldc-hero-panel);
  padding: clamp(52px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
}

.ldc-clean-legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* Sidebar navigation */

.ldc-clean-legal-nav {
  position: sticky;
  top: 108px;
  background: var(--ldc-bg-warm);
  border: 1px solid var(--ldc-line);
  padding: 28px 24px 24px;
}

.ldc-clean-legal-nav__title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ldc-ink-xs);
  margin-bottom: 18px;
}

.ldc-clean-legal-nav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: none;
  list-style: none;
}

.ldc-clean-legal-nav__list a {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  padding: 7px 10px;
  display: block;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  line-height: 1.4;
}

.ldc-clean-legal-nav__list a:hover {
  color: var(--ldc-600);
  background: var(--ldc-50);
  border-left-color: var(--ldc-200);
}

.ldc-clean-legal-nav__list a[aria-current="true"] {
  color: var(--ldc-600);
  border-left-color: var(--ldc-600);
  background: var(--ldc-50);
  font-weight: 600;
}

.ldc-clean-legal-nav__cta {
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ldc-line-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ldc-600);
  transition: color 0.2s;
}

.ldc-clean-legal-nav__cta:hover {
  color: var(--ldc-800);
}

/* Legal body text */

.ldc-clean-legal-body {
  min-width: 0;
}

.ldc-clean-legal-intro {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ldc-ink-mid);
  padding: 0 0 40px;
  border-bottom: 1px solid var(--ldc-line-soft);
  margin-bottom: 48px;
}

.ldc-clean-legal-section {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--ldc-line-soft);
  scroll-margin-top: 120px;
}

.ldc-clean-legal-section:last-child {
  border-bottom: none;
}

.ldc-clean-legal-h2 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ldc-ink);
  margin-bottom: 20px;
  line-height: 1.16;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-clean-legal-h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ldc-ink);
  margin: 28px 0 12px;
  letter-spacing: -0.012em;
}

.ldc-clean-legal-section p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--ldc-ink-mid);
  margin-bottom: 16px;
}

.ldc-clean-legal-section p:last-child {
  margin-bottom: 0;
}

.ldc-clean-legal-section p a {
  color: var(--ldc-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ldc-clean-legal-section p a:hover {
  color: var(--ldc-800);
}

.ldc-clean-legal-list {
  list-style: none;
  margin: 14px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ldc-clean-legal-list li {
  font-size: 15px;
  line-height: 1.68;
  color: var(--ldc-ink-mid);
  padding-left: 0;
  position: relative;
}

.ldc-clean-legal-list li::before { content: none; }

.ldc-clean-legal-box {
  background: var(--ldc-bg-warm);
  border: 1px solid var(--ldc-line);
  border-left: 3px solid var(--ldc-600);
  padding: 20px 24px;
  margin: 20px 0;
}

.ldc-clean-legal-box p {
  margin-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — new pages
   ════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ldc-clean-partner-types {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldc-clean-contact-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ldc-clean-contact-info {
    position: static;
  }

  .ldc-clean-legal-layout {
    grid-template-columns: 1fr;
  }

  .ldc-clean-legal-nav {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ldc-clean-legal-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .ldc-clean-legal-nav__list a {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
  }

  .ldc-clean-legal-nav__list a:hover,
  .ldc-clean-legal-nav__list a[aria-current="true"] {
    border-left: none;
    border-bottom-color: var(--ldc-600);
  }
}

@media (max-width: 768px) {
  .ldc-clean-partner-types {
    grid-template-columns: 1fr;
  }

  .ldc-clean-partner-card {
    padding: 28px 24px 32px;
  }

  .ldc-clean-contact-paths {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ldc-clean-form-row--2col {
    grid-template-columns: 1fr;
  }

  .ldc-clean-contact-form-wrap {
    padding: 28px 24px;
  }
}

@media (max-width: 640px) {
  .ldc-clean-contact-path {
    flex-direction: column;
    gap: 16px;
  }

  .ldc-clean-legal-layout {
    gap: 28px;
  }
}

/* ════════════════════════════════════════════════════
   ONBOARDING — ldc-start-project.html
   Namespace: .ldc-ob-
   ════════════════════════════════════════════════════ */

/* Body override — warm subtle background */
.ldc-ob-body {
  background: var(--ldc-bg-warm);
}

/* ────────────────────────────────────────────────────
   ONBOARDING HEADER
   ──────────────────────────────────────────────────── */

.ldc-ob-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ldc-line-soft);
  transition: box-shadow 0.3s var(--ldc-ease), border-color 0.3s var(--ldc-ease);
}

.ldc-ob-header.is-scrolled {
  box-shadow: var(--ldc-shadow);
  border-color: var(--ldc-line);
}

.ldc-ob-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

/* Center progress strip */
.ldc-ob-header__center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
}

.ldc-ob-header__step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  white-space: nowrap;
}

.ldc-ob-header__step-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ldc-ink-xs);
  white-space: nowrap;
}

.ldc-ob-progress-track {
  flex: 1;
  height: 4px;
  background: var(--ldc-line);
  overflow: hidden;
}

.ldc-ob-progress-track__fill {
  height: 100%;
  background: var(--ldc-600);
  transition: width 0.5s var(--ldc-ease);
}

/* Right actions */
.ldc-ob-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ldc-ob-save-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ldc-ink-soft);
  transition: color 0.2s;
  white-space: nowrap;
}

.ldc-ob-save-link:hover {
  color: var(--ldc-ink);
}

.ldc-ob-save-link svg {
  flex-shrink: 0;
}

.ldc-ob-back-btn {
  height: 38px;
  font-size: 11px;
  padding: 0 16px;
}

.ldc-ob-avatar {
  width: 38px;
  height: 38px;
  background: var(--ldc-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.ldc-ob-avatar:hover {
  background: var(--ldc-800);
}

.ldc-ob-avatar span {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
}

/* ────────────────────────────────────────────────────
   ONBOARDING HERO — two column
   ──────────────────────────────────────────────────── */

.ldc-ob-hero {
  padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 52px);
}

.ldc-ob-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
}

/* Left copy card */
.ldc-ob-hero__copy {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: clamp(32px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ldc-ob-hero__title {
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.97;
  color: var(--ldc-ink);
  margin: 16px 0 20px;
}

.ldc-ob-hero__lead {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ldc-ink-mid);
  max-width: 540px;
  margin-bottom: 36px;
}

.ldc-ob-hero__points {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ldc-line-soft);
  margin-top: auto;
}

.ldc-ob-hero__point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-ob-hero__point-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--ldc-50);
  border: 1px solid var(--ldc-line);
  display: grid;
  place-items: center;
  color: var(--ldc-600);
}

.ldc-ob-hero__point strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ldc-ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.ldc-ob-hero__point span {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.55;
}

/* Right visual */
.ldc-ob-hero__visual {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  background: var(--ldc-hero-panel);
  display: flex;
  align-items: flex-end;
}

.ldc-ob-hero__visual-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transition: opacity 0.6s var(--ldc-ease);
}

.ldc-ob-hero__visual:hover .ldc-ob-hero__visual-bg {
  opacity: 0.30;
}

.ldc-ob-hero__visual-overlay {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 44px);
  width: 100%;
  color: #fff;
}

.ldc-ob-hero__visual-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 20px;
}

.ldc-ob-hero__visual-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: #fff;
  margin-bottom: 14px;
}

.ldc-ob-hero__visual-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.68);
  max-width: 380px;
  margin-bottom: 28px;
}

.ldc-ob-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ldc-ob-hero__stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
}

.ldc-ob-hero__stat strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1;
}

.ldc-ob-hero__stat span {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ────────────────────────────────────────────────────
   WIZARD LAYOUT
   ──────────────────────────────────────────────────── */

.ldc-ob-wizard {
  padding: 0 0 clamp(64px, 8vw, 96px);
}

.ldc-ob-wizard__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}

/* ────────────────────────────────────────────────────
   SIDEBAR
   ──────────────────────────────────────────────────── */

.ldc-ob-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ldc-ob-sidebar__card {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 24px 22px;
}

.ldc-ob-sidebar__card-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  margin-bottom: 8px;
}

.ldc-ob-sidebar__card-sub {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Steps nav */
.ldc-ob-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldc-ob-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ldc-line-soft);
  background: var(--ldc-bg-warm);
  transition: border-color 0.2s, background 0.2s;
}

.ldc-ob-step--current {
  background: var(--ldc-50);
  border-color: var(--ldc-200);
}

.ldc-ob-step--done {
  background: #eef6f1;
  border-color: #b8d9c5;
}

.ldc-ob-step__num {
  width: 40px;
  height: 40px;
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ldc-ink-soft);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ldc-ob-step--current .ldc-ob-step__num {
  background: var(--ldc-600);
  border-color: var(--ldc-600);
  color: #fff;
}

.ldc-ob-step--done .ldc-ob-step__num {
  background: #4caf82;
  border-color: #4caf82;
  color: #fff;
}

.ldc-ob-step__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ldc-ink);
  margin-bottom: 3px;
  letter-spacing: -0.008em;
}

.ldc-ob-step--pending .ldc-ob-step__title {
  color: var(--ldc-ink-soft);
}

.ldc-ob-step__sub {
  display: block;
  font-size: 11px;
  color: var(--ldc-ink-xs);
  line-height: 1.4;
}

/* Summary sidebar */
.ldc-ob-sidebar__summary {
  background: var(--ldc-bg-warm);
}

.ldc-ob-summary-empty {
  font-size: 12px;
  color: var(--ldc-ink-xs);
  line-height: 1.55;
  padding: 8px 0;
}

.ldc-ob-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-ob-summary-row:last-child {
  border-bottom: none;
}

.ldc-ob-summary-row__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldc-ink-xs);
  flex-shrink: 0;
}

.ldc-ob-summary-row__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ldc-ink);
  text-align: right;
  letter-spacing: -0.01em;
}

.ldc-ob-summary-row--empty .ldc-ob-summary-row__value {
  color: var(--ldc-ink-xs);
  font-weight: 400;
}

/* Trust list */
.ldc-ob-trust-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ldc-ob-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.5;
}

.ldc-ob-trust-item svg {
  flex-shrink: 0;
  color: var(--ldc-600);
  margin-top: 2px;
}

/* ────────────────────────────────────────────────────
   MAIN PANEL
   ──────────────────────────────────────────────────── */

.ldc-ob-panel {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
}

.ldc-ob-panel__head {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px) clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-ob-panel__head-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ldc-ob-panel__head-step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
  white-space: nowrap;
}

.ldc-ob-panel__head-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--ldc-600);
  white-space: nowrap;
}

.ldc-ob-progress-pill {
  flex: 1;
  max-width: 160px;
  height: 5px;
  background: var(--ldc-line);
  overflow: hidden;
}

.ldc-ob-progress-pill__fill {
  height: 100%;
  background: var(--ldc-600);
  transition: width 0.5s var(--ldc-ease);
}

.ldc-ob-panel__title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.033em;
  line-height: 1.08;
  color: var(--ldc-ink);
  margin-bottom: 10px;
}

.ldc-ob-panel__sub {
  font-size: 14px;
  color: var(--ldc-ink-mid);
  line-height: 1.68;
  max-width: 680px;
}

.ldc-ob-panel__body {
  padding: clamp(24px, 3.5vw, 44px);
}

/* ────────────────────────────────────────────────────
   ONBOARDING FORM
   ──────────────────────────────────────────────────── */

.ldc-ob-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ldc-ob-form__row {
  display: grid;
  gap: 20px;
  margin-bottom: 0;
}

.ldc-ob-form__row--2col {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-ob-form__section {
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-ob-form__section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.ldc-ob-form__section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ldc-ink);
  margin-bottom: 6px;
  line-height: 1.2;
}

.ldc-ob-form__section-sub {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  margin-bottom: 24px;
  line-height: 1.55;
}

.ldc-ob-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldc-ob-form__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-ob-form__required {
  color: var(--ldc-600);
  margin-left: 2px;
}

.ldc-ob-form__input {
  font-family: var(--ldc-font);
  font-size: 15px;
  color: var(--ldc-ink);
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.22s var(--ldc-ease), box-shadow 0.22s var(--ldc-ease);
  appearance: none;
  -webkit-appearance: none;
}

.ldc-ob-form__input::placeholder {
  color: var(--ldc-ink-xs);
}

.ldc-ob-form__input:focus {
  border-color: var(--ldc-600);
  box-shadow: 0 0 0 3px rgba(125,46,62,.10);
}

.ldc-ob-form__select-wrap {
  position: relative;
}

.ldc-ob-form__select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A84D5F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  pointer-events: none;
}

.ldc-ob-form__select {
  padding-right: 42px;
  cursor: pointer;
}

.ldc-ob-form__textarea {
  resize: vertical;
  min-height: 150px;
  padding: 14px 16px;
  line-height: 1.6;
}

.ldc-ob-form__hint {
  font-size: 12px;
  color: var(--ldc-ink-xs);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────
   CHIP CARDS — rozsah podpory
   ──────────────────────────────────────────────────── */

.ldc-ob-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ldc-ob-chip {
  cursor: pointer;
  display: block;
}

.ldc-ob-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ldc-ob-chip__inner {
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.22s var(--ldc-ease),
              background 0.22s var(--ldc-ease),
              box-shadow 0.22s var(--ldc-ease);
  position: relative;
}

.ldc-ob-chip:hover .ldc-ob-chip__inner {
  border-color: var(--ldc-200);
  background: var(--ldc-50);
}

.ldc-ob-chip--selected .ldc-ob-chip__inner {
  border-color: var(--ldc-600);
  background: var(--ldc-50);
  box-shadow: 0 0 0 1px var(--ldc-600);
}

.ldc-ob-chip__icon {
  color: var(--ldc-ink-soft);
  margin-bottom: 2px;
  transition: color 0.2s;
}

.ldc-ob-chip--selected .ldc-ob-chip__icon {
  color: var(--ldc-600);
}

.ldc-ob-chip__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ldc-ink);
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.ldc-ob-chip__text {
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.55;
}

.ldc-ob-chip__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ldc-600);
  color: #fff;
  padding: 3px 8px;
  display: none;
}

.ldc-ob-chip--selected .ldc-ob-chip__badge {
  display: block;
}

/* ────────────────────────────────────────────────────
   BUDGET OPTIONS — pill row
   ──────────────────────────────────────────────────── */

.ldc-ob-budget__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.ldc-ob-budget__opt {
  cursor: pointer;
}

.ldc-ob-budget__opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ldc-ob-budget__opt-label {
  display: block;
  padding: 11px 22px;
  border: 1px solid var(--ldc-line);
  background: var(--ldc-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--ldc-ink-mid);
  letter-spacing: 0.01em;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.ldc-ob-budget__opt:hover .ldc-ob-budget__opt-label {
  border-color: var(--ldc-200);
  background: var(--ldc-50);
  color: var(--ldc-ink);
}

.ldc-ob-budget__opt--selected .ldc-ob-budget__opt-label {
  border-color: var(--ldc-600);
  background: var(--ldc-50);
  color: var(--ldc-600);
  box-shadow: 0 0 0 1px var(--ldc-600);
}

/* ────────────────────────────────────────────────────
   INLINE SUMMARY — dark strip at bottom of form
   ──────────────────────────────────────────────────── */

.ldc-ob-inline-summary {
  background: var(--ldc-hero-panel);
  padding: 24px 28px;
  margin-top: 40px;
}

.ldc-ob-inline-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.ldc-ob-inline-summary__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.ldc-ob-inline-summary__note {
  font-size: 11px;
  color: rgba(255,255,255,.28);
  font-style: italic;
}

.ldc-ob-inline-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ldc-ob-summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  letter-spacing: 0.01em;
  transition: background 0.2s;
}

.ldc-ob-summary-chip--empty {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.30);
}

/* ────────────────────────────────────────────────────
   FORM ACTIONS
   ──────────────────────────────────────────────────── */

.ldc-ob-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 36px;
  border-top: 1px solid var(--ldc-line-soft);
  margin-top: 40px;
}

.ldc-ob-form__actions-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ldc-ob-save-link--inline {
  font-size: 12px;
  font-weight: 600;
  color: var(--ldc-ink-soft);
  letter-spacing: 0.06em;
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ldc-line);
}

.ldc-ob-save-link--inline:hover {
  color: var(--ldc-ink);
  text-decoration-color: var(--ldc-ink-soft);
}

.ldc-ob-btn-continue {
  height: 50px;
  padding: 0 32px;
  font-size: 12px;
  gap: 10px;
}

/* ────────────────────────────────────────────────────
   ONBOARDING FOOTER
   ──────────────────────────────────────────────────── */

.ldc-ob-footer {
  border-top: 1px solid var(--ldc-line-soft);
  background: var(--ldc-bg);
  padding: 24px 0;
}

.ldc-ob-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ldc-ob-footer__copy {
  font-size: 12px;
  color: var(--ldc-ink-xs);
}

.ldc-ob-footer__links {
  display: flex;
  gap: 20px;
}

.ldc-ob-footer__links a {
  font-size: 12px;
  color: var(--ldc-ink-soft);
  transition: color 0.2s;
}

.ldc-ob-footer__links a:hover {
  color: var(--ldc-ink);
}

/* ────────────────────────────────────────────────────
   RESPONSIVE — onboarding
   ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .ldc-ob-wizard__grid {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 900px) {
  .ldc-ob-hero__grid {
    grid-template-columns: 1fr;
  }

  .ldc-ob-hero__visual {
    min-height: 300px;
  }

  .ldc-ob-wizard__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ldc-ob-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ldc-ob-sidebar__card:last-child {
    grid-column: 1 / -1;
  }

  .ldc-ob-header__center {
    display: none;
  }
}

@media (max-width: 768px) {
  .ldc-ob-chips {
    grid-template-columns: 1fr;
  }

  .ldc-ob-form__row--2col {
    grid-template-columns: 1fr;
  }

  .ldc-ob-sidebar {
    grid-template-columns: 1fr;
  }

  .ldc-ob-header__actions {
    gap: 8px;
  }

  .ldc-ob-save-link {
    display: none;
  }

  .ldc-ob-panel__head,
  .ldc-ob-panel__body {
    padding: 24px 20px;
  }

  .ldc-ob-form__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ldc-ob-form__actions-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ldc-ob-btn-continue {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .ldc-ob-hero__copy {
    padding: 24px 20px;
  }

  .ldc-ob-budget__options {
    gap: 8px;
  }

  .ldc-ob-budget__opt-label {
    padding: 9px 16px;
    font-size: 12px;
  }

  .ldc-ob-inline-summary {
    padding: 18px 20px;
  }
}

/* ────────────────────────────────────────────────────
   ONBOARDING — multi-step additions
   ──────────────────────────────────────────────────── */

/* Step pane visibility */
.ldc-ob-step-pane {
  animation: ldc-ob-fade-in 0.28s var(--ldc-ease) both;
}

.ldc-ob-step-pane--hidden {
  display: none !important;
}

@keyframes ldc-ob-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Hero hidden on step 2+ */
.ldc-ob-hero--hidden {
  display: none;
}

/* Chips — 3-column variant (step 3) */
.ldc-ob-chips--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Input with suffix (m², Kč) */
.ldc-ob-form__input-icon-wrap {
  position: relative;
}

.ldc-ob-form__input-icon-wrap .ldc-ob-form__input {
  padding-right: 52px;
}

.ldc-ob-form__input-suffix {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ldc-ink-soft);
  background: var(--ldc-bg-warm);
  border-left: 1px solid var(--ldc-line);
  pointer-events: none;
  user-select: none;
}

/* Hint inline */
.ldc-ob-form__hint-inline {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ldc-ink-xs);
  margin-left: 6px;
}

/* Checkbox card grid (prioritní prostory, služby) */
.ldc-ob-checks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ldc-ob-check {
  cursor: pointer;
}

.ldc-ob-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ldc-ob-check__label {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--ldc-line);
  background: var(--ldc-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--ldc-ink-mid);
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
  user-select: none;
  text-align: center;
}

.ldc-ob-check:hover .ldc-ob-check__label {
  border-color: var(--ldc-200);
  background: var(--ldc-50);
  color: var(--ldc-ink);
}

.ldc-ob-check input:checked + .ldc-ob-check__label {
  border-color: var(--ldc-600);
  background: var(--ldc-50);
  color: var(--ldc-600);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--ldc-600);
}

/* Final summary (krok 4) */
.ldc-ob-final-summary {
  border: 1px solid var(--ldc-line);
  background: var(--ldc-bg-warm);
  overflow: hidden;
}

.ldc-ob-final-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--ldc-line-soft);
}

.ldc-ob-final-row:last-child {
  border-bottom: none;
}

.ldc-ob-final-row__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldc-ink-xs);
  flex-shrink: 0;
}

.ldc-ob-final-row__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ldc-ink);
  text-align: right;
  letter-spacing: -0.01em;
}

/* GDPR consent */
.ldc-ob-gdpr-consent {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--ldc-bg-warm);
  border: 1px solid var(--ldc-line-soft);
  transition: border-color 0.2s, background 0.2s;
}

.ldc-ob-gdpr-consent--error {
  border-color: #c0392b;
  background: #fdf0ee;
}

.ldc-ob-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.6;
  cursor: pointer;
}

.ldc-ob-form-checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ldc-600);
  cursor: pointer;
}

.ldc-ob-form-checkbox-label a {
  color: var(--ldc-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Submit button variant */
.ldc-ob-btn-submit {
  gap: 10px;
}

/* Success screen */
.ldc-ob-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 60px);
}

.ldc-ob-success__icon {
  width: 72px;
  height: 72px;
  background: var(--ldc-50);
  border: 1px solid var(--ldc-200);
  display: grid;
  place-items: center;
  color: var(--ldc-600);
  margin-bottom: 28px;
}

.ldc-ob-success__title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.033em;
  color: var(--ldc-ink);
  margin-bottom: 16px;
  line-height: 1.08;
}

.ldc-ob-success__text {
  font-size: 16px;
  line-height: 1.74;
  color: var(--ldc-ink-mid);
  max-width: 520px;
  margin-bottom: 28px;
}

.ldc-ob-success__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 36px;
}

.ldc-ob-success__chip {
  padding: 8px 16px;
  background: var(--ldc-bg-warm);
  border: 1px solid var(--ldc-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ldc-ink-mid);
}

.ldc-ob-success__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Responsive additions */
@media (max-width: 900px) {
  .ldc-ob-chips--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldc-ob-checks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ldc-ob-chips--3col {
    grid-template-columns: 1fr;
  }

  .ldc-ob-checks {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldc-ob-success__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ldc-ob-success__actions .ldc-clean-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════
   LOGIN PAGE — ldc-login.html
   Namespace: .ldc-login-
   ════════════════════════════════════════════════════ */

.ldc-login-body {
  background: var(--ldc-bg);
  min-height: 100vh;
  display: flex;
}

.ldc-login-wrap {
  display: grid;
  grid-template-columns: 480px 1fr;
  min-height: 100vh;
  width: 100%;
}

/* ────────────────────────────────────────────────────
   LEFT PANEL — form
   ──────────────────────────────────────────────────── */

.ldc-login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 64px);
  border-right: 1px solid var(--ldc-line-soft);
  overflow-y: auto;
}

.ldc-login-form-inner {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Logo */
.ldc-login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-decoration: none;
}

.ldc-login-logo__img {
  height: 32px;
  width: auto;
}

.ldc-login-logo__fallback {
  display: none;
  align-items: center;
  gap: 8px;
}

.ldc-login-logo__mark {
  width: 32px;
  height: 32px;
  background: var(--ldc-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.ldc-login-logo__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ldc-ink);
  text-transform: uppercase;
}

/* Heading */
.ldc-login-heading {
  margin-bottom: 36px;
}

.ldc-login-heading .ldc-clean-eyebrow {
  margin-bottom: 10px;
}

.ldc-login-title {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: 1.06;
  color: var(--ldc-ink);
  margin-bottom: 10px;
}

.ldc-login-sub {
  font-size: 15px;
  color: var(--ldc-ink-mid);
  line-height: 1.6;
}

/* Form fields */
.ldc-login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ldc-login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldc-login-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ldc-login-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldc-ink-soft);
}

.ldc-login-forgot {
  font-size: 11px;
  font-weight: 600;
  color: var(--ldc-ink-soft);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.ldc-login-forgot:hover {
  color: var(--ldc-600);
}

.ldc-login-input-wrap {
  position: relative;
}

.ldc-login-input {
  font-family: var(--ldc-font);
  font-size: 15px;
  color: var(--ldc-ink);
  background: var(--ldc-bg);
  border: 1px solid var(--ldc-line);
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.22s var(--ldc-ease), box-shadow 0.22s var(--ldc-ease);
  appearance: none;
  -webkit-appearance: none;
}

.ldc-login-input::placeholder {
  color: var(--ldc-ink-xs);
  letter-spacing: 0;
}

.ldc-login-input:focus {
  border-color: var(--ldc-600);
  box-shadow: 0 0 0 3px rgba(125,46,62,.10);
}

.ldc-login-input-wrap .ldc-login-input {
  padding-right: 48px;
}

.ldc-login-toggle-pw {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46px;
  display: grid;
  place-items: center;
  color: var(--ldc-ink-soft);
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}

.ldc-login-toggle-pw:hover {
  color: var(--ldc-ink);
}

/* Error message */
.ldc-login-error {
  font-size: 13px;
  color: #c0392b;
  min-height: 0;
  line-height: 1.5;
  font-weight: 500;
  padding: 0;
  transition: padding 0.2s;
}

.ldc-login-error:not(:empty) {
  padding: 12px 14px;
  background: #fdf0ee;
  border: 1px solid #f5c6c0;
}

/* Submit */
.ldc-login-submit {
  width: 100%;
  height: 50px;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

/* Divider */
.ldc-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
  color: var(--ldc-ink-xs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ldc-login-divider::before,
.ldc-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ldc-line-soft);
}

/* Register CTA */
.ldc-login-register {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.ldc-login-register__text {
  font-size: 13px;
  color: var(--ldc-ink-mid);
}

.ldc-login-register__btn {
  width: 100%;
  height: 46px;
  font-size: 11px;
  gap: 8px;
}

/* Footer links */
.ldc-login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--ldc-line-soft);
}

.ldc-login-foot a {
  font-size: 11px;
  color: var(--ldc-ink-xs);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.ldc-login-foot a:hover {
  color: var(--ldc-ink-soft);
}

/* ────────────────────────────────────────────────────
   RIGHT PANEL — visual
   ──────────────────────────────────────────────────── */

.ldc-login-visual {
  position: relative;
  background: var(--ldc-hero-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ldc-login-visual__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  transition: opacity 0.8s var(--ldc-ease);
}

.ldc-login-visual:hover .ldc-login-visual__bg {
  opacity: 0.22;
}

.ldc-login-visual__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: clamp(48px, 6vw, 72px) clamp(40px, 5vw, 64px);
  color: #fff;
}

.ldc-login-visual__badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 24px;
}

.ldc-login-visual__title {
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.97;
  color: #fff;
  margin-bottom: 20px;
}

.ldc-login-visual__text {
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255,255,255,.62);
  max-width: 400px;
}

/* Benefits */
.ldc-login-benefits {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: auto;
  padding-top: 8px;
}

.ldc-login-benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ldc-login-benefit:last-child {
  border-bottom: none;
}

.ldc-login-benefit__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}

.ldc-login-benefit strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.ldc-login-benefit span {
  font-size: 12px;
  color: rgba(255,255,255,.48);
  line-height: 1.55;
}

.ldc-login-visual__bottom {
  padding-top: 32px;
}

.ldc-login-visual__copy {
  font-size: 11px;
  color: rgba(255,255,255,.24);
  letter-spacing: 0.06em;
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .ldc-login-wrap {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  .ldc-login-visual {
    display: none;
  }

  .ldc-login-form-panel {
    border-right: none;
    min-height: 100vh;
    justify-content: flex-start;
    padding-top: clamp(40px, 8vw, 72px);
  }
}

@media (max-width: 480px) {
  .ldc-login-form-panel {
    padding: 36px 24px 48px;
  }

  .ldc-login-form-inner {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════
   REGISTRACE — kompaktní varianta login layoutu pro /registrace
   Cíl: celý formulář se vejde na 1366×768 notebook bez scrollu.
   Sdílí všechny .ldc-login-* base styly. Přidává:
     • dvousloupcovou řadu polí .ldc-login-row
     • custom LDC checkbox .ldc-login-check
     • zhuštěný vertikální rytmus celého panelu
     • kompaktní inline CTA „Máte už účet? Přihlášení →"
   ════════════════════════════════════════════════════ */

.ldc-login-wrap--register .ldc-login-form-inner {
  max-width: 460px;
}

/* Kompaktnější svislé paddingy panelu — pomáhá k tomu, aby se
   na 1366×768 vešel celý formulář bez scrollu. */
.ldc-login-wrap--register .ldc-login-form-panel {
  padding-top: clamp(28px, 3.4vw, 48px);
  padding-bottom: clamp(28px, 3.4vw, 48px);
}

/* Logo blok — menší odsazení od headingu. */
.ldc-login-wrap--register .ldc-login-logo {
  margin-bottom: 22px;
}

/* Heading — menší titulek a perex, kompaktnější odsazení. */
.ldc-login-wrap--register .ldc-login-heading {
  margin-bottom: 22px;
}
.ldc-login-wrap--register .ldc-login-title {
  font-size: clamp(24px, 2.6vw, 30px);
  margin-bottom: 6px;
  line-height: 1.1;
}
.ldc-login-wrap--register .ldc-login-sub {
  font-size: 14px;
  line-height: 1.5;
}

/* Form — gap mezi řádky polí. */
.ldc-login-form--register {
  gap: 14px;
}

/* Kompaktnější field cluster: label těsněji u inputu. */
.ldc-login-wrap--register .ldc-login-field {
  gap: 6px;
}

/* Mírně nižší inputy, aby zabraly méně vertikálního místa. */
.ldc-login-wrap--register .ldc-login-input {
  padding: 11px 14px;
  font-size: 14.5px;
}

/* Dvojsloupec polí (Jméno + Příjmení, E-mail + Telefon). */
.ldc-login-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Souhlasy ─ bez kontejneru, jako běžná součást formuláře ──── */
.ldc-login-consents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 4px 0 0;
  margin: 0;
  border-radius: 0;
}
.ldc-login-consents__legend { display: none; }

/* Checkbox je nativní <input type="checkbox"> přestylovaný přes
   appearance:none. Visible „box" je samotný input. SVG-checkmark
   je injectovaný přes mask-image, takže nepotřebujeme druhý element
   a vyhneme se rozpadu :checked + selector logiky.

   Ponecháváme i HTML <span class="ldc-login-check__box"> pro zpětnou
   kompatibilitu — schováme ho (viz níže), input už řeší vše sám. */

.ldc-login-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ldc-ink-mid);
  position: relative;
}

/* Skryjeme legacy span „box" — nepoužíváme ho. */
.ldc-login-check__box {
  display: none !important;
}

.ldc-login-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0 0;               /* zarovnání s baseline prvního řádku textu */
  padding: 0;
  border: 1.5px solid var(--ldc-600);
  border-radius: 3px;              /* jemné zaoblení dle design systému */
  background: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  transition: border-color 0.18s var(--ldc-ease),
              background 0.18s var(--ldc-ease),
              box-shadow 0.18s var(--ldc-ease);
}

/* SVG-style fajfka kreslená přes ::after — bílá, na bordeaux pozadí. */
.ldc-login-check input[type="checkbox"]::after {
  content: '';
  width: 11px;
  height: 11px;
  background-color: #ffffff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0;
  transform: scale(.5);
  transition: opacity 0.18s var(--ldc-ease), transform 0.18s var(--ldc-ease);
}

.ldc-login-check input[type="checkbox"]:checked {
  background: var(--ldc-600);
  border-color: var(--ldc-600);
}

.ldc-login-check input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

.ldc-login-check input[type="checkbox"]:hover:not(:checked) {
  border-color: var(--ldc-700, #5d1f2c);
  background: rgba(125, 46, 62, .04);
}

.ldc-login-check input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(125, 46, 62, .16);
  border-color: var(--ldc-600);
}

.ldc-login-check__label {
  color: var(--ldc-ink-mid);
  letter-spacing: 0;
  user-select: none;
}

/* ── CTA sekce — kompaktní: dominantní primary + inline text link ── */
.ldc-login-form--register .ldc-login-submit {
  margin-top: 10px;
  height: 48px;
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* Kompaktní inline „Máte už účet? Přihlášení →" místo divider + outline */
.ldc-login-register-inline {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ldc-ink-mid);
  line-height: 1.5;
}
.ldc-login-register-inline a {
  color: var(--ldc-600);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s var(--ldc-ease);
}
.ldc-login-register-inline a:hover { color: var(--ldc-700, #5d1f2c); }
.ldc-login-register-inline a svg { transition: transform 0.2s var(--ldc-ease); }
.ldc-login-register-inline a:hover svg { transform: translateX(2px); }

/* Foot — kompaktnější, blíže ostatnímu obsahu. */
.ldc-login-wrap--register .ldc-login-foot {
  margin-top: 22px;
  padding-top: 16px;
}

/* Hero panel — menší titulek a kompaktnější paddingy, aby seděl s
   kratším formulářovým sloupcem. */
.ldc-login-wrap--register .ldc-login-visual__content {
  padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 56px);
}
.ldc-login-wrap--register .ldc-login-visual__badge {
  margin-bottom: 18px;
}
.ldc-login-wrap--register .ldc-login-visual__title {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.05;
  margin-bottom: 14px;
}
.ldc-login-wrap--register .ldc-login-visual__text {
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
}

/* Responsive — pod 600 px se dvojsloupec rozpadne na jeden sloupec. */
@media (max-width: 600px) {
  .ldc-login-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ldc-login-form--register .ldc-login-submit {
    height: 50px;
  }
}

@media (max-width: 900px) {
  .ldc-login-wrap--register .ldc-login-form-inner {
    max-width: 440px;
  }
}

/* Notebook 1366×768 — pojistka, aby se vše vešlo na výšku 768 px. */
@media (max-width: 1440px) and (max-height: 820px) {
  .ldc-login-wrap--register .ldc-login-form-panel {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .ldc-login-wrap--register .ldc-login-logo { margin-bottom: 18px; }
  .ldc-login-wrap--register .ldc-login-heading { margin-bottom: 18px; }
  .ldc-login-form--register { gap: 12px; }
  .ldc-login-wrap--register .ldc-login-input { padding: 10px 14px; }
  .ldc-login-form--register .ldc-login-submit { height: 46px; margin-top: 8px; }
  .ldc-login-wrap--register .ldc-login-foot { margin-top: 18px; padding-top: 14px; }
}