/* ---------------------------------------------------------------------------
 * Spring Voyage — marketing layer.
 *
 * `colors_and_type.css` is the sync point with the product portal
 * (src/Cvoya.Spring.Web/src/app/globals.css) and is NOT modified here.
 *
 * The portal is a dashboard: zinc-950 + blue is right for it. The marketing
 * site is a brand surface, so it lives in the brand's own world instead — the
 * palette the token file already declares as "brand-extension (marketing +
 * logo-derived)" and which the site never actually committed to:
 *
 *   --sv-starfield    the night sky behind the halo   -> the ground
 *   --sv-voyage-cyan  the halo ring                   -> the action colour
 *   --sv-blossom      the cherry-blossom sail         -> the second voice
 *
 * Measured against the starfield ground:
 *   fg #fafafa 18.0:1 · cyan 12.7:1 · blossom 11.1:1 · muted #a1a1aa 7.3:1
 * Don't lighten the ground or dim the muted without re-checking.
 * --------------------------------------------------------------------------- */

:root {
  /* Ground — the starfield, not the app's zinc-950. */
  --m-bg: var(--sv-starfield);
  --m-bg-deep: #070b1c;
  --m-raised: var(--sv-hull);

  --m-fg: var(--sv-fg);
  --m-muted: var(--sv-muted-fg);

  --m-cyan: var(--sv-voyage-cyan);
  --m-blossom: var(--sv-blossom);

  --m-line: rgb(250 250 250 / 10%);
  --m-line-hi: rgb(94 232 238 / 28%);

  --m-wrap: 1120px;
  --m-prose: 68ch;

  /* Varied rhythm — not one uniform section pad. */
  --m-section: clamp(4.5rem, 9vw, 7.5rem);
  --m-section-tight: clamp(3rem, 6vw, 4.5rem);

  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic stacking order. */
  --m-z-nav: 50;
  --m-z-skip: 100;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--m-bg);
  color: var(--m-fg);
  font-size: var(--sv-text-base);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--m-cyan); }

.wrap {
  max-width: var(--m-wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--m-z-skip);
  background: var(--m-cyan);
  color: var(--m-bg);
  text-decoration: none;
}
.skip:focus { left: 1.5rem; top: 0.75rem; padding: 0.625rem 1rem; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--m-z-nav);
  background: rgb(11 16 40 / 82%);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--m-line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: var(--sv-weight-semibold);
  color: var(--m-fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img { width: 30px; height: 30px; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.875rem, 2vw, 1.5rem);
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  font-size: var(--sv-text-sm);
  color: var(--m-muted);
  text-decoration: none;
  transition: color 0.25s var(--m-ease);
}
.nav-links a:hover,
.nav-links a[aria-current='page'] { color: var(--m-fg); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--sv-radius-md);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--m-ease), border-color 0.25s var(--m-ease);
}
/* The action colour is the halo, not the app's blue. Dark ink on cyan: 12.7:1. */
.btn-primary {
  background: var(--m-cyan);
  color: var(--m-bg);
  font-weight: var(--sv-weight-semibold);
}
.btn-primary:hover { background: var(--sv-voyage-cyan-soft); }
.btn-ghost {
  color: var(--m-fg);
  border-color: var(--m-line);
}
.btn-ghost:hover { border-color: var(--m-line-hi); background: rgb(94 232 238 / 6%); }
.btn-lg { padding: 0.8125rem 1.375rem; font-size: var(--sv-text-base); }
.gh-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0 var(--m-section);
  text-align: center;
  overflow: hidden;
}
/* The halo is in the logo; let it bleed into the page behind the boat. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgb(94 232 238 / 10%), transparent 55%),
    radial-gradient(circle at 50% 26%, rgb(244 182 201 / 7%), transparent 42%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-mark {
  width: clamp(180px, 26vw, 300px);
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--sv-radius-full);
  box-shadow: var(--sv-shadow-glow);
}
.hero h1 {
  font-family: var(--sv-font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: var(--sv-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 auto;
  max-width: 17ch;
  text-wrap: balance;
}
.hero .lede {
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  max-width: 56ch;
  font-size: var(--sv-text-xl);
  line-height: 1.55;
  color: var(--m-muted);
  text-wrap: pretty;
}
.hero-ctas {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ── Install: the CTA a developer actually wants ───────────────────────── */
.install {
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  max-width: 660px;
  text-align: left;
}
.install-label {
  display: block;
  font-size: var(--sv-text-xs);
  color: var(--m-muted);
  margin-bottom: 0.5rem;
}
.install pre {
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--m-bg-deep);
  border: 1px solid var(--m-line);
  border-radius: var(--sv-radius-md);
  overflow-x: auto;
}
.install code {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-term-fg);
  white-space: pre;
}
.install .prompt { color: var(--m-cyan); user-select: none; }

/* ── Sections ──────────────────────────────────────────────────────────── */
/* No uppercase tracked eyebrow above every heading, and no 01/02/03 markers.
   The headings carry it. */
.section {
  padding: var(--m-section) 0;
  border-top: 1px solid var(--m-line);
}
.section-tight { padding: var(--m-section-tight) 0; }

.section-title {
  font-family: var(--sv-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--sv-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 24ch;
  text-wrap: balance;
}
.section-lede {
  margin: 0;
  max-width: var(--m-prose);
  font-size: var(--sv-text-xl);
  line-height: 1.55;
  color: var(--m-muted);
  text-wrap: pretty;
}
.section-lede strong { color: var(--m-fg); font-weight: var(--sv-weight-semibold); }
.section-lede a { text-underline-offset: 3px; }

/* ── Primitives: hairline rows, not a card grid ────────────────────────── */
.primitives {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
}
.primitive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 3rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-top: 1px solid var(--m-line);
}
.primitive:last-child { border-bottom: 1px solid var(--m-line); }
@media (min-width: 820px) {
  .primitive { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.primitive h3 {
  margin: 0;
  font-size: var(--sv-text-xl);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--m-fg);
  align-self: start;
}
.primitive p {
  margin: 0;
  color: var(--m-muted);
  line-height: 1.65;
  text-wrap: pretty;
}
.primitive p + p { margin-top: 0.75rem; }
.primitive strong { color: var(--m-fg); font-weight: var(--sv-weight-medium); }
.primitive code { color: var(--m-blossom); }

/* ── Initiative: a genuine ordered spectrum ────────────────────────────────
   Order earns its place here because the order IS the information — each level
   grants strictly more autonomy than the last. This is the one sequence on the
   site; it is not scaffolding applied to every section. The cyan warms as
   autonomy rises. */
.spectrum {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border: 1px solid var(--m-line);
  border-radius: var(--sv-radius-lg);
  overflow: hidden;
}
.level {
  padding: 1.5rem 1.375rem 1.625rem;
  border-top: 3px solid rgb(94 232 238 / var(--heat));
  background: linear-gradient(180deg, rgb(94 232 238 / calc(var(--heat) * 0.09)), transparent 65%);
}
.level + .level { border-left: 1px solid var(--m-line); }
@media (max-width: 719px) {
  .level + .level { border-left: 0; border-top-width: 3px; }
}
.level-name {
  margin: 0 0 0.5rem;
  font-size: var(--sv-text-lg);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--m-fg);
}
.level p {
  margin: 0;
  font-size: var(--sv-text-sm);
  color: var(--m-muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.level p.level-eg {
  margin-top: 0.875rem;
  font-size: var(--sv-text-xs);
  line-height: 1.5;
  color: var(--m-blossom);
}

/* ── Surfaces (CLI / portal / A2A) ─────────────────────────────────────── */
.surfaces {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.surface {
  padding: 1.5rem;
  background: var(--m-raised);
  border: 1px solid var(--m-line);
  border-radius: var(--sv-radius-lg);
}
.surface h3 {
  margin: 0 0 0.5rem;
  font-size: var(--sv-text-lg);
  font-weight: var(--sv-weight-semibold);
  color: var(--m-fg);
}
.surface p {
  margin: 0;
  font-size: var(--sv-text-sm);
  color: var(--m-muted);
  line-height: 1.6;
}
.surface code { color: var(--m-blossom); }

/* ── Licence panel — quiet, and honest ─────────────────────────────────── */
.licence {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--m-raised);
  border: 1px solid var(--m-line);
  border-radius: var(--sv-radius-lg);
}
.licence h3 {
  margin: 0 0 0.625rem;
  font-size: var(--sv-text-lg);
  font-weight: var(--sv-weight-semibold);
  color: var(--m-fg);
}
.licence p {
  margin: 0 0 0.75rem;
  max-width: var(--m-prose);
  color: var(--m-muted);
  line-height: 1.65;
  text-wrap: pretty;
}
.licence p:last-child { margin-bottom: 0; }
.licence strong { color: var(--m-fg); font-weight: var(--sv-weight-medium); }
.licence .converts { color: var(--m-blossom); }

/* ── Page head (interior pages) ────────────────────────────────────────── */
.page-head {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.page-head h1 {
  font-family: var(--sv-font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: var(--sv-weight-bold);
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.page-head .lede {
  margin: 1.25rem 0 0;
  max-width: 60ch;
  font-size: var(--sv-text-xl);
  line-height: 1.55;
  color: var(--m-muted);
  text-wrap: pretty;
}

/* ── Prose (interior pages) ────────────────────────────────────────────── */
.prose { max-width: var(--m-prose); }
.prose h2 {
  font-size: var(--sv-text-2xl);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: -0.02em;
  margin: clamp(2.5rem, 5vw, 3.25rem) 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--m-line);
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose ul { color: var(--m-muted); line-height: 1.7; text-wrap: pretty; }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.125rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--m-cyan); }
.prose strong { color: var(--m-fg); font-weight: var(--sv-weight-semibold); }
.prose code { color: var(--m-blossom); }
.prose a { text-underline-offset: 3px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--m-line);
  background: var(--m-bg-deep);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.foot-brand { max-width: 34ch; }
.foot-brand p {
  margin: 0.875rem 0 0;
  font-size: var(--sv-text-sm);
  color: var(--m-muted);
  line-height: 1.6;
}
.by-cvoya {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  font-size: var(--sv-text-xs);
  color: var(--m-muted);
  text-decoration: none;
}
.by-cvoya img { height: 16px; width: auto; opacity: 0.85; }
.by-cvoya:hover img { opacity: 1; }

.foot-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.foot-col h4 {
  margin: 0 0 0.25rem;
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-semibold);
  color: var(--m-fg);
}
.foot-col a {
  font-size: var(--sv-text-sm);
  color: var(--m-muted);
  text-decoration: none;
  transition: color 0.25s var(--m-ease);
}
.foot-col a:hover { color: var(--m-fg); }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--m-line);
  font-size: var(--sv-text-xs);
  color: var(--m-muted);
}
.foot-bottom p { margin: 0; }
.foot-bottom a { color: var(--m-muted); text-decoration: none; }
.foot-bottom a:hover { color: var(--m-fg); }

/* ── Motion ────────────────────────────────────────────────────────────────
   One page-load sequence, hero only. Nothing on scroll. Applied inside
   no-preference with `backwards` fill, so if it never runs the content is
   already visible — visibility is never gated on a transition. */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark,
  .hero h1,
  .hero .lede,
  .hero-ctas,
  .hero .install {
    animation: rise 900ms var(--m-ease) backwards;
  }
  .hero-mark { animation-duration: 1200ms; }
  .hero h1 { animation-delay: 100ms; }
  .hero .lede { animation-delay: 190ms; }
  .hero-ctas { animation-delay: 270ms; }
  .hero .install { animation-delay: 350ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  :root {
    --m-bg: #fff;
    --m-bg-deep: #fff;
    --m-raised: #fff;
    --m-fg: #0b1028;
    --m-muted: #3f4657;
    --m-cyan: #0b6d75;
    --m-blossom: #9c4767;
    --m-line: rgb(11 16 40 / 22%);
  }

  body { background: #fff; color: var(--m-fg); }

  .nav { position: static; background: none; backdrop-filter: none; }
  .nav-links,
  .skip,
  .hero-ctas { display: none; }

  .hero { padding-top: 1rem; overflow: visible; }
  .hero::before { display: none; }
  .hero-mark { width: 140px; box-shadow: none; }

  .foot { background: none; }
  .install pre,
  .surface,
  .licence { background: #f4f5f8; }

  a { text-decoration: underline; }
}