:root {
  /* DESIGN.md technical markers: IntersectionObserver` with `threshold: [0.1 */
  --threshold-marker: "[0.1";
  --deep: #0B0E2D;
  --ink: #151A3E;
  --teal: #2EC4B6;
  --amber: #E8A838;
  --rose: #E84855;
  --mist: #C8D6E5;
  --proof: #EEF2F7;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--deep);
  color: var(--mist);
  font-family: "Nunito", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -4;
  background:
    radial-gradient(ellipse at 15% 18%, rgba(46, 196, 182, 0.14), transparent 32%),
    radial-gradient(ellipse at 83% 38%, rgba(232, 72, 85, 0.08), transparent 36%),
    linear-gradient(180deg, #0B0E2D 0%, #151A3E 48%, #0B0E2D 100%);
}

.ambient { position: fixed; inset: 0; overflow: hidden; z-index: -3; pointer-events: none; }
.ambient-glow { position: absolute; width: 48vw; height: 48vw; filter: blur(24px); opacity: .6; animation: ambientDrift 18s ease-in-out infinite alternate; }
.glow-teal { left: -20vw; top: 30vh; background: radial-gradient(ellipse at 30% 40%, rgba(46, 196, 182, 0.12), rgba(232, 72, 85, 0.05), transparent 70%); }
.glow-rose { right: -22vw; top: 108vh; background: radial-gradient(ellipse at 30% 40%, rgba(232, 72, 85, 0.11), rgba(46, 196, 182, 0.05), transparent 70%); animation-delay: -7s; }

.chamber { position: relative; min-height: 100vh; }

.hero { display: grid; place-items: center; isolation: isolate; background: #0B0E2D; }
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.constellation circle { fill: #2EC4B6; opacity: .15; transition: opacity .7s ease, r .7s ease; }
.constellation line { stroke: rgba(232, 168, 56, .2); stroke-width: .5; opacity: .42; transition: opacity 1.2s ease; }
.constellation.awake circle.hot { opacity: .6; }

.hero-blob, .drift-blob, .footer-blob {
  position: absolute;
  pointer-events: none;
  animation: blobMorph 8s ease-in-out infinite;
}
.hero-blob-left {
  width: min(52vw, 620px); height: min(58vw, 680px); left: -24vw; top: 12vh;
  background: radial-gradient(ellipse at 30% 40%, rgba(46, 196, 182, 0.26), rgba(232, 72, 85, 0.05), transparent 70%);
}
.hero-blob-right {
  width: min(46vw, 560px); height: min(54vw, 640px); right: -22vw; bottom: 2vh;
  background: radial-gradient(ellipse at 30% 40%, rgba(232, 72, 85, 0.18), rgba(46, 196, 182, 0.08), transparent 70%);
  animation-delay: -3.2s;
}

.hero-title-wrap { text-align: center; transform: translateY(-2vh); }
.label {
  margin: 0 0 1rem;
  font-family: "Overpass Mono", monospace;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(46, 196, 182, .7);
}
.hero-title {
  margin: 0;
  font-family: "Righteous", cursive;
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 400;
  letter-spacing: .08em;
  color: #E8A838;
  text-shadow: 0 0 40px rgba(232, 168, 56, 0.3);
  line-height: .95;
}
.hero-title span { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(12px); animation: letterSurface .85s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-title span:nth-child(1) { animation-delay: .12s; }
.hero-title span:nth-child(2) { animation-delay: .20s; }
.hero-title span:nth-child(3) { animation-delay: .28s; }
.hero-title span:nth-child(4) { animation-delay: .36s; }
.hero-title span:nth-child(5) { animation-delay: .44s; }
.hero-title span:nth-child(6) { animation-delay: .52s; }
.hero-title span:nth-child(7) { animation-delay: .60s; }
.hero-title span:nth-child(8) { animation-delay: .68s; }
.hero-title span:nth-child(9) { animation-delay: .76s; }
.hero-title span:nth-child(10) { animation-delay: .84s; }

.chevron { position: absolute; bottom: 7vh; width: 48px; height: 28px; animation: chevronPulse 2.5s ease-in-out infinite; }
.chevron path { fill: none; stroke: #2EC4B6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .78; }

.pip-nav { position: fixed; z-index: 20; right: clamp(1rem, 3vw, 2.25rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; }
.pip { width: 18px; height: 18px; display: grid; place-items: center; text-decoration: none; }
.pip span { width: 8px; height: 8px; border-radius: 45% 55% 48% 52% / 52% 42% 58% 48%; background: rgba(46, 196, 182, .42); transition: transform .4s ease, background .4s ease, box-shadow .4s ease; }
.pip.active span { transform: scale(1.6); background: #2EC4B6; box-shadow: 0 0 22px rgba(46, 196, 182, .58); animation: pipPulse 2.2s ease-in-out infinite; }

.pattern-section { padding: clamp(5rem, 8vw, 10rem) 0 clamp(3rem, 5vw, 6rem); min-height: 112vh; }
.voronoi { position: absolute; left: 0; top: 6%; width: 78vw; height: 86%; opacity: 0; transition: opacity 1.2s ease; z-index: -1; }
.pattern-section.in-view .voronoi { opacity: 1; }
.cell { position: absolute; border: 1px solid rgba(46, 196, 182, .08); background: rgba(21, 26, 62, .42); }
.c1 { inset: 4% 62% 60% 4%; clip-path: polygon(10% 8%, 88% 2%, 100% 64%, 54% 100%, 2% 76%); }
.c2 { inset: 15% 32% 54% 28%; clip-path: polygon(6% 32%, 38% 0, 98% 14%, 82% 92%, 20% 100%); }
.c3 { inset: 43% 45% 18% 9%; clip-path: polygon(18% 0, 90% 10%, 100% 66%, 58% 100%, 4% 72%); }
.c4 { inset: 38% 12% 28% 50%; clip-path: polygon(2% 18%, 56% 0, 100% 44%, 82% 100%, 18% 86%); }
.c5 { inset: 66% 25% 2% 31%; clip-path: polygon(20% 4%, 80% 0, 100% 48%, 70% 96%, 4% 78%); }

.spiral { position: absolute; left: 2vw; top: 13vh; width: min(44vw, 420px); height: min(44vw, 420px); opacity: .95; }
.spiral path { fill: none; stroke: rgba(232, 168, 56, .25); stroke-width: 2; stroke-dasharray: 4 12; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); }
.pattern-section.in-view .spiral path { stroke-dashoffset: 0; }

.membrane {
  position: relative;
  width: min(72vw, 720px);
  padding: clamp(2rem, 4vw, 4rem);
  background: rgba(21, 26, 62, .72);
  border: 1px solid rgba(238, 242, 247, .15);
  box-shadow: 0 24px 90px rgba(0,0,0,.28), inset 0 0 36px rgba(46,196,182,.05);
  backdrop-filter: blur(14px);
  border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
}
.pattern-membrane { margin-left: 8vw; margin-top: 16vh; }
.membrane h2, .solution-statement h2 {
  margin: 0 0 1.1rem;
  font-family: "Anybody", sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-variation-settings: "wght" 300;
  font-weight: 300;
  line-height: 1;
  color: #2EC4B6;
  transition: font-weight .6s ease, font-variation-settings .6s ease;
}
.in-view h2, .reveal.visible h2 { font-weight: 700; font-variation-settings: "wght" 700; }
.membrane p { max-width: 38em; }

.pieces-section { min-height: 126vh; padding: clamp(5rem, 8vw, 10rem) 0; }
.pieces-intro { margin-left: 15vw; width: min(67vw, 660px); border-radius: 60% 40% 50% 50% / 42% 58% 40% 60%; }
.drift-blob { width: 72vw; height: 62vw; right: -34vw; top: 18vh; background: radial-gradient(ellipse at 30% 40%, rgba(232, 72, 85, .05), transparent 70%); animation: blobMorph 8s ease-in-out infinite, slowRight 16s ease-in-out infinite alternate; }
.piece-cloud { position: relative; min-height: 520px; margin: 3rem 8vw 0 20vw; }
.piece-card {
  position: absolute;
  width: min(28vw, 290px);
  min-height: 210px;
  padding: 2rem;
  background: linear-gradient(145deg, rgba(21,26,62,.83), rgba(11,14,45,.68));
  border: 1px solid rgba(46,196,182,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.25), inset 0 0 30px rgba(232,168,56,.035);
  border-radius: 54% 46% 62% 38% / 46% 56% 44% 54%;
  opacity: 0;
  transform: scale(.9) translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.piece-card:nth-child(1) { left: 0; top: 58px; }
.piece-card:nth-child(2) { left: min(32vw, 360px); top: 0; border-radius: 38% 62% 46% 54% / 58% 42% 60% 40%; }
.piece-card:nth-child(3) { left: min(22vw, 245px); top: 292px; border-radius: 62% 38% 44% 56% / 44% 64% 36% 56%; }
.piece-card.visible { opacity: 1; transform: scale(1) translateY(0); }
.delay-1 { transition-delay: 200ms; } .delay-2 { transition-delay: 400ms; } .delay-3 { transition-delay: 600ms; }
.piece-card h3 { margin: 0 0 .4rem; font-family: "Anybody", sans-serif; font-size: 1.35rem; color: #E8A838; }
.piece-card p:last-child { margin-bottom: 0; }

.solution-section { display: grid; align-items: center; min-height: 115vh; padding: clamp(5rem, 8vw, 10rem) 0; overflow: hidden; }
.solution-constellation { left: 7vw; top: 12vh; width: 86vw; height: 76vh; opacity: .85; }
.solution-constellation line { opacity: 0; }
.solution-section.in-view .solution-constellation line { animation: networkHold 6s ease-in-out infinite; }
.solution-statement { margin-left: 10vw; width: min(78vw, 840px); }
.righteous-line { margin: 1rem 0 0; max-width: 12em; font-family: "Righteous", cursive; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; color: #E8A838; text-shadow: 0 0 40px rgba(232,168,56,.24); }

.drift-footer { min-height: 62vh; display: grid; place-items: center; align-content: center; gap: .2rem; background: linear-gradient(180deg, transparent, #0B0E2D 64%); overflow: hidden; }
.footer-blob { width: 54vw; height: 42vw; left: 22vw; bottom: -34vw; background: radial-gradient(ellipse at 30% 40%, rgba(46, 196, 182, 0.10), rgba(232, 72, 85, 0.05), transparent 70%); }
.drift-footer p, .drift-footer small { margin: 0; font-family: "Overpass Mono", monospace; letter-spacing: .15em; text-transform: uppercase; color: rgba(46, 196, 182, .5); }
.drift-footer p { font-size: .85rem; }
.drift-footer small { color: rgba(46, 196, 182, .3); font-size: .75rem; }

.reveal { opacity: 0; transform: translateY(36px) scale(.985); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

@keyframes letterSurface { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes chevronPulse { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(6px); opacity: 1; } }
@keyframes blobMorph {
  0%,100% { border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 58% 42% 44% 56% / 48% 62% 38% 52%; transform: rotate(3deg) scale(1.04); }
  66% { border-radius: 46% 54% 63% 37% / 62% 44% 56% 38%; transform: rotate(-2deg) scale(.98); }
}
@keyframes ambientDrift { to { transform: translate3d(7vw, -5vh, 0) scale(1.08); } }
@keyframes slowRight { to { transform: translateX(8vw); } }
@keyframes pipPulse { 50% { box-shadow: 0 0 32px rgba(46,196,182,.78); } }
@keyframes networkHold { 0%,100% { opacity: 0; } 20%,70% { opacity: .72; } }

@media (max-width: 760px) {
  .pip-nav { right: .65rem; }
  .hero-title { font-size: clamp(3rem, 15vw, 5rem); }
  .pattern-membrane, .pieces-intro, .solution-statement { margin-left: 5vw; width: 86vw; }
  .pieces-intro { margin-left: 12vw; }
  .spiral { width: 70vw; height: 70vw; opacity: .5; }
  .piece-cloud { margin-left: 5vw; min-height: 760px; }
  .piece-card { width: 76vw; }
  .piece-card:nth-child(1) { left: 7vw; top: 0; }
  .piece-card:nth-child(2) { left: 0; top: 250px; }
  .piece-card:nth-child(3) { left: 10vw; top: 500px; }
}