/* ============================================================
   KOTH — landing.css   ·   Swiss editorial brutalist
   Left-aligned asymmetric grid, oversized Helvetica, hairline
   rules, indexed sections, mono data strips.
   ============================================================ */

.landing-root { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }

/* ── Nav ── */
.landing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: var(--paper); border-bottom: 2px solid var(--rule);
}
.landing-nav-brand {
  font-family: var(--display); font-size: 19px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text); text-transform: uppercase;
}
.landing-nav-brand strong { color: var(--accent); }
.landing-nav-links { display: flex; gap: 10px; align-items: center; }

/* ── Status strip (mono data row) ── */
.landing-status {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 64px; border-bottom: 2px solid var(--rule);
}
.ls-item { padding: 16px 24px; border-right: 1px solid var(--border); }
.ls-item:last-child { border-right: none; }
.ls-lbl  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--sub); text-transform: uppercase; }
.ls-val  { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text); margin-top: 6px; }
.ls-dot  { width: 9px; height: 9px; border-radius: 0; background: var(--muted); display: inline-block; margin-right: 8px; vertical-align: middle; }
.ls-dot.live { background: var(--accent); animation: pulse-dot 1.4s steps(1) infinite; }

/* ── Hero ── */
.landing-hero { position: relative; padding: 80px 32px 88px; border-bottom: 2px solid var(--rule); }
.landing-hero-inner { max-width: var(--shell); margin: 0 auto; }
.landing-index { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 28px; }
.landing-index::before { content: '[ '; color: var(--muted); }
.landing-index::after  { content: ' ]'; color: var(--muted); }
.landing-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--text); text-transform: uppercase; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.landing-title {
  font-family: var(--display); font-size: clamp(64px, 13vw, 184px);
  font-weight: 800; line-height: 0.86; letter-spacing: -0.04em;
  color: var(--text); text-transform: uppercase; margin: 0;
}
.landing-title-red { color: var(--accent); display: block; }
.landing-hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
@media(max-width:720px){ .landing-hero-row { grid-template-columns: 1fr; gap: 28px; } }
.landing-tagline { font-size: 16px; color: var(--sub); line-height: 1.65; max-width: 520px; }
.landing-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Features ── */
.landing-features { background: var(--paper); padding: 72px 32px; border-bottom: 2px solid var(--rule); }
.landing-features-inner { max-width: var(--shell); margin: 0 auto; }
.landing-sec-hdr { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.landing-sec-title { font-family: var(--display); font-size: clamp(34px,6vw,64px); font-weight: 800; color: var(--text); margin-bottom: 56px; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.95; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--text); border-left: 1px solid var(--text); }
@media(max-width:900px){ .features-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .features-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--paper); padding: 32px 28px 36px;
  border-right: 1px solid var(--text); border-bottom: 1px solid var(--text);
  position: relative; transition: background var(--transition);
  counter-increment: feat;
}
.feature-card::before { content: '0' counter(feat); position: absolute; top: 18px; right: 22px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.feature-card:hover { background: var(--card-hv); }
.feature-icon { width: 40px; height: 40px; border-radius: 0; background: transparent; border: 1.5px solid var(--text); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 22px; }
.feature-title { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; text-transform: uppercase; }
.feature-desc  { font-size: 13.5px; color: var(--sub); line-height: 1.6; }
.features-grid { counter-reset: feat; }

/* ── Closing CTA ── */
.landing-closing { padding: 88px 32px; border-bottom: 2px solid var(--rule); }
.landing-closing-inner { max-width: var(--shell); margin: 0 auto; }
.landing-closing h2 { font-family: var(--display); font-size: clamp(40px,8vw,104px); font-weight: 800; letter-spacing: -0.04em; color: var(--text); margin-bottom: 24px; text-transform: uppercase; line-height: 0.9; }
.landing-closing h2 span { color: var(--accent); }
.landing-closing .landing-tagline { margin-bottom: 32px; }

/* ── Footer ── */
.landing-footer {
  padding: 24px 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em;
}
.landing-footer-links { display: flex; gap: 24px; }
.landing-footer a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .landing-nav { padding: 0 20px; }
  .landing-footer { flex-direction: column; gap: 14px; text-align: center; }
  .landing-status { grid-template-columns: repeat(2, 1fr); }
  .landing-status .ls-item:nth-child(2) { border-right: none; }
}