/* ─────────────────────────────────────────
   FOR LIFE SCIENCE — page-specific styles
   ───────────────────────────────────────── */

/* ── Scroll Reveal ── */
.ls-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.ls-apps .ls-reveal:nth-child(2) { transition-delay: 0.06s; }
.ls-apps .ls-reveal:nth-child(3) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .ls-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ls-hero-line {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .ls-hero-body {
    opacity: 1;
    animation: none;
  }

  .ls-hero-image img {
    opacity: 1;
    animation: none;
    transform: rotate(180deg) scale(1);
  }

  .ls-hero-glow {
    opacity: 0.6;
    animation: none;
  }

  .ls-scroll-cue {
    opacity: 1;
    animation: none;
  }

  .ls-scroll-chevron {
    animation: none;
  }
}


/* ── Hero ── */
.ls-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--banner-h) + var(--nav-gap) + var(--nav-h));
  padding-bottom: clamp(60px, 6vw, 100px);
  overflow: hidden;
}

.ls-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gray-200);
}


/* ── Hero ambient glow ── */
.ls-hero-glow {
  position: absolute;
  top: 20%;
  right: 8%;
  width: clamp(400px, 45vw, 700px);
  height: clamp(400px, 45vw, 700px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(48, 27, 235, 0.08) 0%,
    rgba(60, 180, 200, 0.04) 40%,
    transparent 70%
  );
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: ls-glow-in 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
  will-change: transform, opacity;
}

@keyframes ls-glow-in {
  to { opacity: 1; }
}


/* ── Hero image ── */
.ls-hero-image {
  position: absolute;
  top: 2%;
  right: -10%;
  width: 72%;
  height: 96%;
  z-index: 1;
  pointer-events: none;
}

.ls-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: rotate(180deg) translate(0, 0) scale(1);
  will-change: transform;
  mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, black 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, black 55%, transparent 100%);
  opacity: 0;
  animation: ls-image-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes ls-image-in {
  from {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0) scale(1.08);
  }
  to {
    opacity: 1;
    transform: rotate(180deg) translate(0, 0) scale(1);
  }
}

/* Slow ambient breathing — organic life */
.ls-hero-image img {
  animation:
    ls-image-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards,
    ls-breathe 20s ease-in-out 2s infinite;
}

@keyframes ls-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.04); }
}


/* ── Hero text ── */
.ls-hero-text {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.5vw, 40px);
  padding: 0 clamp(32px, 4vw, 72px);
  max-width: 760px;
}

.ls-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: left;
}

.ls-hero-line {
  display: block;
  max-width: 100%;
  opacity: 0;
  transform: translateY(18px);
  animation: ls-line-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.2s + var(--li) * 0.1s);
}

@keyframes ls-line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ls-hero-body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 400;
  color: var(--gray-600);
  line-height: 1.55;
  max-width: 540px;
  opacity: 0;
  transform: translateY(18px);
  animation: ls-line-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.45s;
}

.ls-hero-asterisk {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.ls-hero-asterisk:hover {
  opacity: 0.6;
}


/* ── Scroll cue ── */
.ls-scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: clamp(20px, 2.5vw, 40px);
  left: clamp(32px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  opacity: 0;
  animation: ls-line-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.8s;
}

.ls-scroll-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.4;
}

.ls-scroll-chevron {
  color: var(--dark);
  opacity: 0.3;
  animation: ls-bounce 2s ease-in-out infinite;
}

@keyframes ls-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}


/* ── Section Labels ── */
.ls-section-label {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--blue);
  display: block;
  margin-bottom: clamp(-16px, -1.8vw, -30px);
}

.ls-section-label--pad {
  padding: 0 clamp(24px, 2.6vw, 46px);
  margin-bottom: clamp(2px, 0.3vw, 4px);
}

.ls-apps-headline {
  padding: 0 clamp(24px, 2.6vw, 46px);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: clamp(16px, 2vw, 32px);
}


/* ── The Biology section ── */
.ls-biology {
  padding: clamp(48px, 5vw, 90px) clamp(24px, 2.6vw, 46px);
}

.ls-biology .ls-section-label {
  margin-bottom: clamp(16px, 1.8vw, 28px);
}

.ls-biology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.ls-biology-headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 46px);
  font-weight: 500;
  color: var(--black);
  line-height: 1.08;
}

.ls-biology-body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 400;
  color: var(--black);
  opacity: 0.7;
  line-height: 1.5;
}


/* ── Data platform cards (OCA, OM) ── */
.ls-platform {
  padding: clamp(32px, 3vw, 48px) clamp(24px, 2.6vw, 46px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2vw, 36px);
}

.ls-card {
  border-radius: 20px;
  padding: clamp(36px, 3.5vw, 64px) clamp(32px, 3vw, 60px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 40px);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-card:hover {
  transform: translateY(-2px);
}

.ls-card--oca {
  background: var(--gray-400);
  padding-top: clamp(44px, 4.2vw, 76px);
  padding-bottom: clamp(44px, 4.2vw, 76px);
}

.ls-card--om {
  background: var(--gray-300);
}

.ls-card-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  position: relative;
}

.ls-card-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 46px);
  font-weight: 500;
  color: var(--black);
  line-height: 1.08;
}

.ls-card-desc {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 400;
  color: var(--black);
  line-height: 1.45;
}

/* Card arrow CTA — bottom-right */
.ls-card-link {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--dark);
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ls-card-link:hover {
  opacity: 0.6;
  transform: translateX(3px);
}


/* ── Stats row ── */
.ls-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
  text-align: center;
  position: relative;
}

.ls-stat {
  position: relative;
}

.ls-stat + .ls-stat::before {
  content: '';
  position: absolute;
  left: calc(clamp(-8px, -1vw, -16px));
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.ls-stat-number {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 56px);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ls-stat-label {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.85vw, 14px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--black);
  line-height: 1.3;
  margin-top: clamp(4px, 0.5vw, 8px);
  opacity: 0.6;
}


/* ── Circle modalities (OM card) ── */
.ls-circles {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  padding-top: clamp(8px, 1vw, 16px);
  position: relative;
}

.ls-circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.6vw, 10px);
  animation: ls-converge 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-play-state: paused;
  z-index: 1;
}

.in-view .ls-circle-wrap {
  animation-play-state: running;
}

.ls-circle-wrap:nth-child(1) { --cx: 48px;  --cx-peak: -24px; animation-delay: 0s;    z-index: 1; }
.ls-circle-wrap:nth-child(2) { --cx: 16px;  --cx-peak: -8px;  animation-delay: 0.06s; z-index: 2; }
.ls-circle-wrap:nth-child(3) { --cx: -16px; --cx-peak: 8px;   animation-delay: 0.06s; z-index: 2; }
.ls-circle-wrap:nth-child(4) { --cx: -48px; --cx-peak: 24px;  animation-delay: 0s;    z-index: 1; }

@keyframes ls-converge {
  0%   { transform: translateX(var(--cx)); }
  35%  { transform: translateX(var(--cx-peak)) scale(0.97); }
  50%  { transform: translateX(var(--cx-peak)) scale(0.97); }
  85%  { transform: translateX(var(--cx)); }
  100% { transform: translateX(var(--cx)); }
}

.ls-circle {
  width: clamp(80px, 12vw, 200px);
  height: clamp(80px, 12vw, 200px);
  border-radius: 50%;
  background: var(--gray-200);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.3s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  animation: ls-circle-glow 12s ease-in-out infinite;
  animation-play-state: paused;
}

.in-view .ls-circle {
  animation-play-state: running;
}

@keyframes ls-circle-glow {
  0%, 85%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  35%, 50%      { box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.04); }
}

.ls-circle-wrap:hover .ls-circle {
  border-color: rgba(255, 255, 255, 0.6);
}

.ls-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ls-circle-label {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dark);
  opacity: 0.6;
  white-space: nowrap;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  animation: ls-label-fade 12s ease-in-out infinite;
  animation-play-state: paused;
}

.in-view .ls-circle-label {
  animation-play-state: running;
}

@keyframes ls-label-fade {
  0%, 85%, 100% { opacity: 0.6; }
  35%, 50%      { opacity: 0.3; }
}

.ls-circle-wrap:hover .ls-circle-label {
  opacity: 0.8;
}

/* ── Fusion grounding text ── */
.ls-fusion-text {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--dark);
  opacity: 0.3;
  text-align: center;
  margin-top: clamp(4px, 0.5vw, 8px);
}


/* ── Application Cards ── */
.ls-apps-section {
  padding-top: clamp(24px, 2vw, 36px);
}

.ls-apps {
  padding: 0 clamp(24px, 2.6vw, 46px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1vw, 16px);
}

.ls-app-card {
  background: var(--gray-200);
  border-radius: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: clamp(20px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 20px);
  min-height: clamp(260px, 26vw, 420px);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s ease;
}

.ls-app-card:hover {
  transform: translateY(-3px);
  background: #d5d5d5;
}

.ls-app-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 38px);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.05;
}

.ls-app-desc {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.45;
  margin-top: auto;
}


/* ── Application Card Animations ── */
.feat-vis {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.5s ease;
}

.ls-app-card:hover .feat-vis {
  opacity: 1;
}

.ls-app-card .feat-vis * {
  animation-play-state: paused;
}

.ls-app-card.in-view .feat-vis * {
  animation-play-state: running;
}

/* 1 · Biomarker — expression heatmap with signature clusters */
.vis-biomarker {
  position: relative;
  width: 88%;
}

.bio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: 100%;
}

.bio-cell {
  height: clamp(8px, 1vw, 14px);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  animation: bio-cell-idle 7s ease-in-out infinite;
}

.bio-cell.hit {
  animation: bio-cell-hit 7s ease-in-out infinite;
}

@keyframes bio-cell-idle {
  0%, 100% { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.04); }
  35%, 55% { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.06); }
}

@keyframes bio-cell-hit {
  0%, 25% { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.04); }
  40%     { background: rgba(0, 0, 0, 0.28); border-color: rgba(0, 0, 0, 0.22); }
  55%     { background: rgba(0, 0, 0, 0.28); border-color: rgba(0, 0, 0, 0.22); }
  75%, 100% { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.04); }
}

.bio-tag {
  position: absolute;
  bottom: clamp(-2px, -0.2vw, -4px);
  right: 0;
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.3vw, 5px);
  padding: clamp(2px, 0.2vw, 3px) clamp(6px, 0.6vw, 9px);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 99px;
  opacity: 0;
  animation: bio-tag-in 7s ease-in-out infinite;
}

@keyframes bio-tag-in {
  0%, 50%  { opacity: 0; transform: translateY(3px); }
  60%      { opacity: 1; transform: translateY(0); }
  90%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}

.bio-tag-dot {
  width: clamp(4px, 0.4vw, 6px);
  height: clamp(4px, 0.4vw, 6px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.bio-tag-text {
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.55vw, 9px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
}


/* 2 · Trial Enrichment — multi-phase cohort stratification
   Timeline (9s): scan → classify → separate → readout → reset
   Phase 1 (0–18%):  Dots breathe in mixed state, scan line sweeps
   Phase 2 (18–32%): Classification rings bloom on each group
   Phase 3 (32–52%): Separation with overshoot, divider draws
   Phase 4 (52–75%): Labels + enrichment badge appear
   Phase 5 (80–100%): Hold → fade to reset */
.vis-stratify {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.strat-svg {
  width: 100%;
  height: auto;
  max-height: clamp(64px, 7vw, 100px);
  overflow: visible;
}

/* Scan line — horizontal sweep across dots during phase 1 */
.strat-scan {
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 0.5;
  opacity: 0;
  animation: strat-scan-sweep 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes strat-scan-sweep {
  0%   { transform: translateX(50px); opacity: 0; }
  4%   { opacity: 0.6; }
  16%  { transform: translateX(150px); opacity: 0.6; }
  20%  { transform: translateX(155px); opacity: 0; }
  21%, 100% { opacity: 0; transform: translateX(50px); }
}

/* Dot base styles */
.sd {
  fill: rgba(0, 0, 0, 0.05);
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 0.6;
  transform-origin: center;
  transform-box: fill-box;
}

/* Phase 1 breathing + Phase 3 separation with overshoot */
.sd-a {
  animation: sd-breathe-a 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.sd-b {
  animation: sd-breathe-b 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Staggered delays for organic feel */
.sd:nth-of-type(1)  { animation-delay: 0s; }
.sd:nth-of-type(2)  { animation-delay: 0.06s; }
.sd:nth-of-type(3)  { animation-delay: 0.12s; }
.sd:nth-of-type(4)  { animation-delay: 0.18s; }
.sd:nth-of-type(5)  { animation-delay: 0.09s; }
.sd:nth-of-type(6)  { animation-delay: 0.15s; }
.sd:nth-of-type(7)  { animation-delay: 0.03s; }
.sd:nth-of-type(8)  { animation-delay: 0.14s; }
.sd:nth-of-type(9)  { animation-delay: 0.20s; }
.sd:nth-of-type(10) { animation-delay: 0.08s; }
.sd:nth-of-type(11) { animation-delay: 0.22s; }
.sd:nth-of-type(12) { animation-delay: 0.11s; }

@keyframes sd-breathe-a {
  0%        { fill: rgba(0, 0, 0, 0.05); stroke: rgba(0, 0, 0, 0.08); transform: translateX(0) scale(1); }
  8%        { fill: rgba(0, 0, 0, 0.10); transform: translateX(0) scale(1.1); }
  16%       { fill: rgba(0, 0, 0, 0.05); transform: translateX(0) scale(1); }
  22%       { fill: rgba(0, 0, 0, 0.22); stroke: rgba(0, 0, 0, 0.30); transform: translateX(0) scale(1); }
  36%       { transform: translateX(-20px) scale(1); }
  42%       { transform: translateX(-15px) scale(1); }
  48%, 72%  { fill: rgba(0, 0, 0, 0.28); stroke: rgba(0, 0, 0, 0.35); transform: translateX(-17px) scale(1); }
  85%       { fill: rgba(0, 0, 0, 0.10); stroke: rgba(0, 0, 0, 0.12); transform: translateX(-5px) scale(1); }
  95%, 100% { fill: rgba(0, 0, 0, 0.05); stroke: rgba(0, 0, 0, 0.08); transform: translateX(0) scale(1); }
}

@keyframes sd-breathe-b {
  0%        { fill: rgba(0, 0, 0, 0.05); stroke: rgba(0, 0, 0, 0.08); transform: translateX(0) scale(1); }
  8%        { fill: rgba(0, 0, 0, 0.08); transform: translateX(0) scale(1.05); }
  16%       { fill: rgba(0, 0, 0, 0.05); transform: translateX(0) scale(1); }
  22%       { fill: rgba(0, 0, 0, 0.12); stroke: rgba(0, 0, 0, 0.20); transform: translateX(0) scale(1); }
  36%       { transform: translateX(20px) scale(1); }
  42%       { transform: translateX(15px) scale(1); }
  48%, 72%  { fill: rgba(0, 0, 0, 0.12); stroke: rgba(0, 0, 0, 0.22); transform: translateX(17px) scale(1); }
  85%       { fill: rgba(0, 0, 0, 0.08); stroke: rgba(0, 0, 0, 0.10); transform: translateX(5px) scale(1); }
  95%, 100% { fill: rgba(0, 0, 0, 0.05); stroke: rgba(0, 0, 0, 0.08); transform: translateX(0) scale(1); }
}

/* Classification rings — bloom during phase 2, follow dots in phase 3 */
.sd-ring {
  fill: none;
  stroke-width: 0.5;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}

.sd-ring-a {
  stroke: rgba(0, 0, 0, 0.25);
  animation: ring-bloom-a 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.sd-ring-b {
  stroke: rgba(0, 0, 0, 0.12);
  animation: ring-bloom-b 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Stagger rings slightly behind their dots */
.sd-ring:nth-of-type(1)  { animation-delay: 0.08s; }
.sd-ring:nth-of-type(2)  { animation-delay: 0.14s; }
.sd-ring:nth-of-type(3)  { animation-delay: 0.20s; }
.sd-ring:nth-of-type(4)  { animation-delay: 0.26s; }
.sd-ring:nth-of-type(5)  { animation-delay: 0.17s; }
.sd-ring:nth-of-type(6)  { animation-delay: 0.23s; }
.sd-ring:nth-of-type(7)  { animation-delay: 0.11s; }
.sd-ring:nth-of-type(8)  { animation-delay: 0.22s; }
.sd-ring:nth-of-type(9)  { animation-delay: 0.28s; }
.sd-ring:nth-of-type(10) { animation-delay: 0.16s; }
.sd-ring:nth-of-type(11) { animation-delay: 0.30s; }
.sd-ring:nth-of-type(12) { animation-delay: 0.19s; }

@keyframes ring-bloom-a {
  0%, 18%    { opacity: 0; transform: translateX(0) scale(0.5); }
  26%        { opacity: 0.7; transform: translateX(0) scale(1.4); }
  32%        { opacity: 0.5; transform: translateX(0) scale(1); }
  48%, 72%   { opacity: 0.4; transform: translateX(-17px) scale(1); }
  82%        { opacity: 0; transform: translateX(-5px) scale(1.2); }
  83%, 100%  { opacity: 0; transform: translateX(0) scale(0.5); }
}

@keyframes ring-bloom-b {
  0%, 18%    { opacity: 0; transform: translateX(0) scale(0.5); }
  26%        { opacity: 0.5; transform: translateX(0) scale(1.3); }
  32%        { opacity: 0.3; transform: translateX(0) scale(1); }
  48%, 72%   { opacity: 0.25; transform: translateX(17px) scale(1); }
  82%        { opacity: 0; transform: translateX(5px) scale(1.2); }
  83%, 100%  { opacity: 0; transform: translateX(0) scale(0.5); }
}

/* Divider line — draws in during phase 3, after dots start separating */
.strat-line {
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 0.7;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: strat-line-draw 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes strat-line-draw {
  0%, 30%   { stroke-dashoffset: 60; stroke: rgba(0, 0, 0, 0); }
  42%       { stroke-dashoffset: 0; stroke: rgba(0, 0, 0, 0.20); }
  72%       { stroke-dashoffset: 0; stroke: rgba(0, 0, 0, 0.20); }
  84%, 100% { stroke-dashoffset: 60; stroke: rgba(0, 0, 0, 0); }
}

/* Cohort labels — slide up with fade during phase 4 */
.strat-n {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.03em;
  fill: rgba(0, 0, 0, 0);
  animation: strat-n-in 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes strat-n-in {
  0%, 44%   { fill: rgba(0, 0, 0, 0); transform: translateY(3px); }
  54%       { fill: rgba(0, 0, 0, 0.4); transform: translateY(0); }
  72%       { fill: rgba(0, 0, 0, 0.4); transform: translateY(0); }
  84%, 100% { fill: rgba(0, 0, 0, 0); transform: translateY(0); }
}

.strat-n-l { text-anchor: middle; animation-delay: 0s; }
.strat-n-r { text-anchor: middle; animation-delay: 0.08s; }

/* Enrichment pill — glass readout (matches CDx pill pattern) */
.strat-pill {
  fill: rgba(0, 0, 0, 0.05);
  stroke: rgba(0, 0, 0, 0.12);
  stroke-width: 0.5;
  opacity: 0;
  animation: strat-pill-in 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.strat-pill-val {
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 500;
  fill: rgba(0, 0, 0, 0.6);
  letter-spacing: 0.01em;
  opacity: 0;
  animation: strat-pill-in 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.06s;
}

@keyframes strat-pill-in {
  0%, 56%   { opacity: 0; transform: translateY(3px); }
  64%       { opacity: 1; transform: translateY(0); }
  72%       { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(0); }
}


/* 3 · CDx — precision biomarker score gauge */
.vis-cdx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cdx-svg {
  width: 100%;
  height: auto;
  max-height: clamp(64px, 7vw, 100px);
  overflow: visible;
}

/* Scale ticks — staggered warm-up from left to right */
.cdx-ticks line {
  stroke: rgba(0, 0, 0, 0.10);
  stroke-width: 0.7;
  animation: cdx-tick-warm 7s ease-in-out infinite;
}

.cdx-ticks line:nth-child(1)  { animation-delay: 0s; }
.cdx-ticks line:nth-child(2)  { animation-delay: 0.06s; }
.cdx-ticks line:nth-child(3)  { animation-delay: 0.12s; }
.cdx-ticks line:nth-child(4)  { animation-delay: 0.18s; }
.cdx-ticks line:nth-child(5)  { animation-delay: 0.24s; }
.cdx-ticks line:nth-child(6)  { animation-delay: 0.30s; }
.cdx-ticks line:nth-child(7)  { animation-delay: 0.36s; }
.cdx-ticks line:nth-child(8)  { animation-delay: 0.42s; }
.cdx-ticks line:nth-child(9)  { animation-delay: 0.48s; }
.cdx-ticks line:nth-child(10) { animation-delay: 0.54s; }
.cdx-ticks line:nth-child(11) { animation-delay: 0.60s; }

.cdx-ticks line:nth-child(1),
.cdx-ticks line:nth-child(6),
.cdx-ticks line:nth-child(11) {
  stroke-width: 0.9;
}

@keyframes cdx-tick-warm {
  0%, 5%, 92%, 100% { stroke: rgba(0, 0, 0, 0.10); }
  25%, 78%          { stroke: rgba(0, 0, 0, 0.28); }
}

/* Track background */
.cdx-trk {
  fill: rgba(0, 0, 0, 0.06);
  stroke: rgba(0, 0, 0, 0.10);
  stroke-width: 0.6;
}

/* Fill — stroke-dasharray draw-in with gradient */
.cdx-fill {
  stroke: url(#cdx-grad);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 167;
  stroke-dashoffset: 167;
  opacity: 0;
  animation: cdx-draw 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes cdx-draw {
  0%        { stroke-dashoffset: 167; opacity: 0; }
  6%        { stroke-dashoffset: 167; opacity: 1; }
  48%       { stroke-dashoffset: 0;   opacity: 1; }
  78%       { stroke-dashoffset: 0;   opacity: 1; }
  90%       { stroke-dashoffset: 0;   opacity: 0; }
  91%, 100% { stroke-dashoffset: 167; opacity: 0; }
}

/* Threshold — dashed line + label */
.cdx-thresh {
  stroke: rgba(0, 0, 0, 0.32);
  stroke-width: 0.8;
  stroke-dasharray: 2 1.5;
  opacity: 0;
  animation: cdx-thresh-in 7s ease-in-out infinite;
}

.cdx-thresh-lbl {
  font-family: var(--font-mono);
  font-size: 5px;
  fill: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.06em;
  opacity: 0;
  animation: cdx-thresh-in 7s ease-in-out infinite;
}

@keyframes cdx-thresh-in {
  0%, 20%   { opacity: 0; }
  30%       { opacity: 1; }
  80%       { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Score dot — appears with overshoot scale */
.cdx-dot {
  fill: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: cdx-dot-in 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes cdx-dot-in {
  0%, 44%   { opacity: 0; transform: scale(0); }
  52%       { opacity: 1; transform: scale(1.5); }
  58%       { opacity: 1; transform: scale(1); }
  80%       { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0); }
}

/* Score dot pulse ring */
.cdx-ring {
  fill: none;
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 0.5;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: cdx-ring-pulse 7s ease-out infinite;
}

@keyframes cdx-ring-pulse {
  0%, 54%  { opacity: 0; transform: scale(1); }
  58%      { opacity: 0.35; transform: scale(1); }
  78%      { opacity: 0; transform: scale(3); }
  100%     { opacity: 0; transform: scale(3); }
}

/* Readout pill — glass-style entrance */
.cdx-pill {
  fill: rgba(0, 0, 0, 0.06);
  stroke: rgba(0, 0, 0, 0.14);
  stroke-width: 0.5;
  opacity: 0;
  animation: cdx-pill-in 7s ease-in-out infinite;
}

.cdx-pill-dot {
  fill: rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: cdx-pill-in 7s ease-in-out infinite;
}

.cdx-pill-val {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
  fill: rgba(0, 0, 0, 0.7);
  letter-spacing: -0.01em;
  opacity: 0;
  animation: cdx-pill-in 7s ease-in-out infinite;
}

@keyframes cdx-pill-in {
  0%, 50%   { opacity: 0; transform: translateY(2px); }
  60%       { opacity: 1; transform: translateY(0); }
  80%       { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(0); }
}


/* ── Network section ── */
.ls-network {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7vw, 130px) clamp(46px, 4.8vw, 82px);
  margin-top: clamp(24px, 2vw, 36px);
  min-height: clamp(360px, 32vw, 570px);
  background: #0a0818;
  display: flex;
  align-items: center;
  justify-content: center;
}

#network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.ls-network-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
}

.ls-network .btn {
  margin-left: 0;
}

.ls-network-headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 46px);
  font-weight: 500;
  color: #fff;
  line-height: 1.12;
  max-width: 560px;
  text-wrap: balance;
}

.ls-network-sub {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45;
  max-width: 520px;
  text-wrap: balance;
}


/* ── RESPONSIVE: 1440px+ (LARGE DESKTOP) ──────────────────── */
@media (min-width: 1440px) {
  .ls-platform {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .ls-apps-section {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .ls-hero-text {
    padding-left: clamp(72px, 5vw, 120px);
  }
}


/* ── RESPONSIVE: 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .ls-hero-image {
    width: 80%;
    right: -12%;
  }

  .ls-hero-text {
    max-width: 55%;
  }

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

  .ls-apps .ls-app-card:last-child {
    grid-column: 1 / -1;
  }

  .ls-circle {
    width: clamp(70px, 10vw, 140px);
    height: clamp(70px, 10vw, 140px);
  }
}


/* ── RESPONSIVE: 768px ──────────────────────────────────────── */
@media (max-width: 768px) {
  .ls-hero {
    min-height: auto;
  }

  .ls-hero-image {
    width: 90%;
    right: -8%;
    opacity: 0.5;
  }

  .ls-hero-glow {
    display: none;
  }

  .ls-hero-text {
    max-width: 100%;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px);
  }

  .ls-hero-line {
    width: auto !important;
  }

  .ls-scroll-cue {
    display: none;
  }

  .ls-biology-grid {
    grid-template-columns: 1fr;
    gap: clamp(12px, 2vw, 20px);
  }

  .ls-card-top {
    grid-template-columns: 1fr;
  }

  .ls-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ls-stat + .ls-stat::before {
    display: none;
  }

  .ls-apps {
    grid-template-columns: 1fr;
  }

  .ls-apps .ls-app-card:last-child {
    grid-column: auto;
  }

  .ls-app-card {
    min-height: auto;
  }

  .ls-circles {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 2vw, 16px);
  }

  .ls-circle-wrap {
    animation: none;
    transform: none;
  }

  .ls-circle {
    width: clamp(70px, 18vw, 120px);
    height: clamp(70px, 18vw, 120px);
  }

  .ls-network {
    padding: clamp(40px, 6vw, 80px) clamp(24px, 3vw, 46px);
    min-height: clamp(260px, 40vw, 400px);
  }
}


/* ── RESPONSIVE: 640px ──────────────────────────────────────── */
@media (max-width: 640px) {
  .ls-headline {
    font-size: clamp(30px, 7vw, 44px);
  }

  .ls-hero-body {
    font-size: clamp(14px, 3.2vw, 18px);
  }

  .ls-card {
    padding: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 32px);
  }

  .ls-stats {
    gap: clamp(12px, 3vw, 20px);
  }

  .ls-stat-number {
    font-size: clamp(24px, 6vw, 36px);
  }

  .ls-circle-wrap:nth-child(n+3) {
    margin-top: 8px;
  }
}


/* ── RESPONSIVE: 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
  .ls-hero {
    padding-bottom: clamp(40px, 5vw, 60px);
  }

  .ls-hero-text {
    padding: 16px;
  }

  .ls-headline {
    font-size: clamp(26px, 8vw, 38px);
  }

  .ls-hero-body {
    font-size: 14px;
    max-width: 100%;
  }

  .ls-hero-image {
    opacity: 0.35;
    width: 100%;
    right: -15%;
  }

  .ls-biology {
    padding: clamp(32px, 4vw, 48px) 12px;
  }

  .ls-platform {
    padding: 24px 12px;
  }

  .ls-apps {
    padding: 0 12px;
  }

  .ls-section-label--pad {
    padding: 0 12px;
  }

  .ls-network {
    padding: 32px 16px;
    min-height: 240px;
  }

  .ls-network-headline {
    font-size: clamp(22px, 6vw, 32px);
  }

  .ls-card-title {
    font-size: clamp(22px, 6vw, 32px);
  }

  .ls-card-desc {
    font-size: clamp(14px, 3.5vw, 18px);
  }

  .ls-circle {
    width: clamp(60px, 20vw, 90px);
    height: clamp(60px, 20vw, 90px);
  }

  .ls-app-title {
    font-size: clamp(20px, 5.5vw, 30px);
  }
}


/* ── RESPONSIVE: 360px ──────────────────────────────────────── */
@media (max-width: 360px) {
  .ls-headline {
    font-size: clamp(26px, 8vw, 36px);
  }

  .ls-stats {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .ls-stat-number {
    font-size: clamp(28px, 8vw, 36px);
  }
}