.anatomy {
  height: 290vh;
  min-height: 2000px;
  color: #f5f5ef;
  background: radial-gradient(ellipse at 51% 56%, #20394a 0%, #0f2735 43%, #071924 82%);
  position: relative;
}
.anatomy-sticky { position: sticky; top: 0; height: 100vh; min-height: 680px; overflow: hidden; }
.anatomy-stage { position: absolute; inset: 0; overflow: hidden; }
.anatomy-haze { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 82%, #9bc0cb22 0%, transparent 47%); }
.anatomy-copy { position: absolute; top: 50%; left: clamp(24px,7vw,110px); transform: translateY(-50%); z-index: 5; pointer-events: none; }
.anatomy-copy h2 { font-size: clamp(50px,5.1vw,82px); line-height: 1; letter-spacing: -.072em; font-weight: 600; margin: 0; }
.anatomy-progress { width: min(280px,70%); height: 2px; background: #61727a; margin-top: 42px; }
.anatomy-progress span { display: block; width: 0; height: 100%; background: #d2e7ee; }
.spiral-phone { position: absolute; width: 100%; height: 86%; top: 7%; left: 0; object-fit: contain; z-index: 2; pointer-events: none; will-change: opacity,transform; }
.spiral-components { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spiral-piece { position: absolute; top: 50%; left: 50%; width: auto; opacity: 0; will-change: opacity,transform; filter: drop-shadow(0 20px 18px #020d16a8); }
.piece-display { height: 390px; }
.piece-frame { height: 400px; }
.piece-board { height: 330px; }
.piece-camera { height: 160px; }
.piece-battery { height: 280px; }
.piece-shell { height: 390px; }
.spiral-concept { position: absolute; top: 50%; left: 50%; opacity: 0; z-index: 4; pointer-events: none; will-change: opacity,transform; }
.spiral-agents { width: clamp(130px,15vw,210px); }
.spiral-brain { width: clamp(120px,13vw,180px); }
.spiral-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; overflow: visible; }
.spiral-trail path { fill: none; stroke: #b5d9e4; stroke-opacity: .28; stroke-width: 1; stroke-linecap: round; }
.anatomy-caption { position: absolute; bottom: 23px; left: 20px; right: 20px; z-index: 6; text-align: center; color: #b5c6c8; font-size: 11px; line-height: 1.4; margin: 0; }
@media (max-width: 800px) {
  .anatomy { height: 240vh; min-height: 1500px; }
  .anatomy-copy { top: 15%; left: 24px; transform: none; }
  .anatomy-copy h2 { font-size: clamp(43px,7vw,65px); }
  .anatomy-progress { margin-top: 14px; width: 220px; }
  .spiral-phone { top: 21%; height: 72%; }
  .spiral-components .spiral-piece { top: 55%; }
  .spiral-concept { top: 55%; }
}
@media (max-width: 520px) {
  .anatomy-copy { top: 9%; left: 20px; }
  .anatomy-copy h2 { font-size: clamp(42px,10vw,55px); }
  .spiral-phone { top: 21%; height: 70%; }
  .piece-display { height: 250px; }
  .piece-frame { height: 250px; }
  .piece-board { height: 220px; }
  .piece-camera { height: 110px; }
  .piece-battery { height: 180px; }
  .piece-shell { height: 250px; }
  .spiral-agents { width: 110px; }
  .spiral-brain { width: 100px; }
  .anatomy-caption { bottom: 15px; font-size: 10px; }
}
@media (max-width: 360px) { .anatomy-copy h2 { font-size: 41px; } }
@media (prefers-reduced-motion: reduce) { .anatomy { height: 100vh; min-height: 740px; } }