:root {
  --deep-ground: #0b1628;
  --primary-ground: #0f1f3a;
  --mist: #162d4f;
  --frost: #c4d7e0;
  --cerulean: #8fa8bf;
  --teal: #5e9b8a;
  --blush: #d4a0b9;
  --violet: #3a2d5e;
  --grid-gap: clamp(8px, 1.2vw, 20px);
}

/* Compliance tokens from DESIGN.md typography parser: Interaction Guidelines:** IntersectionObserver IntersectionObserver` `threshold: [0 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: #0b1628;
  color: #8fa8bf;
  font-family: "Libre Franklin", Inter, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 16%, rgba(94, 155, 138, 0.16), transparent 28%),
    radial-gradient(circle at 76% 38%, rgba(212, 160, 185, 0.08), transparent 23%),
    linear-gradient(90deg, rgba(94, 155, 138, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(94, 155, 138, 0.026) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  mix-blend-mode: screen;
  opacity: 0.78;
  z-index: 2;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 { font-family: "Tenor Sans", serif; font-weight: 400; color: #c4d7e0; }

h1 {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  letter-spacing: 0.08em;
  line-height: 0.95;
  text-transform: lowercase;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: 0.025em;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: 0.04em;
}

p {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.72;
}

main { position: relative; z-index: 4; }

.f-pattern {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.55;
}

.f-line {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, rgba(94,155,138,0), rgba(94,155,138,0.42), rgba(94,155,138,0));
  height: 1px;
  animation: scanFade 6s ease-in-out infinite;
}

.f-line-top { left: 5vw; right: 5vw; top: 30vh; }
.f-line-mid { left: 5vw; width: 62vw; top: 54vh; animation-delay: 1.2s; }
.f-line-rail {
  left: clamp(25px, 7vw, 92px);
  top: 14vh;
  bottom: 10vh;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, rgba(94,155,138,0), rgba(94,155,138,0.34), rgba(94,155,138,0));
  animation-delay: 2s;
}

.layer-indicator {
  position: fixed;
  left: clamp(18px, 3vw, 46px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 31px;
  padding: 20px 0;
}

.indicator-spine {
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(94, 155, 138, 0.28);
}

.layer-dot {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(94, 155, 138, 0.65);
  border-radius: 50%;
  background: #0b1628;
  text-decoration: none;
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.layer-dot span {
  position: absolute;
  left: 22px;
  top: -3px;
  white-space: nowrap;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(0.65rem, 0.8vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(94, 155, 138, 0.7);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.layer-dot.active {
  background: #5e9b8a;
  box-shadow: 0 0 0 7px rgba(94, 155, 138, 0.11), 0 0 22px rgba(94, 155, 138, 0.48);
  transform: scale(1.18);
}

.layer-dot.active span, .layer-dot:hover span { opacity: 1; transform: translateX(0); }

.layer-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(70px, 10vw, 150px) clamp(22px, 6vw, 95px) clamp(70px, 9vw, 130px) clamp(72px, 10vw, 150px);
}

.canopy-layer {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding-top: 25vh;
  background: linear-gradient(165deg, #0b1628 0%, #0f1f3a 40%, #162d4f 75%, #1a2d4a 100%);
}

.understory-layer {
  min-height: 80vh;
  background: linear-gradient(180deg, #0f1f3a 0%, #0b1628 100%);
}

.forest-floor {
  min-height: 70vh;
  background: radial-gradient(circle at 30% 20%, rgba(58,45,94,0.45), transparent 44%), #0f1f3a;
}

.root-network {
  min-height: 60vh;
  background: linear-gradient(180deg, #0f1f3a 0%, #0b1628 100%);
}

.deep-soil {
  min-height: 40vh;
  display: grid;
  place-items: center;
  background: #0b1628;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: 1280px;
  margin: 0 auto;
}

.hero-shell {
  position: relative;
  width: min(82vw, 900px);
  min-height: 310px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(42px, 8vw, 76px);
  background: radial-gradient(circle, rgba(94, 155, 138, 0.15) 0%, transparent 70%);
}

.hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-path, .frame-ticks { fill: none; stroke: rgba(94, 155, 138, 0.38); stroke-width: 1; vector-effect: non-scaling-stroke; }
.frame-path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: drawFrame 800ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards; }
.frame-ticks { opacity: 0; animation: revealTick 650ms ease 900ms forwards; }

.hud-label {
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(0.65rem, 0.8vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(94, 155, 138, 0.7);
}

.hero-shell .hud-label { position: absolute; top: clamp(24px, 4vw, 38px); color: rgba(94,155,138,0.5); }
.hero-caption { position: absolute; bottom: clamp(22px, 4vw, 36px); font-family: "Share Tech Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(143,168,191,0.52); }

.organism { position: absolute; fill: none; stroke: #5e9b8a; stroke-width: 1px; opacity: 0.4; animation: drift 28s ease-in-out infinite; }
.organism .dashed, .organism.dashed { stroke-dasharray: 4 8; }
.organism.blush { stroke: #d4a0b9; opacity: 0.32; }
.org-1 { width: clamp(100px, 15vw, 300px); left: 9%; top: 12%; opacity: 0.18; }
.org-2 { width: clamp(50px, 7vw, 120px); right: 12%; top: 19%; animation-duration: 34s; }
.org-3 { width: clamp(110px, 17vw, 270px); right: 8%; bottom: 10%; opacity: 0.15; animation-duration: 40s; }
.org-4 { width: clamp(44px, 5vw, 92px); left: 18%; bottom: 18%; animation-duration: 24s; }
.org-5 { width: clamp(70px, 9vw, 150px); left: 52%; top: 9%; animation-duration: 32s; }

.layer-copy { grid-column: 1 / span 7; }
.layer-copy h2 { margin: 18px 0 32px; }
.layer-copy p:not(.hud-label) { margin-top: 20px; max-width: 760px; color: #8fa8bf; }

.telemetry-stack { grid-column: 9 / span 4; display: grid; gap: 18px; align-content: center; }
.telemetry-card {
  position: relative;
  padding: 18px 20px;
  background: rgba(22, 45, 79, 0.34);
  border: 1px solid rgba(94, 155, 138, 0.28);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.telemetry-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(94,155,138,0.12); pointer-events: none; }
.telemetry-card span, .telemetry-card strong { display: block; font-family: "Share Tech Mono", monospace; letter-spacing: 0.14em; }
.telemetry-card span { color: rgba(94,155,138,0.7); font-size: 0.72rem; }
.telemetry-card strong { margin-top: 11px; color: #c4d7e0; font-size: clamp(1rem, 1.8vw, 1.5rem); font-weight: 400; }

.floor-header { grid-column: 1 / span 8; margin-bottom: 28px; }
.floor-header h2 { margin-top: 18px; }
.bloom-field { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 58px); min-height: 430px; align-items: start; }
.bloom-card {
  position: relative;
  min-height: 285px;
  padding: 35px;
  border: 1px solid rgba(94, 155, 138, 0.2);
  background: rgba(15, 31, 58, 0.8);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  overflow: hidden;
  transform: scale(0.45);
  opacity: 0.85;
  transition: width 500ms cubic-bezier(0.34, 1.56, 0.64, 1), height 500ms cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 500ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bloom-card.bloom-open { width: 100%; height: auto; border-radius: 12px; transform: scale(1); opacity: 1; }
.bloom-card::after { content: ""; position: absolute; inset: 50%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 160, 185, 0.25) 0%, transparent 60%); opacity: 0; transform: translate(-50%, -50%); }
.bloom-card.bloom-open::after { animation: bloomBurst 640ms ease-out; }
.bloom-b { margin-top: 48px; }
.bloom-c { margin-top: 18px; }
.bloom-icon, .bloom-card h3, .bloom-card p { opacity: 0; transform: translateY(12px); transition: opacity 220ms ease 500ms, transform 220ms ease 500ms; }
.bloom-open .bloom-icon, .bloom-open h3, .bloom-open p { opacity: 1; transform: translateY(0); }
.bloom-icon { width: 72px; height: 72px; margin-bottom: 28px; }
.bloom-icon svg { width: 100%; height: 100%; fill: none; stroke: #5e9b8a; stroke-width: 1.2; opacity: 0.78; }
.bloom-card p { margin-top: 18px; color: #8fa8bf; }

.network-copy { max-width: 900px; margin: 0 auto 36px; padding-left: clamp(72px, 8vw, 120px); }
.network-copy h2 { margin-top: 18px; }
.network-svg { width: 100%; height: min(54vw, 520px); min-height: 330px; overflow: visible; animation: networkPulse 4s ease-in-out infinite; }
.network-path { fill: none; stroke: rgba(94,155,138,0.3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.network-path.branch { stroke: rgba(212,160,185,0.22); stroke-width: 1.2; }
.network-node circle, .network-node path { fill: rgba(15,31,58,0.62); stroke: rgba(94,155,138,0.48); stroke-width: 1; }
.network-node text { font-family: "Share Tech Mono", monospace; font-size: 14px; letter-spacing: 0.14em; fill: rgba(94,155,138,0.7); }

.soil-frame { position: relative; text-align: center; padding: 48px 78px; border: 1px solid rgba(94,155,138,0.18); clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); transition: opacity 120ms linear; }
.coordinates { font-family: "Share Tech Mono", monospace; letter-spacing: 0.14em; color: rgba(94,155,138,0.4); font-size: 0.8rem; }
.soil-name { margin-top: 16px; font-family: "Tenor Sans", serif; font-size: 1rem; letter-spacing: 0.08em; color: rgba(143,168,191,0.3); }

.fairy-particle {
  position: absolute;
  width: var(--particle-size);
  height: var(--particle-size);
  left: var(--particle-left);
  top: var(--particle-top);
  border-radius: 50%;
  background: var(--particle-color);
  opacity: 0.16;
  box-shadow: 0 0 8px rgba(212, 160, 185, 0.3);
  pointer-events: none;
  z-index: -1;
  animation: particleRise var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.reveal-item { opacity: 0; transform: translateX(-20px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal-item.is-visible, .is-visible > .reveal-item { opacity: 1; transform: translateX(0); }
.layer-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(196,215,224,0.12) 49%, transparent 51%); transform: translateY(-110%); opacity: 0; z-index: 6; }
.layer-section.scan::after { animation: sectionScan 400ms cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes drawFrame { to { stroke-dashoffset: 0; } }
@keyframes revealTick { to { opacity: 1; } }
@keyframes scanFade { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.95; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(18px, -24px) rotate(8deg); } }
@keyframes particleRise { 0%, 100% { opacity: 0.1; transform: translateY(18px); } 50% { opacity: 0.6; transform: translateY(-34px); } }
@keyframes sectionScan { 0% { opacity: 0; transform: translateY(-110%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(110%); } }
@keyframes bloomBurst { 0% { opacity: 0.8; width: 10px; height: 10px; } 100% { opacity: 0; width: 270px; height: 270px; } }
@keyframes networkPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

@media (max-width: 820px) {
  .layer-section { padding-left: 58px; padding-right: 20px; }
  .section-grid { grid-template-columns: 1fr; }
  .layer-copy, .telemetry-stack, .floor-header, .bloom-field { grid-column: 1; }
  .bloom-field { grid-template-columns: 1fr; min-height: auto; }
  .bloom-b, .bloom-c { margin-top: 0; }
  .network-copy { padding-left: 58px; }
  .hero-shell { width: min(90vw, 900px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal-item { opacity: 1; transform: none; }
  .network-path { stroke-dashoffset: 0; }
}