.hero {
  min-height: auto;
  display: block;
  padding: 34px 0 28px;
}

.hero-card {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  background:
    radial-gradient(circle at 92% 8%, rgba(134, 93, 255, 0.24), transparent 32%),
    radial-gradient(circle at 5% 96%, rgba(72, 92, 255, 0.15), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 241, 248, 0.92));
  box-shadow: 0 24px 70px rgba(27, 31, 58, 0.1);
  padding: clamp(40px, 6vw, 76px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(180px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.hero-copy { max-width: 940px; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(3.4rem, 7vw, 7.5rem); max-width: 850px; }
.hero .intro { display: block; margin-top: 38px; max-width: 650px; }
.hero-foot { padding-top: 24px; }

.signal-art {
  position: relative;
  z-index: 1;
  min-height: 210px;
  display: flex;
  align-items: end;
  margin: 0 calc(clamp(40px, 6vw, 76px) * -1) calc(clamp(40px, 6vw, 76px) * -1);
}

.signal-art svg {
  width: 100%;
  height: 230px;
  overflow: hidden;
  filter: drop-shadow(0 16px 28px rgba(72, 92, 255, 0.13));
}

.signal-art canvas {
  display: block;
  width: 100%;
  height: 230px;
}

.waveform-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  stroke-dasharray: 8 8;
  animation: signal 9s linear infinite;
}

.waveform-line--blue { stroke: var(--blue); }
.waveform-line--red { stroke: var(--red); animation-direction: reverse; animation-duration: 12s; }
.waveform-fill { fill: rgba(72, 92, 255, 0.12); }
.signal-baseline { stroke: rgba(23, 23, 34, 0.12); stroke-width: 1; stroke-dasharray: 3 8; }

@keyframes signal { to { stroke-dashoffset: -220; } }

.sequence .section-head { display: block; }
.sequence .section-head h2 { max-width: none; white-space: nowrap; }
.sequence { padding-bottom: 48px; }
.next { padding-top: 0; }
.actions button {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.actions button:hover,
.actions button:focus-visible {
  background: #fff;
  color: var(--ink);
}

.step-diagram {
  height: 140px;
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--blue);
}

.step-diagram svg { width: 100%; height: 112px; overflow: visible; }
.diagram-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram-line--soft { stroke: rgba(23, 23, 34, 0.18); }
.diagram-dash { stroke-dasharray: 5 7; animation: signal 7s linear infinite; }
.diagram-node { fill: #fff; stroke: currentColor; stroke-width: 2; }
.diagram-node--red { fill: var(--red); stroke: var(--red); }
.diagram-node--lime { fill: var(--lime); stroke: #83b62b; }
.diagram-block { fill: rgba(72, 92, 255, 0.08); stroke: currentColor; stroke-width: 2; }
.diagram-label {
  fill: var(--muted);
  font: 700 8px Manrope, sans-serif;
  letter-spacing: 0.07em;
}
.diagram-label--strong { fill: var(--ink); font-size: 8.5px; }
.diagram-label--center { text-anchor: middle; fill: var(--ink); font-size: 8.5px; }
.diagram-label--light { fill: #fff; }
.transform-dot { fill: var(--blue); animation: transform-shift 2.4s ease-in-out infinite alternate; }
.transform-dot--red { fill: var(--red); animation-delay: -0.8s; }
.transform-dot--lime { fill: #83b62b; animation-delay: -1.6s; }
.diagram-bar { fill: currentColor; opacity: 0.8; transform-origin: center; animation: meter 2.8s ease-in-out infinite alternate; }
.diagram-bar:nth-of-type(2n) { animation-delay: -1.1s; }
.diagram-bar:nth-of-type(3n) { animation-delay: -2s; }
@keyframes meter { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }
@keyframes transform-shift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }

@media (max-width: 800px) {
  .hero { padding: 18px 0 24px; }
  .hero-card { padding: 38px 26px 18px; border-radius: 24px; gap: 10px; }
  .signal-art { min-height: 150px; margin: 0 -26px -18px; opacity: 0.78; }
  .signal-art svg, .signal-art canvas { width: 100%; height: 170px; }
  .sequence .section-head h2 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .waveform-line, .diagram-dash, .diagram-bar, .transform-dot { animation: none; }
}