.signal-quality {
  max-width: var(--max);
  margin: 0 auto 125px;
  padding: 70px 24px;
}
.signal-quality h2 {
  font-size: clamp(40px, 5vw, 68px);
  max-width: 900px;
}
.quality-lead {
  max-width: 930px;
  color: #a9bbb6;
  font-size: 18px;
}
.time-vortex {
  position: relative;
  min-height: 620px;
  margin: 55px 0 48px;
  display: grid;
  grid-template-columns: 1fr 520px 1fr;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border: 1px solid rgba(62, 240, 178, .17);
  background:
    radial-gradient(circle at center, rgba(62, 240, 178, .12), transparent 21%),
    radial-gradient(circle at center, #03090b 0 25%, transparent 26%),
    linear-gradient(135deg, rgba(62, 240, 178, .035), transparent 45%);
}
.time-vortex:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(62,240,178,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(62,240,178,.045) 1px,transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 68%);
}
.vortex-orbit { position: relative; width: 500px; height: 500px; z-index: 2; }
.orbit { position: absolute; inset: 50%; border: 1px solid rgba(62, 240, 178, .28); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); box-shadow: 0 0 22px rgba(62,240,178,.045); }
.orbit-a { width: 480px; height: 250px; animation: vortex-spin 12s linear infinite; }
.orbit-b { width: 390px; height: 205px; border-color: rgba(244,189,90,.3); animation: vortex-spin-reverse 9s linear infinite; }
.orbit-c { width: 300px; height: 158px; animation: vortex-spin 7s linear infinite; }
.orbit-d { width: 215px; height: 112px; border-color: rgba(255,255,255,.22); animation: vortex-spin-reverse 5s linear infinite; }
.vortex-core { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 45% 42%, #102d28, #010405 62%); box-shadow: 0 0 0 18px rgba(62,240,178,.035), 0 0 70px rgba(62,240,178,.24), inset 0 0 32px rgba(0,0,0,.85); z-index: 4; }
.vortex-core small { color: #9db3ad; letter-spacing: .16em; font-size: 10px; }
.vortex-core strong { color: var(--green); font: 500 42px/1 Georgia,serif; margin: 8px 0; }
.vortex-core em { color: var(--gold); font-style: normal; font-size: 10px; letter-spacing: .12em; }
.tick { position: absolute; z-index: 5; padding: 7px 10px; color: #bcd0ca; background: #071216; border: 1px solid var(--line); font: 10px ui-monospace,monospace; letter-spacing: .09em; }
.tick-1 { left: 2%; top: 44%; }.tick-2 { left: 25%; top: 18%; }.tick-3 { right: 21%; bottom: 21%; }.tick-4 { right: 1%; top: 46%; }
.vortex-copy { position: relative; z-index: 3; padding: 24px; }
.vortex-copy b { display: block; color: white; font-size: 22px; }
.vortex-copy span { color: var(--muted); font-size: 13px; }
.vortex-start { text-align: right; }.vortex-end { text-align: left; }
.vortex-equation { text-align: center; font-size: 18px; color: var(--muted); margin: -20px 0 58px; }
.vortex-equation b { color: white; font-weight: 500; }
@keyframes vortex-spin { to { transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes vortex-spin-reverse { to { transform: translate(-50%,-50%) rotate(-378deg); } }
.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 48px;
}
.quality-grid article {
  padding: 35px;
  border: 1px solid var(--line);
  min-height: 390px;
  background: var(--panel);
}
.quality-grid article.quality-bad {
  border-color: rgba(244, 189, 90, .28);
  background: linear-gradient(145deg, rgba(244, 189, 90, .07), var(--panel));
}
.quality-grid article.quality-good {
  border-color: rgba(62, 240, 178, .3);
  background: linear-gradient(145deg, rgba(62, 240, 178, .07), var(--panel));
}
.quality-grid small { color: var(--green); letter-spacing: .12em; }
.quality-bad small { color: var(--gold); }
.quality-grid h3 { font-size: 26px; margin: 22px 0; }
.quality-grid ul { padding-left: 20px; color: var(--muted); }
.quality-grid li { margin: 12px 0; }
.quality-rule {
  margin-top: 14px;
  padding: 24px 28px;
  border: 1px solid rgba(62, 240, 178, .25);
  color: #d7e7e2;
  background: rgba(62, 240, 178, .05);
}
@media (max-width: 900px) {
  .quality-grid { grid-template-columns: 1fr; }
  .time-vortex { grid-template-columns: 1fr; padding: 30px 0; }
  .vortex-copy { text-align: center; padding: 8px; }
  .vortex-orbit { margin: auto; }
}
@media (max-width: 600px) {
  .signal-quality { padding: 25px 18px 85px; margin-bottom: 0; }
  .quality-grid article { padding: 25px; min-height: 0; }
  .time-vortex { min-height: 650px; }
  .vortex-orbit { width: 330px; height: 330px; transform: scale(.92); }
  .orbit-a { width: 325px; height: 172px; }.orbit-b { width: 270px; height: 143px; }.orbit-c { width: 215px; height: 114px; }.orbit-d { width: 165px; height: 87px; }
  .tick-1 { left: 0; }.tick-4 { right: 0; }
  .vortex-equation { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }