:root {
  --bg: #0a0f0c;
  --bg-2: #0e1511;
  --panel: #151e18;
  --panel-2: #f4f1e8;
  --surface-dark: #0e1511;
  --surface-mid: #111a14;
  --surface-panel: #151e18;
  --surface-accent: #102018;
  --surface-light: #eef4e8;
  --surface-light-2: #e6eddf;
  --accent-soft: rgba(93, 184, 117, 0.12);
  --accent-line: rgba(158, 220, 122, 0.28);
  --ink: #edf4ec;
  --ink-dark: #101611;
  --muted: #aab7ae;
  --quiet: #738078;
  --line: rgba(255, 255, 255, 0.11);
  --line-dark: rgba(16, 22, 17, 0.14);
  --leaf: #5db875;
  --leaf-2: #9edc7a;
  --teal: #0c6566;
  --cream: #fffdf4;
  --max: 1220px;
  --radius: 8px;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  margin: 0;
  overflow-x: hidden;
  text-rendering: geometricPrecision;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(198, 236, 154, 0.78);
  outline-offset: 4px;
}

img {
  display: block;
  max-width: 100%;
}

em {
  color: var(--leaf-2);
  font-style: italic;
}

.container {
  margin: 0 auto;
  max-width: var(--max);
  padding: 0 clamp(18px, 4vw, 48px);
}

.narrow {
  max-width: 980px;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(10, 15, 12, 0.74);
  border-bottom: 1px solid transparent;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  left: 0;
  padding: 14px clamp(18px, 4vw, 48px);
  position: fixed;
  right: 0;
  top: 0;
  transition: background 180ms ease, border-color 180ms ease;
  z-index: 50;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  background: rgba(10, 15, 12, 0.94);
  border-bottom-color: var(--line);
}

.brand {
  align-items: center;
  display: flex;
  gap: 10px;
  font-weight: 760;
  letter-spacing: 0;
  position: relative;
  z-index: 52;
}

.brand img {
  height: 40px;
  object-fit: contain;
  width: 50px;
}

.nav {
  align-items: center;
  display: flex;
  gap: 8px;
}

.nav a {
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  padding: 9px 13px;
}

.nav a:hover,
.nav a.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.nav .nav-cta {
  border: 1px solid rgba(157, 220, 122, 0.35);
  color: var(--ink);
  margin-left: 4px;
}

.nav-toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: none;
  height: 42px;
  position: relative;
  width: 48px;
  z-index: 52;
}

.nav-toggle span {
  background: var(--ink);
  height: 1px;
  left: 14px;
  position: absolute;
  transition: transform 180ms ease, top 180ms ease;
  width: 18px;
}

.nav-toggle span:first-child {
  top: 16px;
}

.nav-toggle span:last-child {
  top: 24px;
}

body.nav-open .nav-toggle span:first-child {
  top: 20px;
  transform: rotate(45deg);
}

body.nav-open .nav-toggle span:last-child {
  top: 20px;
  transform: rotate(-45deg);
}

.hero {
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(122px, 13vh, 152px) 0 clamp(58px, 7vh, 92px);
  position: relative;
}

.hero-overlay {
  inset: 0;
  position: absolute;
}

.hero-overlay {
  background:
    radial-gradient(circle at 77% 42%, rgba(12, 101, 102, 0.12), transparent 34%),
    radial-gradient(circle at 15% 82%, rgba(93, 184, 117, 0.08), transparent 30%),
    linear-gradient(90deg, rgba(10, 15, 12, 0.98), rgba(10, 15, 12, 0.84) 48%, rgba(10, 15, 12, 0.68) 78%, rgba(10, 15, 12, 0.78)),
    linear-gradient(0deg, var(--bg), transparent 46%);
}

.hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(38px, 5vw, 76px);
  grid-template-columns: minmax(0, 0.95fr) minmax(390px, 0.78fr);
  min-height: min(760px, calc(100svh - 190px));
  position: relative;
  z-index: 2;
}

.hero-copy {
  max-width: 760px;
  min-width: 0;
}

.hero h1 {
  font-size: clamp(48px, 5.25vw, 76px);
  max-width: 760px;
  overflow-wrap: normal;
  text-wrap: balance;
}

.hero-spotlight {
  align-self: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(158, 220, 122, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(18, 31, 25, 0.68), rgba(7, 14, 10, 0.84));
  border: 1px solid rgba(158, 220, 122, 0.2);
  border-radius: 18px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(237, 244, 236, 0.06);
  justify-self: center;
  margin: 0 auto;
  max-width: min(540px, 100%);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.hero-systems-lens::before,
.hero-systems-lens::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.hero-systems-lens::before {
  background:
    radial-gradient(circle at 46% 34%, rgba(237, 244, 236, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(127, 185, 183, 0.08), transparent 52%);
  height: 58%;
  left: 4%;
  top: -8%;
  transform: rotate(-3deg);
  width: 56%;
  z-index: 1;
}

.hero-systems-lens::after {
  border: 1px solid rgba(158, 220, 122, 0.12);
  border-radius: 16px;
  inset: 16px;
  z-index: 2;
}

.hero-spotlight-visual {
  display: block;
  position: relative;
  width: 100%;
  z-index: 3;
}

.hero-lens-shell {
  fill: rgba(7, 15, 11, 0.66);
  stroke: rgba(237, 244, 236, 0.08);
  stroke-width: 1;
}

.hero-lens-inner {
  fill: rgba(7, 18, 14, 0.34);
  stroke: rgba(158, 220, 122, 0.16);
  stroke-width: 1;
}

.hero-lens-glow {
  animation: heroLensBreathe 7.4s ease-in-out infinite;
  fill: url(#heroLensGlow);
  transform-box: fill-box;
  transform-origin: center;
}

.hero-lens-grid path {
  fill: none;
  stroke: rgba(237, 244, 236, 0.07);
  stroke-width: 1;
}

.hero-lens-orbits ellipse,
.hero-lens-orbits path,
.hero-lens-node-map path {
  fill: none;
  stroke: rgba(93, 184, 117, 0.2);
  stroke-width: 1.4;
}

.hero-lens-orbits ellipse {
  stroke-dasharray: 4 10;
}

.hero-lens-orbit-active {
  animation: heroLensTrace 7.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  filter: url(#heroLensSoftGlow);
  stroke: url(#heroLensLine);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 3;
}

.hero-lens-chip rect,
.hero-lens-output rect {
  fill: rgba(9, 18, 14, 0.78);
  stroke: rgba(158, 220, 122, 0.24);
  stroke-width: 1;
}

.hero-lens-chip text,
.hero-lens-output text {
  fill: rgba(237, 244, 236, 0.76);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 840;
  letter-spacing: 0;
}

.hero-lens-chip .lens-value,
.hero-lens-output .lens-value {
  fill: var(--leaf-2);
  font-size: 9px;
  font-weight: 780;
}

.hero-lens-chip {
  animation: heroLensChip 7.4s ease-in-out infinite;
}

.chip-two {
  animation-delay: 700ms;
}

.chip-three {
  animation-delay: 1400ms;
}

.hero-lens-rootzone {
  animation: heroLensRootZone 7.4s ease-in-out infinite;
  fill: rgba(93, 184, 117, 0.16);
  stroke: rgba(158, 220, 122, 0.26);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-lens-root,
.hero-lens-stem {
  animation: heroLensStem 7.4s ease-in-out infinite;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
}

.hero-lens-root {
  stroke: rgba(237, 244, 236, 0.5);
  stroke-width: 1.7;
}

.hero-lens-stem {
  filter: url(#heroLensSoftGlow);
  stroke: rgba(158, 220, 122, 0.8);
  stroke-width: 3;
}

.root-two,
.root-four {
  animation-delay: 140ms;
}

.root-three {
  animation-delay: 280ms;
}

.hero-lens-leaf {
  animation: heroLensLeaf 7.4s ease-in-out infinite;
  fill: url(#heroLensLeaf);
  opacity: 0.86;
  stroke: rgba(237, 244, 236, 0.22);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: center;
}

.leaf-b {
  animation-delay: 260ms;
}

.leaf-c {
  animation-delay: 520ms;
}

.hero-lens-area {
  animation: heroLensArea 7.4s ease-in-out infinite;
  fill: rgba(93, 184, 117, 0.12);
}

.hero-lens-line {
  animation: heroLensTrace 7.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  fill: none;
  filter: url(#heroLensSoftGlow);
  stroke: url(#heroLensLine);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 4;
}

.lens-dot {
  animation: heroLensDot 7.4s ease-in-out infinite;
  fill: var(--leaf-2);
  stroke: rgba(237, 244, 236, 0.58);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.dot-two {
  animation-delay: 360ms;
}

.dot-three {
  animation-delay: 720ms;
}

.dot-four {
  animation-delay: 1080ms;
}

.hero-lens-node-map {
  animation: heroLensNode 7.4s ease-in-out infinite;
}

.hero-lens-node-map circle {
  fill: rgba(158, 220, 122, 0.5);
  stroke: rgba(237, 244, 236, 0.28);
  stroke-width: 1;
}

.hero-lens-scan {
  animation: heroLensScan 7.4s ease-in-out infinite;
  fill: rgba(158, 220, 122, 0.58);
  filter: url(#heroLensSoftGlow);
}

.hero-lens-output {
  animation: heroLensOutput 7.4s ease-in-out infinite;
}

@keyframes heroLensTrace {
  0% {
    opacity: 0.22;
    stroke-dashoffset: 1;
  }

  46%,
  78% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.44;
    stroke-dashoffset: 0;
  }
}

@keyframes heroLensArea {
  0%,
  18% {
    opacity: 0;
  }

  52%,
  84% {
    opacity: 1;
  }

  100% {
    opacity: 0.32;
  }
}

@keyframes heroLensDot {
  0%,
  24%,
  100% {
    opacity: 0.38;
    transform: scale(0.86);
  }

  50%,
  74% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes heroLensStem {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  58%,
  88% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.66;
    stroke-dashoffset: 0;
  }
}

@keyframes heroLensLeaf {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.72) rotate(-2deg);
  }

  58%,
  88% {
    opacity: 0.9;
    transform: scale(1) rotate(0);
  }

  100% {
    opacity: 0.72;
    transform: scale(0.96) rotate(0);
  }
}

@keyframes heroLensRootZone {
  0%,
  100% {
    opacity: 0.52;
    transform: scaleX(0.94);
  }

  52% {
    opacity: 1;
    transform: scaleX(1.05);
  }
}

@keyframes heroLensBreathe {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.94);
  }

  52% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes heroLensScan {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  22% {
    opacity: 0.78;
  }

  76% {
    opacity: 0.78;
    transform: translateX(288px);
  }

  100% {
    opacity: 0;
    transform: translateX(288px);
  }
}

@keyframes heroLensChip {
  0%,
  100% {
    opacity: 0.64;
  }

  48%,
  76% {
    opacity: 1;
  }
}

@keyframes heroLensNode {
  0%,
  100% {
    opacity: 0.4;
  }

  48%,
  78% {
    opacity: 0.9;
  }
}

@keyframes heroLensOutput {
  0%,
  42% {
    opacity: 0.44;
  }

  64%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0.64;
  }
}

.hero-systems-lens {
  --hero-cycle: 9.8s;
  background:
    radial-gradient(circle at 54% 34%, rgba(158, 220, 122, 0.12), transparent 30%),
    radial-gradient(circle at 46% 62%, rgba(127, 185, 183, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(8, 18, 13, 0.62), rgba(4, 10, 7, 0.82));
  max-width: min(570px, 100%);
}

.hero-lens-shell {
  fill: rgba(5, 13, 9, 0.54);
  stroke: rgba(158, 220, 122, 0.2);
  stroke-width: 1.2;
}

.hero-lens-inner {
  fill: rgba(6, 18, 13, 0.3);
  stroke: rgba(237, 244, 236, 0.07);
  stroke-width: 1;
}

.hero-lens-glow {
  animation: bioMonitorSpotlight 9s ease-in-out infinite;
}

.hero-lens-grid path {
  stroke: rgba(237, 244, 236, 0.055);
}

.hero-lens-grid,
.hero-lens-chips {
  animation: instrumentationFade var(--hero-cycle) ease-in-out infinite;
}

.hero-response-graph {
  --support-dim-opacity: 0.26;
  --support-end-opacity: 0.36;
  --support-mid-opacity: 0.44;
  --support-opacity: 0.5;
  animation: supportLayerFocus var(--hero-cycle) ease-in-out infinite;
  opacity: 0.5;
}

.response-band {
  animation: responseBandSettle var(--hero-cycle) ease-in-out infinite;
  fill: rgba(127, 185, 183, 0.055);
  opacity: 0;
}

.response-area {
  animation: responseAreaRise var(--hero-cycle) ease-in-out infinite;
  fill: rgba(93, 184, 117, 0.07);
}

.response-line {
  animation: responseLineDraw var(--hero-cycle) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  fill: none;
  stroke: rgba(158, 220, 122, 0.42);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 2;
}

.response-point {
  animation: responsePointPulse var(--hero-cycle) ease-in-out infinite;
  fill: rgba(237, 244, 236, 0.78);
  opacity: 0;
}

.point-two {
  animation-delay: 900ms;
}

.point-three {
  animation-delay: 1800ms;
}

.point-four {
  animation-delay: 2700ms;
}

.hero-lens-chip rect,
.hero-consumption-panel > rect {
  fill: rgba(5, 13, 9, 0.78);
  stroke: rgba(158, 220, 122, 0.24);
}

.hero-lens-chip {
  --support-dim-opacity: 0.56;
  --support-end-opacity: 0.72;
  --support-mid-opacity: 0.84;
  --support-opacity: 1;
  animation: supportLayerFocus var(--hero-cycle) ease-in-out infinite;
}

.chip-two,
.chip-three {
  animation-delay: 0s;
}

.hero-lens-chip text,
.hero-consumption-panel text {
  fill: rgba(237, 244, 236, 0.76);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 840;
  letter-spacing: 0;
}

.hero-lens-chip .lens-value {
  fill: var(--leaf-2);
  font-size: 9px;
  font-weight: 800;
}

.reading-phase-a,
.reading-phase-b,
.reading-phase-c {
  opacity: 0;
}

.reading-phase-a {
  animation: readingPhaseA var(--hero-cycle) ease-in-out infinite;
}

.reading-phase-b {
  animation: readingPhaseB var(--hero-cycle) ease-in-out infinite;
}

.reading-phase-c {
  animation: readingPhaseC var(--hero-cycle) ease-in-out infinite;
}

.reading-track,
.resource-track {
  fill: rgba(237, 244, 236, 0.12);
}

.reading-band {
  fill: rgba(158, 220, 122, 0.18);
}

.reading-fill,
.resource-fill {
  fill: url(#heroLensWater);
  transform-box: fill-box;
  transform-origin: left center;
}

.vpd-fill {
  animation: vpdReading var(--hero-cycle) ease-in-out infinite;
}

.ec-fill {
  animation: ecReading var(--hero-cycle) ease-in-out infinite;
}

.dli-fill {
  animation: dliReading var(--hero-cycle) ease-in-out infinite;
}

.hero-irrigation-line {
  animation: irrigationPulse var(--hero-cycle) ease-in-out infinite;
  fill: none;
  stroke: rgba(127, 185, 183, 0.5);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 2;
}

.irrigation-two {
  animation-delay: 480ms;
}

.hero-transpiration-stream {
  animation: transpirationStream var(--hero-cycle) ease-in-out infinite;
  fill: none;
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.2);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
}

.stream-two {
  animation-delay: 540ms;
}

.stream-three {
  animation-delay: 920ms;
}

.hero-lens-plant {
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42));
}

.hero-shoot-system {
  animation: plantGrowthCycle var(--hero-cycle) cubic-bezier(0.24, 0.06, 0.2, 1) infinite;
  transform-box: fill-box;
  transform-origin: 50% 47%;
}

.hero-logo-formation {
  animation: logoFormationResolve var(--hero-cycle) cubic-bezier(0.22, 0.78, 0.24, 1) infinite;
  filter: drop-shadow(0 0 12px rgba(158, 220, 122, 0.16)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.34));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.directive-mark-vector {
  transform-box: fill-box;
  transform-origin: center;
}

.formation-halo {
  animation: formationHaloResolve var(--hero-cycle) ease-in-out infinite;
  fill: rgba(158, 220, 122, 0.045);
  opacity: 0;
  stroke: rgba(158, 220, 122, 0.14);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
}

.formation-orb {
  animation: formationOrbResolve var(--hero-cycle) ease-in-out infinite;
  fill: rgba(158, 220, 122, 0.76);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.formation-spine,
.formation-leaf {
  animation: formationLineResolve var(--hero-cycle) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  fill: none;
  stroke: rgba(158, 220, 122, 0.58);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formation-fill {
  animation: formationFillResolve var(--hero-cycle) cubic-bezier(0.18, 0.82, 0.22, 1) infinite;
  fill: url(#heroFormationFill);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.12);
  stroke-width: 0.6;
  transform-box: fill-box;
  transform-origin: center;
}

.mark-left,
.mark-outer-left {
  transform-origin: 78% 74%;
}

.mark-right,
.mark-outer-right {
  transform-origin: 22% 76%;
}

.mark-center,
.mark-lower {
  transform-origin: center;
}

.mark-orb {
  animation-name: formationOrbResolve;
  transform-origin: center;
}

.formation-highlight {
  animation: formationHighlightResolve var(--hero-cycle) ease-in-out infinite;
  fill: none;
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.32);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.hero-final-mark {
  animation: finalMarkHold var(--hero-cycle) cubic-bezier(0.18, 0.82, 0.24, 1) infinite;
  filter: drop-shadow(0 0 8px rgba(158, 220, 122, 0.12)) drop-shadow(0 22px 28px rgba(0, 0, 0, 0.34));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-final-mark-layer {
  animation: finalMarkLayerHold var(--hero-cycle) cubic-bezier(0.18, 0.82, 0.24, 1) infinite;
  filter: drop-shadow(0 0 10px rgba(158, 220, 122, 0.16)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.36));
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.985);
  transform-origin: center;
  width: min(72%, 340px);
  z-index: 4;
}

.preform-left {
  transform-origin: 76% 74%;
}

.preform-right {
  transform-origin: 22% 82%;
}

.preform-center,
.preform-lower {
  transform-origin: center;
}

.formation-spine {
  stroke: rgba(198, 236, 154, 0.64);
  stroke-width: 6.8;
}

.formation-leaf {
  stroke-width: 8.6;
}

.formation-left {
  stroke: rgba(93, 184, 117, 0.62);
}

.formation-right {
  stroke: rgba(198, 236, 154, 0.72);
}

.formation-lower {
  stroke: rgba(93, 184, 117, 0.56);
  stroke-width: 8;
}

.hero-lens-stem,
.hero-lens-petiole {
  animation: vascularDraw var(--hero-cycle) ease-in-out infinite;
  fill: none;
  stroke: rgba(158, 220, 122, 0.78);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
}

.hero-lens-stem {
  animation-name: vascularStemDraw;
  filter: url(#heroLensSoftGlow);
  stroke-width: 4.2;
}

.hero-lens-petiole {
  filter: url(#heroLensSoftGlow);
  stroke: rgba(158, 220, 122, 0.78);
  stroke-width: 2.8;
}

.petiole-left-two,
.petiole-right-two {
  animation-name: vascularBranchLower;
}

.petiole-left-three,
.petiole-right-three {
  animation-name: vascularBranchMiddle;
}

.petiole-left-one,
.petiole-right-one {
  animation-name: vascularBranchUpper;
}

.hero-leaf-cluster {
  --leaf-full: 0.76;
  --leaf-mid-x: 0.48;
  --leaf-mid-y: 0.68;
  --leaf-logo-end-scale: 0.7;
  --leaf-logo-fade-scale: 0.74;
  --leaf-logo-mid-rotate: 0deg;
  --leaf-logo-mid-x: 0px;
  --leaf-logo-mid-y: 0px;
  --leaf-logo-rotate: 0deg;
  --leaf-logo-scale: 0.82;
  --leaf-logo-x: 0px;
  --leaf-logo-y: 0px;
  animation: canopyGrowth var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.leaf-left-one {
  animation-name: canopyGrowthUpper;
  --leaf-full: 0.72;
  --leaf-mid-x: 0.42;
  --leaf-mid-y: 0.6;
  --leaf-logo-end-scale: 0.76;
  --leaf-logo-fade-scale: 0.8;
  --leaf-logo-mid-rotate: 1deg;
  --leaf-logo-mid-x: 12px;
  --leaf-logo-mid-y: 12px;
  --leaf-logo-rotate: 2deg;
  --leaf-logo-scale: 0.88;
  --leaf-logo-x: 28px;
  --leaf-logo-y: 28px;
  transform-origin: 94% 82%;
}

.leaf-left-two {
  animation-name: canopyGrowthLower;
  --leaf-full: 0.62;
  --leaf-mid-x: 0.34;
  --leaf-mid-y: 0.54;
  --leaf-logo-end-scale: 0.62;
  --leaf-logo-fade-scale: 0.66;
  --leaf-logo-mid-rotate: -1.4deg;
  --leaf-logo-mid-x: 18px;
  --leaf-logo-mid-y: 10px;
  --leaf-logo-rotate: -3deg;
  --leaf-logo-scale: 0.74;
  --leaf-logo-x: 40px;
  --leaf-logo-y: 24px;
  transform-origin: 94% 72%;
}

.leaf-node-left {
  animation-name: canopyGrowthMiddle;
  --leaf-full: 0.58;
  --leaf-mid-x: 0.38;
  --leaf-mid-y: 0.5;
  --leaf-logo-end-scale: 0.48;
  --leaf-logo-fade-scale: 0.52;
  --leaf-logo-mid-rotate: 1.6deg;
  --leaf-logo-mid-x: 10px;
  --leaf-logo-mid-y: 8px;
  --leaf-logo-rotate: 4deg;
  --leaf-logo-scale: 0.58;
  --leaf-logo-x: 24px;
  --leaf-logo-y: 16px;
  transform-origin: 94% 78%;
}

.leaf-right-one {
  animation-name: canopyGrowthUpper;
  --leaf-full: 0.74;
  --leaf-mid-x: 0.44;
  --leaf-mid-y: 0.62;
  --leaf-logo-end-scale: 0.78;
  --leaf-logo-fade-scale: 0.82;
  --leaf-logo-mid-rotate: -1.2deg;
  --leaf-logo-mid-x: -16px;
  --leaf-logo-mid-y: 14px;
  --leaf-logo-rotate: -2.5deg;
  --leaf-logo-scale: 0.9;
  --leaf-logo-x: -36px;
  --leaf-logo-y: 32px;
  transform-origin: 8% 84%;
}

.leaf-right-two {
  animation-name: canopyGrowthLower;
  --leaf-full: 0.64;
  --leaf-mid-x: 0.36;
  --leaf-mid-y: 0.56;
  --leaf-logo-end-scale: 0.64;
  --leaf-logo-fade-scale: 0.68;
  --leaf-logo-mid-rotate: 1.2deg;
  --leaf-logo-mid-x: -14px;
  --leaf-logo-mid-y: 10px;
  --leaf-logo-rotate: 3deg;
  --leaf-logo-scale: 0.78;
  --leaf-logo-x: -32px;
  --leaf-logo-y: 22px;
  transform-origin: 8% 54%;
}

.leaf-node-right {
  animation-name: canopyGrowthMiddle;
  --leaf-full: 0.56;
  --leaf-mid-x: 0.36;
  --leaf-mid-y: 0.5;
  --leaf-logo-end-scale: 0.48;
  --leaf-logo-fade-scale: 0.52;
  --leaf-logo-mid-rotate: -1.6deg;
  --leaf-logo-mid-x: -10px;
  --leaf-logo-mid-y: 8px;
  --leaf-logo-rotate: -4deg;
  --leaf-logo-scale: 0.58;
  --leaf-logo-x: -22px;
  --leaf-logo-y: 16px;
  transform-origin: 8% 80%;
}

.hero-apical-leaf {
  animation: apicalLeafHold var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite;
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

.hero-apical-leaflet {
  fill: url(#heroLensLeaf);
  stroke: rgba(237, 244, 236, 0.22);
  stroke-width: 0.9;
}

.apical-leaflet-center {
  fill: rgba(198, 236, 154, 0.72);
}

.hero-apical-vein {
  fill: none;
  stroke: rgba(237, 244, 236, 0.22);
  stroke-linecap: round;
  stroke-width: 0.8;
}

.hero-lens-leaf {
  animation: leafSurfaceShift var(--hero-cycle) ease-in-out infinite;
  fill: url(#heroLensLeaf);
  stroke: rgba(237, 244, 236, 0.2);
  stroke-width: 1;
}

.hero-lens-vein {
  fill: none;
  stroke: rgba(237, 244, 236, 0.26);
  stroke-linecap: round;
  stroke-width: 1.2;
}

.hero-lens-vein.minor {
  stroke: rgba(237, 244, 236, 0.16);
  stroke-width: 0.9;
}

.hero-morph-orb {
  animation: morphOrbResolve var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.2, 1) infinite;
  fill: url(#heroLensLeaf);
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-resolution-field {
  animation: resolutionFieldResolve var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.22, 1) infinite;
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.resolve-thread {
  animation: resolveThreadDraw var(--hero-cycle) cubic-bezier(0.18, 0.82, 0.24, 1) infinite;
  fill: none;
  opacity: 0;
  stroke: url(#heroResolveTrace);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.thread-spine {
  stroke: rgba(198, 236, 154, 0.58);
  stroke-width: 2.4;
}

.resolve-core {
  animation: resolveCorePulse var(--hero-cycle) ease-in-out infinite;
  fill: rgba(237, 244, 236, 0.78);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-substrate {
  animation: substratePulse var(--hero-cycle) ease-in-out infinite;
  fill: rgba(74, 54, 37, 0.34);
  stroke: rgba(158, 220, 122, 0.18);
  stroke-width: 1;
}

.hero-lens-rootzone {
  animation: rootZonePulse var(--hero-cycle) ease-in-out infinite;
  fill: rgba(127, 185, 183, 0.12);
  stroke: rgba(127, 185, 183, 0.28);
}

.hero-lens-root {
  animation: rootGrowthDraw var(--hero-cycle) ease-in-out infinite;
  fill: none;
  stroke: url(#heroLensRoot);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.root-hair-one,
.root-hair-two,
.root-hair-three,
.root-hair-four,
.root-hair-five,
.root-hair-six,
.root-hair-seven,
.root-hair-eight,
.root-lateral-one,
.root-lateral-two,
.root-lateral-three,
.root-lateral-four {
  stroke-width: 1.35;
}

.root-lateral-one,
.root-lateral-two,
.root-lateral-three,
.root-lateral-four {
  animation-name: rootBranchDraw;
  stroke-width: 1.15;
}

.root-fine {
  animation-name: rootBranchDraw;
  stroke-width: 0.85;
}

.root-two,
.root-four,
.root-hair-one,
.root-hair-four {
  animation-delay: 0s;
}

.root-three,
.root-hair-two,
.root-hair-three {
  animation-delay: 0s;
}

.resource-dot {
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.water-dot {
  animation: rootUptake var(--hero-cycle) ease-in-out infinite;
  fill: #7fb9b7;
}

.nutrient-dot {
  animation: rootUptake var(--hero-cycle) 700ms ease-in-out infinite;
  fill: var(--leaf-2);
}

.dot-two,
.dot-four {
  animation-delay: 1.2s;
}

.hero-consumption-panel {
  animation: consumptionPanelLift var(--hero-cycle) ease-in-out infinite;
}

.hero-consumption-panel .resource-fill {
  fill: url(#heroLensWater);
}

.water-use {
  animation: waterUse var(--hero-cycle) ease-in-out infinite;
}

.nutrient-use {
  animation: nutrientUse var(--hero-cycle) ease-in-out infinite;
}

.light-use {
  animation: lightUse var(--hero-cycle) ease-in-out infinite;
}

@keyframes readingPhaseA {
  0%,
  28% {
    opacity: 1;
  }

  36%,
  100% {
    opacity: 0;
  }
}

@keyframes readingPhaseB {
  0%,
  30% {
    opacity: 0;
  }

  38%,
  62% {
    opacity: 1;
  }

  70%,
  100% {
    opacity: 0;
  }
}

@keyframes readingPhaseC {
  0%,
  62% {
    opacity: 0;
  }

  70%,
  90% {
    opacity: 1;
  }

  96%,
  100% {
    opacity: 0;
  }
}

@keyframes vpdReading {
  0%,
  29% {
    transform: scaleX(0.46);
  }

  37%,
  63% {
    transform: scaleX(0.68);
  }

  72%,
  100% {
    transform: scaleX(0.84);
  }
}

@keyframes ecReading {
  0%,
  29% {
    transform: scaleX(0.4);
  }

  37%,
  63% {
    transform: scaleX(0.64);
  }

  72%,
  100% {
    transform: scaleX(0.82);
  }
}

@keyframes dliReading {
  0%,
  29% {
    transform: scaleX(0.42);
  }

  37%,
  63% {
    transform: scaleX(0.66);
  }

  72%,
  100% {
    transform: scaleX(0.9);
  }
}

@keyframes formationHighlightResolve {
  0%,
  68% {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  78% {
    opacity: 0.36;
    stroke-dashoffset: 0.08;
  }

  88%,
  98% {
    opacity: 0.2;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes vascularDraw {
  0%,
  16% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  54% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  74% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }

  84% {
    opacity: 0.36;
    stroke-dashoffset: 0;
  }

  92% {
    opacity: 0.08;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes canopyTurgor {
  0%,
  100% {
    transform: scale(0.985);
  }

  44%,
  76% {
    transform: scale(1.018);
  }
}

@keyframes waterUse {
  0%,
  18% {
    transform: scaleX(0.42);
  }

  38%,
  58% {
    transform: scaleX(0.68);
  }

  70%,
  100% {
    transform: scaleX(0.86);
  }
}

@keyframes nutrientUse {
  0%,
  18% {
    transform: scaleX(0.34);
  }

  38%,
  58% {
    transform: scaleX(0.58);
  }

  70%,
  100% {
    transform: scaleX(0.78);
  }
}

@keyframes lightUse {
  0%,
  24% {
    transform: scaleX(0.46);
  }

  44%,
  58% {
    transform: scaleX(0.7);
  }

  70%,
  100% {
    transform: scaleX(0.92);
  }
}

@keyframes bioMonitorSpotlight {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Premium hero pass: keep the system legible at every frame, then resolve into direction. */
.hero-systems-lens {
  --hero-cycle: 11s;
  background:
    radial-gradient(circle at 50% 30%, rgba(237, 244, 236, 0.1), transparent 24%),
    radial-gradient(circle at 52% 48%, rgba(158, 220, 122, 0.16), transparent 34%),
    radial-gradient(circle at 46% 70%, rgba(127, 185, 183, 0.1), transparent 44%),
    linear-gradient(180deg, rgba(8, 19, 13, 0.78), rgba(3, 9, 6, 0.94));
  border-color: rgba(158, 220, 122, 0.28);
  border-radius: 20px;
  box-shadow:
    0 40px 110px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(93, 184, 117, 0.08),
    inset 0 1px 0 rgba(237, 244, 236, 0.08);
}

.hero-systems-lens::after {
  border-color: rgba(158, 220, 122, 0.16);
}

.hero-lens-shell {
  fill: rgba(5, 13, 9, 0.68);
  stroke: rgba(158, 220, 122, 0.26);
}

.hero-lens-inner {
  fill: rgba(6, 18, 13, 0.42);
  stroke: rgba(237, 244, 236, 0.09);
}

.hero-lens-grid path {
  stroke: rgba(237, 244, 236, 0.065);
}

.hero-response-graph {
  --support-dim-opacity: 0.18;
  --support-end-opacity: 0.42;
  --support-mid-opacity: 0.72;
  --support-opacity: 0.58;
}

.response-line {
  stroke: rgba(198, 236, 154, 0.54);
  stroke-width: 2.5;
}

.response-area {
  fill: rgba(93, 184, 117, 0.09);
}

.response-band {
  fill: rgba(127, 185, 183, 0.07);
}

.hero-lens-chip rect,
.hero-direction-readout rect,
.hero-consumption-panel > rect {
  fill: rgba(4, 12, 8, 0.84);
  stroke: rgba(158, 220, 122, 0.3);
}

.hero-direction-readout {
  animation: directionReadoutFocus var(--hero-cycle) ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
}

.hero-direction-readout text {
  fill: rgba(237, 244, 236, 0.72);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 840;
  letter-spacing: 0;
}

.hero-direction-readout .direction-value {
  fill: var(--leaf-2);
  font-size: 10px;
  opacity: 0;
}

.direction-phase-a {
  animation: directionPhaseA var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-b {
  animation: directionPhaseB var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-c {
  animation: directionPhaseC var(--hero-cycle) ease-in-out infinite;
}

.hero-decision-beam {
  animation: decisionBeamResolve var(--hero-cycle) ease-in-out infinite;
  filter: url(#heroLensSoftGlow);
  opacity: 0;
}

.decision-beam {
  fill: none;
  stroke: rgba(198, 236, 154, 0.36);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.beam-one {
  animation: decisionBeamTrace var(--hero-cycle) ease-in-out infinite;
}

.beam-two {
  animation: decisionBeamTrace var(--hero-cycle) 220ms ease-in-out infinite;
}

.beam-three {
  animation: decisionBeamTrace var(--hero-cycle) 420ms ease-in-out infinite;
}

.hero-final-mark-layer {
  top: 44%;
  width: min(68%, 330px);
}

/* Hero rebuild: living plant sequence with a causal plant-to-mark resolve. */
.hero-systems-lens {
  --hero-cycle: 9.4s;
  background:
    radial-gradient(circle at 50% 26%, rgba(237, 244, 236, 0.13), transparent 23%),
    radial-gradient(circle at 56% 46%, rgba(158, 220, 122, 0.17), transparent 34%),
    radial-gradient(circle at 42% 76%, rgba(127, 185, 183, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(8, 19, 13, 0.82), rgba(3, 9, 6, 0.96));
  border-color: rgba(198, 236, 154, 0.34);
  box-shadow:
    0 44px 116px rgba(0, 0, 0, 0.54),
    0 0 84px rgba(12, 101, 102, 0.14),
    inset 0 1px 0 rgba(237, 244, 236, 0.1);
}

.hero-lens-visual {
  display: block;
}

.hero-lens-glow {
  fill: url(#heroLensGlow);
}

.hero-lens-grid {
  opacity: 0.74;
}

.hero-response-graph {
  --support-dim-opacity: 0.16;
  --support-end-opacity: 0.48;
  --support-mid-opacity: 0.82;
  --support-opacity: 0.46;
}

.hero-lens-chip rect,
.hero-direction-readout rect,
.hero-consumption-panel > rect {
  fill: rgba(4, 12, 8, 0.72);
  stroke: rgba(198, 236, 154, 0.27);
}

.hero-lens-chip,
.hero-direction-readout,
.hero-consumption-panel {
  backdrop-filter: blur(8px);
}

.hero-lens-plant {
  animation: livingPlantDrift var(--hero-cycle) ease-in-out infinite;
  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 10px rgba(158, 220, 122, 0.08));
  transform-box: fill-box;
  transform-origin: 50% 58%;
}

.hero-lens-stem {
  stroke: rgba(198, 236, 154, 0.82);
  stroke-width: 4.6;
}

.hero-lens-petiole {
  stroke: rgba(158, 220, 122, 0.66);
  stroke-width: 2.55;
}

.hero-lens-leaf {
  fill: url(#heroLensLeaf);
  stroke: rgba(237, 244, 236, 0.24);
  stroke-width: 0.9;
}

.hero-lens-vein {
  stroke: rgba(237, 244, 236, 0.28);
}

.hero-growth-node {
  animation: growthNodePulse var(--hero-cycle) ease-in-out infinite;
  fill: rgba(237, 244, 236, 0.82);
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.node-lower {
  animation-delay: 180ms;
}

.node-mid {
  animation-delay: 360ms;
}

.node-upper {
  animation-delay: 540ms;
}

.node-apex {
  animation-delay: 720ms;
}

.leaf-left-one {
  --leaf-full: 0.98;
  --leaf-mid-x: 0.66;
  --leaf-mid-y: 0.8;
  --leaf-logo-end-scale: 0.52;
  --leaf-logo-mid-rotate: 9deg;
  --leaf-logo-mid-x: 48px;
  --leaf-logo-mid-y: 48px;
  --leaf-logo-rotate: 17deg;
  --leaf-logo-scale: 0.76;
  --leaf-logo-x: 78px;
  --leaf-logo-y: 72px;
  transform-origin: 96% 76%;
}

.leaf-left-two {
  --leaf-full: 0.96;
  --leaf-mid-x: 0.62;
  --leaf-mid-y: 0.78;
  --leaf-logo-end-scale: 0.46;
  --leaf-logo-mid-rotate: -4deg;
  --leaf-logo-mid-x: 62px;
  --leaf-logo-mid-y: 22px;
  --leaf-logo-rotate: 6deg;
  --leaf-logo-scale: 0.68;
  --leaf-logo-x: 102px;
  --leaf-logo-y: 34px;
  transform-origin: 92% 64%;
}

.leaf-node-left {
  --leaf-full: 0.94;
  --leaf-mid-x: 0.66;
  --leaf-mid-y: 0.78;
  --leaf-logo-end-scale: 0.42;
  --leaf-logo-mid-rotate: 11deg;
  --leaf-logo-mid-x: 40px;
  --leaf-logo-mid-y: 28px;
  --leaf-logo-rotate: 18deg;
  --leaf-logo-scale: 0.62;
  --leaf-logo-x: 66px;
  --leaf-logo-y: 46px;
  transform-origin: 92% 72%;
}

.leaf-right-one {
  --leaf-full: 0.98;
  --leaf-mid-x: 0.66;
  --leaf-mid-y: 0.8;
  --leaf-logo-end-scale: 0.54;
  --leaf-logo-mid-rotate: -10deg;
  --leaf-logo-mid-x: -44px;
  --leaf-logo-mid-y: 50px;
  --leaf-logo-rotate: -16deg;
  --leaf-logo-scale: 0.78;
  --leaf-logo-x: -72px;
  --leaf-logo-y: 74px;
  transform-origin: 8% 82%;
}

.leaf-right-two {
  --leaf-full: 0.96;
  --leaf-mid-x: 0.62;
  --leaf-mid-y: 0.78;
  --leaf-logo-end-scale: 0.46;
  --leaf-logo-mid-rotate: 5deg;
  --leaf-logo-mid-x: -62px;
  --leaf-logo-mid-y: 18px;
  --leaf-logo-rotate: -7deg;
  --leaf-logo-scale: 0.68;
  --leaf-logo-x: -100px;
  --leaf-logo-y: 28px;
  transform-origin: 10% 50%;
}

.leaf-node-right {
  --leaf-full: 0.94;
  --leaf-mid-x: 0.66;
  --leaf-mid-y: 0.78;
  --leaf-logo-end-scale: 0.42;
  --leaf-logo-mid-rotate: -11deg;
  --leaf-logo-mid-x: -38px;
  --leaf-logo-mid-y: 30px;
  --leaf-logo-rotate: -18deg;
  --leaf-logo-scale: 0.62;
  --leaf-logo-x: -64px;
  --leaf-logo-y: 46px;
  transform-origin: 10% 74%;
}

.hero-logo-formation {
  filter:
    drop-shadow(0 0 14px rgba(158, 220, 122, 0.2))
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.36));
}

.formation-fill {
  stroke: rgba(237, 244, 236, 0.16);
  stroke-width: 0.7;
}

.formation-highlight {
  stroke-width: 2.6;
}

.hero-final-mark {
  mix-blend-mode: screen;
}

.hero-final-mark-layer {
  mix-blend-mode: screen;
  width: min(64%, 310px);
}

.hero-resolution-field {
  mix-blend-mode: screen;
}

.decision-beam {
  stroke: rgba(237, 244, 236, 0.42);
  stroke-width: 1.9;
}

@keyframes livingPlantDrift {
  0%,
  100% {
    transform: translateY(2px) rotate(-0.18deg);
  }

  42%,
  58% {
    transform: translateY(-2px) rotate(0.26deg);
  }

  76%,
  88% {
    transform: translateY(-5px) rotate(0deg);
  }
}

@keyframes instrumentationFade {
  0%,
  46% {
    opacity: 0.92;
  }

  58% {
    opacity: 0.74;
  }

  70%,
  88% {
    opacity: 0.22;
  }

  100% {
    opacity: 0.92;
  }
}

@keyframes supportLayerFocus {
  0%,
  44% {
    opacity: var(--support-opacity, 1);
  }

  55% {
    opacity: var(--support-mid-opacity, 0.78);
  }

  70%,
  88% {
    opacity: var(--support-dim-opacity, 0.32);
  }

  100% {
    opacity: var(--support-end-opacity, var(--support-opacity, 1));
  }
}

@keyframes vascularStemDraw {
  0% {
    opacity: 0.58;
    stroke-dashoffset: 0.34;
  }

  18%,
  56% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  66% {
    opacity: 0.52;
    stroke-dashoffset: 0;
    transform: translate(4px, -12px) scale(0.96);
  }

  76%,
  88% {
    opacity: 0.08;
    stroke-dashoffset: 0;
    transform: translate(10px, -34px) scale(0.84);
  }

  100% {
    opacity: 0.58;
    stroke-dashoffset: 0.34;
    transform: none;
  }
}

@keyframes vascularBranchLower {
  0% {
    opacity: 0.42;
    stroke-dashoffset: 0.58;
  }

  24%,
  56% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }

  66% {
    opacity: 0.36;
    stroke-dashoffset: 0;
  }

  76%,
  88% {
    opacity: 0.04;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.42;
    stroke-dashoffset: 0.58;
  }
}

@keyframes vascularBranchMiddle {
  0% {
    opacity: 0.34;
    stroke-dashoffset: 0.68;
  }

  28%,
  56% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }

  66% {
    opacity: 0.34;
    stroke-dashoffset: 0;
  }

  76%,
  88% {
    opacity: 0.04;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.34;
    stroke-dashoffset: 0.68;
  }
}

@keyframes vascularBranchUpper {
  0% {
    opacity: 0.22;
    stroke-dashoffset: 0.82;
  }

  32%,
  56% {
    opacity: 0.86;
    stroke-dashoffset: 0;
  }

  66% {
    opacity: 0.3;
    stroke-dashoffset: 0;
  }

  76%,
  88% {
    opacity: 0.04;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.22;
    stroke-dashoffset: 0.82;
  }
}

@keyframes canopyGrowth {
  0% {
    opacity: 0.36;
    transform: translateY(8px) scale(0.42, 0.58) rotate(-8deg);
  }

  22% {
    opacity: 0.74;
    transform: translateY(2px) scale(var(--leaf-mid-x), var(--leaf-mid-y)) rotate(-3deg);
  }

  38%,
  56% {
    opacity: 0.98;
    transform: translateY(0) scale(var(--leaf-full)) rotate(0deg);
  }

  66% {
    opacity: 0.74;
    transform: translate(var(--leaf-logo-mid-x), var(--leaf-logo-mid-y)) scale(var(--leaf-logo-scale)) rotate(var(--leaf-logo-mid-rotate));
  }

  76%,
  88% {
    opacity: 0.2;
    transform: translate(var(--leaf-logo-x), var(--leaf-logo-y)) scale(var(--leaf-logo-end-scale)) rotate(var(--leaf-logo-rotate));
  }

  100% {
    opacity: 0.36;
    transform: translateY(8px) scale(0.42, 0.58) rotate(-8deg);
  }
}

@keyframes canopyGrowthLower {
  0% {
    opacity: 0.44;
    transform: translateY(8px) scale(0.46, 0.62) rotate(-7deg);
  }

  20% {
    opacity: 0.78;
    transform: translateY(2px) scale(var(--leaf-mid-x), var(--leaf-mid-y)) rotate(-2deg);
  }

  36%,
  56% {
    opacity: 0.98;
    transform: translateY(0) scale(var(--leaf-full)) rotate(0deg);
  }

  66% {
    opacity: 0.74;
    transform: translate(var(--leaf-logo-mid-x), var(--leaf-logo-mid-y)) scale(var(--leaf-logo-scale)) rotate(var(--leaf-logo-mid-rotate));
  }

  76%,
  88% {
    opacity: 0.18;
    transform: translate(var(--leaf-logo-x), var(--leaf-logo-y)) scale(var(--leaf-logo-end-scale)) rotate(var(--leaf-logo-rotate));
  }

  100% {
    opacity: 0.44;
    transform: translateY(8px) scale(0.46, 0.62) rotate(-7deg);
  }
}

@keyframes canopyGrowthUpper {
  0% {
    opacity: 0.22;
    transform: translateY(10px) scale(0.28, 0.44) rotate(-9deg);
  }

  28% {
    opacity: 0.7;
    transform: translateY(2px) scale(var(--leaf-mid-x), var(--leaf-mid-y)) rotate(-3deg);
  }

  42%,
  56% {
    opacity: 0.96;
    transform: translateY(0) scale(var(--leaf-full)) rotate(0deg);
  }

  66% {
    opacity: 0.72;
    transform: translate(var(--leaf-logo-mid-x), var(--leaf-logo-mid-y)) scale(var(--leaf-logo-scale)) rotate(var(--leaf-logo-mid-rotate));
  }

  76%,
  88% {
    opacity: 0.2;
    transform: translate(var(--leaf-logo-x), var(--leaf-logo-y)) scale(var(--leaf-logo-end-scale)) rotate(var(--leaf-logo-rotate));
  }

  100% {
    opacity: 0.22;
    transform: translateY(10px) scale(0.28, 0.44) rotate(-9deg);
  }
}

@keyframes canopyGrowthMiddle {
  0% {
    opacity: 0.26;
    transform: translateY(7px) scale(0.36, 0.5) rotate(-7deg);
  }

  26% {
    opacity: 0.66;
    transform: translateY(2px) scale(var(--leaf-mid-x), var(--leaf-mid-y)) rotate(-2deg);
  }

  40%,
  56% {
    opacity: 0.92;
    transform: translateY(0) scale(var(--leaf-full)) rotate(0deg);
  }

  66% {
    opacity: 0.68;
    transform: translate(var(--leaf-logo-mid-x), var(--leaf-logo-mid-y)) scale(var(--leaf-logo-scale)) rotate(var(--leaf-logo-mid-rotate));
  }

  76%,
  88% {
    opacity: 0.16;
    transform: translate(var(--leaf-logo-x), var(--leaf-logo-y)) scale(var(--leaf-logo-end-scale)) rotate(var(--leaf-logo-rotate));
  }

  100% {
    opacity: 0.26;
    transform: translateY(7px) scale(0.36, 0.5) rotate(-7deg);
  }
}

@keyframes apicalLeafHold {
  0% {
    opacity: 0.2;
    transform: translateY(8px) scale(0.28, 0.42) rotate(-4deg);
  }

  28% {
    opacity: 0.7;
    transform: translateY(2px) scale(0.7, 0.82) rotate(-1deg);
  }

  42%,
  58% {
    opacity: 0.98;
    transform: translateY(0) scale(1) rotate(0deg);
  }

  68% {
    opacity: 0.7;
    transform: translate(-8px, 14px) scale(0.86) rotate(-6deg);
  }

  78%,
  88% {
    opacity: 0.18;
    transform: translate(-36px, 22px) scale(0.58) rotate(-14deg);
  }

  100% {
    opacity: 0.2;
    transform: translateY(8px) scale(0.28, 0.42) rotate(-4deg);
  }
}

@keyframes leafSurfaceShift {
  0% {
    opacity: 0.62;
  }

  28%,
  58% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }

  84% {
    opacity: 0.28;
  }

  100% {
    opacity: 0.62;
  }
}

@keyframes growthNodePulse {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.62);
  }

  28%,
  56% {
    opacity: 0.82;
    transform: scale(1);
  }

  66% {
    opacity: 0.9;
    transform: scale(1.28);
  }

  78%,
  90% {
    opacity: 0;
    transform: scale(0.42);
  }

  100% {
    opacity: 0;
    transform: scale(0.62);
  }
}

@keyframes irrigationPulse {
  0% {
    opacity: 0.28;
    stroke-dashoffset: 0.58;
  }

  20%,
  48% {
    opacity: 0.88;
    stroke-dashoffset: 0;
  }

  62% {
    opacity: 0.28;
    stroke-dashoffset: 0;
  }

  76%,
  88% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.28;
    stroke-dashoffset: 0.58;
  }
}

@keyframes transpirationStream {
  0% {
    opacity: 0.08;
    stroke-dashoffset: 0.72;
    transform: translateY(6px);
  }

  32%,
  58% {
    opacity: 0.58;
    stroke-dashoffset: 0;
    transform: translateY(-5px);
  }

  68% {
    opacity: 0.16;
    stroke-dashoffset: 0;
    transform: translateY(-12px);
  }

  78%,
  88% {
    opacity: 0;
    stroke-dashoffset: 0;
    transform: translateY(-14px);
  }

  100% {
    opacity: 0.08;
    stroke-dashoffset: 0.72;
    transform: translateY(6px);
  }
}

@keyframes rootUptake {
  0%,
  16% {
    opacity: 0;
    transform: translateY(12px) scale(0.7);
  }

  28%,
  50% {
    opacity: 0.92;
    transform: translateY(-5px) scale(1);
  }

  64% {
    opacity: 0.28;
    transform: translateY(-28px) scale(0.78);
  }

  78%,
  100% {
    opacity: 0;
    transform: translateY(-38px) scale(0.62);
  }
}

@keyframes responseLineDraw {
  0% {
    opacity: 0.16;
    stroke-dashoffset: 0.82;
  }

  28% {
    opacity: 0.56;
    stroke-dashoffset: 0.34;
  }

  44%,
  60% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  70% {
    opacity: 0.22;
    stroke-dashoffset: 0;
  }

  78%,
  88% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.16;
    stroke-dashoffset: 0.82;
  }
}

@keyframes responseAreaRise {
  0%,
  24% {
    opacity: 0.1;
  }

  42%,
  60% {
    opacity: 1;
  }

  70% {
    opacity: 0.12;
  }

  78%,
  88% {
    opacity: 0;
  }

  100% {
    opacity: 0.1;
  }
}

@keyframes responseBandSettle {
  0%,
  24% {
    opacity: 0.06;
  }

  42%,
  60% {
    opacity: 1;
  }

  70% {
    opacity: 0.16;
  }

  78%,
  88% {
    opacity: 0;
  }

  100% {
    opacity: 0.06;
  }
}

@keyframes responsePointPulse {
  0% {
    opacity: 0.16;
    transform: scale(0.72);
  }

  38%,
  60% {
    opacity: 0.92;
    transform: scale(1);
  }

  70% {
    opacity: 0.12;
    transform: scale(0.8);
  }

  78%,
  88% {
    opacity: 0;
    transform: scale(0.76);
  }

  100% {
    opacity: 0.16;
    transform: scale(0.72);
  }
}

@keyframes formationLineResolve {
  0%,
  52% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  64% {
    opacity: 0.74;
    stroke-dashoffset: 0.34;
  }

  74%,
  88% {
    opacity: 0.26;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes formationHaloResolve {
  0%,
  54% {
    opacity: 0;
    transform: scale(0.74);
  }

  66% {
    opacity: 0.24;
    transform: scale(0.95);
  }

  78%,
  88% {
    opacity: 0.14;
    transform: scale(1.08);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes formationOrbResolve {
  0%,
  54% {
    opacity: 0;
    transform: translateY(10px) scale(0.36);
  }

  66% {
    opacity: 0.54;
    transform: translateY(2px) scale(0.86);
  }

  78%,
  88% {
    opacity: 0.94;
    transform: translateY(0) scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes resolveCorePulse {
  0%,
  54% {
    opacity: 0;
    transform: scale(0.34);
  }

  68% {
    opacity: 0.7;
    transform: scale(1);
  }

  80% {
    opacity: 0.1;
    transform: scale(2.1);
  }

  100% {
    opacity: 0;
    transform: scale(0.34);
  }
}

@keyframes directionReadoutFocus {
  0%,
  48% {
    opacity: 0.86;
  }

  60% {
    opacity: 1;
  }

  74%,
  88% {
    opacity: 0.14;
  }

  100% {
    opacity: 0.86;
  }
}

@keyframes directionPhaseA {
  0%,
  22% {
    opacity: 1;
  }

  30%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseB {
  0%,
  28% {
    opacity: 0;
  }

  36%,
  52% {
    opacity: 1;
  }

  60%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseC {
  0%,
  54% {
    opacity: 0;
  }

  62%,
  74% {
    opacity: 1;
  }

  82%,
  100% {
    opacity: 0;
  }
}

@keyframes decisionBeamResolve {
  0%,
  46% {
    opacity: 0;
  }

  58%,
  72% {
    opacity: 1;
  }

  84%,
  100% {
    opacity: 0;
  }
}

@keyframes decisionBeamTrace {
  0%,
  48% {
    stroke-dashoffset: 1;
  }

  64%,
  78% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 1;
  }
}

/* Clarity correction: remove the cloudy morph frame and make the resolve crisp. */
.hero-leaf-cluster,
.leaf-left-one,
.leaf-left-two,
.leaf-node-left,
.leaf-right-one,
.leaf-right-two,
.leaf-node-right {
  animation-name: premiumLeafOpen;
}

.hero-logo-formation {
  filter:
    drop-shadow(0 0 8px rgba(198, 236, 154, 0.14))
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}

.formation-fill {
  fill-opacity: 0.74;
}

.formation-halo {
  stroke-width: 1;
}

.hero-final-mark {
  filter:
    drop-shadow(0 0 8px rgba(198, 236, 154, 0.18))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.32));
}

.hero-final-mark-layer {
  display: none;
}

.hero-resolution-field {
  filter: none;
}

.resolve-thread {
  stroke-width: 1;
}

.thread-spine {
  stroke-width: 2;
}

.hero-morph-orb {
  filter: drop-shadow(0 0 10px rgba(198, 236, 154, 0.24));
}

@keyframes finalMarkLayerHold {
  0%,
  100% {
    opacity: 0;
  }
}

@keyframes resolutionFieldResolve {
  0%,
  50% {
    opacity: 0;
    transform: scale(0.98);
  }

  62% {
    opacity: 0.28;
    transform: scale(1);
  }

  72% {
    opacity: 0.34;
    transform: scale(1.006);
  }

  82%,
  90% {
    opacity: 0.08;
    transform: scale(1.012);
  }

  100% {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes resolveThreadDraw {
  0%,
  50% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  62% {
    opacity: 0.5;
    stroke-dashoffset: 0.42;
  }

  72% {
    opacity: 0.42;
    stroke-dashoffset: 0;
  }

  82%,
  90% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes morphOrbResolve {
  0% {
    opacity: 0.12;
    transform: scale(0.5);
  }

  34%,
  58% {
    opacity: 0.76;
    transform: scale(1);
  }

  66% {
    opacity: 0.84;
    transform: translate(-10px, 12px) scale(1.16);
  }

  76%,
  90% {
    opacity: 0.18;
    transform: translate(-24px, 20px) scale(1.46);
  }

  100% {
    opacity: 0.12;
    transform: scale(0.5);
  }
}

/* Cleaner handoff timing: no smeared plant/mark overlap. */
@keyframes premiumLeafOpen {
  0% {
    opacity: 0.32;
    transform: translateY(8px) scale(0.42, 0.58) rotate(-7deg);
  }

  22% {
    opacity: 0.72;
    transform: translateY(2px) scale(var(--leaf-mid-x), var(--leaf-mid-y)) rotate(-2deg);
  }

  38%,
  56% {
    opacity: 0.98;
    transform: translateY(0) scale(var(--leaf-full)) rotate(0deg);
  }

  62% {
    opacity: 0.16;
    transform: translate(
      calc(var(--leaf-logo-mid-x) * 0.18),
      calc(var(--leaf-logo-mid-y) * 0.18)
    ) scale(0.72) rotate(calc(var(--leaf-logo-mid-rotate) * 0.22));
  }

  68%,
  90% {
    opacity: 0;
    transform: translate(
      calc(var(--leaf-logo-x) * 0.18),
      calc(var(--leaf-logo-y) * 0.18)
    ) scale(0.48) rotate(calc(var(--leaf-logo-rotate) * 0.22));
  }

  100% {
    opacity: 0.32;
    transform: translateY(8px) scale(0.42, 0.58) rotate(-7deg);
  }
}

@keyframes plantGrowthCycle {
  0% {
    filter: saturate(0.9);
    opacity: 0.72;
    transform: translateY(10px) scale(0.86);
  }

  18% {
    opacity: 0.86;
    transform: translateY(4px) scale(0.94);
  }

  36%,
  56% {
    filter: saturate(1.1);
    opacity: 1;
    transform: translateY(-1px) scale(1);
  }

  62% {
    filter: saturate(1);
    opacity: 0.14;
    transform: translateY(-5px) scale(0.96);
  }

  68%,
  90% {
    filter: saturate(0.9);
    opacity: 0;
    transform: translateY(-9px) scale(0.9);
  }

  100% {
    filter: saturate(0.9);
    opacity: 0.72;
    transform: translateY(10px) scale(0.86);
  }
}

@keyframes rootGrowthDraw {
  0% {
    opacity: 0.46;
    stroke-dashoffset: 0.62;
  }

  18% {
    opacity: 0.9;
    stroke-dashoffset: 0.16;
  }

  34%,
  56% {
    opacity: 0.98;
    stroke-dashoffset: 0;
  }

  62% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }

  68%,
  90% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.46;
    stroke-dashoffset: 0.62;
  }
}

@keyframes rootBranchDraw {
  0% {
    opacity: 0.22;
    stroke-dashoffset: 0.86;
  }

  24%,
  56% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }

  62% {
    opacity: 0.06;
    stroke-dashoffset: 0;
  }

  68%,
  90% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.22;
    stroke-dashoffset: 0.86;
  }
}

@keyframes rootZonePulse {
  0% {
    opacity: 0.52;
  }

  18%,
  56% {
    opacity: 0.98;
  }

  62% {
    opacity: 0.08;
  }

  68%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 0.52;
  }
}

@keyframes substratePulse {
  0% {
    opacity: 0.52;
  }

  18%,
  56% {
    opacity: 0.92;
  }

  62% {
    opacity: 0.06;
  }

  68%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 0.52;
  }
}

@keyframes consumptionPanelLift {
  0%,
  46% {
    opacity: 0.64;
  }

  56% {
    opacity: 0.32;
  }

  64%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 0.64;
  }
}

@keyframes logoFormationResolve {
  0%,
  62% {
    opacity: 0;
    transform: translateY(8px) scale(0.84);
  }

  70% {
    opacity: 0.42;
    transform: translateY(2px) scale(0.94);
  }

  78%,
  92% {
    opacity: 0.78;
    transform: translateY(0) scale(1);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(1.015);
  }
}

@keyframes formationFillResolve {
  0%,
  64% {
    opacity: 0;
    transform: scale(0.88);
  }

  74% {
    opacity: 0.22;
    transform: scale(0.96);
  }

  82%,
  92% {
    opacity: 0.34;
    transform: scale(1);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(1.012);
  }
}

@keyframes finalMarkHold {
  0%,
  66% {
    opacity: 0;
    transform: scale(0.96);
  }

  74% {
    opacity: 0.7;
    transform: scale(0.99);
  }

  80%,
  92% {
    opacity: 1;
    transform: scale(1);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(1.01);
  }
}

.directive-label {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.directive-label::after {
  background: var(--leaf-2);
  content: "";
  display: block;
  height: 1px;
  width: 54px;
}

.eyebrow {
  color: var(--leaf-2);
  font-size: 14px;
  font-weight: 820;
  letter-spacing: 0;
  margin: 0 0 16px;
  text-transform: uppercase;
}

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

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 440;
  letter-spacing: 0;
  line-height: 0.98;
}

h1 {
  font-size: clamp(48px, 7.5vw, 104px);
  margin-bottom: 28px;
}

h2 {
  font-size: clamp(34px, 5vw, 64px);
  margin-bottom: 0;
}

h3 {
  font-size: 24px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.hero-copy p {
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  max-width: 720px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 760;
  justify-content: center;
  line-height: 1.15;
  min-height: 48px;
  padding: 13px 20px;
  text-align: center;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--leaf);
  color: #07140f;
}

.button.primary:hover {
  background: #6fca87;
  box-shadow: 0 16px 38px rgba(93, 184, 117, 0.22);
}

.button.ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}

.button.ghost:hover {
  background: rgba(237, 244, 236, 0.06);
  border-color: rgba(237, 244, 236, 0.2);
}

.text-link {
  border-bottom: 1px solid currentColor;
  color: var(--leaf-2);
  display: inline-flex;
  font-weight: 760;
  margin-top: 20px;
  transition: color 160ms ease, border-color 160ms ease;
}

.text-link:hover {
  color: var(--ink);
}

.scope-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(127, 185, 183, 0.08), transparent 30%),
    linear-gradient(180deg, var(--surface-dark), var(--bg));
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  padding: clamp(62px, 8vw, 96px) clamp(18px, 4vw, 48px);
}

.scope-head,
.scope-matrix {
  margin: 0 auto;
  max-width: var(--max);
}

.scope-head {
  max-width: 860px;
  margin-bottom: 28px;
}

.scope-head h2 {
  font-size: clamp(32px, 4.6vw, 58px);
}

.scope-head > p {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 4px;
}

.scope-matrix {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

.scope-panel {
  background:
    linear-gradient(180deg, rgba(237, 244, 236, 0.065), rgba(237, 244, 236, 0.022));
  border: 1px solid rgba(237, 244, 236, 0.13);
  border-radius: var(--radius);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 28px;
  grid-template-rows: auto 1fr;
  min-height: 360px;
  padding: clamp(22px, 3vw, 32px);
  position: relative;
}

.scope-panel::before {
  background: linear-gradient(90deg, var(--leaf-2), transparent);
  content: "";
  height: 1px;
  left: 24px;
  opacity: 0.58;
  position: absolute;
  right: 24px;
  top: 0;
}

.scope-panel > div:first-child > span {
  color: var(--leaf-2);
  display: block;
  font-size: 14px;
  font-weight: 840;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.scope-panel h3 {
  font-size: clamp(26px, 3vw, 38px);
  max-width: 620px;
}

.scope-tags {
  align-content: end;
  display: grid;
  gap: 10px;
  grid-auto-rows: 58px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scope-tags span {
  align-items: center;
  background: rgba(237, 244, 236, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  font-size: 14px;
  font-weight: 760;
  justify-content: center;
  line-height: 1.18;
  min-height: 0;
  padding: 10px 12px;
  text-align: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.scope-tags span:hover {
  background: rgba(158, 220, 122, 0.09);
  border-color: rgba(158, 220, 122, 0.24);
}

.validation-spotlight {
  background:
    radial-gradient(circle at 82% 0%, rgba(158, 220, 122, 0.09), transparent 28%),
    linear-gradient(180deg, var(--surface-accent), var(--surface-dark));
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--accent-line);
  color: var(--ink);
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  padding: clamp(42px, 6vw, 66px) clamp(18px, 4vw, 48px);
}

.validation-spotlight > div {
  max-width: 720px;
}

.validation-spotlight .eyebrow,
.validation-spotlight .text-link {
  color: var(--leaf-2);
}

.validation-spotlight .eyebrow {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
  margin-bottom: 18px;
}

.validation-spotlight h2 {
  font-size: clamp(30px, 4vw, 52px);
}

.validation-spotlight p {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 0;
}

.validation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.validation-tags span {
  background: rgba(237, 244, 236, 0.035);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
}

.validation-tags span:nth-child(even),
.validation-tags .tag-more {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
}

.section {
  padding: clamp(70px, 10vw, 118px) clamp(18px, 4vw, 48px);
}

body[data-page="about"] .section,
body[data-page="systems"] .section,
body[data-page="standard"] .section {
  padding-block: clamp(50px, 6vw, 78px);
}

body[data-page="about"] .split {
  grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr);
}

body[data-page="about"] .about-band-primary,
body[data-page="about"] .about-band-secondary,
body[data-page="about"] .about-contained-panel {
  max-width: var(--max);
}

body[data-page="about"] .about-band-primary,
body[data-page="about"] .about-band-secondary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 56px);
}

body[data-page="about"] .about-band-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
}

body[data-page="about"] .about-band-secondary {
  background: var(--surface-dark);
}

body[data-page="about"] .page-hero + .section,
body[data-page="systems"] .page-hero + .section,
body[data-page="standard"] .page-hero + .section {
  padding-top: clamp(44px, 5vw, 64px);
}

body[data-page="home"] .validation-spotlight + .section.split {
  padding-bottom: clamp(34px, 4vw, 50px);
}

body[data-page="home"] .growth-section {
  padding-top: clamp(34px, 4vw, 54px);
}

.thesis-proof {
  align-items: center;
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  margin: 0 auto;
  max-width: var(--max);
}

.thesis-copy h2 {
  margin-bottom: 22px;
}

.thesis-image {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.thesis-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.thesis-image figcaption {
  color: var(--quiet);
  font-size: 12px;
  font-weight: 720;
  margin-top: 10px;
  text-transform: uppercase;
}

.split,
.visual-split,
.publication,
.contact-layout {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  margin: 0 auto;
  max-width: var(--max);
}

.split.dark-panel {
  background:
    radial-gradient(circle at 82% 18%, rgba(127, 185, 183, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(237, 244, 236, 0.052), rgba(237, 244, 236, 0.022)),
    var(--panel);
  border: 1px solid rgba(237, 244, 236, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 26px 78px rgba(0, 0, 0, 0.2);
  margin-top: 0;
  padding: clamp(34px, 5vw, 56px);
}

.prose p,
.visual-split p,
.publication p,
.page-hero p {
  color: var(--muted);
  font-size: 19px;
}

.prose p:last-child,
.visual-split p:last-child,
.publication p:last-child {
  margin-bottom: 0;
}

.page-hero {
  background:
    radial-gradient(circle at 78% 12%, rgba(12, 101, 102, 0.12), transparent 30%),
    linear-gradient(180deg, var(--surface-dark), var(--bg));
  border-bottom: 1px solid var(--line);
  padding: 150px 0 82px;
}

.page-hero h1 {
  font-size: clamp(42px, 6vw, 82px);
}

.section-head {
  margin: 0 auto 34px;
  max-width: var(--max);
}

.cards-section {
  background:
    linear-gradient(180deg, rgba(237, 244, 236, 0.018), rgba(237, 244, 236, 0)),
    var(--surface-dark);
}

body[data-page="about"] .cards-section {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.feature-grid,
.industry-grid,
.advisor-grid {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: var(--max);
}

.feature-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.feature-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.feature-grid.five {
  grid-template-columns: repeat(5, 1fr);
}

.feature-grid.six {
  grid-template-columns: repeat(3, 1fr);
}

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

.advisor-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.feature-grid article,
.industry-grid article,
.advisor-card {
  background:
    linear-gradient(180deg, rgba(237, 244, 236, 0.052), rgba(237, 244, 236, 0.018)),
    var(--panel);
  border: 1px solid rgba(237, 244, 236, 0.115);
  border-radius: var(--radius);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.14);
  min-height: 230px;
  padding: 26px;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.feature-grid article::before,
.industry-grid article::before,
.advisor-card::before {
  background: linear-gradient(90deg, rgba(158, 220, 122, 0.78), transparent 70%);
  content: "";
  height: 1px;
  left: 24px;
  opacity: 0.42;
  position: absolute;
  right: 24px;
  top: 0;
}

.feature-grid article:hover,
.industry-grid article:hover,
.advisor-card:hover {
  border-color: rgba(158, 220, 122, 0.24);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.feature-grid span,
.industry-grid span,
.advisor-card span {
  color: var(--leaf-2);
  display: block;
  font-size: 14px;
  font-weight: 820;
  margin-bottom: 36px;
  text-transform: uppercase;
}

.feature-grid p,
.industry-grid p,
.advisor-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.advisor-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  min-height: 310px;
}

.advisor-card h3 {
  font-size: clamp(26px, 3vw, 34px);
  max-width: 360px;
}

.advisor-card p {
  font-size: 16px;
  line-height: 1.5;
}

.advisory-framework,
.advisory-disclaimer-panel,
.advisory-callout {
  max-width: var(--max);
}

.advisory-disclaimer-panel {
  background: var(--surface-dark);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.section-note {
  margin: 28px auto 0;
  max-width: var(--max);
}

.pathway-list {
  border-top: 1px solid var(--line);
  display: grid;
}

.pathway-list article {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.pathway-list span {
  color: var(--leaf-2);
  display: block;
  font-size: 14px;
  font-weight: 820;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pathway-list h3 {
  margin-bottom: 8px;
}

.pathway-list p,
.engagement-pathways p {
  color: var(--muted);
}

.validation-program {
  background: var(--surface-dark);
}

.validation-program-grid,
.validation-detail {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: var(--max);
}

.validation-program-grid {
  grid-template-columns: repeat(4, 1fr);
}

.validation-program-grid article,
.validation-detail article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.validation-program-grid article {
  min-height: 245px;
}

.validation-program-grid span,
.validation-detail span {
  color: var(--leaf-2);
  display: block;
  font-size: 14px;
  font-weight: 820;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.validation-detail {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
}

.validation-detail span {
  margin-bottom: 12px;
}

.validation-program-grid p,
.validation-detail p {
  color: var(--muted);
  margin-bottom: 0;
}

.visual-split {
  align-items: center;
}

.systems-diagram-section {
  grid-template-columns: minmax(400px, 1.08fr) minmax(360px, 0.92fr);
}

body[data-page="about"] .about-image-band {
  padding-top: clamp(34px, 4vw, 52px);
  padding-bottom: clamp(34px, 4vw, 52px);
}

body[data-page="about"] .founder-profile,
body[data-page="about"] .about-positioning {
  padding-top: clamp(34px, 5vw, 56px);
}

body[data-page="systems"] .systems-diagram-section,
body[data-page="systems"] .canna-section,
body[data-page="systems"] .outputs-section {
  padding-top: clamp(40px, 5vw, 60px);
}

body[data-page="systems"] .validation-program,
body[data-page="systems"] .systems-diagram-section,
body[data-page="systems"] .canna-section,
body[data-page="systems"] .outputs-section {
  padding-bottom: clamp(44px, 5vw, 66px);
}

.about-image-band .image-panel {
  margin: 0 auto;
  max-width: var(--max);
}

.about-positioning-image {
  background: var(--surface-dark);
}

.visual-split.reverse .image-panel {
  order: 2;
}

.image-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0;
  overflow: hidden;
}

.image-panel img {
  background: var(--surface-dark);
  height: auto;
  object-fit: contain;
  width: 100%;
}

.about-positioning-image img {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.systems-network-panel {
  background:
    linear-gradient(180deg, var(--surface-mid), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0;
  overflow: hidden;
}

.systems-network-visual {
  aspect-ratio: 4 / 3;
  display: block;
  min-height: 500px;
  width: 100%;
}

.network-field {
  fill: #0d1510;
}

.network-glow {
  animation: networkGlow 6s ease-in-out infinite;
  fill: url(#networkGlow);
}

.network-grid path {
  stroke: rgba(237, 244, 236, 0.08);
  stroke-width: 1;
}

.network-title {
  fill: rgba(237, 244, 236, 0.72);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 860;
  letter-spacing: 0;
}

.network-link {
  animation: networkTrace 4.8s ease-in-out infinite;
  fill: none;
  stroke: url(#networkLine);
  stroke-linecap: round;
  stroke-width: 2.2;
  stroke-dasharray: 8 12;
}

.network-links .network-link:nth-child(2n) {
  animation-delay: 600ms;
}

.network-links .network-link:nth-child(3n) {
  animation-delay: 1200ms;
}

.core-orbit {
  animation: networkPulse 4.8s ease-in-out infinite;
  fill: rgba(158, 220, 122, 0.08);
  stroke: rgba(158, 220, 122, 0.42);
  stroke-width: 1.4;
}

.core-node {
  fill: rgba(244, 241, 232, 0.96);
  stroke: rgba(158, 220, 122, 0.72);
  stroke-width: 2;
}

.network-core text {
  fill: #142117;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 820;
  letter-spacing: 0;
  text-anchor: middle;
}

.network-node circle {
  fill: rgba(21, 30, 24, 0.94);
  stroke: rgba(158, 220, 122, 0.42);
  stroke-width: 1.4;
}

.network-node text {
  fill: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-anchor: middle;
}

.network-node text + text,
.network-node text + text + text {
  fill: var(--muted);
  font-size: 9.3px;
  font-weight: 760;
}

.network-output rect,
.network-pill rect {
  fill: rgba(244, 241, 232, 0.94);
  stroke: rgba(158, 220, 122, 0.32);
}

.network-output text,
.network-pill text {
  fill: #17271b;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: 0;
  text-anchor: middle;
}

@keyframes networkTrace {
  0% {
    stroke-dashoffset: 30;
    opacity: 0.32;
  }

  50% {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }

  100% {
    stroke-dashoffset: -30;
    opacity: 0.32;
  }
}

@keyframes networkPulse {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(1);
    transform-origin: 360px 254px;
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
    transform-origin: 360px 254px;
  }
}

@keyframes networkGlow {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

.growth-section {
  align-items: center;
  display: grid;
  gap: clamp(34px, 6vw, 76px);
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 1.14fr);
  margin: 0 auto;
  max-width: var(--max);
}

.growth-copy p {
  color: var(--muted);
  font-size: 19px;
  margin-top: 24px;
}

.growth-visual {
  background:
    radial-gradient(circle at 72% 28%, rgba(158, 220, 122, 0.1), transparent 28%),
    linear-gradient(180deg, var(--surface-panel), var(--bg));
  border: 1px solid rgba(237, 244, 236, 0.13);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(237, 244, 236, 0.06);
  margin: 0;
  overflow: hidden;
}

.growth-visual svg {
  display: block;
  height: auto;
  width: 100%;
}

.chart-grid path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.axis path {
  fill: none;
  stroke: rgba(237, 244, 236, 0.36);
  stroke-width: 1.4;
}

.axis text,
.readout text {
  fill: rgba(237, 244, 236, 0.68);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0;
}

.growth-area {
  fill: rgba(93, 184, 117, 0.11);
  opacity: 0;
  animation: revealArea 7s ease-in-out infinite;
}

.growth-curve {
  fill: none;
  stroke: url(#growthLine);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 5;
  animation: drawLine 7s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.data-points circle {
  fill: var(--leaf-2);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.78);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsePoint 7s ease-in-out infinite;
}

.data-points circle:nth-child(2) {
  animation-delay: 0.7s;
}

.data-points circle:nth-child(3) {
  animation-delay: 1.35s;
}

.data-points circle:nth-child(4) {
  animation-delay: 2s;
}

.plant-stem {
  fill: none;
  stroke: rgba(157, 220, 122, 0.86);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 5;
  animation: drawLine 7s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.plant-leaf {
  fill: url(#leafGradient);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.2);
  stroke-width: 1;
  transform: scale(0.72);
  transform-box: fill-box;
  transform-origin: center;
  animation: leafOpen 7s ease-in-out infinite;
}

.leaf-one {
  animation-delay: 1s;
}

.leaf-two {
  animation-delay: 1.55s;
}

.leaf-three {
  animation-delay: 2.05s;
}

.readout rect {
  fill: rgba(244, 241, 232, 0.08);
  stroke: rgba(157, 220, 122, 0.26);
}

.readout {
  opacity: 0;
  animation: readoutFade 7s ease-in-out infinite;
}

.readout .readout-value {
  fill: var(--leaf-2);
  font-size: 24px;
  font-weight: 820;
}

@keyframes drawLine {
  0%,
  12% {
    stroke-dashoffset: 1;
  }

  58%,
  88% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes revealArea {
  0%,
  24% {
    opacity: 0;
  }

  58%,
  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pulsePoint {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.72);
  }

  42%,
  86% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}

@keyframes leafOpen {
  0%,
  26% {
    opacity: 0;
    transform: scale(0.72) rotate(-4deg);
  }

  48%,
  86% {
    opacity: 0.92;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.72) rotate(-4deg);
  }
}

@keyframes readoutFade {
  0%,
  42% {
    opacity: 0;
    transform: translateY(6px);
  }

  58%,
  86% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

.canna-section {
  margin: 0 auto;
  max-width: var(--max);
  padding-top: 0;
}

.canna-visual {
  background:
    linear-gradient(180deg, var(--surface-panel), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0;
  overflow: hidden;
}

.canna-visual svg {
  display: block;
  height: auto;
  width: 100%;
}

.profile-bands rect {
  fill: rgba(255, 255, 255, 0.025);
  opacity: 0;
  animation: stageBand 8s ease-in-out infinite;
}

.profile-bands rect:nth-child(even) {
  fill: rgba(93, 184, 117, 0.04);
}

.profile-bands rect:nth-child(2) {
  animation-delay: 0.25s;
}

.profile-bands rect:nth-child(3) {
  animation-delay: 0.5s;
}

.profile-bands rect:nth-child(4) {
  animation-delay: 0.75s;
}

.profile-bands rect:nth-child(5) {
  animation-delay: 1s;
}

.profile-grid path {
  stroke: rgba(255, 255, 255, 0.075);
}

.profile-axis text,
.legend text,
.stage-chip text {
  fill: rgba(237, 244, 236, 0.72);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.canna-stage-growth {
  mix-blend-mode: screen;
}

.stage-ground,
.stage-root,
.stage-stem,
.stage-branch {
  fill: none;
  stroke: rgba(157, 220, 122, 0.34);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 2.2;
  animation: drawLine 8s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.stage-ground,
.stage-root {
  stroke: rgba(127, 185, 183, 0.24);
  animation-delay: 0.2s;
}

.stage-ground {
  stroke-width: 1.4;
}

.stage-stem {
  stroke-width: 3.4;
}

.stage-plant {
  opacity: 0.32;
  animation: stagePlantFocus 8s ease-in-out infinite;
}

.plant-stage-two {
  animation-delay: 0.35s;
}

.plant-stage-three {
  animation-delay: 0.75s;
}

.plant-stage-four {
  animation-delay: 1.15s;
}

.plant-stage-five {
  animation-delay: 1.55s;
}

.plant-stage-two .stage-stem,
.plant-stage-two .stage-root,
.plant-stage-two .stage-branch {
  animation-delay: 0.45s;
}

.plant-stage-three .stage-stem,
.plant-stage-three .stage-root,
.plant-stage-three .stage-branch {
  animation-delay: 0.85s;
}

.plant-stage-four .stage-stem,
.plant-stage-four .stage-root,
.plant-stage-four .stage-branch {
  animation-delay: 1.25s;
}

.plant-stage-five .stage-stem,
.plant-stage-five .stage-root,
.plant-stage-five .stage-branch {
  animation-delay: 1.65s;
}

.stage-leaf-fan {
  fill: rgba(93, 184, 117, 0.17);
  opacity: 0;
  stroke: rgba(157, 220, 122, 0.32);
  stroke-width: 1;
  animation: stageLeafFade 8s ease-in-out infinite;
}

.side-fan {
  fill: rgba(93, 184, 117, 0.115);
}

.plant-stage-two .stage-leaf-fan {
  animation-delay: 0.5s;
}

.plant-stage-three .stage-leaf-fan {
  animation-delay: 0.9s;
}

.plant-stage-four .stage-leaf-fan,
.plant-stage-four .bud-cluster {
  animation-delay: 1.3s;
}

.plant-stage-five .stage-leaf-fan,
.plant-stage-five .bud-cluster {
  animation-delay: 1.7s;
}

.bud-cluster {
  filter: drop-shadow(0 0 10px rgba(157, 220, 122, 0.12));
  opacity: 0;
  animation: budBuild 8s ease-in-out infinite;
}

.bud-core {
  fill: rgba(157, 220, 122, 0.25);
  stroke: rgba(237, 244, 236, 0.34);
  stroke-width: 1;
}

.bud-bract {
  fill: rgba(93, 184, 117, 0.22);
  stroke: rgba(157, 220, 122, 0.34);
  stroke-width: 1;
}

.bud-hair {
  fill: none;
  stroke: rgba(237, 244, 236, 0.46);
  stroke-linecap: round;
  stroke-width: 1;
}

.late-bud .bud-core {
  fill: rgba(157, 220, 122, 0.34);
}

.late-bud .bud-bract {
  fill: rgba(93, 184, 117, 0.29);
}

.side-bud {
  opacity: 0;
}

.legend line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}

.legend-vpd {
  stroke: url(#vpdLine);
}

.legend-ec {
  stroke: url(#ecLine);
}

.vpd-curve,
.ec-curve {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 5;
  animation: drawLine 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.vpd-curve {
  stroke: url(#vpdLine);
}

.ec-curve {
  stroke: url(#ecLine);
  animation-delay: 0.6s;
}

.profile-dots circle {
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.76);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: profileDot 8s ease-in-out infinite;
}

.profile-dots circle:nth-child(2),
.profile-dots circle:nth-child(7) {
  animation-delay: 0.5s;
}

.profile-dots circle:nth-child(3),
.profile-dots circle:nth-child(8) {
  animation-delay: 0.95s;
}

.profile-dots circle:nth-child(4),
.profile-dots circle:nth-child(9) {
  animation-delay: 1.4s;
}

.profile-dots circle:nth-child(5),
.profile-dots circle:nth-child(10) {
  animation-delay: 1.85s;
}

.vpd-dot {
  fill: var(--leaf-2);
}

.ec-dot {
  fill: #7fb9b7;
}

.profile-scan {
  fill: rgba(237, 244, 236, 0.26);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: scanLifecycle 8s ease-in-out infinite;
}

.stage-chip {
  opacity: 0;
  animation: chipFade 8s ease-in-out infinite;
}

.stage-chip:nth-child(2) {
  animation-delay: 0.35s;
}

.stage-chip:nth-child(3) {
  animation-delay: 0.7s;
}

.stage-chip:nth-child(4) {
  animation-delay: 1.05s;
}

.stage-chip:nth-child(5) {
  animation-delay: 1.4s;
}

.stage-chip rect {
  fill: rgba(244, 241, 232, 0.075);
  stroke: rgba(255, 255, 255, 0.1);
}

.stage-chip .stage-value {
  fill: rgba(170, 183, 174, 0.9);
  font-size: 9px;
  font-weight: 720;
}

@keyframes stageBand {
  0%,
  18% {
    opacity: 0;
  }

  35%,
  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes profileDot {
  0%,
  24% {
    opacity: 0;
    transform: scale(0.72);
  }

  46%,
  84% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}

@keyframes stagePlantFocus {
  0%,
  24% {
    opacity: 0.16;
  }

  48%,
  84% {
    opacity: 0.82;
  }

  100% {
    opacity: 0.16;
  }
}

@keyframes stageLeafFade {
  0%,
  28% {
    opacity: 0;
  }

  48%,
  84% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes budBuild {
  0%,
  34% {
    opacity: 0;
  }

  54%,
  86% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes scanLifecycle {
  0%,
  18% {
    opacity: 0;
    transform: translateX(0);
  }

  28% {
    opacity: 0.85;
  }

  76% {
    opacity: 0.85;
    transform: translateX(580px);
  }

  100% {
    opacity: 0;
    transform: translateX(580px);
  }
}

@keyframes chipFade {
  0%,
  24% {
    opacity: 0;
  }

  42%,
  86% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.cta-band {
  align-items: center;
  background:
    radial-gradient(circle at 82% 12%, rgba(158, 220, 122, 0.12), transparent 30%),
    linear-gradient(180deg, var(--surface-accent), var(--surface-dark));
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--accent-line);
  color: var(--ink);
  display: flex;
  gap: 28px;
  justify-content: space-between;
  padding: clamp(52px, 8vw, 86px) clamp(18px, 4vw, 48px);
}

.cta-band h2 {
  max-width: 850px;
}

.cta-band .eyebrow {
  color: var(--leaf-2);
}

.list-grid,
.industry-grid {
  grid-template-columns: repeat(3, 1fr);
}

.list-grid {
  display: grid;
  gap: 10px;
}

.outputs-section {
  margin: 0 auto;
  max-width: var(--max);
}

.outputs-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.outputs-grid div {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.outputs-grid span {
  color: var(--leaf-2);
  display: block;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.04em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.outputs-grid strong {
  color: var(--ink);
  display: block;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.25;
}

.list-grid div {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  font-weight: 720;
  min-height: 76px;
  padding: 16px;
}

.publication {
  align-items: center;
}

.publication-image-panel {
  background: var(--surface-dark);
}

.publication-image-panel img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.home-publication .publication-image-panel {
  justify-self: center;
  max-width: 420px;
  width: 100%;
}

.home-publication .publication-image-panel img {
  aspect-ratio: 4 / 5;
}

.publication-treatment-grid {
  background:
    radial-gradient(circle at 50% 0%, rgba(158, 220, 122, 0.08), transparent 35%),
    linear-gradient(180deg, var(--surface-panel), var(--surface-dark));
  border: 1px solid rgba(237, 244, 236, 0.13);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(237, 244, 236, 0.05);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  padding: 8px;
}

.home-publication .publication-treatment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: center;
  max-width: 620px;
  width: 100%;
}

.home-publication {
  grid-template-columns: minmax(520px, 1.16fr) minmax(320px, 0.84fr);
}

.home-publication .publication-treatment-grid img:first-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 4px);
}

.publication-treatment-grid img {
  aspect-ratio: 684 / 768;
  background: var(--surface-dark);
  border-radius: 5px;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 5px;
  width: 100%;
}

.publication-treatment-grid figcaption,
.publication-measurement-grid figcaption {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 760;
  grid-column: 1 / -1;
  line-height: 1.45;
  padding: 6px 8px 2px;
  text-align: center;
  text-transform: uppercase;
}

.publication-measurement-grid {
  background:
    linear-gradient(180deg, var(--surface-panel), var(--surface-dark));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  padding: 8px;
}

.publication-measurement-grid img {
  aspect-ratio: 269 / 416;
  background: var(--surface-dark);
  border-radius: 5px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.publication-copy {
  max-width: 720px;
}

.publication-copy h2 {
  margin-bottom: 24px;
}

.contact-layout {
  align-items: start;
}

.contact-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.channel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
  padding: 20px 0;
}

.channel span {
  color: var(--quiet);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.channel strong {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.fine-print {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 0;
}

.contact-form {
  background: var(--surface-light);
  border-radius: var(--radius);
  color: var(--ink-dark);
  display: grid;
  gap: 16px;
  padding: 26px;
}

.field-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 780;
}

input,
select,
textarea {
  background: var(--cream);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--ink-dark);
  font: inherit;
  min-height: 48px;
  padding: 12px;
  width: 100%;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(157, 220, 122, 0.45);
  outline-offset: 3px;
}

.honeypot {
  display: none;
}

.form-note {
  border-top: 1px solid var(--line-dark);
  color: #4c584f;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding-top: 2px;
}

.success-banner {
  background: rgba(93, 184, 117, 0.12);
  border: 1px solid rgba(93, 184, 117, 0.5);
  border-radius: var(--radius);
  color: var(--leaf-2);
  margin-bottom: 18px;
  padding: 16px;
}

.site-footer {
  align-items: end;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  padding: 32px clamp(18px, 4vw, 48px);
}

.footer-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  max-width: 560px;
}

.footer-brand img {
  flex: 0 0 auto;
  height: 46px;
  object-fit: contain;
  width: 52px;
}

.footer-brand > div {
  min-width: 0;
}

.site-footer strong {
  color: var(--ink);
}

.site-footer p {
  margin-bottom: 0;
}

.footer-legal {
  color: var(--quiet);
  display: block;
  font-size: 12px;
  margin-top: 5px;
  white-space: nowrap;
}

.footer-disclaimer {
  border-top: 1px solid var(--line);
  color: var(--quiet);
  flex: 1 0 100%;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  padding-top: 16px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--ink);
}

@media (max-width: 940px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    align-items: stretch;
    background: rgba(10, 15, 12, 0.98);
    border-top: 1px solid var(--line);
    display: none;
    flex-direction: column;
    inset: 69px 0 auto 0;
    padding: 20px;
    position: fixed;
  }

  body.nav-open .nav {
    display: flex;
  }

  .nav a {
    border-radius: var(--radius);
    font-size: 18px;
    padding: 14px;
  }

  .nav .nav-cta {
    margin-left: 0;
  }

  .hero-grid,
  .growth-section,
  .canna-section,
  .thesis-proof,
  .scope-head,
  .scope-matrix,
  .validation-spotlight,
  .split,
  .visual-split,
  .publication,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 34px;
    min-height: auto;
  }

  .hero-copy,
  .hero-grid > * {
    min-width: 0;
  }

  .hero h1 {
    max-width: 100%;
  }

  .hero-spotlight {
    justify-self: center;
    max-width: min(480px, 100%);
  }

  .scope-head {
    align-items: start;
  }

  .feature-grid.three,
  .feature-grid.four,
  .feature-grid.five,
  .feature-grid.six,
  .feature-grid.two,
  .validation-program-grid,
  .validation-detail,
  .industry-grid,
  .advisor-grid,
  .list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .outputs-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .visual-split.reverse .image-panel {
    order: 0;
  }

  .about-positioning-image img {
    min-height: 0;
  }

  .systems-network-visual {
    min-height: 440px;
  }

  .cta-band,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .site-header {
    gap: 12px;
    padding: 12px 18px;
  }

  .nav-toggle {
    background: rgba(237, 244, 236, 0.035);
    border-color: rgba(237, 244, 236, 0.2);
    display: block !important;
    flex: 0 0 48px;
    left: min(calc(100vw - 66px), 322px);
    margin-left: auto;
    position: fixed;
    right: auto;
    top: 12px;
  }

  .brand span {
    max-width: 142px;
  }

  .brand img {
    height: 38px;
    width: 48px;
  }

  .container {
    padding: 0 20px;
  }

  .hero {
    padding: 110px 0 48px;
  }

  .page-hero {
    padding-top: 122px;
  }

  .hero-copy {
    max-width: min(100%, 350px);
  }

  .hero h1,
  h1 {
    font-size: clamp(38px, 10.4vw, 43px);
    line-height: 1.02;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .hero-copy p {
    font-size: 17px;
    line-height: 1.55;
    max-width: 350px;
  }

  .button-row {
    gap: 10px;
    margin-top: 28px;
    max-width: 350px;
  }

  .hero-spotlight {
    max-width: min(350px, 100%);
  }

  .scope-tags,
  .publication-treatment-grid,
  .publication-measurement-grid,
  .feature-grid.three,
  .feature-grid.four,
  .feature-grid.five,
  .feature-grid.six,
  .feature-grid.two,
  .validation-program-grid,
  .validation-detail,
  .industry-grid,
  .advisor-grid,
  .list-grid,
  .field-row {
    grid-template-columns: 1fr;
  }

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

  .home-publication .publication-treatment-grid img:first-child {
    width: 100%;
  }

  .publication-measurement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-panel {
    min-height: 0;
  }

  .scope-tags span {
    min-height: 44px;
  }

  .scope-tags {
    grid-auto-rows: 52px;
  }

  .button-row .button,
  .cta-band .button {
    width: 100%;
  }

  .about-positioning-image img {
    min-height: 0;
  }

  .systems-network-visual {
    min-height: 300px;
  }
}

/* Site-wide polish pass: clearer hierarchy, sharper surfaces, stronger first impression. */
.site-header {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0);
}

.site-header.is-scrolled,
body.nav-open .site-header {
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.26);
}

.nav a {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav .nav-cta {
  background: rgba(158, 220, 122, 0.08);
}

.hero {
  isolation: isolate;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(198, 236, 154, 0), rgba(198, 236, 154, 0.18), rgba(198, 236, 154, 0));
  bottom: 0;
  content: "";
  height: 1px;
  left: clamp(18px, 4vw, 48px);
  opacity: 0.72;
  position: absolute;
  right: clamp(18px, 4vw, 48px);
}

.hero-copy {
  position: relative;
}

.hero-copy::before {
  background: linear-gradient(180deg, rgba(198, 236, 154, 0.72), rgba(127, 185, 183, 0));
  content: "";
  height: 124px;
  left: -20px;
  opacity: 0.36;
  position: absolute;
  top: 5px;
  width: 1px;
}

.hero-copy p {
  color: rgba(237, 244, 236, 0.76);
}

.button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button.primary {
  background: linear-gradient(180deg, #9edc7a, #5db875);
  box-shadow:
    0 16px 42px rgba(93, 184, 117, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.button.primary:hover {
  background: linear-gradient(180deg, #b3ea90, #68c681);
}

.button.ghost {
  background: rgba(237, 244, 236, 0.025);
}

.scope-section,
.validation-spotlight,
.cards-section,
.cta-band,
.page-hero {
  position: relative;
}

.scope-section::before,
.validation-spotlight::before,
.cards-section::before,
.cta-band::before,
.page-hero::before {
  background: linear-gradient(90deg, transparent, rgba(198, 236, 154, 0.22), transparent);
  content: "";
  height: 1px;
  left: clamp(18px, 4vw, 48px);
  opacity: 0.58;
  position: absolute;
  right: clamp(18px, 4vw, 48px);
  top: 0;
}

.scope-matrix,
.validation-spotlight {
  width: min(100%, var(--max));
}

.validation-spotlight {
  margin: 0 auto;
}

.scope-panel,
.feature-grid article,
.industry-grid article,
.advisor-card,
.split.dark-panel,
.growth-visual,
.publication-treatment-grid,
.publication-measurement-grid,
.contact-panel,
.contact-form {
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(237, 244, 236, 0.055);
}

.feature-grid article,
.industry-grid article,
.advisor-card {
  overflow: hidden;
}

.feature-grid article::after,
.industry-grid article::after,
.advisor-card::after {
  background: radial-gradient(circle at 24% 0%, rgba(127, 185, 183, 0.1), transparent 36%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 180ms ease;
}

.feature-grid article:hover::after,
.industry-grid article:hover::after,
.advisor-card:hover::after {
  opacity: 1;
}

.feature-grid span,
.industry-grid span,
.advisor-card span {
  letter-spacing: 0;
}

.image-panel img,
.publication-treatment-grid img,
.publication-measurement-grid img {
  filter: saturate(1.04) contrast(1.03);
}

.page-hero {
  overflow: hidden;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero .container::after {
  background:
    radial-gradient(circle, rgba(158, 220, 122, 0.18), transparent 58%);
  content: "";
  height: 260px;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -34px;
  width: 260px;
  z-index: -1;
}

.cta-band {
  overflow: hidden;
}

.cta-band::after {
  background:
    radial-gradient(circle at center, rgba(127, 185, 183, 0.14), transparent 62%);
  content: "";
  height: 260px;
  pointer-events: none;
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 940px) {
  .hero-copy::before {
    left: -14px;
  }

  .validation-spotlight {
    width: auto;
  }
}

@media (min-width: 701px) and (max-width: 940px) {
  .hero {
    padding-top: 104px;
  }

  .hero-grid {
    align-items: center;
    gap: 28px;
    grid-template-columns: minmax(0, 0.95fr) minmax(270px, 0.82fr);
  }

  .hero h1 {
    font-size: clamp(42px, 5.5vw, 54px);
  }

  .hero-copy p {
    font-size: 17px;
    line-height: 1.5;
  }

  .button-row {
    margin-top: 26px;
  }

  .hero-spotlight {
    max-width: 360px;
  }
}

@media (max-width: 620px) {
  .hero {
    padding-top: 94px;
  }

  .hero-grid {
    gap: 22px;
  }

  .hero-spotlight {
    justify-self: start;
    margin-left: 0;
    margin-right: 0;
    max-width: min(330px, calc(100vw - 40px));
    order: -1;
    width: min(330px, calc(100vw - 40px));
  }

  .hero-copy {
    max-width: min(100%, 370px);
  }

  .hero-copy::before {
    display: none;
  }

  .hero-copy p,
  .button-row {
    max-width: 370px;
  }

  .hero h1,
  h1 {
    font-size: clamp(36px, 10vw, 42px);
  }

  .page-hero .container::after,
  .cta-band::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero-spotlight {
    order: -1;
  }
}

/* Hero animation correction: true growth timing, anchored shoot, clean logo finish. */
.hero-systems-lens {
  --hero-cycle: 8.8s;
}

.hero-lens-plant {
  animation: none;
  transform: none;
}

.hero-shoot-system {
  animation: shootVisibility var(--hero-cycle) ease-in-out infinite;
  transform: none;
  transform-box: view-box;
  transform-origin: 214px 348px;
}

.hero-lens-chip {
  font-variant-numeric: tabular-nums;
}

.hero-lens-chip text,
.hero-direction-readout text,
.hero-consumption-panel text {
  dominant-baseline: auto;
}

.hero-lens-chips {
  animation: metricPanelPhase var(--hero-cycle) ease-in-out infinite !important;
}

.hero-response-graph {
  animation: responseGraphPhase var(--hero-cycle) ease-in-out infinite !important;
}

.hero-direction-readout {
  animation: responseBadgePhase var(--hero-cycle) ease-in-out infinite !important;
}

.hero-consumption-panel {
  animation: uptakePanelPhase var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-stem {
  animation: stemTrueGrowth var(--hero-cycle) cubic-bezier(0.22, 0.72, 0.16, 1) infinite;
  transform: none;
  transform-box: view-box;
}

.petiole-left-two,
.petiole-right-two {
  animation-name: branchLowerTrueGrowth;
}

.petiole-left-three,
.petiole-right-three {
  animation-name: branchMiddleTrueGrowth;
}

.petiole-left-one,
.petiole-right-one {
  animation-name: branchUpperTrueGrowth;
}

.hero-leaf-cluster {
  --leaf-curl: -8deg;
  animation: leafUnfoldTrue var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.2, 1) infinite;
  opacity: 0;
  transform: scale(0.04, 0.16) rotate(var(--leaf-curl));
}

.hero-lens-leaf {
  fill-opacity: 0.82;
  stroke-opacity: 0.62;
}

.hero-lens-vein {
  opacity: 0.78;
}

.leaf-left-two,
.leaf-right-two {
  animation-name: leafUnfoldLowerTrue;
}

.leaf-node-left,
.leaf-node-right {
  animation-name: leafUnfoldMiddleTrue;
}

.leaf-left-one,
.leaf-right-one {
  animation-name: leafUnfoldUpperTrue;
}

.leaf-right-one,
.leaf-right-two,
.leaf-node-right {
  --leaf-curl: 8deg;
}

.hero-apical-leaf {
  animation: apicalLeadIntoLogoHead var(--hero-cycle) cubic-bezier(0.2, 0.74, 0.2, 1) infinite;
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-morph-orb {
  animation: apicalOrbToLogoHead var(--hero-cycle) cubic-bezier(0.2, 0.74, 0.2, 1) infinite;
  fill: rgba(198, 236, 154, 0.9);
  filter: drop-shadow(0 0 10px rgba(198, 236, 154, 0.35));
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-growth-node {
  animation: growthNodeSequence var(--hero-cycle) ease-in-out infinite;
}

.hero-lens-rootzone,
.hero-irrigation-line,
.hero-substrate,
.hero-lens-root {
  animation: baseSystemPhase var(--hero-cycle) ease-in-out infinite;
}

.node-lower {
  animation-delay: 0ms;
}

.node-mid {
  animation-delay: 120ms;
}

.node-upper {
  animation-delay: 240ms;
}

.node-apex {
  animation-delay: 360ms;
}

.hero-resolution-field {
  animation: cleanSignalConvergence var(--hero-cycle) ease-in-out infinite;
  mix-blend-mode: screen;
}

.resolve-core,
.formation-halo,
.formation-orb {
  display: none;
}

.resolve-thread {
  animation: cleanThreadDraw var(--hero-cycle) ease-in-out infinite;
}

.hero-logo-formation {
  animation: vectorBridgeOnly var(--hero-cycle) ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(198, 236, 154, 0.12));
}

.formation-fill {
  animation: vectorFillBridgeOnly var(--hero-cycle) ease-in-out infinite;
  fill-opacity: 0.5;
}

.formation-leaf,
.formation-spine,
.formation-highlight {
  animation: vectorLineBridgeOnly var(--hero-cycle) ease-in-out infinite;
}

.hero-final-mark {
  animation: none;
  opacity: 0;
}

.hero-final-mark-layer {
  animation: finalLogoLayerCleanHold var(--hero-cycle) ease-in-out infinite;
  display: block;
  filter:
    drop-shadow(0 0 9px rgba(198, 236, 154, 0.18))
    drop-shadow(0 20px 28px rgba(0, 0, 0, 0.36));
  left: 50%;
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.965);
  transform-origin: center;
  width: min(66%, 318px);
  z-index: 6;
}

.reading-phase-a {
  animation: readingPhaseATight var(--hero-cycle) ease-in-out infinite;
}

.reading-phase-b {
  animation: readingPhaseBTight var(--hero-cycle) ease-in-out infinite;
}

.reading-phase-c {
  animation: readingPhaseCTight var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-a {
  animation: directionPhaseATight var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-b {
  animation: directionPhaseBTight var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-c {
  animation: directionPhaseCTight var(--hero-cycle) ease-in-out infinite;
}

@keyframes shootVisibility {
  0%,
  62% {
    opacity: 1;
  }

  70% {
    opacity: 0.28;
  }

  78%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes metricPanelPhase {
  0%,
  42% {
    opacity: 0.96;
  }

  50% {
    opacity: 0.18;
  }

  58%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.96;
  }
}

@keyframes responseGraphPhase {
  0%,
  20% {
    opacity: 0.22;
  }

  32%,
  46% {
    opacity: 0.72;
  }

  56%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.22;
  }
}

@keyframes responseBadgePhase {
  0%,
  20% {
    opacity: 0.86;
  }

  34%,
  46% {
    opacity: 1;
  }

  54%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.86;
  }
}

@keyframes uptakePanelPhase {
  0%,
  42% {
    opacity: 0.72;
  }

  50% {
    opacity: 0.16;
  }

  58%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.72;
  }
}

@keyframes stemTrueGrowth {
  0% {
    opacity: 0.34;
    stroke-dashoffset: 0.96;
  }

  14% {
    opacity: 0.64;
    stroke-dashoffset: 0.62;
  }

  30% {
    opacity: 0.94;
    stroke-dashoffset: 0.18;
  }

  42%,
  58% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.18;
    stroke-dashoffset: 0;
  }

  78%,
  94% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.34;
    stroke-dashoffset: 0.96;
  }
}

@keyframes branchLowerTrueGrowth {
  0%,
  16% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  30%,
  58% {
    opacity: 0.88;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.12;
    stroke-dashoffset: 0;
  }

  78%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchMiddleTrueGrowth {
  0%,
  22% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  36%,
  58% {
    opacity: 0.82;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }

  78%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchUpperTrueGrowth {
  0%,
  28% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  42%,
  58% {
    opacity: 0.82;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }

  78%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes leafUnfoldLowerTrue {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.06, 0.18) rotate(var(--leaf-curl));
  }

  30% {
    opacity: 0.72;
    transform: scale(0.58, 0.74) rotate(0deg);
  }

  42%,
  58% {
    opacity: 0.96;
    transform: scale(0.96) rotate(0deg);
  }

  68% {
    opacity: 0.16;
    transform: scale(0.74) rotate(0deg);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(0.16, 0.28) rotate(0deg);
  }
}

@keyframes leafUnfoldMiddleTrue {
  0%,
  24% {
    opacity: 0;
    transform: scale(0.05, 0.16) rotate(var(--leaf-curl));
  }

  36% {
    opacity: 0.72;
    transform: scale(0.58, 0.76) rotate(0deg);
  }

  48%,
  58% {
    opacity: 0.92;
    transform: scale(0.94) rotate(0deg);
  }

  68% {
    opacity: 0.14;
    transform: scale(0.7) rotate(0deg);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(0.14, 0.26) rotate(0deg);
  }
}

@keyframes leafUnfoldUpperTrue {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.04, 0.14) rotate(var(--leaf-curl));
  }

  42% {
    opacity: 0.66;
    transform: scale(0.58, 0.76) rotate(0deg);
  }

  52%,
  58% {
    opacity: 0.94;
    transform: scale(0.98) rotate(0deg);
  }

  68% {
    opacity: 0.12;
    transform: scale(0.68) rotate(0deg);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(0.14, 0.24) rotate(0deg);
  }
}

@keyframes leafUnfoldTrue {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.05, 0.16) rotate(var(--leaf-curl));
  }
}

@keyframes apicalLeadIntoLogoHead {
  0%,
  34% {
    opacity: 0;
    transform: translateY(6px) scale(0.28, 0.42);
  }

  46%,
  58% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1);
  }

  68% {
    opacity: 0.54;
    transform: translate(-42px, 0) scale(0.62);
  }

  78%,
  100% {
    opacity: 0;
    transform: translate(-65px, 0) scale(0.18);
  }
}

@keyframes apicalOrbToLogoHead {
  0%,
  44% {
    opacity: 0;
    transform: scale(0.45);
  }

  56% {
    opacity: 0.84;
    transform: scale(1);
  }

  68% {
    opacity: 0.88;
    transform: translate(-65px, 0) scale(2.25);
  }

  78%,
  100% {
    opacity: 0;
    transform: translate(-65px, 0) scale(2.45);
  }
}

@keyframes growthNodeSequence {
  0%,
  14% {
    opacity: 0;
    transform: scale(0.45);
  }

  28%,
  54% {
    opacity: 0.78;
    transform: scale(1);
  }

  62% {
    opacity: 0.18;
    transform: scale(0.72);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(0.42);
  }
}

@keyframes cleanSignalConvergence {
  0%,
  46% {
    opacity: 0;
  }

  58% {
    opacity: 0.42;
  }

  68% {
    opacity: 0.28;
  }

  80%,
  100% {
    opacity: 0;
  }
}

@keyframes cleanThreadDraw {
  0%,
  46% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  58% {
    opacity: 0.48;
    stroke-dashoffset: 0.42;
  }

  68% {
    opacity: 0.32;
    stroke-dashoffset: 0;
  }

  80%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes vectorBridgeOnly {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.9);
  }

  68% {
    opacity: 0.46;
    transform: scale(0.98);
  }

  76% {
    opacity: 0.2;
    transform: scale(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes vectorFillBridgeOnly {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.9);
  }

  68% {
    opacity: 0.34;
    transform: scale(0.98);
  }

  76% {
    opacity: 0.08;
    transform: scale(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes vectorLineBridgeOnly {
  0%,
  58% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  68% {
    opacity: 0.42;
    stroke-dashoffset: 0.24;
  }

  76% {
    opacity: 0.08;
    stroke-dashoffset: 0;
  }

  84%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes finalLogoCleanHold {
  0%,
  64% {
    opacity: 0;
    transform: scale(0.965);
  }

  72% {
    opacity: 0.82;
    transform: scale(0.992);
  }

  78%,
  96% {
    opacity: 1;
    transform: scale(1);
  }

  99%,
  100% {
    opacity: 0;
    transform: scale(1.006);
  }
}

@keyframes finalLogoLayerCleanHold {
  0%,
  64% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.965);
  }

  72% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.992);
  }

  78%,
  96% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.006);
  }
}

@keyframes baseSystemPhase {
  0%,
  56% {
    opacity: 1;
  }

  68% {
    opacity: 0.36;
  }

  78%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes readingPhaseATight {
  0%,
  22% {
    opacity: 1;
  }

  30%,
  100% {
    opacity: 0;
  }
}

@keyframes readingPhaseBTight {
  0%,
  28% {
    opacity: 0;
  }

  34%,
  45% {
    opacity: 1;
  }

  54%,
  100% {
    opacity: 0;
  }
}

@keyframes readingPhaseCTight {
  0%,
  46% {
    opacity: 0;
  }

  52%,
  58% {
    opacity: 1;
  }

  64%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseATight {
  0%,
  22% {
    opacity: 1;
  }

  30%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseBTight {
  0%,
  30% {
    opacity: 0;
  }

  36%,
  46% {
    opacity: 1;
  }

  54%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseCTight {
  0%,
  48% {
    opacity: 0;
  }

  52%,
  58% {
    opacity: 1;
  }

  64%,
  100% {
    opacity: 0;
  }
}

/* Hero animation refinement: centered field, continuous growth, apical-led logo resolve. */
.hero-systems-lens {
  --hero-cycle: 9.4s;
  background:
    radial-gradient(circle at 50% 34%, rgba(237, 244, 236, 0.1), transparent 25%),
    radial-gradient(circle at 50% 48%, rgba(158, 220, 122, 0.17), transparent 36%),
    radial-gradient(circle at 50% 70%, rgba(127, 185, 183, 0.09), transparent 44%),
    linear-gradient(180deg, rgba(8, 19, 13, 0.78), rgba(3, 9, 6, 0.94));
}

.hero-systems-lens::before {
  background:
    radial-gradient(circle at 50% 34%, rgba(237, 244, 236, 0.12), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(127, 185, 183, 0.08), transparent 42%);
  height: 70%;
  left: 0;
  opacity: 0.72;
  top: -10%;
  transform: none;
  width: 100%;
}

.hero-lens-glow {
  animation: centeredLensBreath var(--hero-cycle) ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 216px 252px;
}

.hero-lens-chips {
  animation: metricGrowthPace var(--hero-cycle) ease-in-out infinite !important;
}

.hero-response-graph {
  animation: responseGraphGrowthPace var(--hero-cycle) ease-in-out infinite !important;
}

.hero-direction-readout {
  animation: responseBadgeGrowthPace var(--hero-cycle) ease-in-out infinite !important;
}

.hero-consumption-panel {
  animation: uptakeGrowthPace var(--hero-cycle) ease-in-out infinite !important;
}

.reading-phase-a {
  animation: readingPhaseAOrganic var(--hero-cycle) ease-in-out infinite;
}

.reading-phase-b {
  animation: readingPhaseBOrganic var(--hero-cycle) ease-in-out infinite;
}

.reading-phase-c {
  animation: readingPhaseCOrganic var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-a {
  animation: directionPhaseAOrganic var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-b {
  animation: directionPhaseBOrganic var(--hero-cycle) ease-in-out infinite;
}

.direction-phase-c {
  animation: directionPhaseCOrganic var(--hero-cycle) ease-in-out infinite;
}

.vpd-fill {
  animation: vpdGrowthPace var(--hero-cycle) cubic-bezier(0.24, 0.7, 0.18, 1) infinite;
}

.ec-fill {
  animation: ecGrowthPace var(--hero-cycle) cubic-bezier(0.24, 0.7, 0.18, 1) infinite;
}

.dli-fill {
  animation: dliGrowthPace var(--hero-cycle) cubic-bezier(0.24, 0.7, 0.18, 1) infinite;
}

.water-use {
  animation: waterGrowthPace var(--hero-cycle) cubic-bezier(0.24, 0.7, 0.18, 1) infinite;
}

.nutrient-use {
  animation: nutrientGrowthPace var(--hero-cycle) cubic-bezier(0.24, 0.7, 0.18, 1) infinite;
}

.light-use {
  animation: lightGrowthPace var(--hero-cycle) cubic-bezier(0.24, 0.7, 0.18, 1) infinite;
}

.hero-shoot-system {
  animation: shootOrganicPresence var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-stem {
  animation: stemOrganicGrowth var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.14, 1) infinite !important;
}

.petiole-left-two,
.petiole-right-two {
  animation: branchOrganicLower var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.14, 1) infinite !important;
}

.petiole-left-three,
.petiole-right-three {
  animation: branchOrganicMiddle var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.14, 1) infinite !important;
}

.petiole-left-one,
.petiole-right-one {
  animation: branchOrganicUpper var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.14, 1) infinite !important;
}

.leaf-left-two,
.leaf-right-two {
  animation: leafOrganicLower var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.16, 1) infinite !important;
}

.leaf-node-left,
.leaf-node-right {
  animation: leafOrganicMiddle var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.16, 1) infinite !important;
}

.leaf-left-one,
.leaf-right-one {
  animation: leafOrganicUpper var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.16, 1) infinite !important;
}

.hero-growth-node {
  animation: growthNodeOrganicPace var(--hero-cycle) ease-in-out infinite !important;
}

.hero-apical-leaf {
  animation: apicalContinuousLead var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-morph-orb {
  animation: apicalHeadMorph var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
  fill: rgba(198, 236, 154, 0.92);
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-final-mark-layer {
  animation: finalLogoApicalResolve var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite;
  clip-path: circle(8% at 50% 19%);
  top: 42%;
  width: min(66%, 318px);
  will-change: clip-path, opacity, transform;
}

.hero-final-mark-composite {
  aspect-ratio: 1;
  filter:
    drop-shadow(0 0 10px rgba(198, 236, 154, 0.16))
    drop-shadow(0 20px 28px rgba(0, 0, 0, 0.36));
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(66%, 318px);
  z-index: 6;
}

.hero-final-mark-composite img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  transform-origin: center;
  width: 100%;
  will-change: opacity, transform, clip-path;
}

.hero-final-logo-piece {
  mix-blend-mode: normal;
  opacity: 0;
}

.logo-piece-left {
  animation: logoLeftMorphPiece var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.18, 1) infinite;
  clip-path: polygon(3% 14%, 58% 17%, 59% 56%, 48% 76%, 23% 97%, 0% 88%, 0% 31%);
  transform-origin: 36% 50%;
  z-index: 2;
}

.logo-piece-right {
  animation: logoRightMorphPiece var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.18, 1) infinite;
  clip-path: polygon(54% 12%, 100% 7%, 100% 85%, 76% 98%, 55% 82%, 57% 48%);
  transform-origin: 68% 48%;
  z-index: 3;
}

.logo-piece-lower {
  animation: logoLowerMorphPiece var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.18, 1) infinite;
  clip-path: polygon(0% 50%, 100% 48%, 94% 100%, 17% 100%);
  transform-origin: 50% 78%;
  z-index: 4;
}

.logo-piece-center {
  animation: logoCenterMorphPiece var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  clip-path: polygon(34% 28%, 76% 26%, 77% 95%, 41% 100%, 34% 69%, 50% 48%);
  transform-origin: 52% 67%;
  z-index: 5;
}

.logo-piece-head {
  animation: logoHeadMorphPiece var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  clip-path: circle(12% at 50% 18%);
  transform-origin: 50% 18%;
  z-index: 7;
}

.hero-final-mark-composite .hero-final-mark-layer {
  animation: finalLogoCompositePolish var(--hero-cycle) ease-in-out infinite;
  clip-path: none;
  filter: none;
  height: 100%;
  left: 0;
  mix-blend-mode: normal;
  opacity: 0;
  top: 0;
  transform: none;
  width: 100%;
  z-index: 8;
}

/* Stabilized morph: vector logo leaves assemble first, final bitmap only polishes. */
.hero-logo-formation {
  animation: logoVectorAssemblyPresence var(--hero-cycle) ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 8px rgba(198, 236, 154, 0.12))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28));
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.formation-fill {
  animation: none;
  fill-opacity: 0.72;
  transform-box: fill-box;
}

.mark-left,
.mark-outer-left {
  animation: vectorLogoLeftLeafSettle var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.16, 1) infinite !important;
  transform-origin: 76% 70%;
}

.mark-right,
.mark-outer-right {
  animation: vectorLogoRightLeafSettle var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.16, 1) infinite !important;
  transform-origin: 24% 70%;
}

.mark-center {
  animation: vectorLogoCenterLeafSettle var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.16, 1) infinite !important;
  transform-origin: 50% 72%;
}

.mark-lower {
  animation: vectorLogoLowerLeafSettle var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.16, 1) infinite !important;
  transform-origin: 50% 78%;
}

.formation-leaf,
.formation-spine,
.formation-highlight {
  animation: vectorLogoGuideLineSettle var(--hero-cycle) ease-in-out infinite !important;
}

.hero-final-mark-layer {
  animation: finalLogoVectorPolish var(--hero-cycle) ease-in-out infinite !important;
  clip-path: none;
  opacity: 0;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.99);
  width: min(66%, 318px);
  z-index: 7;
}

@keyframes centeredLensBreath {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.94);
  }

  42% {
    opacity: 0.52;
    transform: scale(1.02);
  }

  72% {
    opacity: 0.42;
    transform: scale(1.08);
  }
}

@keyframes metricGrowthPace {
  0%,
  14% {
    opacity: 0.76;
  }

  28% {
    opacity: 1;
  }

  40% {
    opacity: 0.38;
  }

  54%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.76;
  }
}

@keyframes responseGraphGrowthPace {
  0%,
  16% {
    opacity: 0.18;
  }

  32% {
    opacity: 0.7;
  }

  44% {
    opacity: 0.22;
  }

  56%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.18;
  }
}

@keyframes responseBadgeGrowthPace {
  0%,
  14% {
    opacity: 0.74;
  }

  30% {
    opacity: 1;
  }

  42% {
    opacity: 0.3;
  }

  54%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.74;
  }
}

@keyframes uptakeGrowthPace {
  0%,
  18% {
    opacity: 0.62;
  }

  36% {
    opacity: 0.88;
  }

  50% {
    opacity: 0.34;
  }

  62%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 0.62;
  }
}

@keyframes readingPhaseAOrganic {
  0%,
  18% {
    opacity: 1;
  }

  30%,
  100% {
    opacity: 0;
  }
}

@keyframes readingPhaseBOrganic {
  0%,
  22% {
    opacity: 0;
  }

  32%,
  46% {
    opacity: 1;
  }

  58%,
  100% {
    opacity: 0;
  }
}

@keyframes readingPhaseCOrganic {
  0%,
  42% {
    opacity: 0;
  }

  50%,
  61% {
    opacity: 1;
  }

  70%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseAOrganic {
  0%,
  18% {
    opacity: 1;
  }

  30%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseBOrganic {
  0%,
  24% {
    opacity: 0;
  }

  34%,
  48% {
    opacity: 1;
  }

  58%,
  100% {
    opacity: 0;
  }
}

@keyframes directionPhaseCOrganic {
  0%,
  44% {
    opacity: 0;
  }

  52%,
  61% {
    opacity: 1;
  }

  70%,
  100% {
    opacity: 0;
  }
}

@keyframes vpdGrowthPace {
  0%,
  100% {
    transform: scaleX(0.3);
  }

  24% {
    transform: scaleX(0.48);
  }

  44% {
    transform: scaleX(0.68);
  }

  60%,
  74% {
    transform: scaleX(0.86);
  }
}

@keyframes ecGrowthPace {
  0%,
  100% {
    transform: scaleX(0.28);
  }

  24% {
    transform: scaleX(0.44);
  }

  44% {
    transform: scaleX(0.64);
  }

  60%,
  74% {
    transform: scaleX(0.82);
  }
}

@keyframes dliGrowthPace {
  0%,
  100% {
    transform: scaleX(0.32);
  }

  24% {
    transform: scaleX(0.5);
  }

  44% {
    transform: scaleX(0.7);
  }

  60%,
  74% {
    transform: scaleX(0.9);
  }
}

@keyframes waterGrowthPace {
  0%,
  100% {
    transform: scaleX(0.36);
  }

  28% {
    transform: scaleX(0.54);
  }

  48%,
  74% {
    transform: scaleX(0.86);
  }
}

@keyframes nutrientGrowthPace {
  0%,
  100% {
    transform: scaleX(0.3);
  }

  28% {
    transform: scaleX(0.48);
  }

  48%,
  74% {
    transform: scaleX(0.78);
  }
}

@keyframes lightGrowthPace {
  0%,
  100% {
    transform: scaleX(0.42);
  }

  28% {
    transform: scaleX(0.62);
  }

  48%,
  74% {
    transform: scaleX(0.92);
  }
}

@keyframes shootOrganicPresence {
  0%,
  60% {
    opacity: 1;
  }

  68% {
    opacity: 0.24;
  }

  74%,
  94% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes stemOrganicGrowth {
  0% {
    opacity: 0.24;
    stroke-dashoffset: 0.98;
  }

  18% {
    opacity: 0.58;
    stroke-dashoffset: 0.66;
  }

  38% {
    opacity: 0.94;
    stroke-dashoffset: 0.12;
  }

  52%,
  60% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.14;
    stroke-dashoffset: 0;
  }

  74%,
  94% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.24;
    stroke-dashoffset: 0.98;
  }
}

@keyframes branchOrganicLower {
  0%,
  14% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  34% {
    opacity: 0.8;
    stroke-dashoffset: 0.18;
  }

  48%,
  60% {
    opacity: 0.88;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }

  74%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchOrganicMiddle {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  38% {
    opacity: 0.78;
    stroke-dashoffset: 0.2;
  }

  50%,
  60% {
    opacity: 0.84;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }

  74%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchOrganicUpper {
  0%,
  22% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  42% {
    opacity: 0.76;
    stroke-dashoffset: 0.22;
  }

  54%,
  60% {
    opacity: 0.84;
    stroke-dashoffset: 0;
  }

  68% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }

  74%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes leafOrganicLower {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.08, 0.22) rotate(var(--leaf-curl));
  }

  34% {
    opacity: 0.58;
    transform: scale(0.64, 0.78) rotate(0deg);
  }

  48%,
  60% {
    opacity: 0.94;
    transform: scale(0.98) rotate(0deg);
  }

  68% {
    opacity: 0.14;
    transform: scale(0.72) rotate(0deg);
  }

  74%,
  100% {
    opacity: 0;
    transform: scale(0.16, 0.26) rotate(0deg);
  }
}

@keyframes leafOrganicMiddle {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(var(--leaf-curl));
  }

  40% {
    opacity: 0.56;
    transform: scale(0.62, 0.76) rotate(0deg);
  }

  52%,
  60% {
    opacity: 0.9;
    transform: scale(0.96) rotate(0deg);
  }

  68% {
    opacity: 0.12;
    transform: scale(0.68) rotate(0deg);
  }

  74%,
  100% {
    opacity: 0;
    transform: scale(0.14, 0.24) rotate(0deg);
  }
}

@keyframes leafOrganicUpper {
  0%,
  24% {
    opacity: 0;
    transform: scale(0.06, 0.18) rotate(var(--leaf-curl));
  }

  44% {
    opacity: 0.54;
    transform: scale(0.6, 0.74) rotate(0deg);
  }

  56%,
  60% {
    opacity: 0.9;
    transform: scale(0.98) rotate(0deg);
  }

  68% {
    opacity: 0.12;
    transform: scale(0.68) rotate(0deg);
  }

  74%,
  100% {
    opacity: 0;
    transform: scale(0.14, 0.24) rotate(0deg);
  }
}

@keyframes growthNodeOrganicPace {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.45);
  }

  36%,
  56% {
    opacity: 0.52;
    transform: scale(0.86);
  }

  68% {
    opacity: 0.16;
    transform: scale(0.72);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(0.42);
  }
}

@keyframes apicalContinuousLead {
  0%,
  18% {
    opacity: 0;
    transform: translate(0, 12px) scale(0.22, 0.36);
  }

  34% {
    opacity: 0.56;
    transform: translate(0, 4px) scale(0.54, 0.68);
  }

  46%,
  52% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1);
  }

  58% {
    opacity: 0.18;
    transform: translate(-52px, 0) scale(0.34);
  }

  64%,
  100% {
    opacity: 0;
    transform: translate(-65px, 0) scale(0.16);
  }
}

@keyframes apicalHeadMorph {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.36);
  }

  38% {
    opacity: 0.36;
    transform: translate(0, 0) scale(0.7);
  }

  52% {
    opacity: 0.86;
    transform: translate(0, 0) scale(1);
  }

  58% {
    opacity: 0.94;
    transform: translate(-34px, 0) scale(1.55);
  }

  64% {
    opacity: 0.86;
    transform: translate(-65px, 0) scale(2.28);
  }

  70% {
    opacity: 0.24;
    transform: translate(-65px, 0) scale(2.34);
  }

  74%,
  100% {
    opacity: 0;
    transform: translate(-65px, 0) scale(2.36);
  }
}

@keyframes logoVectorAssemblyPresence {
  0%,
  54% {
    opacity: 0;
    transform: scale(0.94);
  }

  64% {
    opacity: 0.74;
    transform: scale(0.985);
  }

  76%,
  84% {
    opacity: 0.92;
    transform: scale(1);
  }

  90%,
  100% {
    opacity: 0;
    transform: scale(1.004);
  }
}

@keyframes vectorLogoLeftLeafSettle {
  0%,
  54% {
    opacity: 0;
    transform: translate(-34px, 22px) scale(0.7) rotate(-9deg);
  }

  64% {
    opacity: 0.62;
    transform: translate(-13px, 8px) scale(0.9) rotate(-3deg);
  }

  76%,
  84% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  90%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.006) rotate(0deg);
  }
}

@keyframes vectorLogoRightLeafSettle {
  0%,
  54% {
    opacity: 0;
    transform: translate(34px, 18px) scale(0.7) rotate(9deg);
  }

  64% {
    opacity: 0.62;
    transform: translate(13px, 7px) scale(0.9) rotate(3deg);
  }

  76%,
  84% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  90%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.006) rotate(0deg);
  }
}

@keyframes vectorLogoCenterLeafSettle {
  0%,
  56% {
    opacity: 0;
    transform: translate(-4px, 34px) scale(0.44, 0.72) rotate(-3deg);
  }

  66% {
    opacity: 0.72;
    transform: translate(-2px, 10px) scale(0.82, 0.92) rotate(-1deg);
  }

  78%,
  84% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  90%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.006) rotate(0deg);
  }
}

@keyframes vectorLogoLowerLeafSettle {
  0%,
  56% {
    opacity: 0;
    transform: translate(0, 24px) scale(0.72, 0.58);
  }

  68% {
    opacity: 0.62;
    transform: translate(0, 8px) scale(0.9, 0.84);
  }

  80%,
  84% {
    opacity: 0.92;
    transform: translate(0, 0) scale(1);
  }

  90%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.006);
  }
}

@keyframes vectorLogoGuideLineSettle {
  0%,
  54% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  66% {
    opacity: 0.48;
    stroke-dashoffset: 0.32;
  }

  78%,
  84% {
    opacity: 0.16;
    stroke-dashoffset: 0;
  }

  90%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes finalLogoVectorPolish {
  0%,
  76% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.992);
  }

  84%,
  96% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.004);
  }
}

@keyframes logoHeadMorphPiece {
  0%,
  60% {
    opacity: 0;
    transform: translate(15%, -8%) scale(0.24);
  }

  68% {
    opacity: 1;
    transform: translate(5%, -3%) scale(0.72);
  }

  78%,
  96% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.01);
  }
}

@keyframes logoCenterMorphPiece {
  0%,
  62% {
    opacity: 0;
    transform: translate(-6%, 28%) scale(0.42, 0.68) rotate(-4deg);
  }

  72% {
    opacity: 0.82;
    transform: translate(-2%, 9%) scale(0.82, 0.92) rotate(-1deg);
  }

  80%,
  96% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.01) rotate(0deg);
  }
}

@keyframes logoLeftMorphPiece {
  0%,
  62% {
    opacity: 0;
    transform: translate(-32%, 14%) scale(0.72) rotate(-14deg);
  }

  72% {
    opacity: 0.72;
    transform: translate(-12%, 5%) scale(0.88) rotate(-5deg);
  }

  80%,
  96% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.01) rotate(0deg);
  }
}

@keyframes logoRightMorphPiece {
  0%,
  62% {
    opacity: 0;
    transform: translate(30%, 10%) scale(0.72) rotate(13deg);
  }

  72% {
    opacity: 0.72;
    transform: translate(11%, 4%) scale(0.88) rotate(5deg);
  }

  80%,
  96% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.01) rotate(0deg);
  }
}

@keyframes logoLowerMorphPiece {
  0%,
  62% {
    opacity: 0;
    transform: translate(0, 24%) scale(0.74, 0.58);
  }

  72% {
    opacity: 0.64;
    transform: translate(0, 9%) scale(0.9, 0.82);
  }

  82%,
  96% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  99%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.01);
  }
}

@keyframes finalLogoCompositePolish {
  0%,
  80% {
    opacity: 0;
    transform: scale(1);
  }

  86%,
  96% {
    opacity: 0.9;
    transform: scale(1);
  }

  99%,
  100% {
    opacity: 0;
    transform: scale(1.004);
  }
}

@keyframes finalLogoApicalResolve {
  0%,
  64% {
    clip-path: circle(8% at 50% 19%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.955);
  }

  68% {
    clip-path: circle(10% at 50% 19%);
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(0.975);
  }

  74% {
    clip-path: circle(30% at 50% 32%);
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.99);
  }

  80%,
  96% {
    clip-path: circle(76% at 50% 50%);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  99%,
  100% {
    clip-path: circle(76% at 50% 50%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.004);
  }
}

/* Rescue pass: clean in-place logo assembly, no chopped moving-image artifacts. */
.hero-logo-formation {
  animation: none;
  opacity: 0;
}

.formation-fill,
.formation-leaf,
.formation-spine,
.formation-highlight {
  animation: none;
  opacity: 0;
}

.hero-final-mark-composite {
  aspect-ratio: 1;
  filter:
    drop-shadow(0 0 10px rgba(198, 236, 154, 0.16))
    drop-shadow(0 20px 28px rgba(0, 0, 0, 0.36));
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(66%, 318px);
  z-index: 7;
}

.hero-final-mark-composite img {
  display: block;
  filter: none;
  height: 100%;
  inset: 0;
  left: 0;
  object-fit: contain;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: none;
  transform-origin: center;
  width: 100%;
  will-change: opacity, clip-path;
}

.hero-final-logo-piece {
  mix-blend-mode: normal;
  display: none !important;
}

.logo-piece-head {
  animation: logoHeadInPlaceReveal var(--hero-cycle) ease-in-out infinite !important;
  clip-path: circle(12% at 50% 18%);
  z-index: 6;
}

.logo-piece-center {
  animation: logoCenterInPlaceReveal var(--hero-cycle) ease-in-out infinite !important;
  clip-path: polygon(34% 25%, 75% 25%, 78% 100%, 40% 100%, 34% 68%, 49% 47%);
  z-index: 5;
}

.logo-piece-left {
  animation: logoSideInPlaceReveal var(--hero-cycle) ease-in-out infinite !important;
  clip-path: polygon(2% 8%, 60% 12%, 61% 58%, 48% 78%, 20% 100%, 0% 92%, 0% 28%);
  z-index: 2;
}

.logo-piece-right {
  animation: logoSideInPlaceReveal var(--hero-cycle) ease-in-out infinite !important;
  clip-path: polygon(52% 8%, 100% 5%, 100% 92%, 78% 100%, 54% 82%, 55% 43%);
  z-index: 3;
}

.logo-piece-lower {
  animation: logoLowerInPlaceReveal var(--hero-cycle) ease-in-out infinite !important;
  clip-path: polygon(0% 48%, 100% 48%, 94% 100%, 14% 100%);
  z-index: 4;
}

.hero-final-mark-composite .hero-final-mark-layer {
  animation: logoBloomFromHead var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite !important;
  clip-path: circle(8% at 50% 18%);
  mix-blend-mode: normal;
  z-index: 8;
}

@keyframes logoHeadInPlaceReveal {
  0%,
  56% {
    opacity: 0;
  }

  64%,
  96% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes logoCenterInPlaceReveal {
  0%,
  70% {
    opacity: 0;
  }

  80%,
  96% {
    opacity: 0.92;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes logoSideInPlaceReveal {
  0%,
  72% {
    opacity: 0;
  }

  82%,
  96% {
    opacity: 0.9;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes logoLowerInPlaceReveal {
  0%,
  74% {
    opacity: 0;
  }

  84%,
  96% {
    opacity: 0.86;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes logoFinalCleanReveal {
  0%,
  72% {
    opacity: 0;
  }

  82%,
  96% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes logoBloomFromHead {
  0%,
  64% {
    clip-path: circle(8% at 50% 18%);
    opacity: 0;
    transform: scale(0.99);
  }

  70% {
    clip-path: circle(11% at 50% 18%);
    opacity: 0.92;
    transform: scale(0.992);
  }

  82%,
  96% {
    clip-path: circle(76% at 50% 50%);
    opacity: 1;
    transform: scale(1);
  }

  99%,
  100% {
    clip-path: circle(76% at 50% 50%);
    opacity: 0;
    transform: scale(1.004);
  }
}

/* Stability reset: restore grounded biological growth before re-attempting logo morph. */
.hero-final-mark-composite,
.hero-final-mark-layer,
.hero-final-mark,
.hero-resolution-field {
  display: none !important;
  opacity: 0 !important;
}

.hero-lens-plant,
.hero-shoot-system {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-lens-rootzone,
.hero-substrate,
.hero-lens-root,
.hero-irrigation-line,
.hero-resource-particles,
.resource-dot {
  display: initial !important;
}

.hero-lens-rootzone {
  animation: rootZoneStablePulse var(--hero-cycle) ease-in-out infinite !important;
  opacity: 1 !important;
}

.hero-substrate {
  animation: substrateStableHold var(--hero-cycle) ease-in-out infinite !important;
  opacity: 1 !important;
}

.hero-lens-root {
  animation: rootStableGrowth var(--hero-cycle) cubic-bezier(0.2, 0.78, 0.18, 1) infinite !important;
  opacity: 0;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.root-lateral-one,
.root-lateral-two,
.root-lateral-three,
.root-lateral-four,
.root-fine {
  animation-name: rootHairStableGrowth !important;
}

.hero-irrigation-line {
  animation: irrigationStablePulse var(--hero-cycle) ease-in-out infinite !important;
}

.resource-dot {
  animation: resourceDotStableUptake var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-stem {
  animation: stemStableGrowth var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.petiole-left-two,
.petiole-right-two {
  animation: branchStableLower var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.petiole-left-three,
.petiole-right-three {
  animation: branchStableMiddle var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.petiole-left-one,
.petiole-right-one {
  animation: branchStableUpper var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.leaf-left-two,
.leaf-right-two {
  animation: leafStableLower var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.leaf-node-left,
.leaf-node-right {
  animation: leafStableMiddle var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.leaf-left-one,
.leaf-right-one {
  animation: leafStableUpper var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
}

.hero-apical-leaf {
  animation: apicalStableLead var(--hero-cycle) cubic-bezier(0.2, 0.76, 0.16, 1) infinite !important;
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-growth-node {
  animation: growthNodeStablePulse var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-chips {
  animation: metricStableCompanion var(--hero-cycle) ease-in-out infinite !important;
}

.hero-direction-readout,
.hero-response-graph,
.hero-consumption-panel {
  animation: companionPanelStableFade var(--hero-cycle) ease-in-out infinite !important;
}

@keyframes rootZoneStablePulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.985);
  }

  24%,
  88% {
    opacity: 0.9;
    transform: scale(1);
  }
}

@keyframes substrateStableHold {
  0%,
  100% {
    opacity: 0.74;
  }

  20%,
  90% {
    opacity: 1;
  }
}

@keyframes rootStableGrowth {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  18% {
    opacity: 0.72;
    stroke-dashoffset: 0.16;
  }

  30%,
  88% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes rootHairStableGrowth {
  0%,
  10% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  28% {
    opacity: 0.54;
    stroke-dashoffset: 0.18;
  }

  42%,
  88% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes irrigationStablePulse {
  0%,
  12% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  28%,
  72% {
    opacity: 0.5;
    stroke-dashoffset: 0;
  }

  90%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes resourceDotStableUptake {
  0%,
  18% {
    opacity: 0;
    transform: translateY(10px) scale(0.55);
  }

  38%,
  78% {
    opacity: 0.72;
    transform: translateY(-8px) scale(1);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(-24px) scale(0.7);
  }
}

@keyframes stemStableGrowth {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  30% {
    opacity: 0.92;
    stroke-dashoffset: 0.24;
  }

  46%,
  88% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchStableLower {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  38%,
  88% {
    opacity: 0.82;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchStableMiddle {
  0%,
  26% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  46%,
  88% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes branchStableUpper {
  0%,
  34% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  54%,
  88% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes leafStableLower {
  0%,
  24% {
    opacity: 0;
    transform: scale(0.08, 0.22) rotate(var(--leaf-curl));
  }

  42% {
    opacity: 0.68;
    transform: scale(0.66, 0.78) rotate(0deg);
  }

  56%,
  88% {
    opacity: 0.92;
    transform: scale(0.98) rotate(0deg);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(0.16, 0.28) rotate(0deg);
  }
}

@keyframes leafStableMiddle {
  0%,
  32% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(var(--leaf-curl));
  }

  50% {
    opacity: 0.64;
    transform: scale(0.62, 0.76) rotate(0deg);
  }

  62%,
  88% {
    opacity: 0.9;
    transform: scale(0.96) rotate(0deg);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(0.14, 0.24) rotate(0deg);
  }
}

@keyframes leafStableUpper {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.06, 0.18) rotate(var(--leaf-curl));
  }

  58% {
    opacity: 0.62;
    transform: scale(0.6, 0.74) rotate(0deg);
  }

  68%,
  88% {
    opacity: 0.9;
    transform: scale(0.98) rotate(0deg);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(0.14, 0.24) rotate(0deg);
  }
}

@keyframes apicalStableLead {
  0%,
  38% {
    opacity: 0;
    transform: translateY(9px) scale(0.28, 0.42);
  }

  58% {
    opacity: 0.62;
    transform: translateY(3px) scale(0.72);
  }

  72%,
  88% {
    opacity: 0.95;
    transform: translate(0, 0) scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: translateY(4px) scale(0.3);
  }
}

@keyframes growthNodeStablePulse {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.45);
  }

  42%,
  82% {
    opacity: 0.56;
    transform: scale(0.9);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(0.42);
  }
}

@keyframes metricStableCompanion {
  0%,
  64% {
    opacity: 0.86;
  }

  78%,
  90% {
    opacity: 0.34;
  }

  100% {
    opacity: 0.86;
  }
}

@keyframes companionPanelStableFade {
  0%,
  58% {
    opacity: 0.7;
  }

  76%,
  90% {
    opacity: 0.18;
  }

  100% {
    opacity: 0.7;
  }
}

/* Root-first biological growth with an apical-bud logo handoff. */
.hero-systems-lens {
  --hero-cycle: 13.6s;
}

.hero-lens-visual {
  --hero-cycle: 13.6s;
}

.hero-resolution-field,
.hero-logo-formation,
.hero-morph-orb,
.hero-final-mark,
.hero-final-mark-layer,
.hero-final-mark-composite {
  display: none !important;
  opacity: 0 !important;
}

.formation-halo,
.formation-orb,
.formation-fill,
.formation-leaf,
.formation-spine,
.formation-highlight {
  display: inline !important;
}

.hero-lens-plant,
.hero-shoot-system {
  animation: none !important;
  filter:
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 14px rgba(158, 220, 122, 0.08));
  opacity: 1 !important;
  transform: none !important;
  transform-box: view-box;
  transform-origin: 214px 348px;
}

.hero-lens-rootzone,
.hero-substrate {
  opacity: 1 !important;
}

.hero-lens-rootzone {
  animation: aPlusRootZone var(--hero-cycle) ease-in-out infinite !important;
}

.hero-substrate {
  animation: aPlusSubstrate var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-root {
  animation: aPlusRootPrimary var(--hero-cycle) cubic-bezier(0.18, 0.74, 0.16, 1) infinite !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.root-lateral-one,
.root-lateral-two,
.root-lateral-three,
.root-lateral-four {
  animation-name: aPlusRootLateral !important;
}

.root-fine,
.root-hair-one,
.root-hair-two,
.root-hair-three,
.root-hair-four,
.root-hair-five,
.root-hair-six,
.root-hair-seven,
.root-hair-eight {
  animation-name: aPlusRootFine !important;
}

.hero-irrigation-line {
  animation: aPlusIrrigation var(--hero-cycle) ease-in-out infinite !important;
}

.resource-dot {
  animation: aPlusResourceDot var(--hero-cycle) ease-in-out infinite !important;
}

.dot-two,
.dot-four {
  animation-delay: 0s !important;
}

.hero-lens-stem {
  animation: aPlusStemElongation var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.14, 1) infinite !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.petiole-left-two,
.petiole-right-two {
  animation: aPlusBranchLower var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.14, 1) infinite !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.petiole-left-three,
.petiole-right-three {
  animation: aPlusBranchMiddle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.14, 1) infinite !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.petiole-left-one,
.petiole-right-one {
  animation: aPlusBranchUpper var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.14, 1) infinite !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.hero-leaf-cluster {
  opacity: 0;
  transform-box: fill-box;
}

.hero-lens-leaf {
  animation: none !important;
  fill: rgba(116, 203, 103, 0.5) !important;
  fill-opacity: 1;
  filter: url(#heroLensSoftGlow);
  opacity: 1 !important;
  stroke-opacity: 0.64;
}

.hero-lens-vein {
  opacity: 0.72;
}

.leaf-left-two,
.leaf-right-two {
  animation: aPlusLeafLower var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
}

.leaf-node-left,
.leaf-node-right {
  animation: aPlusLeafMiddle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
}

.leaf-left-one,
.leaf-right-one {
  animation: aPlusLeafUpper var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
}

.leaf-left-two {
  transform-origin: 94% 64%;
}

.leaf-right-two {
  transform-origin: 10% 46%;
}

.leaf-node-left {
  transform-origin: 94% 72%;
}

.leaf-node-right {
  transform-origin: 10% 76%;
}

.leaf-left-one {
  transform-origin: 94% 86%;
}

.leaf-right-one {
  transform-origin: 12% 86%;
}

.hero-apical-leaf {
  animation: aPlusApicalLead var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-apical-leaflet,
.hero-apical-vein {
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-apical-leaflet {
  animation: aPlusApicalLeafletFoldLeft var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
}

.apical-leaflet-right {
  animation-name: aPlusApicalLeafletFoldRight !important;
}

.apical-leaflet-center {
  animation-name: aPlusApicalLeafletFoldCenter !important;
}

.hero-apical-vein {
  animation: aPlusApicalVeinFold var(--hero-cycle) ease-in-out infinite !important;
}

.hero-morph-orb {
  animation: aPlusBudToLogoHead var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  fill: rgba(172, 224, 121, 0.9);
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.44);
  stroke-width: 0.7;
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-logo-formation {
  animation: aPlusLogoFormation var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite !important;
  filter:
    drop-shadow(0 0 10px rgba(158, 220, 122, 0.18))
    drop-shadow(0 20px 28px rgba(0, 0, 0, 0.34));
  opacity: 0;
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.directive-mark-vector {
  animation: aPlusLogoVectorSettle var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite !important;
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.formation-halo {
  animation: aPlusLogoHalo var(--hero-cycle) ease-in-out infinite !important;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.formation-orb {
  animation: aPlusLogoHeadReceive var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  fill: rgba(172, 224, 121, 0.88);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.2);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
}

.formation-fill {
  animation: aPlusLogoLeafResolve var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite !important;
  opacity: 0;
}

.formation-leaf,
.formation-spine {
  animation: aPlusLogoLineResolve var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite !important;
  opacity: 0;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
}

.formation-highlight {
  animation: aPlusLogoHighlight var(--hero-cycle) ease-in-out infinite !important;
}

.hero-aplus-logo-bridge {
  pointer-events: none;
}

.hero-aplus-bud {
  animation: aPlusBridgeBudToHead var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite;
  fill: rgba(174, 229, 125, 0.94);
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.5);
  stroke-width: 0.8;
  transform-box: view-box;
  transform-origin: 280px 116px;
}

.hero-aplus-logo-mark {
  animation: aPlusBridgeLogoMark var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite;
  filter:
    drop-shadow(0 0 12px rgba(158, 220, 122, 0.2))
    drop-shadow(0 20px 26px rgba(0, 0, 0, 0.34));
  opacity: 0;
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.hero-aplus-logo-head {
  animation: aPlusBridgeLogoHead var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite;
  fill: rgba(174, 229, 125, 0.9);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.24);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-aplus-logo-leaf {
  animation: aPlusBridgeLogoLeaf var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite;
  fill: rgba(99, 187, 88, 0.54);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.14);
  stroke-width: 0.7;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-aplus-logo-stroke {
  animation: aPlusBridgeLogoStroke var(--hero-cycle) cubic-bezier(0.18, 0.78, 0.18, 1) infinite;
  fill: none;
  opacity: 0;
  stroke: rgba(218, 242, 184, 0.62);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hero-growth-node {
  animation: aPlusNodePulse var(--hero-cycle) ease-in-out infinite !important;
}

.node-root {
  animation-name: aPlusNodeRoot !important;
}

.node-lower {
  animation-name: aPlusNodeLower !important;
}

.node-mid {
  animation-name: aPlusNodeMid !important;
}

.node-upper {
  animation-name: aPlusNodeUpper !important;
}

.node-apex {
  animation-name: aPlusNodeApex !important;
}

.hero-transpiration-stream {
  animation: aPlusTranspiration var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-chips {
  animation: aPlusMetricShell var(--hero-cycle) ease-in-out infinite !important;
}

.hero-response-graph {
  animation: aPlusResponseGraph var(--hero-cycle) ease-in-out infinite !important;
}

.hero-direction-readout,
.hero-consumption-panel {
  animation: aPlusCompanionPanel var(--hero-cycle) ease-in-out infinite !important;
}

.reading-phase-a {
  animation: aPlusReadingA var(--hero-cycle) ease-in-out infinite !important;
}

.reading-phase-b {
  animation: aPlusReadingB var(--hero-cycle) ease-in-out infinite !important;
}

.reading-phase-c {
  animation: aPlusReadingC var(--hero-cycle) ease-in-out infinite !important;
}

.direction-phase-a {
  animation: aPlusReadingA var(--hero-cycle) ease-in-out infinite !important;
}

.direction-phase-b {
  animation: aPlusReadingB var(--hero-cycle) ease-in-out infinite !important;
}

.direction-phase-c {
  animation: aPlusReadingC var(--hero-cycle) ease-in-out infinite !important;
}

.vpd-fill,
.ec-fill,
.dli-fill {
  animation: aPlusMetricFill var(--hero-cycle) ease-in-out infinite !important;
}

.water-use,
.nutrient-use,
.light-use {
  animation: aPlusUptakeFill var(--hero-cycle) ease-in-out infinite !important;
}

@keyframes aPlusSubstrate {
  0%,
  100% {
    opacity: 0.78;
  }

  12%,
  92% {
    opacity: 1;
  }
}

@keyframes aPlusIrrigation {
  0%,
  10% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  22%,
  58% {
    opacity: 0.5;
    stroke-dashoffset: 0;
  }

  78%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusResourceDot {
  0%,
  14% {
    opacity: 0;
    transform: translateY(12px) scale(0.5);
  }

  34%,
  72% {
    opacity: 0.68;
    transform: translateY(-10px) scale(1);
  }

  88%,
  100% {
    opacity: 0;
    transform: translateY(-26px) scale(0.7);
  }
}

@keyframes aPlusStemElongation {
  0%,
  14% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  26% {
    opacity: 0.58;
    stroke-dashoffset: 0.82;
  }

  46% {
    opacity: 0.96;
    stroke-dashoffset: 0.34;
  }

  62%,
  90% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusBranchLower {
  0%,
  32% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  46% {
    opacity: 0.72;
    stroke-dashoffset: 0.18;
  }

  58%,
  90% {
    opacity: 0.82;
    stroke-dashoffset: 0;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusBranchMiddle {
  0%,
  42% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  56% {
    opacity: 0.7;
    stroke-dashoffset: 0.18;
  }

  66%,
  90% {
    opacity: 0.8;
    stroke-dashoffset: 0;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusBranchUpper {
  0%,
  52% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  64% {
    opacity: 0.68;
    stroke-dashoffset: 0.2;
  }

  74%,
  90% {
    opacity: 0.8;
    stroke-dashoffset: 0;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusLeafLower {
  0%,
  38% {
    opacity: 0;
    transform: scale(0.06, 0.18) rotate(var(--leaf-curl));
  }

  52% {
    opacity: 0.58;
    transform: scale(0.64, 0.78) rotate(0deg);
  }

  64%,
  90% {
    opacity: 0.94;
    transform: scale(0.98) rotate(0deg);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.22) rotate(0deg);
  }
}

@keyframes aPlusLeafMiddle {
  0%,
  48% {
    opacity: 0;
    transform: scale(0.06, 0.18) rotate(var(--leaf-curl));
  }

  62% {
    opacity: 0.58;
    transform: scale(0.62, 0.76) rotate(0deg);
  }

  72%,
  90% {
    opacity: 0.9;
    transform: scale(0.96) rotate(0deg);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.22) rotate(0deg);
  }
}

@keyframes aPlusLeafUpper {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.05, 0.16) rotate(var(--leaf-curl));
  }

  70% {
    opacity: 0.56;
    transform: scale(0.6, 0.74) rotate(0deg);
  }

  78%,
  90% {
    opacity: 0.9;
    transform: scale(0.98) rotate(0deg);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.22) rotate(0deg);
  }
}

@keyframes aPlusApicalLead {
  0%,
  15% {
    opacity: 0;
    transform: translate(-66px, 232px) scale(0.08, 0.12);
  }

  24% {
    opacity: 0.34;
    transform: translate(-62px, 216px) scale(0.14, 0.18);
  }

  38% {
    opacity: 0.52;
    transform: translate(-52px, 150px) scale(0.24, 0.32);
  }

  52% {
    opacity: 0.7;
    transform: translate(-38px, 86px) scale(0.44, 0.56);
  }

  66% {
    opacity: 0.9;
    transform: translate(-18px, 34px) scale(0.72, 0.82);
  }

  76%,
  84% {
    opacity: 0.96;
    transform: translate(0, 0) scale(1);
  }

  90% {
    opacity: 0.72;
    transform: translate(-2px, 1px) scale(0.48, 0.54);
  }

  94% {
    opacity: 0.18;
    transform: translate(-10px, 0) scale(0.2, 0.24);
  }

  100% {
    opacity: 0;
    transform: translate(-66px, 232px) scale(0.08, 0.12);
  }
}

@keyframes aPlusApicalLeafletFoldLeft {
  0%,
  78% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  88% {
    opacity: 0.84;
    transform: rotate(18deg) scale(0.62, 0.72);
  }

  94%,
  100% {
    opacity: 0;
    transform: rotate(26deg) scale(0.18, 0.24);
  }
}

@keyframes aPlusApicalLeafletFoldRight {
  0%,
  78% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  88% {
    opacity: 0.84;
    transform: rotate(-18deg) scale(0.62, 0.72);
  }

  94%,
  100% {
    opacity: 0;
    transform: rotate(-26deg) scale(0.18, 0.24);
  }
}

@keyframes aPlusApicalLeafletFoldCenter {
  0%,
  78% {
    opacity: 1;
    transform: scale(1);
  }

  88% {
    opacity: 0.9;
    transform: scale(0.46, 0.7);
  }

  94%,
  100% {
    opacity: 0;
    transform: scale(0.16, 0.22);
  }
}

@keyframes aPlusApicalVeinFold {
  0%,
  82% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

@keyframes aPlusNodePulse {
  0%,
  24% {
    opacity: 0;
    transform: scale(0.45);
  }

  48%,
  84% {
    opacity: 0.54;
    transform: scale(0.9);
  }

  98%,
  100% {
    opacity: 0;
    transform: scale(0.42);
  }
}

@keyframes aPlusNodeRoot {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.4);
  }

  18%,
  54% {
    opacity: 0.58;
    transform: scale(0.9);
  }

  66%,
  100% {
    opacity: 0.18;
    transform: scale(0.62);
  }
}

@keyframes aPlusNodeLower {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.4);
  }

  42%,
  62% {
    opacity: 0.58;
    transform: scale(0.92);
  }

  78%,
  100% {
    opacity: 0.16;
    transform: scale(0.58);
  }
}

@keyframes aPlusNodeMid {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.4);
  }

  52%,
  70% {
    opacity: 0.56;
    transform: scale(0.9);
  }

  84%,
  100% {
    opacity: 0.15;
    transform: scale(0.56);
  }
}

@keyframes aPlusNodeUpper {
  0%,
  50% {
    opacity: 0;
    transform: scale(0.4);
  }

  62%,
  78% {
    opacity: 0.54;
    transform: scale(0.88);
  }

  90%,
  100% {
    opacity: 0.12;
    transform: scale(0.52);
  }
}

@keyframes aPlusNodeApex {
  0%,
  56% {
    opacity: 0;
    transform: scale(0.4);
  }

  68%,
  84% {
    opacity: 0.62;
    transform: scale(1);
  }

  92%,
  100% {
    opacity: 0;
    transform: scale(0.34);
  }
}

@keyframes aPlusBudToLogoHead {
  0%,
  78% {
    opacity: 0;
    transform: translate(0, 0) scale(0.28);
  }

  84% {
    opacity: 0.82;
    transform: translate(0, 0) scale(0.9);
  }

  90% {
    opacity: 0.88;
    transform: translate(-38px, 0) scale(1.9);
  }

  94% {
    opacity: 0.34;
    transform: translate(-65px, 0) scale(3.32);
  }

  97%,
  100% {
    opacity: 0;
    transform: translate(-65px, 0) scale(3.32);
  }
}

@keyframes aPlusLogoFormation {
  0%,
  80% {
    opacity: 0;
    transform: scale(0.985);
  }

  88% {
    opacity: 0.88;
    transform: scale(0.996);
  }

  94%,
  97% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes aPlusLogoVectorSettle {
  0%,
  80% {
    transform: translateY(6px) scale(0.96);
  }

  92%,
  97% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(6px) scale(0.96);
  }
}

@keyframes aPlusLogoHalo {
  0%,
  82% {
    opacity: 0;
    transform: scale(0.5);
  }

  90% {
    opacity: 0.16;
    transform: scale(0.92);
  }

  96% {
    opacity: 0.1;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes aPlusLogoHeadReceive {
  0%,
  84% {
    opacity: 0;
    transform: scale(0.22);
  }

  91% {
    opacity: 0.88;
    transform: scale(0.72);
  }

  95%,
  97% {
    opacity: 0.94;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.22);
  }
}

@keyframes aPlusLogoLeafResolve {
  0%,
  82% {
    fill-opacity: 0;
    opacity: 0;
    transform: scale(0.88);
  }

  90% {
    fill-opacity: 0.58;
    opacity: 0.76;
    transform: scale(0.97);
  }

  94%,
  97% {
    fill-opacity: 0.86;
    opacity: 0.94;
    transform: scale(1);
  }

  100% {
    fill-opacity: 0;
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes aPlusLogoLineResolve {
  0%,
  82% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  91% {
    opacity: 0.54;
    stroke-dashoffset: 0.18;
  }

  95%,
  97% {
    opacity: 0.68;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusLogoHighlight {
  0%,
  88% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  93% {
    opacity: 0.3;
    stroke-dashoffset: 0.08;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes aPlusBridgeBudToHead {
  0%,
  78% {
    opacity: 0;
    transform: translate(0, 0) scale(0.24);
  }

  84% {
    opacity: 0.9;
    transform: translate(0, 0) scale(0.86);
  }

  90% {
    opacity: 0.95;
    transform: translate(-38px, 0) scale(1.9);
  }

  94% {
    opacity: 0.36;
    transform: translate(-65px, 0) scale(3.3);
  }

  97%,
  100% {
    opacity: 0;
    transform: translate(-65px, 0) scale(3.3);
  }
}

@keyframes aPlusBridgeLogoMark {
  0%,
  84% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }

  90% {
    opacity: 0.78;
    transform: translateY(2px) scale(0.985);
  }

  94%,
  97% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
}

@keyframes aPlusBridgeLogoHead {
  0%,
  84% {
    opacity: 0;
    transform: scale(0.24);
  }

  90% {
    opacity: 0.82;
    transform: scale(0.68);
  }

  94%,
  97% {
    opacity: 0.96;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.24);
  }
}

@keyframes aPlusBridgeLogoLeaf {
  0%,
  84% {
    opacity: 0;
    transform: scale(0.84);
  }

  90% {
    opacity: 0.62;
    transform: scale(0.96);
  }

  94%,
  97% {
    opacity: 0.92;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.84);
  }
}

@keyframes aPlusBridgeLogoStroke {
  0%,
  84% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  91% {
    opacity: 0.52;
    stroke-dashoffset: 0.18;
  }

  94%,
  97% {
    opacity: 0.72;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusTranspiration {
  0%,
  62% {
    opacity: 0;
    stroke-dashoffset: 1;
    transform: translateY(10px);
  }

  76%,
  90% {
    opacity: 0.34;
    stroke-dashoffset: 0.16;
    transform: translateY(-10px);
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
    transform: translateY(-22px);
  }
}

/* Organic growth override: one apical front drives the whole shoot. */
.hero-shoot-system,
.hero-aplus-logo-bridge {
  display: none !important;
  opacity: 0 !important;
}

.hero-organic-plant {
  display: inline !important;
  opacity: 1 !important;
  pointer-events: none;
}

.organic-stem-glow,
.organic-stem-core {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 214px 348px;
}

.organic-stem-glow {
  animation: organicStemGlow 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  stroke: rgba(158, 220, 122, 0.28);
  stroke-width: 12;
}

.organic-stem-core {
  animation: organicStemTrail 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  stroke: rgba(190, 234, 145, 0.88);
  stroke-width: 4.6;
}

.organic-leaf {
  transform-box: view-box;
}

.organic-leaf-blade {
  fill: rgba(104, 194, 91, 0.62);
  filter: url(#heroLensSoftGlow);
  stroke: rgba(237, 244, 236, 0.14);
  stroke-width: 0.8;
}

.organic-leaf-vein {
  fill: none;
  opacity: 0.76;
  stroke: rgba(237, 244, 236, 0.22);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 1.1;
}

.organic-leaf-lower-left {
  animation: organicLeafLowerLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 222px 278px;
}

.organic-leaf-lower-right {
  animation: organicLeafLowerRightForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 226px 262px;
}

.organic-leaf-mid-left {
  animation: organicLeafMidLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 239px 218px;
}

.organic-leaf-mid-right {
  animation: organicLeafMidRightForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 251px 193px;
}

.organic-leaf-upper-left {
  animation: organicLeafUpperLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 266px 150px;
}

.organic-leaf .organic-leaf-vein {
  animation: organicLeafVein 13.6s ease-in-out infinite;
}

.organic-apical-front {
  fill: rgba(188, 235, 132, 0.96);
  filter: url(#heroLensSoftGlow);
  stroke: rgba(237, 244, 236, 0.54);
  stroke-width: 0.8;
}

.organic-logo-mark {
  animation: none !important;
  filter:
    drop-shadow(0 0 12px rgba(158, 220, 122, 0.2))
    drop-shadow(0 20px 26px rgba(0, 0, 0, 0.34));
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.organic-logo-head {
  animation: none !important;
  fill: rgba(188, 235, 132, 0.92);
  opacity: 1;
  stroke: rgba(237, 244, 236, 0.28);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
}

.organic-logo-shape {
  animation: none !important;
  fill: rgba(94, 181, 82, 0.72);
  opacity: 1;
  stroke: rgba(237, 244, 236, 0.14);
  stroke-width: 0.7;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes organicLeafLowerLeft {
  0%,
  29% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(-10deg);
  }

  46% {
    opacity: 0.62;
    transform: scale(0.68, 0.82) rotate(-2deg);
  }

  64%,
  90% {
    opacity: 0.94;
    transform: scale(1) rotate(0deg);
  }

  97%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.24) rotate(0deg);
  }
}

@keyframes organicLeafLowerRight {
  0%,
  35% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(9deg);
  }

  52% {
    opacity: 0.58;
    transform: scale(0.66, 0.8) rotate(2deg);
  }

  68%,
  90% {
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
  }

  97%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.24) rotate(0deg);
  }
}

@keyframes organicLeafMidLeft {
  0%,
  43% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(-9deg);
  }

  60% {
    opacity: 0.58;
    transform: scale(0.66, 0.8) rotate(-2deg);
  }

  74%,
  90% {
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
  }

  97%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.24) rotate(0deg);
  }
}

@keyframes organicLeafMidRight {
  0%,
  51% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(8deg);
  }

  66% {
    opacity: 0.54;
    transform: scale(0.64, 0.78) rotate(2deg);
  }

  80%,
  90% {
    opacity: 0.88;
    transform: scale(1) rotate(0deg);
  }

  97%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.24) rotate(0deg);
  }
}

@keyframes organicLeafUpperLeft {
  0%,
  61% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(-8deg);
  }

  76% {
    opacity: 0.54;
    transform: scale(0.64, 0.78) rotate(-2deg);
  }

  86%,
  90% {
    opacity: 0.88;
    transform: scale(1) rotate(0deg);
  }

  97%,
  100% {
    opacity: 0;
    transform: scale(0.12, 0.24) rotate(0deg);
  }
}

@keyframes organicLogoMarkResolve {
  0%,
  84% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }

  91% {
    opacity: 0.76;
    transform: translateY(2px) scale(0.985);
  }

  94%,
  97% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
}

@keyframes organicLogoHeadReceive {
  0%,
  84% {
    opacity: 0;
    transform: scale(0.24);
  }

  91% {
    opacity: 0.84;
    transform: scale(0.68);
  }

  94%,
  97% {
    opacity: 0.96;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.24);
  }
}

@keyframes organicLogoLeafResolve {
  0%,
  84% {
    opacity: 0;
    transform: scale(0.84);
  }

  91% {
    opacity: 0.62;
    transform: scale(0.96);
  }

  94%,
  97% {
    opacity: 0.9;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.84);
  }
}

/* Refinement: root/cotyledon initiation and shoot-born logo unfold. */
.organic-cotyledon,
.organic-node,
.organic-apical-bud,
.organic-logo-mark,
.organic-logo-shape,
.organic-logo-stroke {
  transform-box: view-box;
}

.organic-cotyledon {
  transform-origin: 214px 344px;
}

.organic-cotyledon-left {
  animation: organicCotyledonLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
}

.organic-cotyledon-right {
  animation: organicCotyledonRightForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
}

.organic-cotyledon-blade {
  fill: rgba(145, 220, 118, 0.52);
}

.organic-node {
  animation: organicNodePulse 13.6s ease-in-out infinite !important;
}

.organic-node-lower {
  transform-origin: 223px 266px;
}

.organic-node-mid {
  transform-origin: 240px 220px;
}

.organic-node-upper {
  transform-origin: 263px 158px;
}

.organic-node-dot {
  fill: rgba(190, 234, 145, 0.68);
  filter: url(#heroLensSoftGlow);
  stroke: rgba(237, 244, 236, 0.34);
  stroke-width: 0.55;
}

.organic-stem-glow {
  animation: organicStemGlow 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  stroke: rgba(158, 220, 122, 0.2);
  stroke-width: 8.5;
}

.organic-stem-core {
  animation: organicStemTrail 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  stroke: rgba(190, 234, 145, 0.82);
  stroke-width: 3.6;
}

.organic-leaf-blade {
  fill: rgba(108, 197, 95, 0.54);
  stroke: rgba(237, 244, 236, 0.13);
}

.organic-leaf-vein {
  animation: organicLeafVein 13.6s ease-in-out infinite !important;
  stroke: rgba(237, 244, 236, 0.24);
  stroke-width: 0.95;
}

.organic-leaf-lower-left {
  animation: organicLeafLowerLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 222px 278px;
}

.organic-leaf-lower-right {
  animation: organicLeafLowerRightForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 226px 262px;
}

.organic-leaf-mid-left {
  animation: organicLeafMidLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 240px 220px;
}

.organic-leaf-mid-right {
  animation: organicLeafMidRightForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 252px 194px;
}

.organic-leaf-upper-left {
  animation: organicLeafUpperLeftForm 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 267px 153px;
}

.organic-apical-bud {
  pointer-events: none;
}

.organic-apical-core {
  fill: rgba(188, 235, 132, 0.94);
  filter: url(#heroLensSoftGlow);
  stroke: rgba(237, 244, 236, 0.54);
  stroke-width: 0.75;
}

.organic-apical-fold {
  animation: organicApicalFold 13.6s cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  fill: rgba(120, 204, 98, 0.5);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.16);
  stroke-width: 0.6;
  transform-box: view-box;
  transform-origin: 0 0;
}

.organic-apical-fold-right {
  animation-name: organicApicalFoldRight !important;
}

.organic-logo-mark {
  animation: organicLogoUnfoldGroup 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  filter:
    drop-shadow(0 0 10px rgba(158, 220, 122, 0.16))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.32));
  transform-origin: 215px 116px;
}

.organic-logo-head {
  animation: organicLogoHeadFromBud 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  fill: rgba(188, 235, 132, 0.9);
  opacity: 1;
  transform-box: view-box;
  transform-origin: 215px 116px;
}

.organic-logo-shape {
  fill: rgba(96, 184, 83, 0.66);
  opacity: 1;
  stroke: rgba(237, 244, 236, 0.13);
  stroke-width: 0.62;
  transform-box: view-box;
  transform-origin: 215px 116px;
}

.organic-logo-left {
  animation: organicLogoLeftUnfold 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
}

.organic-logo-right {
  animation: organicLogoRightUnfold 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
}

.organic-logo-center {
  animation: organicLogoCenterUnfold 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
}

.organic-logo-lower {
  animation: organicLogoLowerUnfold 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
}

.organic-logo-stroke {
  animation: organicLogoStrokeDraw 13.6s cubic-bezier(0.18, 0.78, 0.18, 1) infinite !important;
  fill: none;
  opacity: 0;
  stroke: rgba(218, 242, 184, 0.58);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.organic-clean-logo,
.organic-segmented-logo {
  animation: organicCleanLogoResolve 13.6s cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  filter:
    drop-shadow(0 0 14px rgba(158, 220, 122, 0.18))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.organic-logo-segment {
  transform-box: view-box;
  transform-origin: 215px 225px;
}

@keyframes aPlusMetricFill {
  0%,
  100% {
    transform: scaleX(0.22);
  }

  20% {
    transform: scaleX(0.34);
  }

  42% {
    transform: scaleX(0.54);
  }

  66% {
    transform: scaleX(0.74);
  }

  88% {
    transform: scaleX(0.9);
  }
}

@keyframes aPlusUptakeFill {
  0%,
  100% {
    transform: scaleX(0.22);
  }

  24% {
    transform: scaleX(0.46);
  }

  56% {
    transform: scaleX(0.68);
  }

  86% {
    transform: scaleX(0.9);
  }
}

@keyframes organicNodePulse {
  0%,
  100% {
    transform: scale(0.5);
  }

  42%,
  66% {
    transform: scale(1);
  }
}

@keyframes organicLeafVein {
  0%,
  32% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  58%,
  84% {
    opacity: 0.7;
    stroke-dashoffset: 0;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes organicLeafLowerLeftForm {
  0%,
  24% {
    transform: scale(0.07, 0.18) rotate(-18deg);
  }

  38% {
    transform: scale(0.62, 0.76) rotate(-5deg);
  }

  54%,
  88% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0.1, 0.22) rotate(0deg);
  }
}

@keyframes organicLeafLowerRightForm {
  0%,
  30% {
    transform: scale(0.07, 0.18) rotate(16deg);
  }

  44% {
    transform: scale(0.62, 0.76) rotate(4deg);
  }

  60%,
  88% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0.1, 0.22) rotate(0deg);
  }
}

@keyframes organicLeafMidLeftForm {
  0%,
  42% {
    transform: scale(0.07, 0.18) rotate(-15deg);
  }

  56% {
    transform: scale(0.6, 0.74) rotate(-4deg);
  }

  68%,
  88% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0.1, 0.22) rotate(0deg);
  }
}

@keyframes organicLeafMidRightForm {
  0%,
  50% {
    transform: scale(0.07, 0.18) rotate(14deg);
  }

  64% {
    transform: scale(0.58, 0.72) rotate(3deg);
  }

  76%,
  88% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0.1, 0.22) rotate(0deg);
  }
}

@keyframes organicLeafUpperLeftForm {
  0%,
  62% {
    transform: scale(0.07, 0.18) rotate(-12deg);
  }

  72% {
    transform: scale(0.58, 0.72) rotate(-3deg);
  }

  82%,
  88% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0.1, 0.22) rotate(0deg);
  }
}

@keyframes organicApicalFold {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.28) rotate(-18deg);
  }

  46%,
  76% {
    opacity: 0.5;
    transform: scale(0.76) rotate(-5deg);
  }

  86% {
    opacity: 0.62;
    transform: scale(1) rotate(10deg);
  }

  94%,
  100% {
    opacity: 0;
    transform: scale(0.18) rotate(24deg);
  }
}

@keyframes organicApicalFoldRight {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.28) rotate(18deg);
  }

  46%,
  76% {
    opacity: 0.48;
    transform: scale(0.76) rotate(5deg);
  }

  86% {
    opacity: 0.62;
    transform: scale(1) rotate(-10deg);
  }

  94%,
  100% {
    opacity: 0;
    transform: scale(0.18) rotate(-24deg);
  }
}

@keyframes organicLogoUnfoldGroup {
  0%,
  77% {
    opacity: 0;
    transform: scale(0.96);
  }

  82% {
    opacity: 0.62;
    transform: scale(0.985);
  }

  87%,
  96% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes organicLogoHeadFromBud {
  0%,
  76% {
    opacity: 0;
    transform: translateX(44px) scale(0.18);
  }

  82% {
    opacity: 0.82;
    transform: translateX(12px) scale(0.72);
  }

  87%,
  96% {
    opacity: 0.96;
    transform: translateX(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(44px) scale(0.18);
  }
}

@keyframes organicLogoLeftUnfold {
  0%,
  78% {
    opacity: 0;
    transform: scale(0.06, 0.14) rotate(-32deg);
  }

  83% {
    opacity: 0.58;
    transform: scale(0.72, 0.86) rotate(-8deg);
  }

  87%,
  96% {
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.06, 0.14) rotate(-32deg);
  }
}

@keyframes organicLogoRightUnfold {
  0%,
  78% {
    opacity: 0;
    transform: scale(0.06, 0.14) rotate(30deg);
  }

  83% {
    opacity: 0.58;
    transform: scale(0.72, 0.86) rotate(8deg);
  }

  87%,
  96% {
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.06, 0.14) rotate(30deg);
  }
}

@keyframes organicLogoCenterUnfold {
  0%,
  77% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(10deg);
  }

  82% {
    opacity: 0.52;
    transform: scale(0.62, 0.82) rotate(2deg);
  }

  86%,
  96% {
    opacity: 0.84;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(10deg);
  }
}

@keyframes organicLogoLowerUnfold {
  0%,
  79% {
    opacity: 0;
    transform: scale(0.08, 0.16) rotate(20deg);
  }

  84% {
    opacity: 0.52;
    transform: scale(0.7, 0.84) rotate(5deg);
  }

  88%,
  96% {
    opacity: 0.82;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.08, 0.16) rotate(20deg);
  }
}

@keyframes organicLogoStrokeDraw {
  0%,
  77% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  83% {
    opacity: 0.46;
    stroke-dashoffset: 0.24;
  }

  87%,
  96% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

/* Lifecycle v2: logo anatomy grows, holds, sheds, and returns to seed. */
.hero-systems-lens,
.hero-lens-visual {
  --hero-cycle: 16s;
}

.organic-leaf-lower-left,
.organic-leaf-lower-right,
.organic-leaf-mid-left,
.organic-leaf-mid-right,
.organic-leaf-upper-left {
  display: inline !important;
}

.organic-logo-mark {
  display: none !important;
  opacity: 0 !important;
}

.organic-cotyledon-left,
.organic-cotyledon-right,
.organic-node,
.organic-stem-glow,
.organic-stem-core,
.organic-apical-fold,
.organic-clean-logo,
.organic-segmented-logo,
.organic-logo-segment {
  animation-duration: var(--hero-cycle) !important;
}

.organic-identity-leaves {
  display: inline !important;
  pointer-events: none;
}

.organic-clean-logo {
  display: none !important;
}

.organic-segmented-logo {
  animation: organicSegmentedLogoResolve var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  filter:
    drop-shadow(0 0 14px rgba(158, 220, 122, 0.18))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.organic-logo-segment {
  image-rendering: auto;
  transform-box: view-box;
  will-change: transform;
}

.segment-head {
  animation: logoSegmentHeadLifecycle var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  transform-origin: 215px 120px;
}

.segment-left-outer {
  animation: logoSegmentLeftOuterLifecycle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 129px 241px;
}

.segment-upper-left {
  animation: logoSegmentUpperLeftLifecycle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 186px 170px;
}

.segment-right-leaf {
  animation: logoSegmentRightLeafLifecycle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  transform-origin: 275px 236px;
}

.segment-center-leaf {
  animation: logoSegmentCenterLeafLifecycle var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  transform-origin: 237px 231px;
}

.organic-identity-leaf {
  filter: url(#heroLensSoftGlow);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.13);
  stroke-width: 0.65;
  transform-box: view-box;
  transform-origin: 215px 225px;
}

.identity-left {
  animation: identityLeftLifecycle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  fill: rgba(83, 173, 82, 0.72);
}

.identity-right {
  animation: identityRightLifecycle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  fill: rgba(127, 211, 93, 0.76);
}

.identity-arm {
  animation: identityArmLifecycle var(--hero-cycle) cubic-bezier(0.16, 0.82, 0.18, 1) infinite !important;
  fill: rgba(98, 190, 91, 0.76);
}

.identity-lower {
  animation: identityLowerLifecycle var(--hero-cycle) cubic-bezier(0.18, 0.76, 0.16, 1) infinite !important;
  fill: rgba(76, 154, 80, 0.68);
}

.organic-apical-core {
  animation: apicalHeadColorLifecycle var(--hero-cycle) ease-in-out infinite !important;
}

.hero-lens-rootzone,
.hero-substrate {
  animation-duration: var(--hero-cycle) !important;
}

.hero-lens-root,
.hero-irrigation-line,
.resource-dot,
.hero-lens-chips,
.hero-response-graph,
.hero-direction-readout,
.hero-consumption-panel,
.reading-phase-a,
.reading-phase-b,
.reading-phase-c,
.direction-phase-a,
.direction-phase-b,
.direction-phase-c,
.vpd-fill,
.ec-fill,
.dli-fill,
.water-use,
.nutrient-use,
.light-use {
  animation-duration: var(--hero-cycle) !important;
}

@keyframes aPlusRootZone {
  0%,
  4%,
  100% {
    opacity: 0.36;
    transform: scale(0.965);
  }

  12%,
  50% {
    opacity: 0.92;
    transform: scale(1);
  }

  58%,
  84% {
    opacity: 0.24;
    transform: scale(0.99);
  }

  92% {
    opacity: 0.44;
    transform: scale(0.975);
  }
}

@keyframes aPlusRootPrimary {
  0%,
  5% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  14% {
    opacity: 0.74;
    stroke-dashoffset: 0.38;
  }

  28%,
  50% {
    opacity: 0.76;
    stroke-dashoffset: 0;
  }

  60%,
  86% {
    opacity: 0.18;
    stroke-dashoffset: 0.08;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusRootLateral {
  0%,
  10% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  24% {
    opacity: 0.54;
    stroke-dashoffset: 0.2;
  }

  42%,
  50% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }

  62%,
  88% {
    opacity: 0.12;
    stroke-dashoffset: 0.1;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusRootFine {
  0%,
  16% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  32% {
    opacity: 0.42;
    stroke-dashoffset: 0.24;
  }

  46%,
  52% {
    opacity: 0.48;
    stroke-dashoffset: 0;
  }

  64%,
  88% {
    opacity: 0.08;
    stroke-dashoffset: 0.14;
  }

  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes aPlusMetricShell {
  0%,
  54% {
    opacity: 0.84;
  }

  61%,
  85% {
    opacity: 0.14;
  }

  92%,
  100% {
    opacity: 0.84;
  }
}

@keyframes aPlusCompanionPanel {
  0%,
  54% {
    opacity: 0.7;
  }

  61%,
  85% {
    opacity: 0.09;
  }

  92%,
  100% {
    opacity: 0.7;
  }
}

@keyframes aPlusResponseGraph {
  0%,
  28% {
    opacity: 0.18;
  }

  42%,
  54% {
    opacity: 0.52;
  }

  62%,
  100% {
    opacity: 0.08;
  }
}

@keyframes aPlusReadingA {
  0%,
  20% {
    opacity: 1;
  }

  30%,
  100% {
    opacity: 0;
  }
}

@keyframes aPlusReadingB {
  0%,
  24% {
    opacity: 0;
  }

  34%,
  50% {
    opacity: 1;
  }

  58%,
  100% {
    opacity: 0;
  }
}

@keyframes aPlusReadingC {
  0%,
  48% {
    opacity: 0;
  }

  56%,
  82% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

@keyframes organicStemTrail {
  0%,
  7% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  18% {
    opacity: 0.58;
    stroke-dashoffset: 0.62;
  }

  34% {
    opacity: 0.9;
    stroke-dashoffset: 0.22;
  }

  48%,
  54% {
    opacity: 0.96;
    stroke-dashoffset: 0;
  }

  62%,
  84% {
    opacity: 0.12;
    stroke-dashoffset: 0;
  }

  94%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes organicStemGlow {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  34% {
    opacity: 0.22;
    stroke-dashoffset: 0.24;
  }

  48%,
  54% {
    opacity: 0.28;
    stroke-dashoffset: 0;
  }

  62%,
  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes organicCotyledonLeftForm {
  0%,
  6% {
    transform: scale(0.08, 0.16) rotate(-18deg);
  }

  16% {
    transform: scale(0.62, 0.78) rotate(-5deg);
  }

  26%,
  48% {
    transform: scale(1) rotate(0deg);
  }

  60%,
  100% {
    transform: scale(0.12, 0.2) rotate(0deg);
  }
}

@keyframes organicCotyledonRightForm {
  0%,
  7% {
    transform: scale(0.08, 0.16) rotate(16deg);
  }

  17% {
    transform: scale(0.62, 0.78) rotate(4deg);
  }

  27%,
  48% {
    transform: scale(1) rotate(0deg);
  }

  60%,
  100% {
    transform: scale(0.12, 0.2) rotate(0deg);
  }
}

@keyframes identityLeftLifecycle {
  0%,
  12% {
    opacity: 0;
    transform: translate(12px, 42px) scale(0.07, 0.16) rotate(-28deg);
  }

  24% {
    opacity: 0.56;
    transform: translate(12px, 42px) scale(0.34, 0.46) rotate(-21deg);
  }

  42% {
    opacity: 0.82;
    transform: translate(2px, 18px) scale(0.72, 0.78) rotate(-10deg);
  }

  58%,
  62% {
    opacity: 0.72;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  68%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes identityRightLifecycle {
  0%,
  14% {
    opacity: 0;
    transform: translate(32px, -30px) scale(0.07, 0.16) rotate(26deg);
  }

  30% {
    opacity: 0.52;
    transform: translate(28px, -22px) scale(0.34, 0.46) rotate(17deg);
  }

  46% {
    opacity: 0.76;
    transform: translate(14px, -10px) scale(0.68, 0.76) rotate(8deg);
  }

  58%,
  62% {
    opacity: 0.72;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  68%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes identityArmLifecycle {
  0%,
  18% {
    opacity: 0;
    transform: translate(0, 44px) scale(0.06, 0.26) rotate(-4deg);
  }

  38% {
    opacity: 0.58;
    transform: translate(0, 22px) scale(0.4, 0.76) rotate(-3deg);
  }

  55% {
    opacity: 0.82;
    transform: translate(0, 0) scale(0.96) rotate(0deg);
  }

  62% {
    opacity: 0.62;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  67% {
    opacity: 0.08;
    transform: translate(-2px, -11px) scale(1.035) rotate(-3deg);
  }

  72%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes identityLowerLifecycle {
  0%,
  18% {
    opacity: 0;
    transform: translate(8px, 34px) scale(0.06, 0.14) rotate(18deg);
  }

  34% {
    opacity: 0.52;
    transform: translate(5px, 26px) scale(0.36, 0.5) rotate(10deg);
  }

  52% {
    opacity: 0.78;
    transform: translate(0, 0) scale(0.94) rotate(0deg);
  }

  62%,
  64% {
    opacity: 0.56;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes apicalHeadColorLifecycle {
  0%,
  54% {
    fill: rgba(188, 235, 132, 0.94);
    stroke-width: 0.75;
  }

  62%,
  79% {
    fill: rgba(169, 225, 111, 0.96);
    stroke-width: 0.45;
  }

  92%,
  100% {
    fill: rgba(188, 235, 132, 0.84);
    stroke-width: 0.7;
  }
}

@keyframes organicCleanLogoResolve {
  0%,
  56% {
    transform: translateY(8px) scale(0.94);
  }

  61% {
    transform: translateY(1px) scale(0.992);
  }

  64%,
  79% {
    transform: translateY(0) scale(1);
  }

  86% {
    transform: translateY(4px) scale(0.975);
  }

  100% {
    transform: translateY(8px) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .growth-area,
  .response-area,
  .response-band,
  .response-point,
  .data-points circle,
  .hero-leaf-cluster,
  .hero-irrigation-line,
  .hero-transpiration-stream,
  .hero-lens-root,
  .hero-lens-stem,
  .hero-lens-petiole,
  .hero-lens-plant,
  .hero-shoot-system,
  .resource-dot,
  .hero-consumption-panel,
  .plant-leaf,
  .readout,
  .stage-plant,
  .stage-leaf-fan,
  .bud-cluster,
  .profile-bands rect,
  .profile-dots circle,
  .profile-scan,
  .network-glow,
  .core-orbit,
  .stage-chip {
    opacity: 1;
  }

  .growth-curve,
  .response-line,
  .resolve-thread,
  .hero-irrigation-line,
  .hero-transpiration-stream,
  .hero-lens-root,
  .hero-lens-stem,
  .hero-lens-petiole,
  .plant-stem,
  .stage-ground,
  .stage-root,
  .stage-stem,
  .stage-branch,
  .network-link,
  .vpd-curve,
  .ec-curve {
    stroke-dashoffset: 0;
  }

  .profile-scan,
  .hero-lens-plant,
  .hero-shoot-system,
  .hero-leaf-cluster,
  .resource-dot,
  .hero-irrigation-line,
  .hero-transpiration-stream {
    transform: none;
  }

  .reading-phase-a,
  .reading-phase-b {
    opacity: 0;
  }

  .reading-phase-c {
    opacity: 1;
  }

  .hero-resolution-field {
    opacity: 0;
  }

  .hero-logo-formation,
  .hero-final-mark,
  .formation-fill,
  .formation-orb,
  .formation-halo,
  .formation-highlight {
    opacity: 1;
    transform: scale(1) !important;
  }

  .hero-final-mark-layer {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .formation-leaf,
  .formation-spine {
    opacity: 0.22;
    stroke-dashoffset: 0;
  }

  .hero-shoot-system,
  .hero-morph-orb,
  .hero-lens-rootzone,
  .hero-substrate,
  .hero-lens-root,
  .hero-irrigation-line,
  .hero-transpiration-stream,
  .resource-dot {
    opacity: 0;
  }

  .vpd-fill,
  .ec-fill,
  .dli-fill,
  .water-use,
  .nutrient-use,
  .light-use {
    transform: scaleX(0.85);
  }

  .hero-logo-formation,
  .formation-fill,
  .formation-orb,
  .formation-halo,
  .formation-highlight,
  .formation-leaf,
  .formation-spine,
  .hero-resolution-field,
  .hero-morph-orb {
    opacity: 0 !important;
  }

  .hero-final-mark {
    mix-blend-mode: normal;
    opacity: 0 !important;
    transform: scale(1) !important;
  }

  .hero-final-mark-layer {
    clip-path: circle(76% at 50% 50%) !important;
    display: block;
    mix-blend-mode: normal;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .hero-final-mark-composite {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-final-logo-piece {
    display: none !important;
  }

  .hero-final-mark-composite .hero-final-mark-layer {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Homepage pass: proof-led hierarchy, tighter scroll behavior, and earlier logo resolve. */
html {
  scroll-padding-top: 88px;
}

section,
.scope-section,
.validation-spotlight,
.buyer-routes,
.cta-band {
  scroll-margin-top: 88px;
}

.site-header {
  position: sticky !important;
  top: 0;
}

.hero {
  min-height: calc(100svh - 70px);
  padding: clamp(56px, 8vh, 92px) 0 clamp(44px, 6vh, 76px);
}

.hero-grid {
  min-height: min(700px, calc(100svh - 168px));
}

.hero h1 {
  font-size: clamp(50px, 5.45vw, 78px);
  max-width: 700px;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 735px;
}

.page-hero {
  padding: clamp(84px, 9vw, 116px) 0 clamp(58px, 7vw, 78px);
}

body[data-page="about"] .page-hero + .section,
body[data-page="systems"] .page-hero + .section,
body[data-page="standard"] .page-hero + .section,
body[data-page="industries"] .page-hero + .section,
body[data-page="insights"] .page-hero + .section,
body[data-page="advisory"] .page-hero + .section,
body[data-page="contact"] .page-hero + .section,
body[data-page="legal"] .page-hero + .section {
  padding-top: clamp(36px, 4.5vw, 56px);
}

.hero-proof-strip {
  border-top: 1px solid rgba(237, 244, 236, 0.14);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  max-width: 760px;
  padding-top: 18px;
}

.hero-proof-strip span {
  color: rgba(237, 244, 236, 0.64);
  font-size: 12px;
  line-height: 1.35;
}

.hero-proof-strip strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.evidence-strip {
  background:
    radial-gradient(circle at 8% 0%, rgba(127, 185, 183, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(237, 244, 236, 0.04), rgba(237, 244, 236, 0.014)),
    var(--surface-dark);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 clamp(18px, 4vw, 48px);
}

.evidence-strip article {
  border-left: 1px solid rgba(237, 244, 236, 0.1);
  min-height: 176px;
  padding: clamp(22px, 3vw, 32px);
}

.evidence-strip article:last-child {
  border-right: 1px solid rgba(237, 244, 236, 0.1);
}

.evidence-strip span,
.buyer-routes-grid span {
  color: var(--leaf-2);
  display: block;
  font-size: 12px;
  font-weight: 820;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.evidence-strip strong {
  color: var(--ink);
  display: block;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.12;
  margin-bottom: 12px;
}

.evidence-strip p,
.buyer-routes-grid p {
  color: var(--muted);
  margin: 0;
}

.scope-section {
  padding-block: clamp(48px, 6vw, 76px);
}

.scope-panel {
  min-height: 320px;
}

.scope-tags span {
  background: rgba(237, 244, 236, 0.026);
}

.validation-spotlight {
  padding-block: clamp(52px, 7vw, 82px);
}

.buyer-routes {
  background:
    linear-gradient(180deg, var(--bg), var(--surface-dark));
  border-bottom: 1px solid var(--line);
  padding: clamp(58px, 8vw, 96px) clamp(18px, 4vw, 48px);
}

.buyer-routes-head,
.buyer-routes-grid {
  margin-inline: auto;
  max-width: var(--max);
}

.buyer-routes-head {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 1fr);
  margin-bottom: 28px;
}

.buyer-routes-head h2 {
  grid-column: 1 / -1;
  max-width: 920px;
}

.buyer-routes-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.buyer-routes-grid article {
  border-top: 1px solid rgba(158, 220, 122, 0.36);
  padding: 22px 18px 4px 0;
}

.buyer-routes-grid h3 {
  font-size: clamp(22px, 2.3vw, 30px);
  margin-bottom: 14px;
}

.home-publication {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.cards-section {
  background:
    radial-gradient(circle at 88% 8%, rgba(127, 185, 183, 0.075), transparent 30%),
    linear-gradient(180deg, rgba(237, 244, 236, 0.012), rgba(237, 244, 236, 0.034)),
    var(--surface-dark);
}

.feature-grid article {
  min-height: 220px;
}

.feature-grid span {
  margin-bottom: 24px;
}

.split.dark-panel {
  overflow: clip;
}

.advisory-callout {
  border-color: rgba(127, 185, 183, 0.22) !important;
}

.hero-systems-lens,
.hero-lens-visual {
  --hero-cycle: 16s;
}

@keyframes organicSegmentedLogoResolve {
  0%,
  49% {
    transform: translateY(8px) scale(0.94);
  }

  54% {
    transform: translateY(1px) scale(0.992);
  }

  58%,
  78% {
    transform: translateY(0) scale(1);
  }

  86% {
    transform: translateY(4px) scale(0.975);
  }

  100% {
    transform: translateY(8px) scale(0.94);
  }
}

@keyframes logoSegmentHeadLifecycle {
  0%,
  49% {
    transform: translate(0, -4px) scale(0.56);
  }

  54% {
    transform: translate(0, -1px) scale(0.86);
  }

  58%,
  78% {
    transform: translate(0, 0) scale(1);
  }

  86% {
    transform: translate(0, 124px) scale(0.42);
  }

  100% {
    transform: translate(-1px, 224px) scale(0.13);
  }
}

@keyframes logoSegmentLeftOuterLifecycle {
  0%,
  49% {
    transform: translate(54px, 48px) scale(0.48) rotate(-18deg);
  }

  54% {
    transform: translate(18px, 16px) scale(0.82) rotate(-8deg);
  }

  58%,
  78% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  86% {
    transform: translate(-18px, 40px) scale(0.78) rotate(-18deg);
  }

  100% {
    transform: translate(-70px, 136px) scale(0.36) rotate(-46deg);
  }
}

@keyframes logoSegmentUpperLeftLifecycle {
  0%,
  49% {
    transform: translate(34px, 38px) scale(0.56) rotate(-13deg);
  }

  54% {
    transform: translate(10px, 12px) scale(0.88) rotate(-5deg);
  }

  58%,
  78% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  86% {
    transform: translate(-28px, 32px) scale(0.78) rotate(-20deg);
  }

  100% {
    transform: translate(-82px, 118px) scale(0.36) rotate(-48deg);
  }
}

@keyframes logoSegmentRightLeafLifecycle {
  0%,
  49% {
    transform: translate(-44px, 38px) scale(0.52) rotate(15deg);
  }

  54% {
    transform: translate(-14px, 12px) scale(0.84) rotate(6deg);
  }

  58%,
  78% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  86% {
    transform: translate(28px, 42px) scale(0.78) rotate(18deg);
  }

  100% {
    transform: translate(76px, 132px) scale(0.36) rotate(44deg);
  }
}

@keyframes logoSegmentCenterLeafLifecycle {
  0%,
  49% {
    transform: translate(-10px, 24px) scale(0.68, 0.88) rotate(-1deg);
  }

  54% {
    transform: translate(-2px, 6px) scale(0.92, 0.98) rotate(-1deg);
  }

  58% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  65% {
    transform: translate(-3px, -12px) scale(1.035) rotate(-3deg);
  }

  70%,
  78% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  86% {
    transform: translate(4px, 50px) scale(0.72) rotate(10deg);
  }

  100% {
    transform: translate(18px, 142px) scale(0.34) rotate(24deg);
  }
}

@media (max-width: 940px) {
  .hero {
    min-height: auto;
    padding-top: clamp(42px, 7vw, 70px);
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-proof-strip,
  .evidence-strip,
  .buyer-routes-grid {
    grid-template-columns: 1fr;
  }

  .evidence-strip article {
    border-left: 0;
    border-top: 1px solid rgba(237, 244, 236, 0.1);
    min-height: 0;
  }

  .evidence-strip article:first-child {
    border-top: 0;
  }

  .evidence-strip article:last-child {
    border-right: 0;
  }

  .buyer-routes-head {
    display: block;
  }
}

@media (max-width: 620px) {
  .site-header {
    position: relative !important;
  }

  .hero {
    padding-top: 28px;
  }

  .page-hero {
    padding: 58px 0 46px;
  }

  .page-hero p {
    font-size: 17px;
  }

  .hero-copy {
    order: -1;
  }

  .hero-spotlight {
    max-width: min(350px, calc(100vw - 40px));
    order: 0;
  }

  .hero-proof-strip {
    gap: 8px;
    margin-top: 20px;
  }

  .hero-proof-strip span {
    border-top: 1px solid rgba(237, 244, 236, 0.09);
    padding-top: 8px;
  }

  .evidence-strip,
  .buyer-routes {
    padding-inline: 20px;
  }
}

/* Clean hero loop: one lifecycle, one clock, no legacy animation dependencies. */
.hero-clean-loop {
  aspect-ratio: 430 / 540;
  max-width: min(540px, 100%);
}

.hero-clean-loop-visual {
  --bio-loop: 16s;
  overflow: visible;
}

.bio-loop-shell,
.bio-loop-inner {
  fill: rgba(7, 15, 11, 0.7);
  stroke: rgba(237, 244, 236, 0.08);
  stroke-width: 1;
}

.bio-loop-inner {
  fill: rgba(8, 19, 14, 0.86);
  stroke: rgba(158, 220, 122, 0.18);
}

.bio-loop-glow {
  animation: bioLoopGlow var(--bio-loop) ease-in-out infinite;
  fill: url(#bioLoopGlow);
}

.bio-loop-grid path {
  fill: none;
  opacity: 0.46;
  stroke: rgba(237, 244, 236, 0.07);
  stroke-width: 1;
}

.bio-loop-chip rect,
.bio-loop-readout rect,
.bio-loop-resource-panel > rect {
  fill: rgba(7, 16, 12, 0.72);
  stroke: rgba(158, 220, 122, 0.2);
  stroke-width: 1;
}

.bio-loop-metrics,
.bio-loop-readout,
.bio-loop-response {
  animation: bioInstrumentDim var(--bio-loop) ease-in-out infinite;
}

.bio-loop-chip text,
.bio-loop-readout text,
.bio-loop-resource-panel text {
  fill: rgba(237, 244, 236, 0.58);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.bio-loop-chip .bio-loop-reading,
.bio-loop-readout .bio-loop-reading {
  fill: var(--leaf-2);
  font-size: 9px;
  opacity: 0;
}

.bio-loop-track {
  fill: rgba(237, 244, 236, 0.1);
}

.bio-loop-fill,
.bio-loop-uptake {
  fill: url(#bioLoopWater);
  transform-box: fill-box;
  transform-origin: left center;
}

.bio-loop-fill-vpd {
  animation: bioMetricVpd var(--bio-loop) ease-in-out infinite;
}

.bio-loop-fill-ec {
  animation: bioMetricEc var(--bio-loop) ease-in-out infinite;
}

.bio-loop-fill-dli {
  animation: bioMetricDli var(--bio-loop) ease-in-out infinite;
}

.bio-loop-water {
  animation: bioUptakeWater var(--bio-loop) ease-in-out infinite;
}

.bio-loop-nutrients {
  animation: bioUptakeNutrients var(--bio-loop) ease-in-out infinite;
}

.bio-loop-light {
  animation: bioUptakeLight var(--bio-loop) ease-in-out infinite;
}

.reading-a {
  animation: bioReadingA var(--bio-loop) ease-in-out infinite;
}

.reading-b {
  animation: bioReadingB var(--bio-loop) ease-in-out infinite;
}

.reading-c {
  animation: bioReadingC var(--bio-loop) ease-in-out infinite;
}

.bio-loop-response {
  opacity: 0.72;
}

.bio-loop-response-band {
  fill: rgba(158, 220, 122, 0.12);
}

.bio-loop-response-line {
  animation: bioResponseLine var(--bio-loop) cubic-bezier(0.2, 0.76, 0.16, 1) infinite;
  fill: none;
  opacity: 0;
  stroke: rgba(158, 220, 122, 0.62);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 2;
}

.bio-loop-rootzone {
  animation: bioRootZone var(--bio-loop) ease-in-out infinite;
  fill: rgba(237, 244, 236, 0.12);
  stroke: rgba(237, 244, 236, 0.2);
  stroke-width: 1.2;
}

.bio-loop-substrate {
  animation: bioSubstrate var(--bio-loop) ease-in-out infinite;
  fill: rgba(101, 82, 45, 0.22);
  stroke: rgba(158, 220, 122, 0.14);
  stroke-width: 1;
}

.bio-loop-irrigation,
.bio-loop-root {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
}

.bio-loop-irrigation {
  animation: bioIrrigation var(--bio-loop) ease-in-out infinite;
  stroke: rgba(127, 185, 183, 0.44);
  stroke-width: 1.8;
}

.bio-loop-root {
  stroke: url(#bioLoopRoot);
}

.primary-root {
  animation: bioRootPrimary var(--bio-loop) cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  stroke-width: 1.6;
}

.fine-root {
  animation: bioRootFine var(--bio-loop) cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  stroke-width: 0.9;
}

.bio-loop-stem,
.bio-loop-stem-glow,
.bio-loop-stem-taper {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
}

.bio-loop-stem-taper {
  filter: url(#bioLoopSoftGlow);
  opacity: 0;
}

.stem-base {
  animation: bioStemBase var(--bio-loop) cubic-bezier(0.22, 0.78, 0.14, 1) infinite;
  stroke: rgba(161, 220, 113, 0.58);
  stroke-width: 5.4;
}

.stem-mid {
  animation: bioStemMid var(--bio-loop) cubic-bezier(0.2, 0.78, 0.14, 1) infinite;
  stroke: rgba(185, 232, 127, 0.72);
  stroke-width: 3.6;
}

.stem-tip {
  animation: bioStemTip var(--bio-loop) cubic-bezier(0.16, 0.82, 0.12, 1) infinite;
  stroke: rgba(221, 247, 159, 0.88);
  stroke-width: 2;
}

.bio-loop-stem-glow {
  animation: bioStemGlow var(--bio-loop) cubic-bezier(0.2, 0.76, 0.16, 1) infinite;
  filter: url(#bioLoopSoftGlow);
  stroke: rgba(158, 220, 122, 0.15);
  stroke-width: 5.8;
}

.bio-loop-stem {
  animation: bioStemGrow var(--bio-loop) cubic-bezier(0.18, 0.76, 0.14, 1) infinite;
  stroke: rgba(219, 246, 156, 0.66);
  stroke-width: 1.8;
}

.bio-loop-stem-glow,
.bio-loop-stem {
  filter: url(#bioLoopSoftGlow);
}

.bio-loop-apical-handoff {
  animation: bioApicalHandoff var(--bio-loop) cubic-bezier(0.16, 0.82, 0.18, 1) infinite;
  fill: rgba(207, 242, 150, 0.08);
  filter: url(#bioLoopSoftGlow);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.34);
  stroke-dasharray: 0.18 0.18;
  stroke-linecap: round;
  stroke-width: 1.1;
  transform-box: view-box;
  transform-origin: 215px 116px;
}

.bio-loop-leaf {
  fill: url(#bioLoopLeaf);
  filter: url(#bioLoopSoftGlow);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.2);
  stroke-width: 0.75;
  transform-box: view-box;
}

.bio-loop-node {
  animation: bioNodeBase var(--bio-loop) ease-in-out infinite;
  fill: rgba(204, 246, 142, 0.94);
  filter: url(#bioLoopSoftGlow);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.28);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
}

.node-lower {
  animation-name: bioNodeLower;
}

.node-upper {
  animation-name: bioNodeUpper;
}

.node-apical {
  animation-name: bioNodeApical;
}

.bio-loop-vein {
  fill: none;
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.28);
  stroke-linecap: round;
  stroke-width: 0.75;
  transform-box: view-box;
}

.cotyledon-left {
  animation: bioCotyledonLeft var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 214px 342px;
}

.cotyledon-right {
  animation: bioCotyledonRight var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 216px 342px;
}

.plant-left-lower {
  animation: bioLeafLeftLower var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 222px 278px;
}

.plant-right-lower {
  animation: bioLeafRightLower var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 227px 264px;
}

.plant-left-upper {
  animation: bioLeafLeftUpper var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 240px 220px;
}

.plant-right-upper {
  animation: bioLeafRightUpper var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 252px 198px;
}

.plant-apical-leaf {
  animation: bioLeafApical var(--bio-loop) cubic-bezier(0.18, 0.78, 0.16, 1) infinite;
  transform-origin: 217px 147px;
}

.bio-loop-bud {
  animation: bioBudJourney var(--bio-loop) cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
}

.bio-loop-bud-core {
  animation: bioBudCore var(--bio-loop) ease-in-out infinite;
  fill: rgba(188, 235, 132, 0.94);
  filter: url(#bioLoopSoftGlow);
  stroke: rgba(237, 244, 236, 0.28);
  stroke-width: 0.8;
}

.bio-loop-bud-fold {
  animation: bioBudFold var(--bio-loop) ease-in-out infinite;
  fill: rgba(108, 199, 90, 0.58);
  opacity: 0;
  stroke: rgba(237, 244, 236, 0.12);
  stroke-width: 0.6;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.bio-loop-logo-piece {
  filter:
    drop-shadow(0 0 7px rgba(158, 220, 122, 0.08))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.22));
  opacity: 0;
  transform-box: view-box;
  will-change: opacity, transform;
}

.bio-loop-final-mark {
  animation: bioFinalMark var(--bio-loop) cubic-bezier(0.16, 0.82, 0.18, 1) infinite;
  filter:
    drop-shadow(0 0 16px rgba(158, 220, 122, 0.16))
    drop-shadow(0 22px 30px rgba(0, 0, 0, 0.34));
  opacity: 0;
  transform-box: view-box;
  transform-origin: 215px 198px;
}

.logo-head {
  animation: bioLogoHead var(--bio-loop) cubic-bezier(0.16, 0.82, 0.18, 1) infinite;
  transform-origin: 215px 116px;
}

.logo-left-outer {
  animation: bioLogoLeftOuter var(--bio-loop) cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  transform-origin: 129px 241px;
}

.logo-upper-left {
  animation: bioLogoUpperLeft var(--bio-loop) cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  transform-origin: 242px 178px;
}

.logo-right-leaf {
  animation: bioLogoRightLeaf var(--bio-loop) cubic-bezier(0.18, 0.76, 0.16, 1) infinite;
  transform-origin: 275px 236px;
}

.logo-center-leaf {
  animation: bioLogoCenterLeaf var(--bio-loop) cubic-bezier(0.16, 0.82, 0.18, 1) infinite;
  transform-origin: 237px 231px;
}

.bio-loop-resource-panel {
  animation: bioPanelFocus var(--bio-loop) ease-in-out infinite;
}

@media (max-width: 940px) {
  .hero-clean-loop {
    max-width: min(420px, 100%);
  }
}

@media (max-width: 620px) {
  .hero-grid {
    gap: 24px;
  }

  .hero-copy {
    order: 0;
  }

  .hero-clean-loop {
    margin-top: 16px;
    max-width: min(292px, calc(100vw - 56px));
    order: 0;
  }

  .hero-clean-loop-visual {
    --bio-loop: 16s;
  }

  .hero h1 {
    font-size: clamp(38px, 10.6vw, 46px);
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
}

/* Homepage polish: make proof, payoff, and fallbacks feel intentional. */
.hero-proof-strip {
  background: linear-gradient(180deg, rgba(237, 244, 236, 0.035), rgba(158, 220, 122, 0.02));
  border-block: 1px solid rgba(158, 220, 122, 0.18);
  column-gap: 18px;
  padding-block: 18px;
}

.hero-proof-strip span {
  border-left: 1px solid rgba(158, 220, 122, 0.2);
  padding-left: 14px;
}

.hero-proof-strip strong {
  color: rgba(237, 244, 236, 0.94);
  letter-spacing: 0.02em;
}

.evidence-strip article {
  background: linear-gradient(180deg, rgba(237, 244, 236, 0.025), rgba(158, 220, 122, 0.012));
}

.cta-band .button {
  min-width: 210px;
  text-align: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-clean-loop-visual * {
    animation: none !important;
    transition: none !important;
  }

  .bio-loop-metrics,
  .bio-loop-readout,
  .bio-loop-response,
  .bio-loop-resource-panel {
    opacity: 0.18 !important;
  }

  .bio-loop-root-system,
  .bio-loop-plant,
  .bio-loop-logo-stage {
    opacity: 0 !important;
  }

  .bio-loop-final-mark {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

/* Hero lifecycle: clean phase handoffs, restrained flourish, long final hold. */
/* Production pass: clearer proof sections and cleaner plant-to-logo lifecycle. */
.nowrap {
  white-space: nowrap;
}

.evidence-system {
  background:
    radial-gradient(circle at 88% 16%, rgba(127, 185, 183, 0.09), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--surface-dark));
  border-bottom: 1px solid var(--line);
  padding: clamp(58px, 8vw, 96px) clamp(18px, 4vw, 48px);
}

.evidence-system-head,
.evidence-system-grid {
  margin-inline: auto;
  max-width: var(--max);
}

.evidence-system-head {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  margin-bottom: 30px;
}

.evidence-system-head .eyebrow,
.evidence-system-head h2 {
  grid-column: 1;
}

.evidence-system-head > p:not(.eyebrow) {
  align-self: end;
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 8px;
}

.evidence-system-grid {
  counter-reset: evidence-step;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evidence-system-grid article {
  background:
    linear-gradient(180deg, rgba(237, 244, 236, 0.04), rgba(237, 244, 236, 0.016)),
    var(--panel);
  border: 1px solid rgba(237, 244, 236, 0.105);
  min-height: 280px;
  padding: clamp(22px, 2.8vw, 32px);
}

.evidence-system-grid span,
.deliverable-list span {
  color: var(--leaf-2);
  display: block;
  font-size: 12px;
  font-weight: 840;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.evidence-system-grid h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  margin-bottom: 14px;
}

.evidence-system-grid p,
.deliverable-list p {
  color: var(--muted);
  margin-bottom: 0;
}

.deliverable-preview {
  align-items: start;
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  margin-inline: auto;
  max-width: var(--max);
}

.deliverable-list {
  border-top: 1px solid rgba(158, 220, 122, 0.28);
  display: grid;
  gap: 0;
}

.deliverable-list article {
  border-bottom: 1px solid rgba(237, 244, 236, 0.11);
  padding: 22px 0;
}

.deliverable-list span {
  margin-bottom: 8px;
}

.methods-boundary {
  border-color: rgba(158, 220, 122, 0.2) !important;
}

.hero-clean-loop-visual {
  --bio-loop: 16s;
}

/* Optimum pass: make proof, pathways, and evidence outputs visible. */
.proof-artifacts,
.evidence-package,
.evidence-desk,
.industry-pathways {
  margin-inline: auto;
  max-width: var(--max);
}

.proof-artifacts {
  align-items: start;
  display: grid;
  gap: clamp(30px, 5vw, 68px);
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
}

.proof-artifacts-copy {
  position: sticky;
  top: 112px;
}

.proof-artifacts-copy p:not(.eyebrow),
.evidence-desk > div:first-child p {
  color: var(--muted);
  font-size: 18px;
  max-width: 620px;
}

.artifact-stack {
  display: grid;
  gap: 14px;
}

.artifact-card,
.package-grid article,
.pathway-grid article,
.desk-list article {
  background:
    linear-gradient(180deg, rgba(237, 244, 236, 0.045), rgba(158, 220, 122, 0.018)),
    rgba(18, 28, 22, 0.72);
  border: 1px solid rgba(237, 244, 236, 0.11);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
}

.artifact-primary {
  border-color: rgba(158, 220, 122, 0.3);
  min-height: 278px;
}

.artifact-card span,
.package-grid span,
.pathway-grid span,
.desk-list span {
  color: var(--leaf-2);
  display: block;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.artifact-card h3,
.package-grid h3,
.pathway-grid h3 {
  font-size: clamp(22px, 2vw, 30px);
  margin-bottom: 14px;
}

.artifact-card p,
.package-grid p,
.pathway-grid p,
.desk-list p {
  color: var(--muted);
  margin: 0;
}

.artifact-card dl {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}

.artifact-card dl div {
  border-top: 1px solid rgba(237, 244, 236, 0.12);
  display: grid;
  gap: 12px;
  grid-template-columns: 0.34fr 1fr;
  padding-top: 12px;
}

.artifact-card dt {
  color: var(--leaf-2);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.artifact-card dd {
  color: var(--ink);
  margin: 0;
}

.package-grid,
.pathway-grid,
.desk-list {
  display: grid;
  gap: 16px;
}

.package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pathway-grid,
.desk-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.package-schematic {
  border: 1px solid rgba(158, 220, 122, 0.22);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.package-schematic div {
  min-width: 0;
  padding: 20px;
}

.package-schematic div + div {
  border-left: 1px solid rgba(237, 244, 236, 0.1);
}

.package-schematic span {
  color: var(--quiet);
  display: block;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.package-schematic strong,
.desk-list strong {
  color: var(--ink);
  display: block;
}

.evidence-desk {
  align-items: start;
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  grid-template-columns: minmax(0, 0.75fr) minmax(340px, 1.25fr);
}

.desk-list article {
  box-shadow: none;
}

.industry-pathways {
  padding-bottom: 0;
}

@media (max-width: 940px) {
  .evidence-system-head,
  .deliverable-preview,
  .proof-artifacts,
  .evidence-desk {
    display: block;
  }

  .evidence-system-head > p:not(.eyebrow) {
    margin-top: 18px;
  }

  .evidence-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-artifacts-copy {
    position: static;
  }

  .artifact-stack,
  .desk-list {
    margin-top: 24px;
  }

  .package-grid,
  .pathway-grid,
  .package-schematic {
    grid-template-columns: 1fr;
  }

  .package-schematic div + div {
    border-left: 0;
    border-top: 1px solid rgba(237, 244, 236, 0.1);
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(36px, 9.4vw, 42px);
    line-height: 1.04;
  }

  .button-row {
    margin-top: 28px;
  }

  .evidence-system {
    padding-inline: 20px;
  }

  .evidence-system-grid {
    grid-template-columns: 1fr;
  }

  .evidence-system-grid article {
    min-height: 0;
    padding: 24px 18px;
  }

  .proof-artifacts,
  .evidence-package,
  .evidence-desk,
  .industry-pathways {
    padding-left: 20px;
    padding-right: 20px;
  }

  .artifact-card dl div {
    grid-template-columns: 1fr;
  }
}