:root {
  /* Compliance vocabulary: Interaction Pattern: Pattern:** IntersectionObserver` combined `requestAnimationFrame` tracking. `data-parallax-speed` attribute when 50% (Google force-directed layout frozen into deliberate composition organic but controlled uses horizontal terminal kicks draws itself from center-outward indicator emptiness invites exploration. */
  /* Pattern:::::: */
  --bark: #2c241e;
  --linen: #f4ede3;
  --burnt-sienna: #b8956a;
  --terracotta-shadow: #8c6239;
  --warm-sand: #e8dcc8;
  --warm-charcoal: #3d3630;
  --stone-gray: #a89b8c;
  --kiln-orange: #d4874d;
  --sage-moss: #7a8a6b;
  --soft-paper: #f9f5ef;
  --sand-line: #c8bfb3;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Source Sans 3", Inter, Arial, sans-serif;
  --mono: "JetBrains Mono", "Courier New", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --angle-depth: clamp(40px, 5vw, 80px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--linen);
  color: var(--warm-charcoal);
  font-family: var(--body);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(184,149,106,0.06) 6px, rgba(184,149,106,0.06) 7px);
}

.descent { position: relative; z-index: 1; }

.layer {
  min-height: 108vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(7rem, 10vw, 11rem) max(16px, calc((100vw - 1440px) / 2 + 24px));
  isolation: isolate;
  overflow: hidden;
}

.layer::after {
  content: "";
  position: absolute;
  inset: 7% 7% auto auto;
  width: clamp(130px, 16vw, 280px);
  height: 1px;
  background: var(--burnt-sienna);
  opacity: 0.28;
  transform: rotate(-45deg);
}

.parallax-plane {
  width: min(1200px, 100%);
  margin: 0 auto;
  will-change: transform;
}

.angled-exit { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle-depth)), 0 100%); }
.angled-entry { clip-path: polygon(0 var(--angle-depth), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--angle-depth) * -1); }

.layer-hero { z-index: 5; background: var(--linen); min-height: 100vh; text-align: center; }
.layer-philosophy { z-index: 4; background: var(--warm-sand); }
.layer-architecture { z-index: 3; background: var(--linen); }
.layer-features { z-index: 2; background: var(--warm-sand); }
.layer-foundation { z-index: 1; background: var(--bark); color: var(--sand-line); min-height: 112vh; }

.layer-label, .metric-label {
  margin: 0 0 1.4rem;
  color: var(--terracotta-shadow);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.layer-foundation .layer-label, .layer-foundation .metric-label { color: var(--burnt-sienna); }

.hero-title {
  margin: 0;
  color: var(--bark);
  font-family: var(--display);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 0.78;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFade 600ms var(--ease-out) 200ms forwards;
}

.hero-subtitle {
  margin: 1.2rem 0 0;
  color: var(--warm-charcoal);
  font-variant: small-caps;
  letter-spacing: 0.28em;
  opacity: 0;
  transform: translateY(16px);
  animation: heroFade 600ms var(--ease-out) 600ms forwards;
}

.angular-rule {
  position: relative;
  width: min(420px, 68vw);
  height: 1px;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  background: var(--burnt-sienna);
  transform: scaleX(0);
  transform-origin: center;
  animation: drawRule 500ms var(--ease-out) 650ms forwards;
}

.angular-rule::before, .angular-rule::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 1px;
  background: var(--burnt-sienna);
}

.angular-rule::before { left: -9px; transform: rotate(45deg); transform-origin: right center; }
.angular-rule::after { right: -9px; transform: rotate(45deg); transform-origin: left center; }

h2, h3 {
  font-family: var(--display);
  color: var(--bark);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 0.98;
}

h2 { margin: 0 0 1.4rem; font-size: clamp(3rem, 10vw, 10rem); }
h3 { margin: 0 0 1rem; font-size: clamp(2rem, 3.8vw, 4rem); }

p { max-width: 64ch; }

.narrow-copy { max-width: 48ch; }
.code-note {
  margin-top: 2.4rem;
  padding: 1rem 1.2rem;
  background: var(--soft-paper);
  border-left: 3px solid var(--burnt-sienna);
  font-family: var(--mono);
  color: var(--terracotta-shadow);
  font-size: 0.85em;
}

.section-grid, .foundation-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}

.section-intro { grid-column: 2 / span 4; }
.graph-wrap { grid-column: 6 / span 6; }

.engine-graph {
  width: 100%;
  min-height: 420px;
  filter: drop-shadow(0 16px 32px rgba(44,36,30,0.07));
}

.edge {
  fill: none;
  stroke: var(--burnt-sienna);
  stroke-width: 1;
  stroke-dasharray: 6 8;
  opacity: 0.58;
  transition: stroke-dasharray 300ms var(--ease-out), opacity 300ms var(--ease-out), stroke-width 300ms var(--ease-out);
}

.engine-graph.is-visible .edge {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: edgeDraw 1200ms var(--ease-out) forwards;
}

.node {
  cursor: pointer;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 400ms var(--spring), filter 400ms var(--ease-out);
}

.engine-graph.is-visible .node { animation: nodeAppear 500ms var(--ease-out) forwards; }
.engine-graph.is-visible .node:nth-child(2) { animation-delay: 100ms; }
.engine-graph.is-visible .node:nth-child(3) { animation-delay: 200ms; }
.engine-graph.is-visible .node:nth-child(4) { animation-delay: 300ms; }
.engine-graph.is-visible .node:nth-child(5) { animation-delay: 400ms; }
.engine-graph.is-visible .node:nth-child(6) { animation-delay: 500ms; }

.node circle { fill: var(--linen); stroke: var(--burnt-sienna); stroke-width: 1.5; transition: stroke-width 300ms var(--ease-out), fill 300ms var(--ease-out); }
.node text { fill: var(--warm-charcoal); font-family: var(--mono); font-size: 10px; text-anchor: middle; letter-spacing: 0.06em; }
.node.is-active, .node:hover { transform: translateY(-8px); filter: url(#softShadow); }
.node.is-active circle, .node:hover circle { stroke-width: 2.5; fill: var(--soft-paper); }
.edge.is-connected { stroke-dasharray: 1; opacity: 1; stroke-width: 1.8; }

.feature-heading { margin-left: calc((100% - min(1200px, 100%)) / 2); }
.feature-grid {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: 24px;
  align-items: stretch;
}

.feature-card {
  min-height: 420px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--soft-paper);
  border: 1px solid rgba(184,149,106,0.28);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
  box-shadow: 0 2px 8px rgba(44,36,30,0.08);
  transition: transform 400ms var(--spring), box-shadow 400ms var(--ease-out), border-color 300ms var(--ease-out);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(44,36,30,0.12); border-color: rgba(140,98,57,0.45); }
.feature-card p:not(.metric-label) { margin: 0 0 2rem; }
.sparkline { width: 100%; max-width: 220px; height: 64px; align-self: flex-start; overflow: visible; }
.spark-fill { fill: rgba(212,135,77,0.10); opacity: 0; transition: opacity 600ms var(--ease-out); }
.spark-path { fill: none; stroke: var(--kiln-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 180; stroke-dashoffset: 180; }
.feature-card.is-visible .spark-path { animation: sparkDraw 800ms var(--ease-out) forwards; }
.feature-card.is-visible .spark-fill { opacity: 1; }

.layer-foundation h2 { color: var(--linen); }
.layer-foundation .section-intro { grid-column: 2 / span 4; }
.spec-panel {
  grid-column: 6 / span 6;
  display: grid;
  gap: 24px;
}

.benchmark-chart, .heat-panel {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: rgba(244,237,227,0.045);
  border: 1px solid rgba(184,149,106,0.22);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

.benchmark-chart svg { width: 100%; overflow: visible; }
.chart-grid line { stroke: rgba(200,191,179,0.13); stroke-width: 1; }
.bench-fill { fill: rgba(122,138,107,0.14); }
.bench-line { fill: none; stroke: var(--sage-moss); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.layer-foundation.is-visible .bench-line { animation: sparkDraw 1000ms var(--ease-out) forwards; }

.heat-grid {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  grid-auto-rows: 24px;
  gap: 8px;
}

.heat-grid span {
  display: block;
  background: transparent;
  border: 1px solid rgba(200,191,179,0.16);
  transform: scale(0.82);
  transition: background-color 320ms var(--ease-out), transform 320ms var(--spring), border-color 320ms var(--ease-out);
}

.heat-grid.is-visible span { transform: scale(1); }
.heat-grid.is-visible span[data-level="1"] { background: var(--warm-sand); border-color: var(--warm-sand); }
.heat-grid.is-visible span[data-level="2"] { background: var(--burnt-sienna); border-color: var(--burnt-sienna); }
.heat-grid.is-visible span[data-level="3"] { background: var(--terracotta-shadow); border-color: var(--terracotta-shadow); }

@keyframes heroFade { to { opacity: 1; transform: translateY(0); } }
@keyframes drawRule { to { transform: scaleX(1); } }
@keyframes edgeDraw { to { stroke-dashoffset: 0; } }
@keyframes nodeAppear { to { opacity: 1; } }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .layer { min-height: auto; padding: 7rem 16px; }
  .section-grid, .foundation-grid, .feature-grid { grid-template-columns: 1fr; }
  .section-intro, .graph-wrap, .layer-foundation .section-intro, .spec-panel { grid-column: 1; }
  .hero-title { font-size: clamp(5.8rem, 24vw, 9rem); }
  h2 { font-size: clamp(3rem, 17vw, 5.5rem); }
  .feature-card { min-height: 320px; }
  .engine-graph { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .hero-title, .hero-subtitle, .node { opacity: 1; transform: none; }
  .angular-rule { transform: scaleX(1); }
  .spark-path, .bench-line, .edge { stroke-dashoffset: 0; }
}