/* LiVeritas — premium scientific hero
   Direction: white canvas, one strong visual, minimal UI, no neon/futuristic clutter. */

.lv-hero {
  --ink: #10283b;
  --blue: #014e8a;
  --blue2: #2f6fc4;
  --pale: #eaf4fb;
  --line: rgba(1,78,138,.15);
  --muted: #687b87;

  position: relative;
  min-height: 100svh;
  height: max(820px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, #fff 0%, #fff 46%, #f8fbfd 100%);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}

.lv-hero-canvas,
.lv-ambient,
.lv-science-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lv-ambient {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(1,78,138,.025) 8.05%, transparent 8.1% 91.9%, rgba(1,78,138,.025) 91.95%, transparent 92%),
    linear-gradient(0deg, transparent 0 11%, rgba(1,78,138,.025) 11.05%, transparent 11.1% 88.9%, rgba(1,78,138,.025) 88.95%, transparent 89%);
  mask-image: radial-gradient(ellipse at center, black, transparent 73%);
}

.lv-science-visual {
  width: min(1060px, 86vw);
  height: min(660px, 76vh);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -47%);
  opacity: .92;
}

/* Large quiet rings establish the visual silhouette. */
.lv-visual-ring {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.lv-ring-outer {
  width: 94%;
  height: 62%;
  transform: translate(-50%, -50%) rotate(-10deg);
  border-color: rgba(1,78,138,.10);
}

.lv-ring-mid {
  width: 73%;
  height: 72%;
  transform: translate(-50%, -50%) rotate(31deg);
  border-color: rgba(1,78,138,.08);
}

.lv-ring-inner {
  width: 48%;
  height: 48%;
  border-color: rgba(1,78,138,.13);
}

.lv-spectrum {
  position: absolute;
  width: 72%;
  height: 48%;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.lv-spectrum-base,
.lv-spectrum-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lv-spectrum-base {
  stroke: rgba(1,78,138,.12);
  stroke-width: 1.4;
}

.lv-spectrum-pulse {
  stroke: url(#none);
  stroke: rgba(1,78,138,.56);
  stroke-width: 1.15;
  stroke-dasharray: 2 12;
  animation: lvTrace 9s linear infinite;
}

.lv-spectrum::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1,78,138,.10), transparent);
}

/* Minimal molecular form. */
.lv-molecule {
  position: absolute;
  width: 220px;
  height: 170px;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
}

.lv-node,
.lv-bond {
  position: absolute;
}

.lv-node {
  width: 11px;
  height: 11px;
  border: 1px solid var(--blue);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(1,78,138,.035);
  animation: lvNode 4.5s ease-in-out infinite;
}

.lv-node.n1 { left: 28px; top: 75px; }
.lv-node.n2 { left: 72px; top: 34px; animation-delay: -.8s; }
.lv-node.n3 { left: 127px; top: 55px; animation-delay: -1.6s; }
.lv-node.n4 { left: 174px; top: 28px; animation-delay: -2.4s; }
.lv-node.n5 { left: 160px; top: 108px; animation-delay: -3.2s; }

.lv-bond {
  height: 1px;
  width: 53px;
  background: rgba(1,78,138,.26);
  transform-origin: left center;
}

.lv-bond.b1 { left: 38px; top: 82px; transform: rotate(-43deg); }
.lv-bond.b2 { left: 82px; top: 41px; transform: rotate(21deg); }
.lv-bond.b3 { left: 137px; top: 62px; width: 45px; transform: rotate(-28deg); }
.lv-bond.b4 { left: 134px; top: 63px; width: 52px; transform: rotate(47deg); }
.lv-bond.b5 { left: 169px; top: 108px; width: 38px; transform: rotate(-76deg); }

.lv-data-points i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: #fff;
  opacity: .55;
  animation: lvPoint 4s ease-in-out infinite;
  animation-delay: var(--d);
}

.lv-visual-label {
  position: absolute;
  font: 500 8px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  color: rgba(1,78,138,.38);
}

.lv-label-a { left: 8%; top: 57%; }
.lv-label-b { right: 7%; top: 29%; }
.lv-label-c { left: 50%; bottom: 7%; transform: translateX(-50%); }

.lv-hero-content {
  position: relative;
  z-index: 4;
  width: min(820px, 88vw);
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 0 95px;
}

.lv-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--blue);
  font: 500 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
}

.lv-kicker span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(1,78,138,.07);
}

.lv-brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(1,78,138,.16);
  box-shadow: 0 12px 35px rgba(15,52,76,.08);
}

.lv-brand-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.lv-hero h1 {
  margin: 0;
  font: 600 clamp(52px, 6.2vw, 88px)/.94 Inter, system-ui, sans-serif;
  letter-spacing: -.055em;
  color: var(--ink);
  text-wrap: balance;
}

.lv-hero h1 em {
  color: var(--blue);
  font-style: normal;
}


@media(max-width: 900px){
  .lv-hero h1 em {
    white-space: wrap !important;
  }
}

.lv-hero p {
  margin: 25px auto 0;
  color: var(--muted);
  font-weight: 400;
  font-size: 20px;
}

.lv-actions {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.lv-actions a {
  min-height: 49px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 7px;
  text-decoration: none;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.lv-primary {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 9px 24px rgba(1,78,138,.15);
}

.lv-primary:hover {
  transform: translateY(-2px);
  background: #013f70;
}

.lv-secondary {
  color: var(--blue);
  border: 1px solid rgba(1,78,138,.24);
  background: rgba(255,255,255,.78);
}

.lv-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
}

.lv-bottom-note {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: rgba(16,40,59,.45);
  font: 500 8px/1 'IBM Plex Mono', monospace;
  letter-spacing: .13em;
}

.lv-bottom-note i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(1,78,138,.35);
}

@keyframes lvTrace {
  to { stroke-dashoffset: -140; }
}

@keyframes lvNode {
  0%, 100% { transform: scale(.9); opacity: .55; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes lvPoint {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50% { opacity: .9; transform: scale(1.15); }
}

@media (max-width: 760px) {
  .lv-hero {
    min-height: 760px;
    height: 100svh;
  }

  .lv-science-visual {
    width: 940px;
    height: 560px;
    top: 49%;
    opacity: .72;
  }

  .lv-hero-content {
    width: 92vw;
    padding: 80px 0 100px;
  }

  .lv-hero h1 {
    font-size: clamp(43px, 12vw, 62px);
  }

  .lv-hero p {
    font-size: 14px;
    line-height: 1.58;
  }

  .lv-visual-label {
    font-size: 7px;
  }

  .lv-bottom-note {
    gap: 8px;
    font-size: 6.5px;
    letter-spacing: .08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-spectrum-pulse,
  .lv-node,
  .lv-data-points i {
    animation: none;
  }
}


/* =========================================================
   VISUAL UPGRADE — more depth, still restrained
   ========================================================= */

.lv-science-visual {
  width: min(1160px, 92vw);
  height: min(720px, 82vh);
  opacity: 1;
}

.lv-ring-outer {
  width: 96%;
  height: 66%;
  border-color: rgba(1,78,138,.13);
  box-shadow: 0 0 0 1px rgba(1,78,138,.018);
}

.lv-ring-mid {
  width: 77%;
  height: 76%;
  border-color: rgba(1,78,138,.105);
}

.lv-ring-inner {
  width: 51%;
  height: 51%;
  border-color: rgba(1,78,138,.17);
  box-shadow:
    0 0 70px rgba(1,78,138,.035),
    inset 0 0 45px rgba(1,78,138,.025);
}

.lv-science-visual::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,244,251,.56), rgba(255,255,255,0) 68%);
  z-index: -1;
}

.lv-spectrum {
  width: 78%;
  height: 55%;
}

.lv-spectrum-base {
  stroke: rgba(1,78,138,.18);
  stroke-width: 1.6;
}

.lv-spectrum-pulse {
  stroke: rgba(1,78,138,.72);
  stroke-width: 1.35;
  stroke-dasharray: 2 9;
}

.lv-spectrum::after {
  opacity: .7;
}

.lv-molecule {
  width: 260px;
  height: 200px;
  transform: translate(-50%, -50%) scale(1.12);
}

.lv-node {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 6px rgba(1,78,138,.045);
}

.lv-orbit-object {
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(1,78,138,.19);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 28px rgba(12,50,77,.06);
  display: grid;
  place-items: center;
  animation: lvOrbitFloat 5s ease-in-out infinite;
}

.lv-orbit-object::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(1,78,138,.16);
  border-radius: 50%;
}

.lv-orbit-core {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(1,78,138,.06);
}

.lv-orbit-object b {
  position: absolute;
  bottom: -17px;
  font: 500 7px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  color: rgba(1,78,138,.42);
}

.lv-orbit-left { left: 5%; top: 48%; animation-delay: -.8s; }
.lv-orbit-right { right: 5%; top: 39%; animation-delay: -2.1s; }
.lv-orbit-top { left: 50%; top: 5%; transform: translateX(-50%); animation-delay: -3.2s; }

.lv-data-window {
  position: absolute;
  z-index: 4;
  min-width: 150px;
  padding: 12px 14px;
  border-left: 2px solid rgba(1,78,138,.3);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 28px rgba(12,50,77,.045);
  backdrop-filter: blur(7px);
  text-align: left;
}

.lv-data-window small {
  display: block;
  color: rgba(1,78,138,.45);
  font: 500 7px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  margin-bottom: 8px;
}

.lv-data-window span,
.lv-data-window strong {
  display: block;
  color: var(--ink);
  font: 500 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
}

.lv-data-window strong {
  font-size: 16px;
  color: var(--blue);
}

.lv-data-window i {
  display: block;
  width: 58px;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(1,78,138,.45), transparent);
}

.lv-window-left {
  left: 1%;
  top: 24%;
  transform: rotate(-2deg);
}

.lv-window-right {
  right: 1%;
  bottom: 21%;
  transform: rotate(2deg);
}

.lv-scan-line {
  position: absolute;
  z-index: 2;
  left: 13%;
  right: 13%;
  top: 51%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1,78,138,.18), transparent);
  animation: lvScan 5s ease-in-out infinite;
}

@keyframes lvOrbitFloat {
  0%,100% { margin-top: 0; }
  50% { margin-top: -8px; }
}

@keyframes lvScan {
  0%,100% { transform: scaleX(.72); opacity: .25; }
  50% { transform: scaleX(1); opacity: .8; }
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 940px;
    height: 570px;
    opacity: .78;
  }

  .lv-orbit-object {
    width: 38px;
    height: 38px;
  }

  .lv-data-window {
    min-width: 115px;
    padding: 9px 10px;
  }

  .lv-data-window span,
  .lv-data-window strong {
    font-size: 8px;
  }

  .lv-window-left { left: 8%; top: 18%; }
  .lv-window-right { right: 8%; bottom: 17%; }

  .lv-label-a { left: 13%; }
  .lv-label-b { right: 13%; }
}


/* =========================================================
   MASS-SPEC HERO VISUAL — spectrum-first, not waveform-first
   ========================================================= */

.lv-science-visual {
  width: min(1220px, 96vw);
  height: min(610px, 70vh);
  top: 54%;
  opacity: 1;
}

.lv-visual-ring {
  opacity: .55;
}

.lv-ring-outer {
  width: 96%;
  height: 58%;
  border-color: rgba(1,78,138,.07);
  transform: translate(-50%, -50%) rotate(-5deg);
}

.lv-ring-mid {
  width: 78%;
  height: 68%;
  border-color: rgba(1,78,138,.055);
  transform: translate(-50%, -50%) rotate(28deg);
}

.lv-ring-inner {
  width: 43%;
  height: 43%;
  border-color: rgba(1,78,138,.09);
}

.lv-science-visual::before {
  width: 600px;
  height: 360px;
  top: 55%;
  background: radial-gradient(ellipse, rgba(234,244,251,.42), rgba(255,255,255,0) 70%);
}

/* The spectrum is made of vertical analytical bands rather than a curved trace. */
.lv-spectrum-field {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 17%;
  height: 66%;
}

.lv-spectrum-baseline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 31%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1,78,138,.23) 8%, rgba(1,78,138,.23) 92%, transparent);
}

.lv-spectrum-baseline::before,
.lv-spectrum-baseline::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 12px;
  background: rgba(1,78,138,.20);
}

.lv-spectrum-baseline::before { left: 8%; }
.lv-spectrum-baseline::after { right: 8%; }

.lv-spectrum-group {
  position: absolute;
  bottom: 31%;
  height: 55%;
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, .7vw, 10px);
}

.lv-spectrum-group i {
  position: relative;
  display: block;
  width: clamp(2px, .22vw, 4px);
  height: var(--h);
  min-height: 5px;
  background: linear-gradient(to top, rgba(1,78,138,.18), rgba(47,111,196,.55));
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: lvBandPulse 4.8s ease-in-out infinite;
  animation-delay: var(--d);
}

.lv-spectrum-group i::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 3px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(1,78,138,.48);
}

.lv-spectrum-group i.major {
  width: clamp(3px, .3vw, 5px);
  background: linear-gradient(to top, rgba(1,78,138,.52), rgba(47,111,196,.88));
}

.lv-spectrum-left {
  left: 2%;
  width: 25%;
}

.lv-spectrum-center {
  left: 38%;
  width: 24%;
}

.lv-spectrum-right {
  right: 2%;
  width: 25%;
}

.lv-spectrum-reflection {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 8%;
  height: 19%;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  opacity: .18;
  transform: scaleY(-1);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.lv-spectrum-reflection span {
  width: 2px;
  height: 35%;
  background: var(--blue);
}

.lv-spectrum-reflection span:nth-child(2) { height: 65%; }
.lv-spectrum-reflection span:nth-child(3) { height: 90%; }
.lv-spectrum-reflection span:nth-child(4) { height: 48%; }
.lv-spectrum-reflection span:nth-child(5) { height: 70%; }

.lv-spectrum-marker {
  position: absolute;
  bottom: 38%;
  display: grid;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid rgba(1,78,138,.20);
  color: var(--blue);
  font-family: 'IBM Plex Mono', monospace;
}

.lv-spectrum-marker span {
  font-size: 7px;
  letter-spacing: .12em;
  opacity: .55;
}

.lv-spectrum-marker b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
}

.lv-marker-left { left: 14%; }
.lv-marker-right { right: 14%; }

.lv-spectrum-caption {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font: 500 7px/1 'IBM Plex Mono', monospace;
  letter-spacing: .15em;
  color: rgba(1,78,138,.40);
}

.lv-spectrum-caption i {
  width: 34px;
  height: 1px;
  background: rgba(1,78,138,.18);
}

.lv-spectrum-caption strong {
  color: rgba(1,78,138,.55);
  font-weight: 500;
}

.lv-moving-band {
  position: absolute;
  top: 6%;
  width: 1px;
  height: 72%;
  background: linear-gradient(to bottom, transparent, rgba(1,78,138,.38), transparent);
  opacity: 0;
  animation: lvMovingBand 7s linear infinite;
}

.band-one { animation-delay: -1.5s; }
.band-two { animation-delay: -4.8s; }

@keyframes lvBandPulse {
  0%, 100% { transform: scaleY(.94); opacity: .72; }
  50% { transform: scaleY(1.04); opacity: 1; }
}

@keyframes lvMovingBand {
  0% { left: 6%; opacity: 0; }
  12% { opacity: .45; }
  85% { opacity: .45; }
  100% { left: 88%; opacity: 0; }
}

/* Hide the old molecular construction completely. */
.lv-molecule,
.lv-data-points,
.lv-spectrum {
  display: none;
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 980px;
    height: 520px;
    top: 55%;
    opacity: .72;
  }

  .lv-spectrum-group {
    gap: 5px;
  }

  .lv-spectrum-marker {
    bottom: 40%;
  }

  .lv-marker-left { left: 18%; }
  .lv-marker-right { right: 18%; }

  .lv-spectrum-caption {
    font-size: 6px;
  }
}


/* =========================================================
   SIDE SPECTRA — the data surrounds the message
   ========================================================= */

.lv-science-visual {
  top: 64%;
  height: min(480px, 52vh);
  width: min(1180px, 94vw);
  opacity: .36;
  z-index: 1;
}

.lv-science-visual::before {
  width: 700px;
  height: 260px;
  top: 50%;
  opacity: .45;
}

.lv-spectrum-field {
  top: 10%;
  height: 80%;
}

.lv-spectrum-group,
.lv-spectrum-baseline,
.lv-spectrum-reflection,
.lv-spectrum-marker,
.lv-spectrum-caption,
.lv-moving-band {
  opacity: .48;
}

.lv-hero-content {
  z-index: 8;
  padding-top: 62px;
}

.lv-hero h1,
.lv-hero p,
.lv-actions,
.lv-kicker,
.lv-brand-mark {
  position: relative;
  z-index: 10;
}

/* Dedicated spectrum clusters live outside the copy, like the reference. */
.lv-side-spectrum {
  position: absolute;
  z-index: 5;
  top: 48%;
  width: 245px;
  height: 250px;
  pointer-events: none;
}

.lv-side-spectrum-left {
  left: max(28px, calc(50% - 680px));
}

.lv-side-spectrum-right {
  right: max(28px, calc(50% - 680px));
}

.lv-side-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17%;
  height: 1px;
  background: linear-gradient(90deg, rgba(1,78,138,.18), rgba(1,78,138,.08));
}

.lv-side-axis::before {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 1px;
  height: 8px;
  background: rgba(1,78,138,.16);
}

.lv-side-peaks {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 17%;
  height: 72%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  gap: 8px;
}

.lv-side-peaks i {
  width: 3px;
  height: var(--h);
  min-height: 5px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, rgba(1,78,138,.28), rgba(47,111,196,.72));
  transform-origin: bottom;
  animation: lvSidePeak 4.5s ease-in-out infinite;
}

.lv-side-peaks i:nth-child(2n) { animation-delay: -.8s; }
.lv-side-peaks i:nth-child(3n) { animation-delay: -1.7s; }

.lv-side-peaks i.major {
  width: 4px;
  background: linear-gradient(to top, rgba(1,78,138,.55), rgba(47,111,196,.9));
}

.lv-side-mz {
  position: absolute;
  left: 5%;
  bottom: 0;
  font: 500 8px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: rgba(1,78,138,.45);
}

.lv-side-spectrum-right .lv-side-mz {
  left: auto;
  right: 5%;
}

@keyframes lvSidePeak {
  0%,100% { transform: scaleY(.96); opacity: .7; }
  50% { transform: scaleY(1.04); opacity: 1; }
}

@media (max-width: 1100px) {
  .lv-side-spectrum {
    width: 190px;
    opacity: .7;
  }
  .lv-side-spectrum-left { left: 2%; }
  .lv-side-spectrum-right { right: 2%; }
}

@media (max-width: 760px) {
  .lv-side-spectrum {
    width: 125px;
    height: 190px;
    top: 53%;
    opacity: .5;
  }

  .lv-side-spectrum-left { left: -4px; }
  .lv-side-spectrum-right { right: -4px; }

  .lv-science-visual {
    top: 67%;
    width: 920px;
    opacity: .25;
  }

  .lv-side-peaks {
    gap: 4px;
  }

  .lv-side-mz {
    font-size: 6px;
  }
}


/* =========================================================
   FINAL COMPOSITION — spectrum surrounds the copy
   ========================================================= */

.lv-science-visual {
  top: auto;
  bottom: -5%;
  left: 50%;
  width: min(1120px, 92vw);
  height: 390px;
  transform: translateX(-50%);
  opacity: .62;
  z-index: 2;
}

.lv-science-visual::before {
  width: 780px;
  height: 220px;
  top: 54%;
}

.lv-spectrum-field {
  top: 8%;
  height: 92%;
}

.lv-spectrum-group,
.lv-spectrum-baseline,
.lv-spectrum-reflection,
.lv-spectrum-marker,
.lv-spectrum-caption,
.lv-moving-band {
  opacity: .9;
}

/* Keep the middle under the CTA mostly quiet. */
.lv-spectrum-left {
  left: -2%;
  width: 31%;
}

.lv-spectrum-center {
  left: 35%;
  width: 30%;
  opacity: .38;
}

.lv-spectrum-right {
  right: -2%;
  width: 31%;
}

.lv-marker-left { left: 11%; }
.lv-marker-right { right: 11%; }

/* Stronger isolated peaks frame the composition. */
.lv-spectrum-left i.major,
.lv-spectrum-right i.major {
  width: 5px;
}

.lv-spectrum-caption {
  bottom: 0;
}

/* Dedicated side framing peaks, visually similar to the reference image. */
.lv-side-spectrum {
  top: 43%;
  width: 220px;
  height: 300px;
  opacity: .82;
}

.lv-side-spectrum-left {
  left: max(18px, calc(50% - 690px));
}

.lv-side-spectrum-right {
  right: max(18px, calc(50% - 690px));
}

.lv-side-spectrum-left .lv-side-peaks i,
.lv-side-spectrum-right .lv-side-peaks i {
  background: linear-gradient(to top, rgba(1,78,138,.24), rgba(47,111,196,.66));
}

.lv-side-spectrum-left .lv-side-peaks i.major,
.lv-side-spectrum-right .lv-side-peaks i.major {
  background: linear-gradient(to top, rgba(1,78,138,.52), rgba(47,111,196,.92));
}

.lv-side-spectrum::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(255,255,255,.88) 100%);
  pointer-events: none;
}

.lv-hero-content {
  padding-top: 44px;
  padding-bottom: 150px;
}

/* The central copy must always sit above the data field. */
.lv-hero-content > * {
  position: relative;
  z-index: 12;
}

.lv-hero h1 {
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

@media (max-width: 1100px) {
  .lv-side-spectrum {
    width: 170px;
    height: 260px;
  }

  .lv-side-spectrum-left { left: 0; }
  .lv-side-spectrum-right { right: 0; }
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 920px;
    height: 310px;
    bottom: -1%;
    opacity: .5;
  }

  .lv-side-spectrum {
    width: 110px;
    height: 190px;
    top: 50%;
    opacity: .55;
  }

  .lv-side-spectrum-left { left: -12px; }
  .lv-side-spectrum-right { right: -12px; }

  .lv-hero-content {
    padding-bottom: 120px;
  }
}


/* =========================================================
   FINAL SPECTRUM — one wide mass-spec field at the bottom
   ========================================================= */

.lv-science-visual {
  top: auto;
  bottom: -2px;
  left: 50%;
  width: min(1320px, 100vw);
  height: 310px;
  transform: translateX(-50%);
  opacity: .72;
  z-index: 2;
}

.lv-science-visual::before {
  width: 900px;
  height: 180px;
  top: 65%;
  opacity: .55;
}

.lv-visual-ring {
  display: none;
}

.lv-spectrum-field {
  position: absolute;
  inset: 0;
  top: 0;
  height: 100%;
}

.lv-spectrum-baseline {
  left: 2%;
  right: 2%;
  bottom: 25%;
  background: linear-gradient(90deg, transparent, rgba(1,78,138,.22) 8%, rgba(1,78,138,.22) 92%, transparent);
}

.lv-spectrum-group {
  bottom: 25%;
  height: 64%;
}

.lv-spectrum-left {
  left: 2%;
  width: 32%;
}

.lv-spectrum-center {
  left: 34%;
  width: 32%;
  opacity: .8;
}

.lv-spectrum-right {
  right: 2%;
  width: 32%;
}

.lv-spectrum-group i {
  background: linear-gradient(to top, rgba(1,78,138,.17), rgba(47,111,196,.58));
  box-shadow: 0 0 12px rgba(47,111,196,.08);
}

.lv-spectrum-group i.major {
  background: linear-gradient(to top, rgba(1,78,138,.50), rgba(47,111,196,.92));
  box-shadow: 0 0 18px rgba(47,111,196,.13);
}

.lv-spectrum-reflection {
  bottom: 2%;
  height: 25%;
  opacity: .22;
}

.lv-spectrum-marker {
  bottom: 34%;
  z-index: 3;
}

.lv-marker-left { left: 12%; }
.lv-marker-right { right: 12%; }

.lv-spectrum-caption {
  bottom: 0;
  color: rgba(1,78,138,.44);
}

/* Reference-style annotation floats above the spectrum, not in the copy. */
.lv-spectrum-callout {
  position: absolute;
  z-index: 6;
  top: 58%;
  display: grid;
  gap: 7px;
  min-width: 165px;
  padding-left: 12px;
  border-left: 1px solid rgba(1,78,138,.24);
  color: rgba(1,78,138,.55);
  font-family: 'IBM Plex Mono', monospace;
  pointer-events: none;
}

.lv-spectrum-callout span,
.lv-spectrum-callout strong {
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: .16em;
  font-weight: 500;
}

.lv-spectrum-callout strong {
  color: rgba(1,78,138,.72);
}

.lv-spectrum-callout i {
  width: 25px;
  height: 1px;
  margin-top: 3px;
  background: var(--blue);
}

.lv-spectrum-callout-left {
  left: max(24px, calc(50% - 650px));
}

.lv-spectrum-callout-right {
  right: max(24px, calc(50% - 650px));
}

.lv-spectrum-callout-right {
  text-align: left;
}

.lv-hero-content {
  padding-bottom: 170px;
}

.lv-bottom-note {
  bottom: 17px;
}

@media (max-width: 1000px) {
  .lv-spectrum-callout {
    min-width: 130px;
  }

  .lv-spectrum-callout-left { left: 20px; }
  .lv-spectrum-callout-right { right: 20px; }
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 1000px;
    height: 260px;
    bottom: 5px;
    opacity: .55;
  }

  .lv-spectrum-callout {
    top: 61%;
    min-width: 105px;
  }

  .lv-spectrum-callout span,
  .lv-spectrum-callout strong {
    font-size: 6px;
  }

  .lv-spectrum-callout-left { left: 10px; }
  .lv-spectrum-callout-right { right: 10px; }

  .lv-hero-content {
    padding-bottom: 125px;
  }
}


/* =========================================================
   REFERENCE MATCH — dense atmospheric spectrum at the floor
   ========================================================= */

.lv-science-visual {
  bottom: -8px;
  width: min(1380px, 100vw);
  height: 365px;
  opacity: 1;
}

.lv-science-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 1120px;
  height: 230px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center bottom, rgba(1,78,138,.10), transparent 66%),
    linear-gradient(to top, rgba(234,244,251,.28), transparent 55%);
  filter: blur(2px);
  z-index: -1;
}

.lv-spectrum-field {
  overflow: visible;
}

/* Soft, pale background peaks create the gray/blue atmospheric mass in the reference. */
.lv-spectrum-haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 73%;
  z-index: 1;
}

.lv-spectrum-haze i {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--w);
  height: var(--h);
  opacity: var(--o);
  background: linear-gradient(to top, rgba(47,111,196,.20), rgba(127,166,218,.07));
  filter: blur(3px);
  border-radius: 5px 5px 0 0;
}

.lv-spectrum-haze i:nth-child(3n) {
  filter: blur(5px);
  opacity: calc(var(--o) * .75);
}

/* Fine analytical peaks across the entire baseline. */
.lv-spectrum-dense {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 24%;
  height: 66%;
  z-index: 3;
}

.lv-spectrum-dense i {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: 1.5px;
  height: var(--h);
  background: linear-gradient(to top, rgba(1,78,138,.36), rgba(47,111,196,.72));
  transform-origin: bottom;
  animation: lvDensePeak 6s ease-in-out infinite;
  animation-delay: var(--d);
}

.lv-spectrum-dense i:nth-child(7n) {
  width: 2px;
  background: linear-gradient(to top, rgba(1,78,138,.52), rgba(47,111,196,.86));
}

.lv-spectrum-group {
  z-index: 4;
}

.lv-spectrum-group i {
  width: 3px;
  box-shadow: 0 0 10px rgba(47,111,196,.10);
}

.lv-spectrum-group i.major {
  width: 5px;
  box-shadow: 0 0 16px rgba(47,111,196,.16);
}

/* A soft horizon/reflection makes the graph feel physically grounded. */
.lv-spectrum-reflection {
  z-index: 2;
  left: 2%;
  right: 2%;
  bottom: 2%;
  height: 24%;
  opacity: .18;
  filter: blur(.4px);
}

.lv-spectrum-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 23%;
  height: 1px;
  background: rgba(1,78,138,.16);
  z-index: 6;
}

.lv-spectrum-marker {
  z-index: 7;
}

.lv-spectrum-callout {
  z-index: 9;
  top: auto;
  bottom: 31%;
}

.lv-spectrum-callout-left {
  left: max(30px, calc(50% - 650px));
}

.lv-spectrum-callout-right {
  right: max(30px, calc(50% - 650px));
}

@keyframes lvDensePeak {
  0%,100% { opacity: .72; transform: scaleY(.97); }
  50% { opacity: 1; transform: scaleY(1.025); }
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 1100px;
    height: 300px;
    bottom: -4px;
    opacity: .7;
  }

  .lv-spectrum-callout {
    bottom: 33%;
  }

  .lv-spectrum-callout-left { left: 18px; }
  .lv-spectrum-callout-right { right: 18px; }
}


/* =========================================================
   HERO FLOOR — spectrum occupies the full lower composition
   ========================================================= */

.lv-science-visual {
  bottom: -18px;
  width: min(1500px, 100vw);
  height: 470px;
  opacity: 1;
  z-index: 2;
}

.lv-science-visual::before {
  width: 1250px;
  height: 320px;
  top: 62%;
  background:
    radial-gradient(ellipse at center bottom, rgba(1,78,138,.13), transparent 65%),
    linear-gradient(to top, rgba(234,244,251,.38), transparent 62%);
  filter: blur(3px);
}

/* Make the spectrum feel like a broad analytical landscape, not a thin footer. */
.lv-spectrum-field {
  height: 100%;
  top: 0;
}

.lv-spectrum-haze {
  bottom: 18%;
  height: 78%;
  opacity: 1;
}

.lv-spectrum-haze i {
  opacity: calc(var(--o) * 1.15);
  filter: blur(4px);
}

.lv-spectrum-dense {
  bottom: 18%;
  height: 76%;
}

.lv-spectrum-dense i {
  width: 2px;
  background: linear-gradient(to top, rgba(1,78,138,.30), rgba(47,111,196,.68));
}

.lv-spectrum-group {
  bottom: 18%;
  height: 72%;
}

.lv-spectrum-group i {
  width: 4px;
  background: linear-gradient(to top, rgba(1,78,138,.20), rgba(47,111,196,.66));
}

.lv-spectrum-group i.major {
  width: 6px;
  background: linear-gradient(to top, rgba(1,78,138,.56), rgba(47,111,196,.94));
}

/* Softer floor reflection fills the lower part of the screen. */
.lv-spectrum-reflection {
  bottom: -2%;
  height: 29%;
  opacity: .28;
  filter: blur(.7px);
}

.lv-spectrum-field::after {
  bottom: 17.8%;
  background: rgba(1,78,138,.20);
}

/* Analytical annotations sit on the graph itself, like a scientific figure. */
.lv-graph-label {
  position: absolute;
  z-index: 10;
  bottom: 49%;
  display: grid;
  gap: 5px;
  padding-left: 11px;
  border-left: 1px solid rgba(1,78,138,.30);
  font-family: 'IBM Plex Mono', monospace;
  pointer-events: none;
}

.lv-graph-label::after {
  content: "";
  position: absolute;
  left: 11px;
  top: calc(100% + 7px);
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(1,78,138,.24), transparent);
}

.lv-graph-label span {
  font-size: 7px;
  line-height: 1;
  letter-spacing: .14em;
  color: rgba(1,78,138,.48);
}

.lv-graph-label strong {
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--blue);
}

.lv-graph-label small {
  font-size: 6px;
  line-height: 1;
  letter-spacing: .12em;
  color: rgba(1,78,138,.40);
}

.lv-graph-label-a { left: 16%; }
.lv-graph-label-b { left: 47%; bottom: 54%; }
.lv-graph-label-c { right: 15%; }

.lv-graph-axis {
  position: absolute;
  z-index: 10;
  left: 9%;
  right: 9%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 13px;
  font: 500 7px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  color: rgba(1,78,138,.40);
}

.lv-graph-axis i {
  flex: 1;
  height: 1px;
  background: rgba(1,78,138,.14);
}

.lv-graph-axis b {
  font-weight: 500;
  color: rgba(1,78,138,.54);
}

/* Hide the older callouts so the graph itself carries the text. */
.lv-spectrum-callout {
  display: none;
}

.lv-spectrum-marker {
  opacity: .78;
}

.lv-hero-content {
  padding-bottom: 220px;
}

.lv-bottom-note {
  bottom: 16px;
}

@media (max-width: 900px) {
  .lv-science-visual {
    height: 400px;
  }

  .lv-graph-label-a { left: 9%; }
  .lv-graph-label-b { left: 45%; }
  .lv-graph-label-c { right: 9%; }
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 1120px;
    height: 330px;
    bottom: -5px;
    opacity: .72;
  }

  .lv-hero-content {
    padding-bottom: 155px;
  }

  .lv-graph-label {
    bottom: 48%;
  }

  .lv-graph-label span,
  .lv-graph-label small {
    font-size: 5px;
  }

  .lv-graph-label strong {
    font-size: 9px;
  }

  .lv-graph-axis {
    font-size: 5px;
    left: 7%;
    right: 7%;
  }
}


/* =========================================================
   SUBTLE OVERLAP + MOTION
   Let the spectrum gently enter the lower edge of the copy.
   ========================================================= */

.lv-science-visual {
  bottom: 24px;
  height: 500px;
  opacity: .94;
  pointer-events: none;
}

/* The tallest peaks can softly overlap the lower text area,
   while remaining behind the copy. */
.lv-spectrum-field {
  top: -18px;
}

.lv-spectrum-haze {
  bottom: 18%;
  height: 88%;
  opacity: .82;
}

.lv-spectrum-dense {
  bottom: 18%;
  height: 84%;
}

.lv-spectrum-group {
  bottom: 18%;
  height: 80%;
}

.lv-spectrum-group i,
.lv-spectrum-dense i {
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
}

/* A very soft moving analytical scan — not a flashy neon effect. */
.lv-spectrum-scan {
  position: absolute;
  z-index: 8;
  top: 1%;
  bottom: 19%;
  left: 8%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(47,111,196,.05) 18%,
    rgba(47,111,196,.24) 50%,
    rgba(47,111,196,.05) 82%,
    transparent 100%
  );
  opacity: 0;
  animation: lvSpectrumScan 9s cubic-bezier(.4,0,.2,1) infinite;
}

.lv-spectrum-scan::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 47%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(1,78,138,.35);
  box-shadow: 0 0 0 5px rgba(1,78,138,.035);
}

@keyframes lvSpectrumScan {
  0% {
    left: 8%;
    opacity: 0;
  }
  8% {
    opacity: .5;
  }
  50% {
    opacity: .34;
  }
  92% {
    opacity: .5;
  }
  100% {
    left: 91%;
    opacity: 0;
  }
}

/* Keep the hero copy visually dominant over the spectrum. */
.lv-hero-content {
  position: relative;
  z-index: 20;
}

.lv-hero h1,
.lv-hero p,
.lv-actions,
.lv-kicker {
  position: relative;
  z-index: 21;
}

/* Let only the lower edge of the descriptive copy meet the data field. */
.lv-hero p {
  margin-bottom: 22px;
}

.lv-spectrum-marker {
  animation: lvMarkerFloat 6s ease-in-out infinite;
}

.lv-spectrum-marker:nth-of-type(2) {
  animation-delay: -2.5s;
}

@keyframes lvMarkerFloat {
  0%,100% {
    transform: translateY(0);
    opacity: .70;
  }
  50% {
    transform: translateY(-4px);
    opacity: .9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-spectrum-scan,
  .lv-spectrum-marker,
  .lv-spectrum-group i,
  .lv-spectrum-dense i {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .lv-science-visual {
    bottom: 4px;
    height: 360px;
    opacity: .72;
  }

  .lv-spectrum-field {
    top: -8px;
  }
}


/* =========================================================
   FULL-WIDTH SPECTRUM + VISIBLE MOTION
   ========================================================= */

.lv-science-visual {
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none;
  transform: none;
  bottom: -8px;
  height: 500px;
  opacity: 1;
}

.lv-spectrum-field {
  left: 0;
  right: 0;
  width: 100%;
}

.lv-spectrum-haze {
  left: 0;
  right: 0;
}

.lv-spectrum-dense {
  left: 0;
  right: 0;
}

.lv-spectrum-group.lv-spectrum-left {
  left: 0;
  width: 34%;
}

.lv-spectrum-group.lv-spectrum-center {
  left: 33%;
  width: 34%;
}

.lv-spectrum-group.lv-spectrum-right {
  right: 0;
  width: 34%;
}

/* Let a few taller peaks rise into the lower edge of the copy. */
.lv-spectrum-dense,
.lv-spectrum-group {
  bottom: 15%;
}

.lv-spectrum-dense {
  height: 92%;
}

.lv-spectrum-group {
  height: 86%;
}

/* Strong, continuous scan that is actually visible. */
.lv-spectrum-scan {
  top: -5%;
  bottom: 15%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(47,111,196,.12) 12%,
    rgba(47,111,196,.62) 48%,
    rgba(47,111,196,.12) 86%,
    transparent 100%
  );
  box-shadow: 0 0 18px rgba(47,111,196,.16);
  opacity: 0;
  animation: lvSpectrumScanVisible 5s linear infinite;
}

.lv-spectrum-scan::after {
  width: 7px;
  height: 7px;
  left: -2.5px;
  top: 48%;
  background: var(--blue2);
  box-shadow:
    0 0 0 5px rgba(47,111,196,.08),
    0 0 14px rgba(47,111,196,.28);
}

@keyframes lvSpectrumScanVisible {
  0% {
    left: 0%;
    opacity: 0;
  }
  7% {
    opacity: .9;
  }
  45% {
    opacity: .7;
  }
  50% {
    opacity: .95;
  }
  93% {
    opacity: .8;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Make the data visibly alive. */
.lv-spectrum-dense i {
  animation: lvDensePeakVisible 2.8s ease-in-out infinite;
}

.lv-spectrum-group i {
  animation: lvBandPulseVisible 3.2s ease-in-out infinite;
}

.lv-spectrum-group i:nth-child(2n) {
  animation-delay: -.8s;
}

.lv-spectrum-group i:nth-child(3n) {
  animation-delay: -1.6s;
}

.lv-spectrum-group i:nth-child(5n) {
  animation-delay: -2.3s;
}

@keyframes lvDensePeakVisible {
  0%, 100% {
    opacity: .45;
    transform: scaleY(.82);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.12);
  }
}

@keyframes lvBandPulseVisible {
  0%, 100% {
    opacity: .58;
    transform: scaleY(.88);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.16);
  }
}

/* Keep labels attached to the graph, with no side padding. */
.lv-spectrum-marker {
  animation: lvMarkerLive 3.5s ease-in-out infinite;
}

@keyframes lvMarkerLive {
  0%,100% { transform: translateY(0); opacity: .62; }
  50% { transform: translateY(-5px); opacity: 1; }
}

@media (max-width: 760px) {
  .lv-science-visual {
    width: 100vw;
    height: 350px;
    bottom: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-spectrum-scan,
  .lv-spectrum-dense i,
  .lv-spectrum-group i,
  .lv-spectrum-marker {
    animation: none !important;
  }
}


/* =========================================================
   LIVE ANALYSIS — subtle but unmistakably animated
   ========================================================= */

/* A visible data-processing sweep travels RIGHT → LEFT.
   It sits behind the peaks and never crosses the headline. */
.lv-live-signal {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 2%;
  width: 150px;
  height: 72%;
  pointer-events: none;
  opacity: 0;
  animation: lvLiveSweep 6s cubic-bezier(.55,0,.25,1) infinite;
}

.lv-live-signal::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(47,111,196,.10) 15%,
    rgba(47,111,196,.82) 48%,
    rgba(47,111,196,.12) 84%,
    transparent
  );
  box-shadow:
    0 0 10px rgba(47,111,196,.24),
    0 0 28px rgba(47,111,196,.10);
}

.lv-live-signal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 9px;
  height: 9px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #2f6fc4;
  box-shadow:
    0 0 0 6px rgba(47,111,196,.08),
    0 0 20px rgba(47,111,196,.38);
}

.lv-live-signal span {
  position: absolute;
  left: 50%;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(47,111,196,.48);
  opacity: .8;
}

.lv-live-signal span:nth-child(1) {
  top: 32%;
  width: 54px;
}

.lv-live-signal span:nth-child(2) {
  top: 43%;
  width: 92px;
}

.lv-live-signal span:nth-child(3) {
  top: 57%;
  width: 66px;
}

.lv-live-signal span:nth-child(4) {
  top: 68%;
  width: 42px;
}

.lv-live-signal b {
  position: absolute;
  top: calc(50% + 15px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 7px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  color: rgba(1,78,138,.62);
}

/* Right → left, like data being actively processed through the field. */
@keyframes lvLiveSweep {
  0% {
    left: 100%;
    opacity: 0;
  }
  8% {
    opacity: .82;
  }
  20% {
    opacity: .72;
  }
  55% {
    opacity: .72;
  }
  88% {
    opacity: .82;
  }
  100% {
    left: -12%;
    opacity: 0;
  }
}

/* Existing peaks react a little more while the analysis is "live". */
.lv-spectrum-group i,
.lv-spectrum-dense i {
  animation-duration: 3.8s;
}

.lv-spectrum-group i.major {
  animation-name: lvPeakLive;
}

@keyframes lvPeakLive {
  0%, 100% {
    transform: scaleY(.90);
    opacity: .62;
  }
  45% {
    transform: scaleY(1);
    opacity: .76;
  }
  58% {
    transform: scaleY(1.18);
    opacity: 1;
  }
  72% {
    transform: scaleY(.98);
    opacity: .82;
  }
}

/* Small moving light on the baseline makes the process readable even
   if the taller peaks are visually subtle. */
.lv-spectrum-baseline::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 100%;
  width: 24px;
  height: 5px;
  border-radius: 50%;
  background: rgba(47,111,196,.35);
  filter: blur(2px);
  animation: lvBaselineLight 6s linear infinite;
}

@keyframes lvBaselineLight {
  0% { left: 100%; opacity: 0; }
  8% { opacity: .7; }
  50% { opacity: .5; }
  92% { opacity: .7; }
  100% { left: -3%; opacity: 0; }
}

@media (max-width: 760px) {
  .lv-live-signal {
    height: 68%;
    width: 110px;
  }

  .lv-live-signal b {
    font-size: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-live-signal,
  .lv-spectrum-group i.major,
  .lv-spectrum-baseline::after {
    animation: none !important;
  }
}


/* =========================================================
   FINAL POSITIONING — keep the spectrum firmly at the
   bottom edge of the viewport
   ========================================================= */

.lv-science-visual {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 245px;
  max-width: none;
  transform: none;
  opacity: 1;
  z-index: 2;
}

/* The visual fades upward so the center of the hero stays white. */
.lv-science-visual::before {
  width: 100%;
  height: 180px;
  top: 20%;
  background:
    linear-gradient(
      to top,
      rgba(234,244,251,.30) 0%,
      rgba(234,244,251,.12) 42%,
      rgba(255,255,255,0) 100%
    );
  filter: blur(2px);
}

/* Keep all peak activity inside this bottom strip. */
.lv-spectrum-field {
  top: 0;
  height: 100%;
  overflow: hidden;
}

.lv-spectrum-haze {
  bottom: 12%;
  height: 72%;
}

.lv-spectrum-dense {
  bottom: 12%;
  height: 68%;
}

.lv-spectrum-group {
  bottom: 12%;
  height: 64%;
}

/* Make the lower spectrum feel richer without pushing it upward. */
.lv-spectrum-haze i {
  filter: blur(4px);
}

.lv-spectrum-dense i {
  height: min(var(--h), 55%);
}

.lv-spectrum-group i {
  max-height: 70%;
}

.lv-spectrum-baseline {
  bottom: 12%;
}

.lv-spectrum-field::after {
  bottom: 12%;
}

.lv-spectrum-reflection {
  bottom: -1%;
  height: 20%;
}

/* Labels sit directly on/above the bottom graph. */
.lv-graph-label {
  bottom: 42%;
}

.lv-graph-label-a { left: 15%; }
.lv-graph-label-b { left: 47%; bottom: 46%; }
.lv-graph-label-c { right: 14%; }

.lv-spectrum-marker {
  bottom: 37%;
}

.lv-spectrum-callout {
  bottom: 39%;
}

/* Don't reserve a huge amount of vertical space for the graph. */
.lv-hero-content {
  padding-bottom: 90px;
}

.lv-bottom-note {
  bottom: 10px;
}

@media (max-width: 760px) {
  .lv-science-visual {
    height: 190px;
    bottom: 0;
  }

  .lv-hero-content {
    padding-bottom: 75px;
  }

  .lv-graph-label {
    bottom: 38%;
  }

  .lv-spectrum-marker {
    bottom: 34%;
  }
}


/* =========================================================
   TALL + LIVING MASS-SPEC FIELD
   ========================================================= */

.lv-science-visual {
  bottom: -10px;
  height: 390px;
  width: 100vw;
  opacity: 1;
}

/* Let the tallest peaks rise toward the lower edge of the copy. */
.lv-spectrum-field {
  top: -35px;
  height: calc(100% + 35px);
}

.lv-spectrum-haze {
  bottom: 12%;
  height: 92%;
}

.lv-spectrum-dense {
  bottom: 12%;
  height: 88%;
}

.lv-spectrum-group {
  bottom: 12%;
  height: 82%;
}

/* More pronounced vertical motion, staggered across the spectrum. */
.lv-spectrum-dense i {
  animation: lvPeakProcess 2.4s ease-in-out infinite;
}

.lv-spectrum-group i {
  animation: lvPeakProcess 3s ease-in-out infinite;
}

.lv-spectrum-group i:nth-child(1),
.lv-spectrum-dense i:nth-child(4n+1) { animation-delay: -.3s; }

.lv-spectrum-group i:nth-child(2),
.lv-spectrum-dense i:nth-child(4n+2) { animation-delay: -.9s; }

.lv-spectrum-group i:nth-child(3),
.lv-spectrum-dense i:nth-child(4n+3) { animation-delay: -1.5s; }

.lv-spectrum-group i:nth-child(4),
.lv-spectrum-dense i:nth-child(4n+4) { animation-delay: -2.1s; }

@keyframes lvPeakProcess {
  0%, 100% {
    transform: scaleY(.68);
    opacity: .38;
  }
  35% {
    transform: scaleY(.88);
    opacity: .65;
  }
  55% {
    transform: scaleY(1.18);
    opacity: 1;
  }
  72% {
    transform: scaleY(.92);
    opacity: .72;
  }
}

/* Make the live scan clearly visible across the tall field. */
.lv-live-signal {
  top: -8%;
  bottom: 12%;
  width: 170px;
  animation: lvLiveSweepStrong 4.5s linear infinite;
}

.lv-live-signal::before {
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(47,111,196,.15) 12%,
    rgba(47,111,196,.95) 48%,
    rgba(47,111,196,.16) 84%,
    transparent
  );
  box-shadow: 0 0 20px rgba(47,111,196,.25);
}

.lv-live-signal::after {
  width: 10px;
  height: 10px;
  background: #2f6fc4;
  box-shadow:
    0 0 0 7px rgba(47,111,196,.10),
    0 0 24px rgba(47,111,196,.42);
}

@keyframes lvLiveSweepStrong {
  0% { left: 100%; opacity: 0; }
  5% { opacity: 1; }
  45% { opacity: .72; }
  50% { opacity: 1; }
  95% { opacity: .72; }
  100% { left: -10%; opacity: 0; }
}

/* The moving processing light travels along the baseline too. */
.lv-spectrum-baseline::after {
  animation: lvBaselineProcess 4.5s linear infinite;
  width: 36px;
  height: 6px;
  filter: blur(2px);
}

@keyframes lvBaselineProcess {
  0% { left: 100%; opacity: 0; }
  6% { opacity: .9; }
  50% { left: 50%; opacity: .65; }
  94% { opacity: .9; }
  100% { left: -4%; opacity: 0; }
}

/* Slight vertical breathing in the atmospheric haze. */
.lv-spectrum-haze {
  animation: lvHazeBreath 6s ease-in-out infinite;
}

@keyframes lvHazeBreath {
  0%,100% { opacity: .58; transform: scaleY(.96); }
  50% { opacity: .88; transform: scaleY(1.02); }
}

@media (max-width: 760px) {
  .lv-science-visual {
    height: 310px;
    bottom: -4px;
  }

  .lv-spectrum-field {
    top: -20px;
  }
}


/* =========================================================
   TRUE LIVE PROCESS — JS-driven so the animation is obvious
   ========================================================= */

.lv-live-signal {
  position: absolute;
  z-index: 20;
  top: -8%;
  bottom: 14%;
  left: 100%;
  width: 150px;
  pointer-events: none;
  opacity: .8;
  animation: none !important;
}

.lv-processing-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(47,111,196,.10) 12%,
    rgba(47,111,196,.78) 45%,
    rgba(1,78,138,.95) 50%,
    rgba(47,111,196,.10) 86%,
    transparent
  );
  box-shadow:
    0 0 10px rgba(47,111,196,.22),
    0 0 30px rgba(47,111,196,.10);
}

.lv-processing-glow {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 16px;
  height: 16px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: rgba(47,111,196,.82);
  box-shadow:
    0 0 0 7px rgba(47,111,196,.08),
    0 0 22px rgba(47,111,196,.35);
  animation: lvProcessPulse 1.15s ease-in-out infinite;
}

.lv-live-signal b {
  position: absolute;
  left: 50%;
  top: calc(49% + 21px);
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 7px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  color: rgba(1,78,138,.72);
}

.lv-process-trail {
  position: absolute;
  z-index: 19;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.lv-process-trail span {
  position: absolute;
  left: var(--process-x);
  width: 80px;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(47,111,196,.42), transparent);
  transition: left .04s linear;
}

.lv-process-trail span:nth-child(1) { top: 42%; transform: translateX(-88%); }
.lv-process-trail span:nth-child(2) { top: 50%; width: 125px; transform: translateX(-82%); }
.lv-process-trail span:nth-child(3) { top: 58%; width: 58px; transform: translateX(-95%); }

@keyframes lvProcessPulse {
  0%,100% {
    transform: translate(-50%,-50%) scale(.82);
    opacity: .65;
  }
  50% {
    transform: translate(-50%,-50%) scale(1.18);
    opacity: 1;
  }
}

/* Keep the static peak animation gentle; JS supplies the moving event. */
.lv-spectrum-dense i,
.lv-spectrum-group i {
  animation: lvIdlePeak 3.8s ease-in-out infinite;
}

@keyframes lvIdlePeak {
  0%,100% { opacity: .58; }
  50% { opacity: .76; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-live-signal,
  .lv-processing-glow,
  .lv-process-trail,
  .lv-spectrum-dense i,
  .lv-spectrum-group i {
    animation: none !important;
  }
}
/* =========================================================
   FINAL GRAPH COLOR — DEEP NAVY / NEAR BLACK
   ========================================================= */

.lv-spectrum-dense i {
  background: linear-gradient(
    to top,
    rgba(1, 28, 56, .72),
    rgba(1, 58, 91, .96)
  );
}

.lv-spectrum-dense i:nth-child(7n) {
  background: linear-gradient(
    to top,
    rgba(1, 22, 45, .86),
    rgba(1, 53, 84, 1)
  );
}


/* Main spectrum peaks */
.lv-spectrum-group i {
  background: linear-gradient(
    to top,
    rgba(1, 30, 55, .58),
    rgba(1, 65, 101, .94)
  );

  box-shadow:
    0 0 10px rgba(1, 45, 75, .14);
}

.lv-spectrum-group i.major {
  background: linear-gradient(
    to top,
    rgba(1, 24, 48, .82),
    rgba(1, 55, 88, 1)
  );

  box-shadow:
    0 0 16px rgba(1, 45, 75, .20);
}


/* Atmospheric haze */
.lv-spectrum-haze i {
  background: linear-gradient(
    to top,
    rgba(1, 53, 84, .25),
    rgba(1, 53, 84, .055)
  );
}


/* Baseline */
.lv-spectrum-baseline {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(1, 45, 75, .34) 8%,
      rgba(1, 45, 75, .34) 92%,
      transparent
    );
}


/* Graph horizon */
.lv-spectrum-field::after {
  background: rgba(1, 28, 56, .30);
}


/* Reflection */
.lv-spectrum-reflection {
  opacity: .28;
}

.lv-spectrum-reflection span {
  background: #012b4a;
}


/* =========================================================
   SIDE SPECTRA
   ========================================================= */

.lv-side-peaks i {
  background: linear-gradient(
    to top,
    rgba(1, 28, 56, .52),
    rgba(1, 58, 91, .90)
  );
}

.lv-side-peaks i.major {
  background: linear-gradient(
    to top,
    rgba(1, 22, 45, .80),
    rgba(1, 53, 84, 1)
  );
}


/* =========================================================
   MOVING SCANNER
   ========================================================= */

.lv-live-signal::before {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(1, 45, 75, .10) 12%,
    rgba(1, 53, 84, .82) 48%,
    rgba(1, 28, 56, 1) 50%,
    rgba(1, 45, 75, .10) 86%,
    transparent
  );

  box-shadow:
    0 0 18px rgba(1, 45, 75, .26),
    0 0 32px rgba(1, 28, 56, .12);
}

.lv-live-signal::after {
  background: #012b4a;

  box-shadow:
    0 0 0 7px rgba(1, 45, 75, .11),
    0 0 24px rgba(1, 45, 75, .34);
}


/* Processing line */
.lv-processing-line {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(1, 45, 75, .08) 12%,
    rgba(1, 53, 84, .76) 45%,
    rgba(1, 28, 56, .96) 50%,
    rgba(1, 45, 75, .08) 86%,
    transparent
  );

  box-shadow:
    0 0 10px rgba(1, 45, 75, .22),
    0 0 30px rgba(1, 28, 56, .10);
}


/* Processing glow */
.lv-processing-glow {
  background: rgba(1, 45, 75, .88);

  box-shadow:
    0 0 0 7px rgba(1, 45, 75, .09),
    0 0 22px rgba(1, 45, 75, .32);
}


/* Process trail */
.lv-process-trail span {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(1, 45, 75, .48),
      transparent
    );

  opacity: .60;
}