/* 
  CHRYSALIS AI — ChrysalisAI.io
  
  I'm building this as a single-page pitch site targeting CoinDesk PitchFest judges.
  The color system comes from our pitch deck — navy/cream/sage/terracotta.
  No dark mode toggle needed; I'm alternating dark and light sections deliberately.
  
  — Crystal
*/

/* ==========================================
   RESET & BASE
   I'm using the standard box-sizing reset 
   and pulling in the fluid type scale.
   ========================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ==========================================
   DESIGN TOKENS
   These map directly to our pitch deck.
   I named them semantically so I don't have 
   to remember hex codes while building.
   ========================================== */

:root {
  /* Brand palette — exact match to pitch deck */
  --navy: #1E2A3A;
  --navy-card: #2B3A4E;
  --cream: #F5F0E8;
  --sage: #7C9C8E;
  --terracotta: #C17B4A;
  --dark-text: #1E2A3A;

  /* Derived colors for hover states and accents */
  --navy-light: #354a62;
  --sage-muted: rgba(124, 156, 142, 0.15);
  --sage-muted-border: rgba(124, 156, 142, 0.25);
  --terracotta-hover: #d48a5a;
  --cream-muted: rgba(245, 240, 232, 0.7);

  /* Fluid type scale — keeping it tight, only the sizes I actually need */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing — 4px base, I use about 8 of these regularly */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius — rounded but not bubbly */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 180ms var(--ease-out);

  /* Content widths - wide for desktop, not cramped in center */
  --content-max: 1200px;
  --content-narrow: 1100px;

  /* Font */
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--dark-text);
  background-color: var(--navy);
  overflow-x: hidden;
}

/* I want selection highlight to use our terracotta */
::selection {
  background: rgba(193, 123, 74, 0.25);
  color: var(--dark-text);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.15;
}

p, li, figcaption {
  text-wrap: pretty;
  max-width: 72ch;
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================
   NAVIGATION
   Sticky, blurred backdrop, minimal. 
   I want it to feel like it recedes until 
   you need it.
   ========================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
  background: rgba(30, 42, 58, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(124, 156, 142, 0.1);
  transition: transform 0.3s var(--ease-out), 
              background-color 0.3s var(--ease-out);
}

.nav--hidden {
  transform: translateY(-100%);
}

.nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__logo-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.nav__logo-text {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--cream);
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cream-muted);
  letter-spacing: 0.5px;
  transition: color var(--transition-fast);
}

.nav__link:hover {
  color: var(--cream);
}

.nav__link--cta {
  color: var(--terracotta);
  font-weight: 600;
}

.nav__link--cta:hover {
  color: var(--terracotta-hover);
}

/* ==========================================
   CONTAINER
   Standard centered content container.
   ========================================== */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* ==========================================
   HERO
   Full viewport, dark navy. The headline is 
   the whole pitch in one sentence.
   ========================================== */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: var(--space-24) clamp(1.5rem, 4vw, 4rem) var(--space-16);
  position: relative;
  overflow: hidden;
}

/* Subtle geometric pattern in the background — gives depth without distraction */
.hero__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(ellipse 600px 800px at 75% 50%, rgba(124, 156, 142, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 600px at 25% 60%, rgba(193, 123, 74, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.hero__content {
  max-width: var(--content-narrow);
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sage);
  background: var(--sage-muted);
  border: 1px solid var(--sage-muted-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
}

.hero__headline {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  line-height: 1.1;
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--cream-muted);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto var(--space-10);
  font-weight: 400;
}

.hero__sub em {
  color: var(--terracotta);
  font-style: normal;
  font-weight: 600;
}

/* ==========================================
   BUTTONS
   Two styles: primary (terracotta fill) and 
   secondary (outlined). Keeping them chunky 
   enough to be obvious CTAs.
   ========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-lg);
  letter-spacing: 0.3px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--terracotta);
  color: var(--cream);
}

.btn--primary:hover {
  background: var(--terracotta-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(193, 123, 74, 0.3);
}

.btn--secondary {
  border: 1.5px solid rgba(245, 240, 232, 0.25);
  color: var(--cream);
}

.btn--secondary:hover {
  border-color: var(--cream);
  background: rgba(245, 240, 232, 0.05);
}

.btn--secondary svg {
  width: 18px;
  height: 18px;
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

/* ==========================================
   STAT CARDS — hero bottom row
   Three key proof points right up top.
   ========================================== */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 780px;
  margin: 0 auto;
}

.stat-card {
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.stat-card__number {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: var(--space-1);
}

.stat-card__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--cream-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ==========================================
   SECTIONS
   Alternating dark/light. Generous vertical 
   padding so content breathes.
   ========================================== */

.section {
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.section--light {
  background: var(--cream);
  color: var(--dark-text);
}

.section--dark {
  background: var(--navy);
  color: var(--cream);
}

.section__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--space-4);
}

/* Center text-heavy content within wider container */
.section > .container > .section__tag,
.section > .container > .section__title,
.section > .container > .section__lead,
.section > .container > .section__sublead,
.section > .container > .section__callout,
.section__title,
.section__lead,
.section__sublead,
.section__callout {
  text-align: center;
}

.section > .container {
  text-align: center;
}

.section__callout {
  margin-left: auto;
  margin-right: auto;
}

/* Reset text-align for card-level content */
.problem-card,
.pillar-card,
.proof-card,
.timeline,
.demo-consequences,
.demo-value,
.demo-callout,
.whitepaper,
.founder,
.arch-diagram__component,
.arch-diagram__row,
.dashboard-mockup__stream,
.dashboard-mockup__belief {
  text-align: left;
}

.section__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  color: var(--dark-text);
}

.section__title--light {
  color: var(--cream);
}

.section__lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section__sublead {
  font-size: var(--text-base);
  color: var(--navy-light);
  margin-bottom: var(--space-12);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section__sublead strong {
  color: var(--terracotta);
}

/* ==========================================
   PROBLEM SECTION — two-column compare
   Bad vs good, side by side. The visual 
   contrast should be immediate.
   ========================================== */

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.problem-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}

.problem-card--bad {
  background: rgba(30, 42, 58, 0.05);
  border: 1px solid rgba(30, 42, 58, 0.1);
}

.problem-card--good {
  background: rgba(124, 156, 142, 0.08);
  border: 1px solid rgba(124, 156, 142, 0.2);
}

.problem-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

.problem-card--bad .problem-card__title {
  color: var(--navy);
}

.problem-card--good .problem-card__title {
  color: var(--sage);
}

.problem-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.problem-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.5;
}

.problem-card__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.problem-card__icon--x {
  color: #b5564a;
}

.problem-card__icon--check {
  color: var(--sage);
}

/* ==========================================
   PILLAR CARDS — MEMOIR, ORACLE, MIRROR
   These are the product's identity. Each card 
   needs presence.
   ========================================== */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.pillar-card {
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.pillar-card:hover {
  border-color: rgba(124, 156, 142, 0.3);
  transform: translateY(-2px);
}

.pillar-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.pillar-card__number {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sage);
  opacity: 0.6;
}

.pillar-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 2px;
}

.pillar-card__role {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sage);
  margin-bottom: var(--space-4);
  letter-spacing: 0.5px;
}

.pillar-card__desc {
  font-size: var(--text-base);
  color: var(--cream-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.pillar-card__desc strong {
  color: var(--cream);
  font-weight: 600;
}

.pillar-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pillar-tag {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  background: var(--sage-muted);
  border: 1px solid var(--sage-muted-border);
  border-radius: var(--radius-sm);
  color: var(--sage);
  letter-spacing: 0.3px;
}

/* ==========================================
   TIMELINE — Diamond Hands demo
   Vertical timeline with clear progression. 
   The "BLOCKED" result should pop.
   ========================================== */

.timeline {
  position: relative;
  max-width: 800px;
  margin: var(--space-10) auto;
  padding-left: var(--space-12);
}

.timeline__line {
  position: absolute;
  left: 18px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--sage), var(--terracotta));
  border-radius: 1px;
}

.timeline__step {
  position: relative;
  padding-bottom: var(--space-8);
}

.timeline__step:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-12) + 12px);
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--sage);
  background: var(--cream);
}

.timeline__marker--past {
  border-color: var(--sage);
  background: var(--sage-muted);
}

.timeline__marker--now {
  border-color: var(--terracotta);
  background: rgba(193, 123, 74, 0.15);
}

.timeline__marker--result {
  border-color: var(--terracotta);
  background: var(--terracotta);
  width: 16px;
  height: 16px;
  left: calc(-1 * var(--space-12) + 11px);
  top: 5px;
}

.timeline__time {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.timeline__time--result {
  color: var(--terracotta);
}

.timeline__text {
  font-size: var(--text-base);
  line-height: 1.6;
}

.timeline__text strong {
  font-weight: 600;
}

.text-blocked {
  display: inline-block;
  font-weight: 700;
  color: var(--cream);
  background: var(--terracotta);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  letter-spacing: 1px;
}

.timeline__step--result .timeline__text {
  font-weight: 500;
}

/* timeline detail lines to explain how detection works */
.timeline__detail {
  font-size: var(--text-sm);
  color: rgba(30, 42, 58, 0.65);
  line-height: 1.6;
  margin-top: var(--space-2);
  max-width: 64ch;
}

.timeline__detail code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--text-xs);
  background: rgba(124, 156, 142, 0.12);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--sage);
  white-space: nowrap;
}

.timeline__detail strong {
  color: var(--dark-text);
  font-weight: 600;
}

/* "without MEMOIR" consequences box */
.demo-consequences {
  max-width: 800px;
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-8);
  background: rgba(181, 86, 74, 0.06);
  border: 1px solid rgba(181, 86, 74, 0.15);
  border-radius: var(--radius-lg);
}

.demo-consequences__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.demo-consequences__header h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: #b5564a;
  line-height: 1.4;
}

.demo-consequences__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-consequences__list li {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--dark-text);
  padding-left: var(--space-6);
  position: relative;
}

.demo-consequences__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: #b5564a;
  border-radius: 1px;
}

.demo-consequences__list li strong {
  color: #b5564a;
  font-weight: 600;
}

/* value added by belief resolution */
.demo-value {
  max-width: 800px;
  margin: var(--space-6) auto 0;
  padding: var(--space-6) var(--space-8);
  background: rgba(124, 156, 142, 0.06);
  border: 1px solid rgba(124, 156, 142, 0.15);
  border-radius: var(--radius-lg);
}

.demo-value__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--sage);
  margin-bottom: var(--space-3);
}

.demo-value__text {
  font-size: var(--text-base);
  color: var(--dark-text);
  line-height: 1.7;
}

.demo-value__text strong {
  color: var(--sage);
  font-weight: 600;
}

.demo-callout {
  max-width: 800px;
  margin: var(--space-6) auto 0;
  padding: var(--space-6) var(--space-8);
  background: rgba(30, 42, 58, 0.05);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.demo-callout p {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.7;
  color: var(--dark-text);
}

/* ==========================================
   ON-CHAIN PROOF — Three feature cards
   ========================================== */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-10) 0;
}

.proof-card {
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.proof-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-6);
}

.proof-card__icon svg {
  width: 100%;
  height: 100%;
}

.proof-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.proof-card__desc {
  font-size: var(--text-base);
  color: var(--cream-muted);
  line-height: 1.7;
}

.proof-card__desc code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--text-xs);
  background: rgba(124, 156, 142, 0.12);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--sage);
  white-space: nowrap;
}

.section__quote {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--cream-muted);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
  font-style: italic;
}

/* ==========================================
   COMPETITIVE TABLE
   This is the money shot for investors. 
   Clean, scannable, CHRYSALIS column pops.
   ========================================== */

.table-wrap {
  overflow-x: auto;
  margin: var(--space-8) 0;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30, 42, 58, 0.1);
}

.comp-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.comp-table th {
  padding: var(--space-4) var(--space-4);
  text-align: center;
  font-weight: 600;
  background: var(--navy);
  color: var(--cream);
  letter-spacing: 0.3px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.comp-table th:first-child {
  text-align: left;
  padding-left: var(--space-6);
}

.comp-table__feature-col {
  min-width: 220px;
}

.comp-table__highlight {
  background: var(--navy-card) !important;
  position: relative;
}

/* I want the CHRYSALIS column header to stand out */
.comp-table thead .comp-table__highlight {
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 1px;
}

.comp-table td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-top: 1px solid rgba(30, 42, 58, 0.08);
}

.comp-table td:first-child {
  text-align: left;
  padding-left: var(--space-6);
}

.comp-table__feature {
  font-weight: 500;
  color: var(--dark-text);
  white-space: nowrap;
}

.comp-table tbody tr {
  transition: background var(--transition-fast);
}

.comp-table tbody tr:hover {
  background: rgba(124, 156, 142, 0.04);
}

.comp-table td.comp-table__highlight {
  background: rgba(124, 156, 142, 0.06);
  font-weight: 600;
}

.comp-no {
  color: #b5564a;
  font-weight: 600;
  font-size: var(--text-xs);
}

.comp-yes {
  color: var(--sage);
  font-weight: 700;
  font-size: var(--text-sm);
}

.section__callout {
  font-size: var(--text-lg);
  line-height: 1.7;
  margin-top: var(--space-8);
  max-width: 900px;
}

.section__callout strong {
  color: var(--terracotta);
}

/* ==========================================
   ARCHITECTURE SECTION
   Stats row + flow diagram + footer line.
   ========================================== */

.arch-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-10) 0;
}

.arch-stat {
  text-align: center;
  padding: var(--space-6);
  background: var(--navy-card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(124, 156, 142, 0.1);
}

.arch-stat__number {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: var(--space-1);
}

.arch-stat__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--cream-muted);
  font-weight: 500;
}

/* Architecture diagram: top row is the pipeline flow,
   bottom row shows MIRROR, ORACLE, and COMPASS as detailed cards */
.arch-diagram {
  margin: var(--space-10) 0;
}

.arch-diagram__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  background: rgba(43, 58, 78, 0.5);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid rgba(124, 156, 142, 0.1);
  border-bottom: none;
  overflow-x: auto;
}

.arch-diagram__node {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
  flex-shrink: 0;
}

.arch-diagram__node--agent {
  background: var(--navy);
  border: 1.5px solid var(--sage);
}

.arch-diagram__node--solana {
  background: var(--navy);
  border: 1.5px solid var(--terracotta);
}

.arch-diagram__icon {
  display: block;
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.arch-diagram__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.5px;
}

.arch-diagram__sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--cream-muted);
  margin-top: 2px;
}

.arch-diagram__connector {
  flex-shrink: 0;
  width: 48px;
}

.arch-diagram__connector svg {
  width: 100%;
}

.arch-diagram__pipeline {
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  flex-shrink: 0;
  text-align: center;
}

.arch-diagram__pipeline-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 1px;
  margin-bottom: var(--space-2);
}

.arch-diagram__stages {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.arch-diagram__stage {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cream);
  background: rgba(124, 156, 142, 0.15);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.arch-diagram__stage-sep {
  color: var(--sage);
  font-size: var(--text-xs);
}

.arch-diagram__pipeline-note {
  display: block;
  font-size: 0.7rem;
  color: var(--cream-muted);
  opacity: 0.7;
}

/* bottom row: MIRROR, ORACLE, COMPASS cards */
.arch-diagram__bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(124, 156, 142, 0.1);
  border: 1px solid rgba(124, 156, 142, 0.1);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}

.arch-diagram__component {
  background: var(--navy-card);
  padding: var(--space-6);
}

.arch-diagram__component-header {
  margin-bottom: var(--space-4);
}

.arch-diagram__component-name {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.arch-diagram__component--mirror .arch-diagram__component-name {
  color: var(--terracotta);
}

.arch-diagram__component--oracle .arch-diagram__component-name {
  color: var(--sage);
}

.arch-diagram__component--compass .arch-diagram__component-name {
  color: var(--terracotta);
}

.arch-diagram__component-role {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cream-muted);
  letter-spacing: 0.5px;
}

.arch-diagram__component-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.arch-diagram__component-list li {
  font-size: var(--text-xs);
  color: var(--cream-muted);
  line-height: 1.5;
  padding-left: var(--space-4);
  position: relative;
}

.arch-diagram__component-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.5;
}

/* ==========================================
   WAITLIST SECTION (navy band + elevated card)
   ========================================== */

#waitlist .section__lead {
  color: var(--cream-muted);
}

.waitlist-copy {
  max-width: 48rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.waitlist-copy__p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-base);
  color: var(--cream-muted);
  line-height: 1.7;
}

.waitlist-copy__p + .waitlist-copy__p {
  margin-top: var(--space-4);
}

.waitlist-container {
  margin-left: auto;
  margin-right: auto;
  max-width: min(28rem, 100%);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  text-align: center;
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.28);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.waitlist-message {
  margin-top: var(--space-4);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-sm);
}

.waitlist-field {
  width: 100%;
  padding: var(--space-3);
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.2);
  color: var(--cream);
  border-radius: var(--radius-md);
}

.waitlist-field::placeholder {
  color: rgba(245, 240, 232, 0.45);
}

.waitlist-field:focus-visible {
  outline-color: var(--terracotta);
  border-color: rgba(193, 123, 74, 0.45);
}

#waitlist-submit {
  margin-top: var(--space-1);
  width: 100%;
  padding: var(--space-3) var(--space-8);
  background: var(--terracotta);
  color: var(--cream);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

#waitlist-submit:hover {
  background: var(--terracotta-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(193, 123, 74, 0.35);
}

/* ==========================================
   FOUNDER SECTION
   Two columns: bio on left, visual on right.
   ========================================== */

.section--founder {
  border-top: 1px solid rgba(124, 156, 142, 0.1);
}

.founder {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-16);
  align-items: center;
}

.founder__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.founder__title {
  font-size: var(--text-base);
  color: var(--cream-muted);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.founder__company {
  font-size: var(--text-base);
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.founder__research {
  margin-bottom: var(--space-8);
}

.founder__research-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.founder__research-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.founder__research-list li {
  font-size: var(--text-base);
  color: var(--cream-muted);
  line-height: 1.5;
  padding-left: var(--space-4);
  border-left: 2px solid rgba(124, 156, 142, 0.2);
}

.founder__research-list strong {
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.founder__bio {
  font-size: var(--text-base);
  color: var(--cream-muted);
  line-height: 1.6;
}

.founder__visual {
  display: flex;
  justify-content: center;
}

.founder__photo {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-xl);
  object-fit: cover;
  aspect-ratio: 7 / 8;
  border: 2px solid rgba(124, 156, 142, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.section--founder.section--light {
  border-top-color: rgba(30, 42, 58, 0.08);
}

.section--founder.section--light .founder__name {
  color: var(--dark-text);
}

.section--founder.section--light .founder__title,
.section--founder.section--light .founder__bio {
  color: var(--navy-light);
}

.section--founder.section--light .founder__research-list li {
  color: var(--navy-light);
  border-left-color: rgba(124, 156, 142, 0.35);
}

.section--founder.section--light .founder__photo {
  border-color: rgba(124, 156, 142, 0.35);
  box-shadow: 0 8px 32px rgba(30, 42, 58, 0.12);
}

/* ==========================================
   WHITEPAPER SECTION
   Two-column layout: description left, 
   stylized document preview right.
   ========================================== */

.whitepaper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-16);
  align-items: center;
}

.whitepaper__desc {
  font-size: var(--text-base);
  color: var(--dark-text);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  max-width: 600px;
  opacity: 0.85;
}

.whitepaper__highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.whitepaper__highlights li {
  font-size: var(--text-sm);
  color: var(--dark-text);
  line-height: 1.5;
  padding-left: var(--space-6);
  position: relative;
}

.whitepaper__highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.6;
}

.whitepaper__preview {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid rgba(124, 156, 142, 0.15);
  box-shadow: 0 8px 32px rgba(30, 42, 58, 0.15);
}

.whitepaper__preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.whitepaper__preview-logo {
  border-radius: var(--radius-sm);
}

.whitepaper__preview-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

.whitepaper__preview-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.whitepaper__preview-line {
  height: 6px;
  background: rgba(245, 240, 232, 0.08);
  border-radius: 3px;
}

.whitepaper__preview-sections {
  display: flex;
  gap: var(--space-3);
}

.whitepaper__preview-sections span {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  background: var(--sage-muted);
  border: 1px solid var(--sage-muted-border);
  border-radius: var(--radius-sm);
  color: var(--sage);
  letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
  .whitepaper {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 640px) {
  .whitepaper__preview {
    display: none;
  }
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
  background: var(--navy);
  border-top: 1px solid rgba(124, 156, 142, 0.1);
  padding: var(--space-12) 0 var(--space-8);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-8);
}

.footer__logo-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer__logo-img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.footer__logo-text {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--cream);
  text-transform: uppercase;
}

.footer__legal {
  font-size: var(--text-xs);
  color: var(--cream-muted);
  max-width: 400px;
}

.footer__links {
  display: flex;
  gap: var(--space-6);
}

.footer__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cream-muted);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--cream);
}

.footer__bottom {
  border-top: 1px solid rgba(124, 156, 142, 0.1);
  padding-top: var(--space-6);
}

.footer__bottom p {
  font-size: var(--text-xs);
  color: rgba(245, 240, 232, 0.4);
}

/* ==========================================
   SCROLL ANIMATIONS
   Simple fade-in-up using Intersection 
   Observer. No heavy libraries.
   ========================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the child cards when their parent reveals */
.pillars-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.pillars-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.proof-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.proof-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.hero__stats .stat-card:nth-child(2) { transition-delay: 0.1s; }
.hero__stats .stat-card:nth-child(3) { transition-delay: 0.2s; }

/* ==========================================
   RESPONSIVE — TABLET
   ========================================== */

@media (max-width: 1024px) {
  .nav__links {
    gap: var(--space-3);
  }

  .nav__link {
    font-size: var(--text-xs);
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .arch-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .arch-flow {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  /* architecture diagram responsive for tablet */
  .arch-diagram__row {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
  }

  .arch-diagram__connector {
    width: 32px;
  }

  .arch-diagram__bottom-row {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .founder {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .founder__visual {
    order: -1;
  }

  .founder__photo {
    max-width: 200px;
  }
}

/* ==========================================
   RESPONSIVE — MOBILE
   Everything stacks, fonts scale down, 
   padding tightens.
   ========================================== */

@media (max-width: 640px) {
  .nav__links {
    gap: var(--space-4);
  }

  .nav__link:not(.nav__link--cta) {
    display: none;
  }

  .hero {
    padding: var(--space-20) var(--space-4) var(--space-12);
    min-height: 100svh;
  }

  .hero__headline {
    font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  }

  .hero__headline br {
    display: none;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .hero__ctas {
    flex-direction: column;
    align-items: center;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .arch-stats {
    grid-template-columns: 1fr 1fr;
  }

  .arch-flow {
    flex-direction: column;
    align-items: center;
  }

  .arch-flow__arrow {
    transform: rotate(90deg);
  }

  /* architecture diagram mobile stacking */
  .arch-diagram__row {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .arch-diagram__connector {
    transform: rotate(90deg);
    width: 32px;
    align-self: center;
  }

  .arch-diagram__node,
  .arch-diagram__pipeline {
    width: 100%;
  }

  .demo-consequences,
  .demo-value,
  .demo-callout {
    padding: var(--space-4) var(--space-6);
  }

  .comp-table {
    font-size: var(--text-xs);
  }

  .section__title {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }

  .timeline {
    padding-left: var(--space-10);
  }

  .timeline__line {
    left: 14px;
  }

  .timeline__marker {
    left: calc(-1 * var(--space-10) + 8px);
  }

  .timeline__marker--result {
    left: calc(-1 * var(--space-10) + 7px);
  }

  .container {
    padding: 0 var(--space-4);
  }

  .footer__inner {
    flex-direction: column;
    gap: var(--space-6);
  }

  .section__quote br {
    display: none;
  }
}

/* ==========================================
   TABLET TABLE FIX
   On small screens the table scrolls 
   horizontally — I'm adding a hint gradient.
   ========================================== */

@media (max-width: 800px) {
  .table-wrap {
    position: relative;
  }
  
  .table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--cream));
    pointer-events: none;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }
}

/* ==========================================
   HERO ICON — Chrysalis butterfly image
   ========================================== */

.hero__icon {
  display: block;
  margin: 0 auto 1.5rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 30px rgba(124, 156, 142, 0.3));
}

/* ==========================================
   LIVE DASHBOARD SECTION
   ========================================== */

.dashboard-section__text {
  text-align: center;
  margin-bottom: var(--space-8);
}

.dashboard-mockup {
  background: var(--navy);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(124, 156, 142, 0.2);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(30, 42, 58, 0.25);
  max-width: 960px;
  margin: 0 auto;
}

.dashboard-mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(30, 42, 58, 0.95);
  border-bottom: 1px solid rgba(124, 156, 142, 0.1);
}

.dashboard-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(124, 156, 142, 0.25);
}

.dashboard-mockup__dot:nth-child(1) { background: #ff5f57; }
.dashboard-mockup__dot:nth-child(2) { background: #febc2e; }
.dashboard-mockup__dot:nth-child(3) { background: #28c840; }

.dashboard-mockup__url {
  font-size: 0.75rem;
  color: var(--cream-muted);
  margin-left: var(--space-4);
  font-family: 'SF Mono', 'Fira Code', monospace;
  opacity: 0.6;
}

.dashboard-mockup__body {
  padding: var(--space-6);
}

.dashboard-mockup__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dashboard-mockup__stat {
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}

.dashboard-mockup__stat-number {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1.2;
}

.dashboard-mockup__stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--cream-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.dashboard-mockup__stream {
  background: var(--navy-card);
  border: 1px solid rgba(124, 156, 142, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dashboard-mockup__stream-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(124, 156, 142, 0.1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cream-muted);
  letter-spacing: 0.5px;
}

.dashboard-mockup__belief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(124, 156, 142, 0.06);
  transition: background var(--transition-fast);
}

.dashboard-mockup__belief:last-child {
  border-bottom: none;
}

.dashboard-mockup__belief:hover {
  background: rgba(124, 156, 142, 0.04);
}

.dashboard-mockup__belief-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard-mockup__belief-name {
  font-size: var(--text-sm);
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--cream);
  font-weight: 500;
}

.belief-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.belief-tag--verified {
  background: rgba(40, 167, 69, 0.15);
  color: #5cb85c;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.belief-tag--inferred {
  background: rgba(255, 193, 7, 0.15);
  color: #f0ad4e;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.belief-tag--user-stated {
  background: rgba(66, 133, 244, 0.15);
  color: #6ba3f7;
  border: 1px solid rgba(66, 133, 244, 0.3);
}

.belief-tag--agent-derived {
  background: rgba(155, 89, 182, 0.15);
  color: #b07cc6;
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.dashboard-mockup__belief-bqs {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--sage);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.dashboard-section__cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* ==========================================
   SOLANA ATTESTATION VISUAL
   ========================================== */

.attestation-visual {
  max-width: 560px;
  margin: var(--space-10) auto 0;
  background: #0d1117;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(124, 156, 142, 0.15);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.attestation-visual__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: #161b22;
  border-bottom: 1px solid rgba(124, 156, 142, 0.1);
}

.attestation-visual__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.attestation-visual__dot:nth-child(1) { background: #ff5f57; }
.attestation-visual__dot:nth-child(2) { background: #febc2e; }
.attestation-visual__dot:nth-child(3) { background: #28c840; }

.attestation-visual__title {
  font-size: 0.75rem;
  color: rgba(245, 240, 232, 0.5);
  margin-left: var(--space-3);
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.3px;
}

.attestation-visual__code {
  padding: var(--space-6);
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  overflow-x: auto;
  color: var(--cream-muted);
  text-align: left;
}

.attestation-visual__code code {
  font-family: inherit;
}

.json-key {
  color: #79c0ff;
}

.json-string {
  color: #a5d6ff;
}

.json-tag {
  color: #5cb85c;
  font-weight: 600;
}

.json-verdict {
  color: #5cb85c;
  font-weight: 600;
}

.json-number {
  color: #f0ad4e;
  font-weight: 600;
}

.attestation-visual__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--terracotta);
  border-top: 1px solid rgba(124, 156, 142, 0.1);
  background: #161b22;
  letter-spacing: 0.3px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.attestation-visual__link:hover {
  background: rgba(193, 123, 74, 0.1);
  color: var(--terracotta-hover);
}

/* ==========================================
   RESPONSIVE — Dashboard & Attestation
   ========================================== */

@media (max-width: 768px) {
  .nav__link[href="#problem"],
  .nav__link[href="#architecture"] {
    display: none;
  }

  .dashboard-mockup__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-mockup__belief-info {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .dashboard-mockup__belief-name {
    font-size: var(--text-xs);
  }

  .attestation-visual__code {
    font-size: 0.75rem;
    padding: var(--space-4);
  }

  .hero__icon {
    width: 90px;
    height: 90px;
  }
}