/* ═══════════════════════════════════════════════════════════════
   Landing page (home route) — Ved Gupta design system tokens only
   ═══════════════════════════════════════════════════════════════ */

/* Full-width shell: sidebar hidden (menu button opens it) */
body.view-landing .sidebar { transform: translateX(-100%); }
body.view-landing .sidebar.open { transform: translateX(0); }
body.view-landing .sidebar.open ~ .sidebar-overlay { display: block; }
body.view-landing .main { margin-left: 0; overflow-x: clip; }
body.view-landing .topbar__hamburger { display: grid; }
body.view-landing .main__content { max-width: 1120px; padding-top: 0; }

.landing { --landing-gap: clamp(64px, 9vw, 104px); }

/* ── Hero ───────────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  padding: clamp(64px, 11vw, 128px) 0 var(--space-8);
  text-align: center;
}
.landing-hero::before {
  /* faint grid + glow, monochrome */
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-muted), transparent 70%),
    linear-gradient(var(--divider) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--divider) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.landing-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 12px; margin-bottom: var(--space-6);
  font-size: var(--text-xs); font-family: var(--font-mono); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface);
}
.landing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-muted); }
.landing-hero__title {
  font-size: clamp(2.75rem, 7.5vw, 5rem);
  line-height: 1.02;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
  margin: 0 0 var(--space-5);
}
.landing-hero__subtitle { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--fg-muted); margin: 0 0 var(--space-8); }
.landing-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-items: center; }
.landing-btn { padding: 10px 18px; font-size: var(--text-sm); text-decoration: none; }
.landing-search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 9px 14px; font: inherit; font-size: var(--text-sm); color: var(--fg-muted); cursor: pointer;
  background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
.landing-search:hover { color: var(--fg); border-color: var(--border-focus); }
.landing-search kbd { font-family: var(--font-mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); }

.landing-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin: var(--space-12) auto 0; max-width: 820px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.landing-stats > div { padding: var(--space-5) var(--space-3); border-left: 1px solid var(--border); }
.landing-stats > div:first-child { border-left: 0; }
.landing-stats dt { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); color: var(--fg); font-variant-numeric: tabular-nums; }
.landing-stats dd { margin: 2px 0 0; font-size: var(--text-xs); color: var(--fg-muted); }

/* ── Sections ───────────────────────────────────────────────── */
.landing-section { padding-top: var(--landing-gap); }
.landing-section__title {
  font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.1;
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); color: var(--fg);
  margin: 0 0 var(--space-6);
}
.landing-link { display: inline-block; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--fg-muted); text-decoration: none; }
.landing-link:hover { color: var(--fg); }

/* ── Live demos ─────────────────────────────────────────────── */
.landing-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.landing-tab {
  font: inherit; font-size: var(--text-sm); padding: 7px 14px; cursor: pointer;
  color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--r-md);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.landing-tab:hover { color: var(--fg); border-color: var(--border-strong); }
.landing-tab.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.landing-demo { min-width: 0; overflow-x: auto; }
.landing-demo .simulator-card { margin: 0; }

/* ── Features ───────────────────────────────────────────────── */
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.landing-feature {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.landing-feature__icon {
  flex: 0 0 36px; height: 36px; display: grid; place-items: center; color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg);
}
.landing-feature__title { font-weight: var(--weight-medium); color: var(--fg); }

/* ── Builds ─────────────────────────────────────────────────── */
.landing-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.landing-build {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); text-decoration: none; color: var(--fg); font-weight: var(--weight-medium);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.landing-build span { color: var(--fg-faint); transition: color var(--dur-fast), transform var(--dur-fast); }
.landing-build:hover { border-color: var(--border-focus); }
.landing-build:hover span { color: var(--fg); transform: translateX(2px); }

/* ── Curriculum ─────────────────────────────────────────────── */
.landing-part { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); margin: var(--space-8) 0 var(--space-3); }
.landing-part:first-of-type { margin-top: 0; }
.landing-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.landing-module {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--space-3);
  padding: var(--space-4); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur-fast);
}
.landing-module:hover { border-color: var(--border-focus); }
.landing-module__num { grid-row: 1 / 3; font-family: var(--font-mono); font-size: var(--text-lg); color: var(--fg-faint); line-height: 1.2; }
.landing-module__title { font-weight: var(--weight-semibold); color: var(--fg); letter-spacing: var(--tracking-tight); }
.landing-module__meta { font-size: var(--text-xs); color: var(--fg-muted); }
.landing-module__bar { grid-column: 1 / -1; margin-top: var(--space-3); height: 3px; border-radius: 2px; background: var(--progress-track); overflow: hidden; }
.landing-module__bar span { display: block; height: 100%; background: var(--progress-fill); }

/* ── Closing ────────────────────────────────────────────────── */
.landing-closing {
  margin: var(--landing-gap) 0 var(--space-10); padding: var(--space-12) var(--space-6);
  text-align: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.landing-closing__title { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); margin: 0 0 var(--space-5); color: var(--fg); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .landing-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .landing-stats { grid-template-columns: repeat(2, 1fr); }
  .landing-stats > div { border-left: 0; border-top: 1px solid var(--border); }
  .landing-stats > div:nth-child(even) { border-left: 1px solid var(--border); }
  .landing-stats > div:nth-child(-n+2) { border-top: 0; }
  .landing-stats > div:last-child { grid-column: 1 / -1; }
  .landing-features { grid-template-columns: 1fr; }
  .landing-hero__actions .landing-btn, .landing-search { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-build, .landing-build span, .landing-tab { transition: none; }
}

/* Prerendered landing in index.html (hidden on deep links); reserve the demo's space until it mounts */
.no-shell .landing-shell { display: none; }
.landing-demo:empty { min-height: 420px; }