/* =====================================================================
   CreationLoop Trust Site — shared token + component stylesheet
   Board C brand. Single source of truth for the redesign's look.
   Recreated from design/handoff/design_handoff_trust_homepage tokens.
   Every page links this file; per-page layout lives in small <style> blocks.
   ===================================================================== */

/* ---- Self-hosted fonts (no CDN; woff2 in /fonts) --------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* surfaces */
  --bg: #101218;
  --surface: #14161C;
  --slate: #1A1D24;

  /* text */
  --text: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-muted: rgba(255, 255, 255, 0.44);
  --text-body: rgba(255, 255, 255, 0.85);

  /* accents */
  --blue: #3B82F6;
  --purple: #8B5CF6;
  /* 5-step accent progression */
  --a1: #3B82F6;
  --a2: #4F7CF6;
  --a3: #6D6BF6;
  --a4: #7E5DF6;
  --a5: #8B5CF6;

  /* borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-16: rgba(255, 255, 255, 0.16);

  /* radii */
  --r-card: 12px;
  --r-tile: 10px;
  --r-btn: 6px;
  --r-pill: 999px;

  /* glow — global halo intensity (halo layers only). Default 0.3. */
  --glow: 0.3;

  /* fonts */
  --font-primary: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --wrap: 1120px;
  --pad-x: clamp(20px, 5vw, 32px);
}

/* ---- Base ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-primary);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { overflow-x: clip; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--purple); }
::selection { background: rgba(139, 92, 246, 0.35); }
img { max-width: 100%; }
h1, h2, h3 { font-weight: 700; margin: 0; }

@keyframes clPulse {
  from { opacity: calc(var(--glow) * 0.5); }
  to   { opacity: var(--glow); }
}
@keyframes clDot {
  from { box-shadow: 0 0 4px rgba(59, 130, 246, 0.5); }
  to   { box-shadow: 0 0 12px rgba(59, 130, 246, 1); }
}

/* ---- Layout helpers -------------------------------------------------- */
.page { min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: clip; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.halo { position: absolute; pointer-events: none; opacity: var(--glow); max-width: 100%; }

/* ---- Mono label / section eyebrow ------------------------------------ */
.mono { font-family: var(--font-mono); }
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em;
}
.eyebrow--blue { color: var(--blue); }
.eyebrow--purple { color: var(--purple); }
.eyebrow-line { flex: 0 0 90px; height: 1px; }
.eyebrow--blue .eyebrow-line { background: linear-gradient(90deg, var(--blue), transparent); }
.eyebrow--purple .eyebrow-line { background: linear-gradient(90deg, var(--purple), transparent); }

/* gradient text — one hero line per page */
.grad-text {
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-hairline {
  width: 220px; height: 2px;
  background: linear-gradient(90deg, transparent, #3B82F6, #8B5CF6, transparent);
  opacity: var(--glow);
}

/* ---- Node motif ------------------------------------------------------ */
.node {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--blue); flex: none;
}
.node--purple { border-color: var(--purple); }
.node--sm { width: 7px; height: 7px; }
.node--live {
  border-color: var(--blue);
  animation: clDot 1.6s ease-in-out infinite alternate;
}
.node--glow { box-shadow: 0 0 8px rgba(59, 130, 246, 0.8); }

/* ---- Pills / tags / badges ------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--border-16); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  white-space: nowrap;
}
.pill--accent { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 0 18px rgba(139, 92, 246, 0.18); letter-spacing: 0.14em; }
.pill--blue { border-color: rgba(59, 130, 246, 0.4); color: var(--text-body); }
.pill--purple { border-color: rgba(139, 92, 246, 0.4); color: var(--text-body); }
.tag {
  padding: 5px 12px; border: 1px solid rgba(59, 130, 246, 0.4); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-body);
}
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid rgba(59, 130, 246, 0.4); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: #fff; white-space: nowrap;
}
.status-badge--muted { border-color: var(--border-16); color: var(--text-secondary); }

/* ---- Buttons (DS Button) --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-primary); font-weight: 600; border-radius: var(--r-btn);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; line-height: 1; transition: background-image .12s ease, color .12s ease, border-color .12s ease;
}
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-md { height: 38px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-primary { background-color: var(--blue); color: #fff; }
.btn-secondary { background-color: var(--slate); border-color: var(--border-16); color: #fff; }
.btn-purple { background-color: var(--purple); color: #fff; }
.btn:hover { color: #fff; background-image: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)); }
.btn:active { background-image: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)); }
/* button glow wrappers (comps apply glow to the anchor around the button) */
.glow-blue { border-radius: var(--r-btn); box-shadow: 0 0 28px rgba(59, 130, 246, 0.45); }
.glow-blue-lg { border-radius: var(--r-btn); box-shadow: 0 0 32px rgba(59, 130, 246, 0.5); }

/* ---- Cards ----------------------------------------------------------- */
.card {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); padding: clamp(24px, 4vw, 32px);
}
.card--blue {
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.10);
}
.card--purple {
  border-color: rgba(139, 92, 246, 0.35);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.02));
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.10);
}
.card--dashed { border: 1px dashed rgba(255, 255, 255, 0.2); background: transparent; }
.card--plain { border-color: var(--border-strong); }

/* icon tile */
.icon-tile {
  width: 44px; height: 44px; border-radius: var(--r-tile);
  display: flex; align-items: center; justify-content: center;
  background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.4);
}
.icon-tile--sm { width: 40px; height: 40px; }
.icon-tile--purple { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.4); }
.icon-tile svg { width: 22px; height: 22px; color: var(--blue); }
.icon-tile--sm svg { width: 20px; height: 20px; }
.icon-tile--purple svg { color: var(--purple); }

/* ---- Node bullet lists ----------------------------------------------- */
.node-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.node-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-body); }

/* ---- Divided / meta grids -------------------------------------------- */
.divided-grid {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.08);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px; overflow: hidden;
}
.divided-grid .cell {
  background: var(--surface);
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px;
  font-size: 15px; color: var(--text-body);
}
.meta-grid {
  border: 1px solid var(--border); border-radius: var(--r-tile);
  background: rgba(255, 255, 255, 0.08);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px; overflow: hidden;
}
.meta-cell { background: var(--surface); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-muted); }
.meta-value { font-size: 15px; color: var(--text-body); }

/* ---- Nav / footer ---------------------------------------------------- */
.site-nav {
  position: relative; z-index: 5; max-width: var(--wrap); margin: 0 auto;
  padding: 18px var(--pad-x); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.site-nav .logo img { height: 26px; display: block; }
.site-nav .nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-family: var(--font-mono); font-size: 13px; flex-wrap: wrap; }
.site-nav .nav-links a.navlink { color: var(--text-secondary); }
.site-nav .nav-links a.navlink:hover { color: #fff; }
.site-footer { border-top: 1px solid var(--border); }
.site-footer .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 28px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.site-footer img { height: 22px; display: block; }
.site-footer .foot-links { display: flex; align-items: center; gap: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.site-footer .foot-links a { color: var(--text-secondary); }

/* ---- Headings -------------------------------------------------------- */
.h1 { font-size: clamp(48px, 7vw, 78px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.lead { font-size: 19px; line-height: 1.5; color: var(--text-secondary); }
.body { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* ---- Breadcrumb ------------------------------------------------------ */
.crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--text-secondary); }
.crumbs .sep { color: var(--text-muted); }