/*
 * CRST Strategy site. Colours, sizes and radii come from tokens.css (Valora's "Sinal" system plus the suite
 * accents); this file writes no colour literal. Layout follows Valora's docs/DESIGN.md: floating cards on the page
 * background, the dotted field and one soft glow at the top right, Jost for titles, IBM Plex Sans for text.
 */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jost-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

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

html {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  background: var(--color-bg);
  position: relative;
  overflow-x: hidden;
}

/* The dotted field and the glow (DESIGN.md §5): page background only, top right, never behind a card's text. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  background-image: radial-gradient(var(--color-dots) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: var(--dots-opacity);
  mask-image: radial-gradient(ellipse at 85% 0%, var(--color-bg) 0, transparent 62%);
  pointer-events: none;
}

/* Drawn from the top right corner itself, so nothing sticks out past the window and the page never scrolls sideways. */
body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 78% 8%, var(--color-glow) 0%, transparent 52%);
  pointer-events: none;
}

a {
  color: var(--color-link);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.page {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 var(--shell-gap);
}

/* ── Header ───────────────────────────────────────────────────────────────────────────── */

.site-header {
  padding: 28px 0 0;
}

.site-header img {
  display: block;
  width: 250px;
  height: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────────────────────── */

.hero {
  padding: 72px 0 48px;
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-action);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.hero .lead {
  margin: var(--space-5) 0 0;
  max-width: 620px;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-2);
}

/* ── Cards ────────────────────────────────────────────────────────────────────────────── */

.apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--shell-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.app {
  --accent: var(--accent-valora);
  --accent-mid: var(--accent-valora-mid);
  --accent-glow: var(--accent-valora-glow);
  --accent-soft: var(--accent-valora-soft);
  --accent-border: var(--accent-valora-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-card);
}

.app--selara {
  --accent: var(--accent-selara);
  --accent-mid: var(--accent-selara-mid);
  --accent-glow: var(--accent-selara-glow);
  --accent-soft: var(--accent-selara-soft);
  --accent-border: var(--accent-selara-border);
}

.app--norteia {
  --accent: var(--accent-norteia);
  --accent-mid: var(--accent-norteia-mid);
  --accent-glow: var(--accent-norteia-glow);
  --accent-soft: var(--accent-norteia-soft);
  --accent-border: var(--accent-norteia-border);
}

.app--prevera {
  --accent: var(--accent-prevera);
  --accent-mid: var(--accent-prevera-mid);
  --accent-glow: var(--accent-prevera-glow);
  --accent-soft: var(--accent-prevera-soft);
  --accent-border: var(--accent-prevera-border);
}

.app-art {
  position: relative;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-inset);
}

.app-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, var(--accent-glow) 0%, transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}

.app-art svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 28px 32px 32px;
}

.app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.app-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.app h2 {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.app h2 .tag {
  color: var(--color-text-2);
}

.app-desc {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-2);
}

.app-foot {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* Status pills: an open app's in its accent with a check; one in construction neutral with the dashed ring that marks
   an upcoming step in Valora's cycle progress (DESIGN.md §6). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-inset);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-2);
  white-space: nowrap;
}

.pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.pill--live {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

/* The page's one primary button: Valora's (DESIGN.md §6 Buttons). */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration) var(--ease);
}

.button svg {
  width: 16px;
  height: 16px;
}

.button--primary {
  background: var(--color-action);
  color: var(--color-on-action);
  box-shadow: var(--shadow-action);
}

.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px var(--accent-glow), var(--shadow-action);
}

.soon {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

/* ── Drawings: the mesh of dots, with the app's story lit in its accent (tools/draw.py) ─────────────────────── */

.mesh {
  fill: var(--color-mesh);
  opacity: var(--mesh-opacity);
}

.lit {
  fill: var(--accent-mid);
}

/* The fade of the CRST mark: each step away from the signal is weaker (brand README, "Dot step"). */
.s1 { opacity: 0.8; }
.s2 { opacity: 0.66; }
.s3 { opacity: 0.54; }
.s4 { opacity: 0.44; }
.s5 { opacity: 0.36; }
.s6 { opacity: 0.3; }

.trace {
  fill: none;
  stroke: var(--accent-mid);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.guide {
  fill: none;
  stroke: var(--color-text-3);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.7;
}

.signal {
  fill: var(--accent);
}

.halo {
  fill: var(--accent);
  opacity: 0.12;
}

.ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.55;
}

.hollow {
  fill: var(--color-inset);
  stroke: var(--accent-mid);
  stroke-width: 1.5;
}

/* ── Footer ───────────────────────────────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: 56px;
  padding: var(--space-6) 0 40px;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.site-footer p {
  margin: 0;
}

/* ── 404 ──────────────────────────────────────────────────────────────────────────────── */

.notfound {
  padding: 96px 0 48px;
  max-width: 560px;
}

.notfound h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--title-xl);
  line-height: 1.1;
}

.notfound p {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-text-2);
}

.button--secondary {
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
}

/* ── Narrow windows ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .apps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 48px 0 32px;
  }
  .app-body {
    padding: 22px 20px 24px;
  }
  .app h2 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button--primary:hover {
    transform: none;
  }
}