/* ═══════════════════════════════════════════════════════════════
   LIVLY — Public marketing landing page (/main-page)
   Scoped landing styles. Reuses livly.css tokens + .btn classes.
   Light Electric-Indigo theme with dark indigo accent panels.
   All rules are namespaced under .page.landing / .lp-* so they
   cannot leak into the app UI.
   ═══════════════════════════════════════════════════════════════ */

/* ── Landing scope: release the .page container + local tokens ──── */

.page.landing {
  /* base.html wraps content in <main class="page landing">; .page caps
     width at 1280px with 32px padding — release it for full-bleed bands */
  max-width: none;
  padding: 0;
  width: 100%;
  overflow-x: hidden;          /* Safari fallback (no overflow-x:clip support) */
  overflow-x: clip;            /* modern: clip without creating a scroll container */

  /* Dark-panel tokens (mirrors templates/livly/report.html naming).
     The page itself stays light; these are only for dark accent panels. */
  --lp-void: #0d0d1a;
  --lp-deep: #161625;
  --lp-dusk: #1e1e38;

  /* Layout helpers */
  --lp-maxw: 1160px;
  --lp-pad: clamp(20px, 5vw, 40px);
  --lp-gap: clamp(18px, 3vw, 28px);
  --lp-section-y: clamp(56px, 9vw, 104px);
  --lp-radius: 18px;

  /* Slightly darker indigo for small text on light bg (WCAG AA). */
  --lp-indigo-text: #5a4bd6;
}

/* NOTE: headings default to var(--text) via livly.css base (h1..h4).
   We deliberately do NOT re-assert that here — a higher-specificity rule
   would override the white-on-dark headings inside .lp-step/.lp-final/footer. */

/* Anchor scrolling under the sticky nav (scoped: file only loads here).
   84px ≈ nav height (~68px) + buffer; keep in sync if nav padding changes. */
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Visually-hidden but available to assistive tech */
.lp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Shared building blocks ─────────────────────────────────────── */

.lp-container {
  width: 100%;
  max-width: var(--lp-maxw);
  margin-inline: auto;
  padding-inline: var(--lp-pad);
}

.lp-section { padding-block: var(--lp-section-y); }

.lp-section-head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}

.lp-section-head h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lp-section-head p {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.lp-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-indigo-text);
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 7px 16px;
}

/* Landing CTA button: long Czech label must wrap gracefully and never
   overflow small screens (the base .btn forces white-space:nowrap). */
.lp-btn.btn {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  height: auto;
  min-height: 52px;
  padding: 15px 30px;
  font-size: clamp(13px, 2.4vw, 15px);
  letter-spacing: 0.02em;
  border-radius: 14px;
}

.lp-btn.btn-large {
  min-height: 58px;
  padding: 17px 34px;
  font-size: clamp(13.5px, 2.5vw, 16px);
}

/* On a dark band the primary button keeps its indigo fill; add a subtle
   glow so it reads as the focal action. */
.lp-on-dark .lp-btn.btn-primary {
  box-shadow: 0 10px 34px rgba(108, 92, 231, 0.45);
}

/* ── Marketing navbar (overrides the app navbar block) ──────────── */

.lp-nav {
  /* The navbar is rendered OUTSIDE .page.landing, so the layout tokens defined
     there aren't in scope here — redeclare them or padding/max-width silently
     drop (which made the bar collapse to the button's height). */
  --lp-maxw: 1160px;
  --lp-pad: clamp(20px, 5vw, 40px);
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.lp-nav__inner {
  max-width: var(--lp-maxw);
  margin-inline: auto;
  padding: 28px var(--lp-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
}

.lp-nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--text);
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
}
.lp-nav__logo .dot { color: var(--accent); }

.lp-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}

.lp-nav__links a {
  color: var(--text-mid);
  font-weight: 500;
  font-size: 0.95rem;
}
.lp-nav__links a:hover { color: var(--accent); }

.lp-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  flex-shrink: 0;
}

/* Vstup pro vracející se uživatele — vedle hlavního CTA, ale záměrně tiše,
   ať trial zůstane jediná výrazná akce v baru. Vede na app.livly.cz/login. */
.lp-nav__login {
  color: var(--text-mid);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.lp-nav__login:hover { color: var(--accent); }

.lp-nav__cta .lp-btn.btn {
  min-height: 46px;
  padding: 12px 24px;
  font-size: 14px;
  white-space: nowrap;   /* short label — keep on one line in the bar */
  letter-spacing: 0.01em;
}

/* Hamburger — hidden on desktop */
.lp-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}
.lp-nav__toggle:hover { background: var(--bg-secondary); }

/* Mobile drawer (hidden on desktop) */
.lp-drawer { display: none; }

@media (max-width: 860px) {
  .lp-nav__links, .lp-nav__cta { display: none; }
  .lp-nav__toggle { display: inline-flex; }

  .lp-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    background: var(--bg-card);
    box-shadow: -8px 0 40px rgba(13, 13, 26, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 120;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
  }
  .lp-drawer.open { transform: translateX(0); }

  .lp-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .lp-drawer a.lp-drawer__link {
    display: block;
    padding: 13px 12px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 500;
    font-size: 1.05rem;
  }
  .lp-drawer a.lp-drawer__link:hover { background: var(--bg-secondary); color: var(--accent); }
  .lp-drawer .lp-btn.btn { margin-top: 16px; width: 100%; }

  .lp-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 26, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 110;
  }
  .lp-drawer__backdrop.open { opacity: 1; visibility: visible; }
}

/* ── 1. Hero ─────────────────────────────────────────────────────── */

.lp-hero {
  position: relative;
  text-align: center;
  /* Tighter top (less gap above the eyebrow); roomier bottom lets the photo breathe. */
  padding-block: clamp(30px, 5vw, 60px) clamp(60px, 9vw, 112px);
  overflow: hidden;
  background: linear-gradient(180deg, #f6f5fc 0%, var(--bg-primary) 55%, #eeecf9 100%);
}

/* B&W Prague photo deep in the hero background. The heavy white wash keeps
   the LIVLY palette dominant; the purple radial tints sit above the photo
   (they used to live on .lp-hero itself, which would now paint below it). */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(70% 80% at 50% -15%, rgba(108, 92, 231, 0.20), transparent 72%),
    radial-gradient(45% 55% at 88% 8%, rgba(162, 155, 254, 0.22), transparent 70%),
    radial-gradient(45% 55% at 10% 12%, rgba(108, 92, 231, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(246, 245, 252, 0.93) 0%, rgba(246, 245, 252, 0.80) 42%, rgba(244, 244, 248, 0.86) 75%, rgba(238, 236, 249, 0.97) 100%),
    url("../img/landing/hero-praha.webp");
  background-size: auto, auto, auto, auto, cover;
  background-position: center, center, center, center, center 62%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.lp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 28px);
}

.lp-hero h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  /* Wide enough to settle on ~2 balanced lines, leaving room below for the video. */
  max-width: 30ch;
  text-wrap: balance;
}

.lp-hero__sub {
  color: var(--text-mid);
  font-size: clamp(1.02rem, 2.1vw, 1.28rem);
  line-height: 1.6;
  max-width: 640px;
}

.lp-hero__cta { margin-top: 4px; }

.lp-hero__note {
  color: var(--text-mid);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ── 1b. VSL video v heru ───────────────────────────────────────── */

.lp-hero__video {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* aspect-ratio drží místo ještě před načtením videa => žádný layout
   shift, když se posneseme na poster. */
.lp-vsl {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0d0d1a;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border: 1px solid var(--border);
}

/* Slot, do kterého YT API vloží iframe (element sám nahradí). */
.lp-vsl__media,
.lp-vsl__media iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Overlay leží přes celé video a je to skutečné tlačítko (klávesnice,
   screen reader). Po prvním play mizí i z tab orderu. */
.lp-vsl__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-body);
  transition: opacity var(--transition), visibility var(--transition);
}

.lp-vsl__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Poster je hotový grafický asset (logo, citace, fialový highlight), takže
   ho nepřekrýváme tmavým závojem — jen decentní vinětace ke krajům, aby
   play button neplaval na světlém pozadí. Střed zůstává čistý. */
.lp-vsl__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(13, 13, 26, 0.22) 100%);
}

.lp-vsl.is-playing .lp-vsl__overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Průsvitný fill, ať citace na posteru zůstane čitelná i pod tlačítkem.
   Tvar drží bílý prstenec, ne krytí; plný accent se vrací až na hoveru. */
.lp-vsl__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(64px, 11vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(108, 92, 231, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #fff;
  box-shadow: 0 4px 18px rgba(13, 13, 26, 0.25);
  transition: transform var(--transition), background var(--transition);
}

.lp-vsl__play svg {
  width: 42%;
  /* Optický střed trojúhelníku je vlevo od geometrického. */
  margin-left: 8%;
  /* Trojúhelník zůstává plně krytý — nese afordanci; stín ho odlepí
     i tam, kde pod tlačítkem prosvítá světlé místo posteru. */
  filter: drop-shadow(0 1px 4px rgba(13, 13, 26, 0.45));
}

.lp-vsl__overlay:hover .lp-vsl__play,
.lp-vsl__overlay:focus-visible .lp-vsl__play {
  transform: scale(1.08);
  background: rgba(108, 92, 231, 0.88);
  border-color: rgba(255, 255, 255, 0.9);
}

.lp-vsl__overlay:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-vsl__play,
  .lp-vsl__overlay { transition: none; }
  .lp-vsl__overlay:hover .lp-vsl__play,
  .lp-vsl__overlay:focus-visible .lp-vsl__play { transform: none; }
}

/* ── 2. Pain points ─────────────────────────────────────────────── */

.lp-pains { background: var(--bg-card); }

/* Rectangular list rows (icon left, text right) — not square tiles */
.lp-pains__grid {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-pain {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.lp-pain:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: var(--accent-light); }

.lp-pain__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--accent);
  flex-shrink: 0;
}
.lp-pain__icon svg { width: 24px; height: 24px; }

.lp-pain__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-pain strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.lp-pain p { color: var(--text-mid); font-size: 0.97rem; line-height: 1.5; }

/* ── 3. Testimonials (PLACEHOLDER content) ──────────────────────── */

.lp-testimonials { background: var(--bg-primary); }

.lp-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--lp-gap);
}

.lp-quote {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--lp-radius);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-quote__mark {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 0.6;
  color: var(--accent-light);
  opacity: 0.55;
  height: 0.5em;
}

.lp-quote blockquote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
}

.lp-quote cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-quote cite b { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.lp-quote cite span { color: var(--text-mid); font-size: 0.9rem; }

/* ── 4. Features (alternating image + text) ─────────────────────── */

.lp-features { background: var(--bg-card); }

.lp-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: clamp(40px, 6vw, 80px);
}
.lp-feature:last-child { margin-bottom: 0; }
/* No zig-zag: the app visual sits on the left, text on the right, in every row. */
.lp-feature__media { order: -1; }

.lp-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.lp-feature__desc { color: var(--text-mid); font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.6; }

.lp-feature__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--bg-secondary);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}

/* No dark panel: the app mock-up floats directly on the section, so the visual
   is just the app UI itself (not a "screenshot inside a dark screenshot"). */
.lp-feature__media {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* All four feature visuals render at the same width and the same card height,
   so the media column reads as one consistent stack instead of four cards of
   random size. Content is vertically centred inside that fixed box. */
.lp-feature__media .mock { max-width: 360px; }
.lp-feature__media .mock-card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 5 & repeat. CTA band ───────────────────────────────────────── */

.lp-cta-band {
  background:
    radial-gradient(50% 120% at 50% 0%, rgba(108, 92, 231, 0.10), transparent 70%),
    var(--bg-secondary);
  text-align: center;
  /* Tighter gap down to the comparison section below. */
  padding-bottom: clamp(34px, 4.5vw, 52px);
}
.lp-cta-band .lp-container { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-cta-band h2 {
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  max-width: 18ch;
  margin-bottom: 8px;
}

/* ── 6. Comparison table ────────────────────────────────────────── */

.lp-compare { background: var(--bg-primary); padding-top: clamp(34px, 4.5vw, 52px); }

/* Native <table>, styled to look like a highlighted comparison grid.
   table-layout:fixed → column widths come from the <thead> cells. */
.lp-table {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid var(--border);
  border-radius: var(--lp-radius);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.lp-table th, .lp-table td {
  padding: clamp(12px, 2vw, 17px) clamp(12px, 2.2vw, 22px);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 400;
  vertical-align: middle;
}
.lp-table tbody th, .lp-table tbody td { border-top: 1px solid var(--border); }

.lp-table__cell--feature { color: var(--text); font-weight: 500; line-height: 1.35; text-align: left; }
.lp-table__cell--val { text-align: center; }

.lp-table__head {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(0.8rem, 1.8vw, 1.05rem);
  padding-block: clamp(14px, 2.2vw, 20px);
  text-align: center;
}
.lp-table__head--feature { text-align: left; width: auto; }
.lp-table__head--other { background: #ecebf2; color: var(--text-mid); width: clamp(72px, 16vw, 132px); }
.lp-table__head--livly { background: var(--lp-dusk); color: #fff; width: clamp(80px, 17vw, 140px); }

/* The whole LIVLY column reads as a dark highlighted strip */
.lp-table__cell--livly { background: var(--lp-dusk); }
.lp-table tbody .lp-table__cell--livly { border-top-color: rgba(255, 255, 255, 0.07); }

.lp-table__cell--other { color: #85859a; }

.lp-mark { width: 22px; height: 22px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.lp-mark--yes { color: var(--accent-light); }
/* Muted grey that still clears WCAG 3:1 for meaningful graphics on white */
.lp-mark--no { color: #85859a; }
.lp-table__partial { font-size: 0.82em; color: var(--text-mid); line-height: 1.25; }

/* ── 7. How it works ────────────────────────────────────────────── */

.lp-steps { background: var(--bg-card); }

/* Four fixed columns (not auto-fit) so the four steps always break 4 → 2 → 1
   together; auto-fit would leave a single orphan card on its own row. */
.lp-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-gap);
}
@media (max-width: 1000px) {
  .lp-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lp-steps__grid { grid-template-columns: minmax(0, 1fr); }
}

.lp-step {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--lp-radius);
  padding: clamp(20px, 2.4vw, 26px);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-md);
}

/* Fixed media height across all four steps → the visuals line up on one
   baseline regardless of how tall each individual mock is. */
.lp-step__media {
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 14px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.lp-step h3 { color: var(--text); font-size: 1.1rem; line-height: 1.25; }
.lp-step p { color: var(--text-mid); font-size: 0.97rem; line-height: 1.55; }
.lp-step__row { display: flex; align-items: center; gap: 12px; }

/* ── 8. Savings ─────────────────────────────────────────────────── */

.lp-savings { position: relative; overflow: hidden; background: var(--bg-primary); text-align: center; }

/* Fragment of the Týn spires skyline behind the section, washed with the
   section's own grey so it reads as texture, not as a photo. */
.lp-savings::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(244, 244, 248, 0.97) 0%, rgba(244, 244, 248, 0.80) 50%, rgba(244, 244, 248, 0.97) 100%),
    url("../img/landing/savings-praha.webp");
  background-size: auto, cover;
  background-position: center, center 25%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.lp-savings__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.lp-savings h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.15; }
.lp-savings__body { color: var(--text-mid); font-size: clamp(1.02rem, 1.8vw, 1.18rem); line-height: 1.6; }

.lp-callout {
  background: linear-gradient(160deg, var(--lp-dusk), var(--lp-void));
  color: #fff;
  border-radius: var(--lp-radius);
  padding: clamp(24px, 4vw, 38px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
}
.lp-callout .hl { color: var(--accent-light); }

/* ── 9. FAQ (native <details> accordion) ────────────────────────── */

.lp-faq { background: var(--bg-card); }
.lp-faq__list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }

.lp-faq__item {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.lp-faq__item[open] { border-color: var(--accent-light); }

.lp-faq__q {
  list-style: none;
  cursor: pointer;
  padding: clamp(16px, 2.4vw, 22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--text);
}
.lp-faq__q::-webkit-details-marker { display: none; }

.lp-faq__chev {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--accent);
  transition: transform var(--transition);
}
.lp-faq__item[open] .lp-faq__chev { transform: rotate(180deg); }

.lp-faq__a {
  padding: 0 clamp(16px, 2.4vw, 22px) clamp(18px, 2.4vw, 22px);
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.6;
}

/* ── 10. Final CTA band (dark) ──────────────────────────────────── */

.lp-final {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(108, 92, 231, 0.28), transparent 70%),
    linear-gradient(160deg, var(--lp-deep), var(--lp-void));
  text-align: center;
}
.lp-final__inner { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.lp-final h2 { color: #fff; font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; }

/* ── Footer ─────────────────────────────────────────────────────── */

.lp-footer { background: var(--lp-void); color: rgba(255, 255, 255, 0.7); }
.lp-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(44px, 6vw, 72px);
}
.lp-footer__brand-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: -0.03em;
}
.lp-footer__brand-logo .dot { color: var(--accent-light); }
.lp-footer__tagline { margin-top: 12px; max-width: 30ch; font-size: 0.95rem; line-height: 1.55; }

.lp-footer__col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 16px; font-family: var(--font-display); }
.lp-footer__col a {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  padding: 6px 0;
  font-size: 0.95rem;
}
.lp-footer__col a:hover { color: var(--accent-light); }
/* Non-navigating "coming soon" footer entries (no page yet) */
.lp-footer__soon {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  padding: 6px 0;
  font-size: 0.95rem;
  cursor: default;
}

.lp-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.88rem;
}
.lp-footer__social { display: flex; gap: 10px; }
.lp-footer__social-item {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}
.lp-footer__social svg { width: 18px; height: 18px; }

/* ── Reusable dark-mock primitives (decorative, aria-hidden) ────── */

.mock { width: 100%; max-width: 340px; }
.mock-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.mock-row { display: flex; align-items: center; gap: 10px; }
.mock-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-mid);
  white-space: nowrap;
}
.mock-pill.is-active { background: var(--accent); color: #fff; }
.mock-flag { font-size: 11.5px; color: #b5730a; display: flex; gap: 7px; align-items: flex-start; line-height: 1.35; }
.mock-flag svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--warning); }
.mock-label { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; }
.mock-price { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.mock-bar { height: 7px; border-radius: 999px; background: var(--bg-secondary); overflow: hidden; }
.mock-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.mock-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent); }
.mock-approve { background: var(--accent); color: #fff; font-weight: 600; }
.mock-reject { background: var(--bg-secondary); color: var(--text-mid); border: 1px solid var(--border); }
.mock-btn { flex: 1; text-align: center; font-size: 12px; padding: 8px; border-radius: 9px; }

/* Text-scan mock (feature 2 — analýza textu inzerátu). Adapted from the
   livly.cz features "smart text analysis" animation, on the light brand theme. */
.mock-textscan { max-width: 380px; }
.ts-source { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-light); margin-bottom: 10px; }
.ts-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); flex-shrink: 0; animation: lp-pulse-soft 1.8s ease-in-out infinite; }
.ts-block { position: relative; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 14px; font-size: 12.5px; line-height: 1.95; color: var(--text-mid); overflow: hidden; }
.ts-hl { font-weight: 600; padding: 0 3px; border-radius: 3px; animation: ts-glow 3s ease-in-out infinite; }
.ts-good { color: var(--accent); background: rgba(108, 92, 231, 0.10); }
.ts-warn { color: #c26a00; background: rgba(245, 158, 11, 0.16); animation-delay: 1s; }
.ts-bad  { color: #d63a4c; background: rgba(255, 71, 87, 0.12); animation-delay: 2s; }
@keyframes ts-glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 8px currentColor; } }
.ts-scanline { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; animation: ts-scan 4s ease-in-out infinite; }
@keyframes ts-scan { 0% { top: 0; } 100% { top: 100%; } }

/* Radar mock (step 2) — sized to sit inside the fixed .lp-step__media box */
.mock-radar { position: relative; width: 126px; height: 126px; }
.mock-radar i {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid var(--accent-light);
  border-radius: 50%;
}
.mock-radar i:nth-child(1) { width: 100%; height: 100%; }
.mock-radar i:nth-child(2) { width: 66%; height: 66%; }
.mock-radar i:nth-child(3) { width: 33%; height: 33%; }
.mock-radar .sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(108, 92, 231, 0.45) 60deg, transparent 90deg);
  animation: lp-spin 3.5s linear infinite;
}
.mock-radar .dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: lp-pulse-soft 1.8s ease-in-out infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Step mocks live in a narrow 4-column card, so their type runs a touch
   smaller to keep every visual inside the fixed media box. */
.lp-step__media .mock-flag { font-size: 11px; line-height: 1.3; }
.lp-step__media .mock-pill { font-size: 10.5px; padding: 5px 9px; }

/* ── Feature mock micro-animations (catchy, subtle, brand-purple) ── */

/* "Live" pulsing dot (feature 1 — 24/7 hlídání) */
.mock-live {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.mock-live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: lp-ring 1.8s ease-out infinite;
}

/* Gentle float of the whole mock inside each dark feature panel */
.lp-feature__media .mock { animation: lp-float 6s ease-in-out infinite; will-change: transform; }
.lp-feature:nth-child(3) .lp-feature__media .mock { animation-delay: -2s; }
.lp-feature:nth-child(5) .lp-feature__media .mock { animation-delay: -4s; }

/* Pulsing accents on the mock elements (only where those elements appear) */
.lp-feature__media .mock-badge { animation: lp-pulse-soft 2.6s ease-in-out infinite; }
.lp-feature__media .mock-approve { animation: lp-glow 2.4s ease-in-out infinite; }
.lp-feature__media .mock-flag { animation: lp-flag-pulse 2.8s ease-in-out infinite; }
.lp-feature__media .mock-flag:nth-of-type(2) { animation-delay: 0.35s; }
.lp-feature__media .mock-flag:nth-of-type(3) { animation-delay: 0.7s; }
.lp-feature__media .mock-bar > i,
.lp-step__media .mock-bar > i {
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
  background-size: 220% 100%;
  transform-origin: left;
  animation: lp-shimmer 2.6s linear infinite, lp-bar-grow 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lp-pulse-soft { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.82; } }
@keyframes lp-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
  50% { box-shadow: 0 0 18px 2px rgba(162, 155, 254, 0.55); }
}
@keyframes lp-ring { 0% { transform: scale(0.7); opacity: 0.75; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes lp-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes lp-flag-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes lp-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .mock-radar .sweep,
  .mock-radar .dot,
  .lp-feature__media .mock,
  .lp-feature__media .mock-badge,
  .lp-feature__media .mock-approve,
  .lp-feature__media .mock-flag,
  .lp-feature__media .mock-bar > i,
  .lp-step__media .mock-bar > i { animation: none !important; }
  .lp-feature__media .mock-bar > i,
  .lp-step__media .mock-bar > i { transform: scaleX(1); }
  .mock-live::after { animation: none; }
  .ts-scanline, .ts-hl, .ts-dot { animation: none !important; }
  .ts-scanline { display: none; }
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .lp-feature { grid-template-columns: 1fr; gap: 22px; }
  /* Stack every row the same way: visual on top, text below. */
  .lp-feature__media { order: -1; min-height: 0; }
  .lp-footer__top { grid-template-columns: 1fr 1fr; }
  .lp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .lp-footer__top { grid-template-columns: 1fr; }
  .lp-table__head--other { width: 66px; }
  .lp-table__head--livly { width: 60px; }
  .lp-table th, .lp-table td { padding-inline: 9px; }
  /* Shrink column headers so "OSTATNÍ" fits its narrow column without clipping */
  .lp-table__head { font-size: 0.72rem; letter-spacing: 0; padding-inline: 5px; }
  .lp-nav__logo { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Additions: live finds, iPhone mockup, about-us (2026-08-18)
   ═══════════════════════════════════════════════════════════════ */

/* ── 3b. Live finds — real dashboard cards on the landing ───────── */

.lp-live {
  background:
    radial-gradient(55% 90% at 50% 0%, rgba(108, 92, 231, 0.07), transparent 70%),
    var(--bg-secondary);
}

.lp-live__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
/* Green "live" pulse dot (the shared .mock-live is accent-purple) */
.lp-live__eyebrow .mock-live,
.lp-live__eyebrow .mock-live::after,
.lp-find-ago .mock-live,
.lp-find-ago .mock-live::after { background: #17b890; }

/* ── Shared carousel (live finds + testimonials) ─────────────────
   Scroll-snap track with fixed-width slides → layout never reflows into
   awkward orphan rows, works at every viewport width. Arrows are JS-driven
   (main_page.html); the track itself swipes natively on touch. */
.lp-carousel { position: relative; }

.lp-carousel__track {
  display: flex;
  gap: var(--lp-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* room for card shadows + snap alignment inside the padding */
  padding: 6px;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lp-carousel__track::-webkit-scrollbar { display: none; }
.lp-carousel__track > * {
  flex: 0 0 min(350px, 82vw);
  scroll-snap-align: start;
  margin: 0;
}

.lp-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition), transform 0.15s ease, color var(--transition);
}
.lp-carousel__btn svg { width: 22px; height: 22px; }
.lp-carousel__btn:hover:not(:disabled) { color: var(--accent); transform: translateY(-50%) scale(1.06); }
.lp-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.lp-carousel__btn--prev { left: -10px; }
.lp-carousel__btn--next { right: -10px; }
@media (max-width: 560px) {
  .lp-carousel__btn { width: 40px; height: 40px; }
  .lp-carousel__btn--prev { left: -4px; }
  .lp-carousel__btn--next { right: -4px; }
}

.lp-live__disclaimer {
  text-align: center;
  color: var(--text-light);
  font-size: 0.8rem;
  margin-top: 24px;
}

/* ── Landing property card (reuses dashboard .property-card CSS) ── */

/* Marketing cards are display-only — the buttons are decorative spans. */
.lp-find-card .property-actions,
.lp-find-card .property-detail-bar,
.lp-find-card__portal { pointer-events: none; }
.lp-find-card__portal { align-self: flex-start; }

/* Soft fade over listing photos (bottom darkens under the "ago" pill).
   Only when a photo actually renders — the empty/broken placeholder would
   otherwise carry a odd dark band. */
.lp-find-card .property-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 26, 0) 55%, rgba(13, 13, 26, 0.42) 100%);
  pointer-events: none;
}
.lp-find-card .property-photo.lp-photo-broken::after,
.lp-find-card .property-photo:not(:has(img))::after { display: none; }

/* ŽIVĚ section only: real listing photos get blurred + washed out so the
   specific property isn't readily identifiable on a public page. The scale
   hides the soft transparent edge the blur would otherwise leave. */
.lp-live .lp-find-card .property-photo img {
  filter: blur(9px) saturate(0.7) brightness(1.08);
  transform: scale(1.12);
}

.lp-find-ago {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 13, 26, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Placeholder shown only when the listing photo is missing/broken */
.lp-find-card__fallback {
  display: none;
  color: var(--text-light);
  background: linear-gradient(160deg, var(--bg-secondary), #e9e6f8);
}
.lp-find-card .property-photo.lp-photo-broken img { display: none; }
.lp-find-card .property-photo.lp-photo-broken .lp-find-card__fallback,
.lp-find-card .property-photo:not(:has(img)) .lp-find-card__fallback { display: flex; }

/* ── Pains section: text left, live iPhone mockup right ─────────── */

.lp-pains__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}
.lp-pains__layout .lp-pains__grid { max-width: none; margin: 0; }

.lp-pains__phone { display: flex; justify-content: center; }

.lp-phone {
  --lp-phone-vh: 520px;         /* viewport height — keep in sync with keyframes */
  width: 300px;
  border-radius: 46px;
  background: #17171f;
  padding: 9px;
  box-shadow:
    0 34px 80px rgba(13, 13, 26, 0.38),
    inset 0 0 0 2px #3a3a44;
}

.lp-phone__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2b2b33;
  color: #fff;
  border-radius: 37px 37px 0 0;
  padding: 11px 20px 6px;
}
.lp-phone__time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-phone__island { width: 72px; height: 21px; border-radius: 999px; background: #000; }
.lp-phone__status { display: inline-flex; align-items: center; gap: 5px; }

.lp-phone__urlbar {
  background: #2b2b33;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  font-size: 12.5px;
  padding: 3px 0 10px;
}

.lp-phone__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.lp-phone__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.lp-phone__logo .dot { color: var(--accent); }
.lp-phone__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.lp-phone__viewport {
  height: var(--lp-phone-vh);
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
  border-radius: 0 0 37px 37px;
}

.lp-phone__scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 10px 20px;
  animation: lp-phone-scroll 26s ease-in-out infinite;
  will-change: transform;
}
/* Scrolls to the bottom of its own content, pauses, returns. min() guards
   the case where content is shorter than the viewport. */
@keyframes lp-phone-scroll {
  0%, 7%    { transform: translateY(0); }
  47%, 57%  { transform: translateY(min(0px, calc(-100% + var(--lp-phone-vh, 520px)))); }
  95%, 100% { transform: translateY(0); }
}

/* Cards inside the phone: production mobile look, one size down.
   content-visibility:auto would lazily paint cards mid-animation — force on. */
.lp-phone .property-card {
  content-visibility: visible;
  contain-intrinsic-size: none;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  flex-shrink: 0;
}
.lp-phone .property-card:hover { transform: none; }
.lp-phone .property-body { padding: 12px 14px; gap: 6px; }
/* The 300px viewport is tight: shrink the price row so price + deviation
   badge share one line without forcing the card past the phone edge. */
.lp-phone .property-card { min-width: 0; }
.lp-phone .property-price { font-size: 0.98rem; white-space: nowrap; }
.lp-phone .property-body .row { gap: 6px; flex-wrap: wrap; min-width: 0; }
.lp-phone .property-body .badge { font-size: 9.5px; padding: 3px 6px; white-space: nowrap; }
.lp-phone .property-street { font-size: 0.98rem; }
.lp-phone .flag { font-size: 11px; padding: 3px 8px; }
.lp-phone .property-actions { padding: 10px 12px 14px; gap: 7px; }
/* Both action labels must fit a ~125px half-width button */
.lp-phone .property-actions .btn { font-size: 11.5px; padding: 9px 4px; min-width: 0; }
.lp-phone .property-actions .btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.lp-phone .property-detail-bar { font-size: 13px; padding: 10px 14px; }

/* ── 9b. About us (founder story) ───────────────────────────────── */

.lp-about { background: var(--bg-primary); }

.lp-about__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}

.lp-about__text h2 {
  font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 16px 0 18px;
}
.lp-about__text p {
  color: var(--text-mid);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.65;
  margin-bottom: 14px;
}
.lp-about__text p:last-child { margin-bottom: 0; }

.lp-about__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Circle portrait with a brand-purple arc hugging one side */
.lp-about__photo {
  position: relative;
  width: min(280px, 68vw);
  aspect-ratio: 1;
}
.lp-about__photo::before {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
    var(--accent) 0deg, var(--accent-light) 120deg, transparent 165deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.lp-about__photo::after {
  content: '';
  position: absolute;
  inset: 12% -8% -12% 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 92, 231, 0.14), transparent);
  z-index: -1;
}
.lp-about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.lp-about__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.lp-about__caption b { font-family: var(--font-display); font-size: 1.08rem; color: var(--text); }
.lp-about__caption span { color: var(--text-mid); font-size: 0.92rem; }

/* Hand-drawn purple marker underline ("Ale na kupující nikdo.") — two
   slightly offset rough strokes so it reads as drawn, not printed. */
.lp-underline {
  font-weight: 600;
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 Q 50 3.5 98 7 T 196 6.5' fill='none' stroke='%23a29bfe' stroke-width='5' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M3 10.5 Q 60 6 110 8.5 T 197 8' fill='none' stroke='%236c5ce7' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 calc(100% + 1px);
  background-size: 100% 0.42em;
  padding-bottom: 0.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Responsive + reduced motion for the new sections ───────────── */

@media (max-width: 940px) {
  .lp-pains__layout { grid-template-columns: 1fr; }
  .lp-pains__phone { margin-top: 10px; }
}

@media (max-width: 760px) {
  .lp-about__grid { grid-template-columns: 1fr; }
  /* Photo above the story on mobile, like the feature sections */
  .lp-about__media { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-phone__scroll { animation: none; }
  .lp-live__eyebrow .mock-live::after,
  .lp-find-ago .mock-live::after { animation: none; }
}

/* ── 9c. About us: second row for the lead engineer (2026-09-16) ── */
/* ── Variant A: second mirrored row + curved connector ─────────── */
.lp-about--duo .lp-about__grid--rev {
  grid-template-columns: 1fr 1.45fr;
  margin-top: clamp(56px, 8vw, 104px);
}
.lp-about--duo .lp-about__grid--rev h2 { margin-top: 0; }

/* Mirror the brand arc so it hugs the opposite side of the second portrait */
.lp-about__photo--alt::before { transform: scaleX(-1); }
.lp-about__photo--alt::after { inset: 12% 30% -12% -8%; }

@media (max-width: 760px) {
  .lp-about--duo .lp-about__grid--rev { grid-template-columns: 1fr; }
}


/* ── Přepínač jazyka ─────────────────────────────────────────────
   Jeden odkaz s vlajkou jazyka, do kterého se přepíná — v baru vedle
   přihlášení a dole v mobilní zásuvce. Záměrně tichý prvek: jediná
   výrazná akce v navigaci má zůstat trial. */

.lp-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity var(--transition), transform var(--transition);
}

.lp-lang:hover,
.lp-lang:focus-visible { opacity: 1; transform: translateY(-1px); }

.lp-lang__flag { width: 100%; height: 100%; display: block; }

/* V zásuvce je vlajka o kus větší, ať je na dotek trefitelná. */
.lp-drawer .lp-lang {
  align-self: flex-start;
  margin-top: 20px;
  width: 34px;
  height: 24px;
  opacity: 0.9;
}