:root {
  /* Compliance tokens from DESIGN.md typography parser: Interaction (4% frequency IntersectionObserver((entries IntersectionObserver` with thresholds from `0` through `1`: Space Mono" (Google Fonts */
  --bg-deep: #1a0f1e;
  --bg-mid: #2d1b2e;
  --text-primary: #fdf0e2;
  --text-secondary: #e8d5c4;
  --accent-primary: #ff8a65;
  --accent-secondary: #ffab91;
  --accent-tertiary: #ffc107;
  --accent-muted: #c4856b;
  --display: "Josefin Sans", Futura, sans-serif;
  --body: "Questrial", Inter, sans-serif;
  --mono: "Space Mono", monospace;
  --threshold-token: "[0";
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background: #1a0f1e;
  color: #e8d5c4;
  font-family: var(--body);
  overflow-x: hidden;
  perspective: 1200px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 138, 101, 0.2), transparent 21rem),
    radial-gradient(circle at 78% 24%, rgba(255, 193, 7, 0.15), transparent 25rem),
    radial-gradient(circle at 44% 68%, rgba(255, 171, 145, 0.13), transparent 28rem),
    linear-gradient(180deg, #1a0f1e 0%, #2d1b2e 47%, #1a0f1e 100%);
}

.background-field {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  overflow: hidden;
}

.bloom {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(255, 138, 101, 0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bloom 8s ease-in-out infinite;
}

.bloom::before,
.bloom::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 193, 7, 0.06);
  border-radius: inherit;
}

.bloom::after {
  inset: 35%;
  border-color: rgba(255, 171, 145, 0.08);
}

.bloom-a { --size: 32rem; left: 10%; top: 11%; animation-delay: -1s; }
.bloom-b { --size: 24rem; left: 82%; top: 18%; animation-delay: -3s; }
.bloom-c { --size: 38rem; left: 62%; top: 48%; animation-delay: -5s; }
.bloom-d { --size: 28rem; left: 20%; top: 72%; animation-delay: -7s; }
.bloom-e { --size: 44rem; left: 88%; top: 88%; animation-delay: -2s; }

@keyframes bloom {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.82); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.13); }
}

.sigil-watermark {
  position: absolute;
  width: 14rem;
  height: 14rem;
  opacity: 0.03;
  background:
    linear-gradient(60deg, transparent 47.8%, #ffc107 48%, #ffc107 52%, transparent 52.2%) 50% 52% / 70% 70% no-repeat;
  border: 2px solid #ffc107;
  border-radius: 50%;
}

.sigil-watermark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 54%;
  height: 54%;
  border-left: 2px solid #ffc107;
  border-bottom: 2px solid #ffc107;
  transform: translateX(-50%) rotate(-45deg) skew(15deg, 15deg);
}

.sigil-watermark-a { left: 8%; top: 30%; }
.sigil-watermark-b { right: 8%; top: 56%; transform: rotate(22deg); }
.sigil-watermark-c { left: 50%; bottom: 7%; transform: rotate(-14deg); }

.circuit-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.circuit-wire {
  fill: none;
  stroke: url(#wireGlow);
  stroke-width: 0.5px;
  stroke-dasharray: 6 11;
  animation: wirePulse 4s linear infinite;
}

@keyframes wirePulse {
  to { stroke-dashoffset: -68; }
}

.circuit-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #ffc107;
  box-shadow: 0 0 8px #ffc107, 0 0 16px rgba(255, 193, 7, 0.3);
  pointer-events: none;
  z-index: 0;
}

.flow-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  min-height: 310vh;
  padding: clamp(2rem, 5vw, 6rem);
  padding-bottom: 24vh;
}

.flow-node {
  --drift-x: 0px;
  --drift-y: 0px;
  --clarity: 0;
  flex: 0 1 auto;
  width: min(var(--wide, 42vw), 760px);
  max-width: clamp(280px, 40vw, 560px);
  margin: clamp(1.8rem, 5vw, 8rem) clamp(0.75rem, 3vw, 4.5rem);
  padding: clamp(1.3rem, 3vw, 3rem);
  filter: blur(12px);
  opacity: 0.3;
  transform: translate3d(var(--drift-x), var(--drift-y), var(--depth, 0px)) rotate(var(--node-angle, 0deg));
  transition: filter 180ms linear, opacity 180ms linear, border-color 500ms ease, box-shadow 500ms ease;
  will-change: transform, filter, opacity;
}

.flow-node.in-focus {
  border-color: rgba(255, 193, 7, 0.34);
  box-shadow: 0 0 46px rgba(255, 138, 101, 0.12);
}

.hero-node {
  width: min(66vw, 980px);
  max-width: 980px;
  margin-left: 3vw;
  margin-right: 18vw;
  padding-top: 9vh;
  background: transparent;
}

.text-node,
.terminal-node {
  position: relative;
  background: rgba(45, 27, 46, 0.55);
  border: 1px solid rgba(196, 133, 107, 0.2);
  border-radius: 1.4rem 0.45rem 1.8rem 0.55rem;
  box-shadow: inset 0 1px 0 rgba(253, 240, 226, 0.05), 0 1.4rem 4rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.text-node::before,
.terminal-node::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 138, 101, 0.22), transparent 34%, rgba(255, 193, 7, 0.12));
  z-index: -1;
}

.contour-node {
  padding-right: clamp(1.3rem, 4vw, 4rem);
}

.float-orb {
  float: right;
  width: clamp(7rem, 14vw, 12rem);
  height: clamp(7rem, 14vw, 12rem);
  margin: 0 0 1.2rem 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 101, 0.28);
  shape-outside: circle(50%);
  background: radial-gradient(circle, rgba(255, 193, 7, 0.08), transparent 62%);
}

.illustration-node {
  padding: clamp(1rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.nerve-node { margin-top: 16vh; }
.bloom-node { margin-left: auto; margin-top: -3vh; }
.delta-node { margin-left: 9vw; margin-top: 10vh; }
.palette-node { margin-left: auto; }
.typography-node { margin-top: 13vh; }
.terminal-node { max-width: 860px; margin-left: 15vw; margin-top: 16vh; }

.system-label,
figcaption {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c4856b;
}

.headline {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.93;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fdf0e2;
  text-shadow: 0 0 40px rgba(255, 138, 101, 0.35);
  background: linear-gradient(135deg, #ff8a65 0%, #ffc107 40%, #ffab91 70%, #e8d5c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.small-headline {
  font-size: clamp(2.3rem, 5.6vw, 5rem);
}

.subheading {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.65rem, 3.4vw, 3.05rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fdf0e2;
  text-shadow: 0 0 30px rgba(255, 138, 101, 0.28);
}

p {
  max-width: 52ch;
  margin: 0 0 1rem;
  font-family: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.72;
  letter-spacing: 0.015em;
  color: #e8d5c4;
  text-align: left;
}

p span {
  color: #ffc107;
  font-family: var(--mono);
  font-size: 0.82em;
}

.hero-copy {
  max-width: 52ch;
  border-left: 1px solid rgba(255, 193, 7, 0.45);
  padding-left: 1.4rem;
}

.type-display {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffab91;
}

.inline-sigil {
  width: 5rem;
  margin-top: 1.2rem;
  fill: none;
  stroke: #ffc107;
  stroke-width: 2px;
  filter: drop-shadow(0 0 14px rgba(255, 193, 7, 0.35));
}

.line-art {
  width: min(100%, 28rem);
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(255, 138, 101, 0.16));
}

.draw-group {
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coral-stroke { stroke: #ff8a65; }
.amber-stroke { stroke: #ffc107; }
.peach-stroke { stroke: #ffab91; }

.draw-group path,
.draw-group circle {
  stroke-dasharray: var(--path-length, 900);
  stroke-dashoffset: var(--path-length, 900);
  transition: stroke-dashoffset 2s ease-out;
}

.line-drawn .draw-group path,
.line-drawn .draw-group circle {
  stroke-dashoffset: 0;
}

.swatch-river {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.swatch-river i {
  display: block;
  width: clamp(2.6rem, 5vw, 4.2rem);
  aspect-ratio: 1;
  background: var(--swatch);
  border: 1px solid rgba(253, 240, 226, 0.16);
  border-radius: 50% 42% 55% 37%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--swatch) 45%, transparent);
  animation: swatchDrift 5s ease-in-out infinite alternate;
}

.swatch-river i:nth-child(2n) { animation-delay: -1.2s; }
.swatch-river i:nth-child(3n) { animation-delay: -2.4s; }

@keyframes swatchDrift {
  to { transform: translateY(0.45rem) rotate(18deg); border-radius: 42% 58% 39% 61%; }
}

.navigation-sigil {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 20;
  width: 4rem;
  height: 4rem;
}

.sigil-button {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4rem;
  height: 4rem;
  padding: 0.42rem;
  border: 1px solid rgba(255, 193, 7, 0.85);
  border-radius: 50%;
  background: rgba(45, 27, 46, 0.86);
  color: #ffc107;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 193, 7, 0.2), inset 0 0 20px rgba(255, 138, 101, 0.08);
  transition: transform 360ms ease, box-shadow 360ms ease;
}

.sigil-button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  overflow: visible;
}

.sigil-button circle,
.sigil-button path {
  transform-origin: 32px 32px;
  transition: transform 420ms ease;
}

.sigil-button:hover,
.navigation-sigil.open .sigil-button {
  transform: scale(1.08);
  box-shadow: 0 0 32px rgba(255, 193, 7, 0.38), inset 0 0 20px rgba(255, 138, 101, 0.12);
}

.sigil-button:hover circle,
.navigation-sigil.open .sigil-button circle {
  transform: scale(1.1);
}

.sigil-button:hover path,
.navigation-sigil.open .sigil-button path {
  transform: rotate(120deg);
}

.radial-menu {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18rem;
  height: 18rem;
  pointer-events: none;
}

.menu-node {
  position: absolute;
  right: 0.28rem;
  bottom: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.45rem;
  height: 3.45rem;
  border: 1px solid rgba(255, 193, 7, 0.55);
  border-radius: 50%;
  background: #ff8a65;
  color: #1a0f1e;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease, background 250ms ease;
  pointer-events: auto;
}

.navigation-sigil.open .menu-node {
  opacity: 1;
}

.navigation-sigil.open .menu-node-1 { transform: translate(-8px, -120px) scale(1) rotate(0deg); transition-delay: 0ms; }
.navigation-sigil.open .menu-node-2 { transform: translate(-78px, -96px) scale(1) rotate(0deg); transition-delay: 80ms; }
.navigation-sigil.open .menu-node-3 { transform: translate(-120px, -34px) scale(1) rotate(0deg); transition-delay: 160ms; }
.navigation-sigil.open .menu-node-4 { transform: translate(-112px, 42px) scale(1) rotate(0deg); transition-delay: 240ms; }
.navigation-sigil.open .menu-node-5 { transform: translate(-50px, 96px) scale(1) rotate(0deg); transition-delay: 320ms; }

.menu-node:hover {
  background: #ffab91;
}

@media (max-width: 860px) {
  .flow-container {
    display: block;
    min-height: auto;
    padding: 1.25rem 1rem 10rem;
  }

  .flow-node,
  .hero-node,
  .terminal-node {
    width: auto;
    max-width: none;
    margin: 3rem 0;
    transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--node-angle, 0deg) * 0.35));
  }

  .hero-node {
    padding-top: 12vh;
  }

  .headline {
    font-size: clamp(2.8rem, 15vw, 5rem);
  }

  .navigation-sigil {
    right: 1rem;
    bottom: 1rem;
  }

  .navigation-sigil.open .menu-node-1 { transform: translate(-4px, -92px) scale(1) rotate(0deg); }
  .navigation-sigil.open .menu-node-2 { transform: translate(-63px, -76px) scale(1) rotate(0deg); }
  .navigation-sigil.open .menu-node-3 { transform: translate(-94px, -25px) scale(1) rotate(0deg); }
  .navigation-sigil.open .menu-node-4 { transform: translate(-86px, 34px) scale(1) rotate(0deg); }
  .navigation-sigil.open .menu-node-5 { transform: translate(-34px, 72px) scale(1) rotate(0deg); }
}