/*
  landing2.css — premium minimalist landing for /landing2.

  Scoped under #l2-root so nothing escapes to the rest of the site. All
  bespoke visuals live here (grain, mesh gradient, card-sort keyframes,
  oversized type scale); standard Tailwind utilities handle the rest in
  the template.

  Note: the global site header is hidden when #l2-root is present via
  a CSS-only rule below — no base.html change needed.
*/

/* Kill the default site chrome while the landing page owns the viewport */
body:has(#l2-root) > header { display: none !important; }
body:has(#l2-root) > main   { padding: 0 !important; max-width: none !important; }

#l2-root {
  --l2-bg:        #FAFAF7;
  --l2-surface:   #FFFFFF;
  --l2-ink:       #0B0D10;       /* near-black, not pure */
  --l2-ink-soft:  #4B5563;
  --l2-ink-mute:  #9CA3AF;
  --l2-line:      #E5E7EB;
  --l2-line-soft: #F0EFEA;
  --l2-accent:    #2563EB;
  --l2-accent-2:  #1D4ED8;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--l2-ink);
  background: var(--l2-bg);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  line-height: 1.45;
}

/* Ambient mesh gradient — two blurred radial blobs that slowly drift.
   Performance: animates background-position only, no layout thrash. */
#l2-root::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(48vmax 40vmax at 8% 12%,  rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(52vmax 42vmax at 92% 88%, rgba(99, 102, 241, 0.08), transparent 62%),
    radial-gradient(40vmax 34vmax at 80% 20%, rgba(16, 185, 129, 0.05), transparent 60%);
  animation: l2-drift 28s ease-in-out infinite alternate;
  filter: blur(4px);
}
@keyframes l2-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.00); }
  to   { transform: translate3d( 2%,  2%, 0) scale(1.05); }
}

/* Film-grain overlay — inline SVG turbulence at 3% opacity.
   Fixed position, pointer-events none. Cheap on GPU. */
#l2-root::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* All real content sits on z=2, above the grain + mesh */
#l2-root > * { position: relative; z-index: 2; }

/* ── Nav ─────────────────────────────────────────────────────────── */

.l2-nav {
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  max-width: 1280px; margin: 0 auto;
}
@media (min-width: 768px) { .l2-nav { padding: 0 40px; } }

.l2-logo {
  font-weight: 700; font-size: 20px;
  color: var(--l2-ink); text-decoration: none;
  letter-spacing: -0.02em;
}

.l2-nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--l2-ink); color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.l2-nav-cta:hover { background: #000; transform: translateY(-1px); }

/* ── Section shell ───────────────────────────────────────────────── */

.l2-section {
  padding: 64px 20px;
  max-width: 1280px; margin: 0 auto;
}
@media (min-width: 768px) { .l2-section { padding: 112px 40px; } }
@media (min-width: 1100px) { .l2-section { padding: 140px 48px; } }

/* ── Hero ────────────────────────────────────────────────────────── */

.l2-hero { padding-top: 36px; }
@media (min-width: 768px) { .l2-hero { padding-top: 72px; } }

.l2-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--l2-ink-soft);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.l2-eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 9999px;
  background: var(--l2-accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  flex-shrink: 0;
  animation: l2-eyebrow-glow 2.4s ease-in-out infinite;
}
@keyframes l2-eyebrow-glow {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14),
                0 0 0 0  rgba(37, 99, 235, 0.00);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.22),
                0 0 14px 4px rgba(37, 99, 235, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .l2-eyebrow::before { animation: none; }
}

.l2-h1 {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--l2-ink);
  margin: 0 0 24px;
  max-width: 18ch;
}
.l2-h1 .l2-h1-accent {
  background: linear-gradient(110deg, var(--l2-accent) 20%, #7c3aed 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.l2-subhead {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.5;
  color: var(--l2-ink-soft);
  max-width: 52ch;
  margin: 0 0 36px;
}

.l2-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.l2-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--l2-ink); color: #fff;
  padding: 14px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.l2-cta:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.l2-cta-arrow { transition: transform .18s ease; }
.l2-cta:hover .l2-cta-arrow { transform: translateX(3px); }

.l2-ghost {
  font-size: 14px; font-weight: 500;
  color: var(--l2-ink-soft); text-decoration: none;
  padding: 10px 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.l2-ghost:hover { color: var(--l2-ink); border-color: var(--l2-ink-mute); }

.l2-trust-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 28px;
  font-size: 13px; color: var(--l2-ink-mute);
}
.l2-trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.l2-trust-row svg { width: 14px; height: 14px; color: #16a34a; }

/* ── Sorting-card animation ──────────────────────────────────────── */

.l2-cards {
  margin-top: 56px;
  display: grid;
  /* minmax(0, 1fr) keeps grid tracks from expanding past the container when
     card content is wider than the track — prevents the rightmost cards'
     border from getting clipped on narrow mobile viewports. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 880px;
  /* Positioning context for the ambient orb canvas that sits behind the cards. */
  position: relative;
  isolation: isolate;
}
@media (min-width: 640px) { .l2-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .l2-cards { gap: 18px; margin-top: 72px; } }

/* Mobile (<640px): show only 4 of the 6 cards — Praha, Brno, Pardubice,
   Liberec — so the hero stays punchy instead of scroll-heavy. Also opens
   up internal card spacing + lets the name wrap to 2 lines instead of
   being aggressively truncated inside a narrow 150-170 px card. */
@media (max-width: 639px) {
  .l2-card[data-card-idx="2"],  /* Ostrava */
  .l2-card[data-card-idx="4"]   /* Plzeň */
  { display: none; }

  .l2-card { padding: 16px 14px; gap: 10px; }
  .l2-card-loc { line-height: 1.35; }

  /* Hide the apartment name on mobile — cards become shorter and the
     hierarchy (location → stats → price) reads more balanced in a
     narrow column. The name is still useful on desktop but it's the
     first thing to drop when real estate is tight. */
  .l2-card-name { display: none; }

  /* Meta on two clean lines: dispozice+area on line 1, Kč/m² on line 2. */
  .l2-card-meta {
    row-gap: 2px;
    line-height: 1.4;
    font-size: 11.5px;
  }

  /* Price a touch bolder so it anchors the bottom of the card. */
  .l2-card-price { font-size: 15.5px; margin-top: 2px; }

  /* Score badge stays legible but slightly tighter. */
  .l2-score { font-size: 20px; padding: 5px 9px; min-width: 40px; }
}

/* Cards establish their own stacking context — hover pop sits above siblings. */
.l2-card { z-index: 1; }
#l2-root.l2-settled .l2-card:hover { z-index: 3; }

.l2-card {
  background: var(--l2-surface);
  border: 1px solid var(--l2-line);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  /* min-width: 0 inside the grid so meta text can overflow-hide rather than
     force the track wider than its minmax(0, 1fr) allowance. Paired with the
     grid-template-columns fix above, this keeps the rightmost card's border
     fully inside the viewport on narrow mobile layouts. */
  min-width: 0;
  box-sizing: border-box;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#l2-root.l2-ready .l2-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Stagger the cards on entry — each gets its own delay. Uses nth-of-type
   because the first child of .l2-cards is the <canvas> orb layer — so
   nth-child indexes would be off-by-one relative to the 6 <article> cards. */
#l2-root.l2-ready .l2-card:nth-of-type(1) { transition-delay: 0.00s, 0.25s; }
#l2-root.l2-ready .l2-card:nth-of-type(2) { transition-delay: 0.07s, 0.32s; }
#l2-root.l2-ready .l2-card:nth-of-type(3) { transition-delay: 0.14s, 0.39s; }
#l2-root.l2-ready .l2-card:nth-of-type(4) { transition-delay: 0.21s, 0.46s; }
#l2-root.l2-ready .l2-card:nth-of-type(5) { transition-delay: 0.28s, 0.53s; }
#l2-root.l2-ready .l2-card:nth-of-type(6) { transition-delay: 0.35s, 0.60s; }

.l2-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.l2-card-loc { font-size: 12px; color: var(--l2-ink-mute); font-weight: 500; }
.l2-score {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; color: var(--l2-ink);
  padding: 6px 10px; border-radius: 8px;
  background: #F3F4F6;
  min-width: 44px; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Tiered score colors — mirror the app's score badge scale.
   70-100 = green, 50-69 = yellow/amber, 0-49 = red. */
.l2-score.tier-high {
  background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
  color: #14532D;
}
.l2-score.tier-mid {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
}
.l2-score.tier-low {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: #991B1B;
}
.l2-card-name {
  font-size: 14px; font-weight: 600; color: var(--l2-ink);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l2-card-meta {
  font-size: 12px; color: var(--l2-ink-soft);
  display: flex; gap: 8px;
  /* Allow wrap so "58 m² · 124 000 Kč/m²" drops to a second line on narrow
     mobile widths rather than forcing the card wider than its track. */
  flex-wrap: wrap;
  row-gap: 2px;
}
.l2-card-price {
  margin-top: 2px;
  font-size: 15px; font-weight: 700; color: var(--l2-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Top "high-tier" card (94 score) gets a subtle breathing halo after the initial sort.
   nth-of-type again — the <canvas> is .l2-cards > *:first-child, not a card. */
#l2-root.l2-ready .l2-card:nth-of-type(1) .l2-score.tier-high {
  animation: l2-pulse 2.8s ease-in-out 2s infinite;
}
@keyframes l2-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.0); }
  50%     { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.10); }
}

/* ── Card hover: pop + tier-colored glow (inspired by /landing's
      workflow boxes). Only arms once the sort animation has settled
      (.l2-settled is added ~1.8s after DOM ready) — otherwise the
      1.15s sort transition makes hover feel sluggish.

      Selector uses :nth-child(n) so the specificity (1,3,0) MATCHES
      the per-card stagger-delay rules above (.l2-ready .l2-card:nth-
      child(N)), and since this rule is later in source it wins the
      cascade tiebreak. The `transition` shorthand resets transition-
      delay to 0s, which is the whole point — without this the stagger
      delays (0.21s, 0.28s, 0.35s on cards 4/5/6) would leak into
      hover and those cards would feel laggy. */
#l2-root.l2-settled .l2-card:nth-child(n) {
  transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .3s ease,
              border-color .3s ease;
}
#l2-root.l2-settled .l2-card:hover {
  transform: translateY(-6px) scale(1.03);
  z-index: 2;
}
/* Tier-scoped glow colors: green for ≥70, amber for 50–69, rose for <50 */
#l2-root.l2-settled .l2-card.card-tier-high:hover {
  border-color: rgba(22, 163, 74, 0.55);
  box-shadow:
    0 18px 42px rgba(22, 163, 74, 0.22),
    0 0 0 1px rgba(22, 163, 74, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.06);
}
#l2-root.l2-settled .l2-card.card-tier-mid:hover {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow:
    0 18px 42px rgba(245, 158, 11, 0.24),
    0 0 0 1px rgba(245, 158, 11, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.06);
}
#l2-root.l2-settled .l2-card.card-tier-low:hover {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow:
    0 18px 42px rgba(239, 68, 68, 0.24),
    0 0 0 1px rgba(239, 68, 68, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ── Scanned state: card currently under the ambient orb ──────────
   Tier-coloured glow, visibly softer than :hover so a hovered card
   always wins the visual battle. The existing .l2-card transition
   (box-shadow .3s, border-color .3s) handles the fade in/out when
   JS toggles .l2-card-scanned on/off. */
#l2-root.l2-settled .l2-card.card-tier-high.l2-card-scanned {
  border-color: rgba(22, 163, 74, 0.40);
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.18),
    0 8px 22px rgba(22, 163, 74, 0.14);
}
#l2-root.l2-settled .l2-card.card-tier-mid.l2-card-scanned {
  border-color: rgba(245, 158, 11, 0.40);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.18),
    0 8px 22px rgba(245, 158, 11, 0.16);
}
#l2-root.l2-settled .l2-card.card-tier-low.l2-card-scanned {
  border-color: rgba(239, 68, 68, 0.40);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.18),
    0 8px 22px rgba(239, 68, 68, 0.16);
}

/* ── Section 2 — The Moment ──────────────────────────────────────── */

.l2-moment {
  border-top: 1px solid var(--l2-line-soft);
  padding-top: 120px;
}
.l2-moment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .l2-moment-grid { grid-template-columns: minmax(320px, 1.1fr) minmax(0, 1fr); gap: 80px; }
}

.l2-big-score {
  font-weight: 900;
  font-size: clamp(9rem, 24vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, var(--l2-ink) 30%, var(--l2-accent) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.l2-big-score-caption {
  font-size: 12px;
  color: var(--l2-ink-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 600;
}
.l2-moment-copy h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--l2-ink);
}
.l2-moment-copy p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--l2-ink-soft);
  margin: 0 0 16px;
  max-width: 48ch;
}
.l2-moment-copy ul {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 14px;
}
.l2-moment-copy li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--l2-ink);
  line-height: 1.45;
}
.l2-moment-copy li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--l2-accent);
  margin-top: 9px; flex-shrink: 0;
}

/* ── Section 3 — Proof ───────────────────────────────────────────── */

.l2-proof {
  border-top: 1px solid var(--l2-line-soft);
  text-align: center;
}
.l2-proof-kicker {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--l2-ink-mute);
  margin-bottom: 48px;
}
.l2-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) { .l2-proof-grid { grid-template-columns: repeat(3, 1fr); } }

.l2-proof-num {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--l2-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.l2-proof-label {
  font-size: 14px;
  color: var(--l2-ink-soft);
  max-width: 22ch;
  margin: 0 auto;
  line-height: 1.4;
}

/* ── Section 4 — Close ───────────────────────────────────────────── */

.l2-close {
  border-top: 1px solid var(--l2-line-soft);
  text-align: center;
  padding-top: 96px;
  padding-bottom: 72px;
}
@media (min-width: 768px) {
  .l2-close { padding-top: 120px; padding-bottom: 88px; }
}
.l2-close h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  color: var(--l2-ink);
}
.l2-close p {
  font-size: 17px;
  color: var(--l2-ink-soft);
  margin: 0 auto 28px;
  max-width: 44ch;
  line-height: 1.55;
}
.l2-close .l2-cta {
  font-size: 17px;
  padding: 18px 30px;
  animation: l2-breathe 3s ease-in-out 1s infinite;
}
@keyframes l2-breathe {
  0%,100% { box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 0 rgba(37, 99, 235, 0); }
  50%     { box-shadow: 0 8px 24px rgba(37, 99, 235, 0.22), 0 0 0 0 rgba(37, 99, 235, 0); }
}
/* Specificity bump: `.l2-close p { margin: 0 auto 28px }` above sits
   at (0,2,1), so a bare `.l2-close-microcopy` (0,1,0) loses the margin
   battle and renders with 0 gap above. Qualifying with `p.` bumps this
   rule to (0,2,1) AND later in source, so it wins cleanly. */
.l2-close p.l2-close-microcopy {
  margin: 80px auto 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--l2-ink-mute);
}

/* ── Scroll reveal ───────────────────────────────────────────────── */

.l2-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(0.22,1,0.36,1),
              transform .8s cubic-bezier(0.22,1,0.36,1);
  will-change: transform, opacity;
}
.l2-reveal.l2-seen { opacity: 1; transform: translateY(0); }

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #l2-root::before { animation: none; }
  #l2-root.l2-ready .l2-card { transition-duration: 0s; }
  #l2-root.l2-settled .l2-card:hover { transform: none; }
  .l2-close .l2-cta { animation: none; }
  .l2-reveal { opacity: 1; transform: none; transition: none; }
  #l2-root.l2-ready .l2-card:nth-of-type(1) .l2-score { animation: none; }
}

/* ── Admin preview badge (top-right) ─────────────────────────────── */

.l2-preview-pill {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 1000;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.l2-preview-pill::before {
  content: "";
  width: 6px; height: 6px; border-radius: 9999px;
  background: #f59e0b;
}