/* landing.css — reusable landing / homepage styles (`lp-` prefix).
 *
 * Implements design/landing.md. Every colour comes from the lib tokens
 * (tokens.css) so light/dark flip for free on `.dark` / [data-theme=dark];
 * the ONE brand exception is the accent gradient, centralized below as
 * --lp-accent (a consumer may override it). Load AFTER tokens.css +
 * system.css. */

:root {
  /* The landing accent is the platform brand gradient (tokens.css), so
     landing pages stay on-brand and flip light/dark with it. Fallback keeps
     the prior value if --brand-gradient is somehow absent. */
  --lp-accent: var(--brand-gradient, linear-gradient(100deg, oklch(0.62 0.2 280), oklch(0.66 0.22 352)));
  --lp-container: 72rem;
  --lp-radius: 16px;
}

.lp-container {
  margin-inline: auto;
  max-width: var(--lp-container);
  padding-inline: 1.5rem;
}

/* Hero ------------------------------------------------------------------ */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: 6rem 1.5rem 3.5rem;
}
@media (min-width: 768px) {
  .lp-hero { padding: 8.5rem 1.5rem 5rem; }
}
/* Layered, theme-agnostic gradient wash — present but soft in both modes. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 50% -8%, oklch(0.66 0.22 300 / 0.22), transparent 72%),
    radial-gradient(34% 44% at 80% 6%, oklch(0.68 0.2 352 / 0.18), transparent 70%),
    radial-gradient(30% 40% at 16% 16%, oklch(0.62 0.2 250 / 0.16), transparent 70%);
}
.lp-hero-inner {
  margin-inline: auto;
  max-width: 54rem;
  animation: lp-rise 640ms var(--ease-spring) both;
}

.lp-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.lp-title {
  margin: 1.4rem 0 0;
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 6.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--foreground);
  text-wrap: balance;
}
.lp-title .lp-accent {
  display: block;
  background: var(--lp-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-subtitle {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  text-wrap: balance;
}
.lp-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Buttons --------------------------------------------------------------- */
.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  /* Primary landing CTA wears the brand gradient (was solid --primary). */
  background-image: var(--brand-gradient);
  color: var(--brand-gradient-fg, oklch(0.99 0 0));
  font: 600 var(--text-base) / 1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 150ms var(--ease-spring), box-shadow 150ms var(--ease-smooth), opacity 150ms;
}
.lp-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); }
.lp-cta:active { transform: translateY(0); }
.lp-cta--ghost {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: none;
}

/* Sections -------------------------------------------------------------- */
.lp-section { padding: 3.25rem 0; }
.lp-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.lp-section-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.lp-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.lp-section-sub {
  margin: 0.4rem 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-base);
}

/* Feature cards (selling points, shown large) --------------------------- */
.lp-features {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.lp-feature {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--lp-radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 170ms var(--ease-spring), box-shadow 170ms var(--ease-smooth), border-color 170ms;
}
/* Accent rule along the top edge ties the cards to the brand gradient. */
.lp-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lp-accent);
  opacity: 0.9;
}
.lp-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}
.lp-feature-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.lp-feature-body {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
}

/* Chips (models / clients / protocols) ---------------------------------- */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  color: var(--foreground);
  transition: transform 140ms var(--ease-spring), border-color 140ms, background-color 140ms;
}
.lp-chip:hover { transform: translateY(-1px); border-color: var(--muted-foreground); }
/* Lead / flagship items wear the brand gradient so they read first. */
.lp-chip.is-flagship {
  border-color: transparent;
  background: var(--lp-accent);
  color: oklch(0.99 0 0);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
.lp-chip.is-flagship:hover { border-color: transparent; }
.lp-note {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-inner { animation: none; }
  .lp-cta, .lp-feature, .lp-chip { transition: none; }
}