/* ============================================
   LANDING (index) — green-screen terminal hybrid
   Scoped to body.landing · lp- prefix avoids collisions
   with the shared .hero/.card/.hub components.
   ============================================ */

:root { --lp-teal: #4ecdc4; }

/* --- CRT screen: radial glow + scanline overlay (landing only) --- */
body.landing {
  background: radial-gradient(120% 100% at 50% -10%, var(--bg-secondary) 0%, var(--bg-primary) 60%);
  background-attachment: fixed;
}
body.landing::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.28;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,20,15,.2) 3px, rgba(0,0,0,0) 4px);
}

/* --- Layout shell: full height, terminal pushed low --- */
.landing main.lp-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Top bar --- */
.lp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3xl);
}
.lp-home {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}
.lp-home:hover { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), .4); }
/* match the header nav CLI style (lowercase mono, · separators, phosphor hover) */
.lp-meta { display: flex; align-items: baseline; }
.lp-meta a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  transition: color var(--transition-fast);
}
.lp-meta a:not(:last-child)::after { content: "·"; color: var(--text-muted); margin: 0 var(--space-sm); }
.lp-meta a:hover { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.4); }

/* --- Hero: nameplate only --- */
.lp-hero h1 {
  font-size: 40px;
  letter-spacing: 0.04em;
  margin: 0;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-role {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--accent-primary);
  margin: 7px 0 0;
  text-shadow: 0 0 14px rgba(var(--accent-primary-rgb), .4);
}

/* --- Pitch cards --- */
.lp-cards-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: var(--space-2xl) 0 var(--space-md);
}
.lp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.lp-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 104px;
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-md);
  background: var(--bg-surface);
  box-shadow: inset 0 0 36px rgba(0,40,40,.22);
  transition: all var(--transition-fast);
}
.lp-card:hover {
  border-color: var(--accent-primary);
  background: var(--bg-surface-hover);
  box-shadow: inset 0 0 36px rgba(0,60,60,.4), 0 0 18px rgba(var(--accent-primary-rgb), .12);
  transform: translateY(-2px);
}
.lp-card .lp-card-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-primary); }
.lp-card .lp-card-d { color: var(--text-muted); font-size: 12px; margin-top: 4px; line-height: 1.45; }
.lp-card .lp-card-go { color: var(--accent-secondary); font-size: 12px; margin-top: var(--space-sm); }
.lp-card:hover .lp-card-t, .lp-card:hover .lp-card-go { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), .35); }

/* --- Discreet browse row (full nav, stacks on mobile) --- */
.lp-browse {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-size: 12.5px;
}
.lp-browse-label { margin-right: var(--space-sm); }
.lp-browse a { color: var(--text-secondary); white-space: nowrap; }
.lp-browse a:not(:last-child)::after { content: "·"; color: var(--text-muted); margin: 0 var(--space-sm); }
.lp-browse a:hover { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), .4); }
.lp-browse a.lp-soon { color: var(--text-muted); cursor: default; }
.lp-browse a.lp-soon:hover { color: var(--text-muted); text-shadow: none; }

/* --- Spacer pushes terminal toward the lower half --- */
.lp-spacer { flex: 1; min-height: var(--space-xl); }

/* --- Terminal --- */
.lp-term-wrap { max-width: 640px; margin: var(--space-xl) auto 0; }
.lp-term-hint { color: var(--text-muted); font-size: 12px; margin: 0 0 var(--space-sm); }
.lp-term-hint b { color: var(--lp-teal); font-weight: 400; }
.lp-term {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  cursor: text;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 20px 50px rgba(0,0,0,.4), inset 0 0 60px rgba(0,40,40,.3);
}
.lp-term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.lp-dots { display: inline-flex; gap: 6px; }
.lp-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-secondary); opacity: .55; }
.lp-term-path { margin-left: 7px; color: var(--text-muted); font-size: 11.5px; }
.lp-term-body { padding: var(--space-md) 15px 12px; }
.lp-out { font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 4px; }
.lp-out .lp-sys { color: var(--text-secondary); }
.lp-out .lp-ok { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), .35); }
.lp-out .lp-ghost { color: var(--text-muted); }
.lp-out .lp-teal { color: var(--lp-teal); }
.lp-out .lp-echo { color: var(--text-primary); }
.lp-out .lp-src { color: var(--accent-secondary); font-size: 12px; }
.lp-out a { color: var(--lp-teal); }
.lp-out a:hover { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), .4); }
.lp-line { display: flex; align-items: center; gap: 9px; }
.lp-ps1 { color: var(--accent-primary); font-weight: 700; flex: none; text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), .35); }
.lp-inp {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font-body); font-size: 14px; caret-color: var(--accent-primary);
}
.lp-chips { margin-top: var(--space-sm); font-size: 12px; color: var(--text-muted); }
.lp-chip {
  display: inline-block; border: 1px solid var(--border-subtle); border-radius: 20px;
  padding: 2px 10px; margin: 3px 5px 0 0; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 12px; background: none; cursor: pointer;
  transition: all var(--transition-fast);
}
.lp-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* --- Footer terminal strip (site-wide; expands on focus / on contacts) --- */
.site-term-footer { margin-top: var(--space-2xl); }
/* footer terminal spans the page's content width (matches .container) */
.stf-inner { width: min(100% - (2 * var(--gutter)), var(--shell-max)); margin: 0 auto; padding: 0 0 var(--space-2xl); }
/* copyright integrated into the terminal's top bar (right side) */
.lp-term-copy { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); letter-spacing: 0.02em; }

/* section nav under the footer terminal — left-aligned; mobile only (header carries it on desktop) */
.stf-browse { justify-content: flex-start; margin: var(--space-md) 0 0; }
.lp-browse a.lp-here { color: var(--accent-primary); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.35); }
@media (min-width: 901px) { .stf-browse { display: none; } }

/* footer terminal keeps the same windowed contour as the landing terminal
   (border + glow + ~/ bar) for coherence; just collapsed to the prompt by default */
.lp-term.st { cursor: text; }
.lp-term.st .lp-out,
.lp-term.st .lp-chips {
  max-height: 0; overflow: hidden; opacity: 0; margin: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}
.lp-term.st.st-expanded .lp-out { max-height: 60vh; overflow-y: auto; opacity: 1; margin-bottom: var(--space-sm); }
.lp-term.st.st-expanded .lp-chips { max-height: 48px; opacity: 1; margin-top: var(--space-sm); }

/* --- Mobile: stack cards and browse row --- */
@media (max-width: 560px) {
  .lp-hero h1 { font-size: 32px; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-browse { flex-direction: column; }
  .lp-browse-label { margin: 0 0 var(--space-sm); }
  .lp-browse a { padding: 5px 0; }
  .lp-browse a:not(:last-child)::after { content: none; }
}