/* ============================================================
   KOTH — landing.css   ·   editorial layout on the Console theme
   Keeps the oversized-Helvetica editorial layout, but uses the
   platform's own palette (graphite + red), navbar included, so
   the landing is cohesive with the rest of the app. Follows the
   site theme (dark by default, light when toggled elsewhere).
   ============================================================ */

/* Only the display/body typeface is overridden — colours are inherited
   from the platform tokens so everything matches, including the nav. */
.landing-root {
  --display: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --sans:    'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; background: var(--black);
}

/* ── Nav (matches the platform nav: hairline border + blur) ── */
.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: 62px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.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: 8px; align-items: center; }

/* ── Status strip ── */
.landing-status {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 62px; border-bottom: 1px solid var(--border); background: var(--paper);
}
.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(--muted); 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: 999px; background: var(--muted); display: inline-block; margin-right: 8px; vertical-align: middle; }
.ls-dot.live { background: var(--accent); box-shadow: 0 0 0 3px var(--red-dim); animation: pulse-dot 1.6s ease-in-out infinite; }

/* ── Hero ── */
.landing-hero { position: relative; padding: 80px 32px 88px; border-bottom: 1px solid var(--border); }
.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(--sub); 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(--black); padding: 72px 32px; border-bottom: 1px solid var(--border); }
.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: 48px; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.95; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: feat; }
@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(--card); padding: 30px 26px 34px;
  border: 1px solid var(--border); border-radius: var(--radius);
  position: relative; transition: background var(--transition), border-color 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); border-color: var(--border2); }
.feature-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--red-dim); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); 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; }

/* ── Closing CTA ── */
.landing-closing { padding: 88px 32px; border-bottom: 1px solid var(--border); }
.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(--muted); 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; }
}