/* pulse — systems/rust feel. dark bg, rust-orange accent, cyan secondary,
   jetbrains mono heavy. flat, technical, no gradients except the hero title. */

:root {
    --bg: #0c0d10;
    --bg-soft: #14161b;
    --bg-card: #17191f;
    --fg: #e6e7ea;
    --dim: #8b8f98;
    --dim-strong: #b4b7be;
    --line: #23262d;
    --accent: #fd8b4e;
    --cy: #5eead4;
    --ok: #9ece6a;
    --warn: #e0af68;
    --err: #f7768e;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code, pre, .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; }

a { color: var(--cy); text-decoration: none; }
a:hover { color: var(--accent); }

.page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

/* nav */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 40px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 56px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.nav-logo:hover { color: var(--accent); }
.nav-cta {
    padding: 8px 16px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: background 0.15s;
}
.nav-cta:hover { background: var(--accent); color: var(--bg); }

/* hero */
.hero { margin-bottom: 88px; }
.hero-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5.4vw, 62px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
    color: var(--fg);
}
.hero-title .grad {
    background: linear-gradient(90deg, #fd8b4e 0%, #5eead4 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--dim-strong);
    max-width: 720px;
    margin: 0 0 40px;
}
.hero-sub code { color: var(--accent); background: var(--bg-soft); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; }

/* terminal block */
.term {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 24px 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}
.term-sm { font-size: 14px; padding: 20px 24px; }
.term .dim { color: var(--dim); }
.term .accent { color: var(--accent); }
.term .bold { font-weight: 700; }
.term .ok { color: var(--ok); }
.term .warn { color: var(--warn); }
.term .err { color: var(--err); }
.term .cy { color: var(--cy); }

/* ── animated terminal with chrome + fade-between-frames ── */
.term-frame {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}
.term-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--line);
}
.term-chrome .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}
.term-chrome .dot.d-r { background: #ff5f57; }
.term-chrome .dot.d-y { background: #febc2e; }
.term-chrome .dot.d-g { background: #28c840; }
.term-chrome .term-title {
    margin-left: auto;
    margin-right: auto;
    padding-right: 50px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--dim);
    letter-spacing: 0.02em;
}

.term-stage {
    position: relative;
    min-height: 340px;
    padding: 24px 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg);
    overflow: hidden;
}

.term-frame-content {
    position: absolute;
    inset: 24px 28px;
    margin: 0;
    white-space: pre;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    font-family: inherit;
}
.term-frame-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.term-frame-content .dim { color: var(--dim); }
.term-frame-content .accent { color: var(--accent); }
.term-frame-content .bold { font-weight: 700; }
.term-frame-content .ok { color: var(--ok); }
.term-frame-content .warn { color: var(--warn); }
.term-frame-content .err { color: var(--err); }
.term-frame-content .cy { color: var(--cy); }

/* one-liner pitch */
.pitch {
    margin: 0 0 96px;
    padding: 0;
}
.pitch p {
    font-size: 19px;
    line-height: 1.6;
    color: var(--dim-strong);
    max-width: 760px;
    margin: 0;
}
.pitch code {
    color: var(--accent);
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.88em;
}

/* why grid */
.why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 96px;
}
.why-card {
    background: var(--bg-card);
    padding: 28px 26px 26px;
    position: relative;
}
.why-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}
.why-card h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 10px;
    letter-spacing: -0.005em;
}
.why-card p {
    color: var(--dim-strong);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}
.why-card code {
    color: var(--cy);
    background: var(--bg-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.88em;
}

/* sentinels */
.sentinels { margin-bottom: 96px; }
.sentinels h2,
.compare h2,
.install h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: var(--fg);
}
.sentinels-sub {
    color: var(--dim);
    margin: 0 0 24px;
    font-size: 15px;
}
.sentinels-foot {
    color: var(--dim);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 22px 0 0;
    max-width: 720px;
}

/* compare */
.compare { margin-bottom: 96px; }
.table {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 22px 26px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--fg);
    overflow-x: auto;
    white-space: pre;
    margin: 20px 0 0;
}
.table .dim { color: var(--dim); }
.table .ok { color: var(--ok); font-weight: 600; }
.table .err { color: var(--err); }
.compare-foot {
    color: var(--dim-strong);
    font-size: 15px;
    line-height: 1.6;
    margin-top: 22px;
    max-width: 760px;
}

/* install */
.install { margin-bottom: 80px; }
.install-line {
    background: var(--bg-soft);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 18px 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: var(--fg);
    margin: 20px 0 14px;
    overflow-x: auto;
}
.install-line code { color: var(--fg); }
.install-note {
    color: var(--dim);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    max-width: 680px;
}
.install-note code {
    color: var(--cy);
    background: var(--bg-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* footer */
.footer {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 40px;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--dim);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--accent); }

/* responsive */
@media (max-width: 640px) {
    .page { padding: 20px 16px 60px; }
    .nav { margin-bottom: 40px; padding-bottom: 28px; }
    .hero { margin-bottom: 64px; }
    .pitch, .why, .sentinels, .compare, .install { margin-bottom: 72px; }
    .term, .table { font-size: 11.5px; padding: 16px 18px; }
    .sentinels h2, .compare h2, .install h2 { font-size: 26px; }
    .footer-inner { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ═══ live ECG viz — the line draws itself forever ═══ */
.viz {
    position: relative;
    margin: 88px 0 100px;
    padding: 0;
    overflow: hidden;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* subtle grid paper behind the line */
.ecg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(253, 139, 78, 0.15) 19px 20px),
        repeating-linear-gradient(90deg, transparent 0 19px, rgba(253, 139, 78, 0.15) 19px 20px),
        repeating-linear-gradient(0deg, transparent 0 99px, rgba(253, 139, 78, 0.35) 99px 100px),
        repeating-linear-gradient(90deg, transparent 0 99px, rgba(253, 139, 78, 0.35) 99px 100px);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 85%);
}

.ecg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 200%;
    height: 180px;
    z-index: 2;
    animation: ecg-sweep 8s linear infinite;
    will-change: transform;
}

@keyframes ecg-sweep {
    from { transform: translate(0, -50%); }
    to   { transform: translate(-50%, -50%); }
}

.ecg-line {
    stroke-dasharray: 5200;
    stroke-dashoffset: 5200;
    animation: ecg-draw 8s linear infinite;
}

@keyframes ecg-draw {
    0%   { stroke-dashoffset: 5200; }
    40%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

.ecg-head {
    animation: ecg-head-move 8s linear infinite;
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 4px #fd8b4e);
}

@keyframes ecg-head-move {
    from { cx: 0; opacity: 1; }
    40%  { cx: 2400px; opacity: 1; }
    41%  { opacity: 0; }
    100% { opacity: 0; }
}

.ecg-label {
    position: relative;
    z-index: 3;
    margin-top: 180px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--fg);
    text-align: center;
}
.ecg-label .word {
    background: linear-gradient(180deg, #ffffff 0%, #fd8b4e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ecg-label .blink {
    display: inline-block;
    width: 0.6em;
    color: var(--accent);
    animation: blink 1s steps(1) infinite;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.viz-caption {
    position: relative;
    z-index: 3;
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    text-align: center;
}

@media (max-width: 720px) {
    .viz { height: 200px; margin: 56px 0 72px; }
    .ecg { height: 140px; }
    .ecg-label { font-size: 18px; margin-top: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .ecg, .ecg-line, .ecg-head, .blink { animation: none; }
}

/* ═══ legacy — old wordmark block letters ═══ */
.viz {
    position: relative;
    margin: 80px 0 100px;
    padding: 48px 0 40px;
    text-align: center;
    overflow: hidden;
}

.viz-heartbeat {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
                linear-gradient(180deg, black 30%, transparent 80%);
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}

.hb-line {
    position: absolute;
    width: max-content;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    white-space: pre;
    line-height: 1;
    will-change: transform;
    animation: hb-scroll 22s linear infinite;
}
.hb-top {
    top: 10px;
    font-size: 18px;
    color: var(--accent);
    opacity: 0.22;
    animation-duration: 24s;
}
.hb-bot {
    bottom: 10px;
    font-size: 14px;
    color: var(--cy);
    opacity: 0.3;
    animation-duration: 32s;
    animation-delay: -10s;
}

@keyframes hb-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.pulse-svg {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 60%;
    max-width: 560px;
    height: auto;
    filter:
        drop-shadow(0 0 28px rgba(253, 139, 78, 0.55))
        drop-shadow(0 0 4px rgba(253, 139, 78, 0.75))
        drop-shadow(0 2px 0 rgba(138, 56, 16, 0.5));
    animation: pulse-breath 2.8s ease-in-out infinite;
    shape-rendering: crispEdges;
}

@media (max-width: 720px) { .pulse-svg { width: 82%; max-width: 360px; } }
@media (max-width: 420px) { .pulse-svg { width: 90%; } }

@keyframes pulse-breath {
    0%, 100% {
        filter:
            drop-shadow(0 0 22px rgba(253, 139, 78, 0.4))
            drop-shadow(0 0 3px rgba(253, 139, 78, 0.55));
        transform: scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 38px rgba(253, 139, 78, 0.7))
            drop-shadow(0 0 5px rgba(253, 139, 78, 0.9));
        transform: scale(1.015);
    }
}

.viz-caption {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--dim);
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

@media (max-width: 720px) {
    .viz { margin: 48px 0 72px; padding: 32px 0 24px; }
    .pulse-art { font-size: 13px; }
    .hb-top { font-size: 13px; top: 6px; }
    .hb-bot { font-size: 11px; bottom: 6px; }
    .viz-caption { margin-top: 20px; font-size: 11px; }
}

@media (max-width: 420px) {
    .pulse-art { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-line, .pulse-art { animation: none; }
}

/* ═══ install section — 3 method tabs ═══ */
.install-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 24px;
}
.install-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.install-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    text-transform: lowercase;
    letter-spacing: 0.1em;
}
.install-card .install-line {
    margin: 0;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
}
.install-card .install-line code { background: transparent; color: var(--fg); padding: 0; font-size: inherit; }
.install-note {
    margin: 0;
    color: var(--dim);
    font-size: 13px;
    line-height: 1.45;
}
.install-note code {
    background: rgba(253, 139, 78, 0.08);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}
.install-foot {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted, var(--dim));
    text-align: center;
    opacity: 0.7;
}

@media (max-width: 860px) {
    .install-tabs { grid-template-columns: 1fr; }
}

/* ═══ unused — retired dashboard widget (kept classes for any cached html) ═══ */
.viz {
    margin: 72px 0 96px;
    display: flex;
    justify-content: center;
}

.viz-box {
    width: 100%;
    max-width: 880px;
    background: linear-gradient(180deg, var(--bg-soft) 0%, rgba(12, 15, 24, 0.7) 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 60px -20px rgba(0, 0, 0, 0.7);
    font-family: 'JetBrains Mono', monospace;
    color: var(--fg);
}

.viz-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--dim);
}

.viz-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fg);
    letter-spacing: 0.02em;
}

.dot-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    animation: viz-beat 1.2s ease-in-out infinite;
}

.viz-sub { letter-spacing: 0.06em; }

.viz-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.viz-row {
    display: grid;
    grid-template-columns: 110px 1fr 90px;
    align-items: center;
    gap: 14px;
}

.viz-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
}
.viz-name .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
}
.viz-name .dot.ok { background: var(--ok); }

.viz-track {
    position: relative;
    height: 34px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.04) 39px 40px);
    border-radius: 4px;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.viz-wave {
    position: absolute;
    inset: 0;
    width: 200%;
    background-repeat: repeat-x;
    background-size: 50% 100%;
    background-position: 0 center;
    animation: viz-scroll-left 14s linear infinite;
    will-change: transform;
}

/* each service: custom svg heartbeat data url · distinct rhythm + color */
.viz-wave-pg {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 34' preserveAspectRatio='none'><path d='M0 22 L40 22 L48 14 L56 24 L80 22 L120 22 L160 22 L200 22 L240 22 L280 22 L320 22 L360 22 L368 10 L376 26 L400 22 L440 22 L480 22 L520 22 L560 22 L600 22 L640 22 L648 12 L656 24 L680 22 L720 22 L760 22 L800 22' stroke='%2310b981' stroke-width='1.5' fill='none'/></svg>");
    animation-duration: 20s;
}
.viz-wave-rd {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 34' preserveAspectRatio='none'><path d='M0 24 L60 24 L80 22 L100 24 L160 24 L180 18 L200 24 L260 24 L280 23 L300 24 L360 24 L380 16 L400 24 L460 24 L480 22 L500 24 L560 24 L580 17 L600 24 L660 24 L680 23 L700 24 L760 24 L780 18 L800 24' stroke='%23ef4444' stroke-width='1.5' fill='none'/></svg>");
    animation-duration: 16s;
}
.viz-wave-api {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 34' preserveAspectRatio='none'><path d='M0 20 L30 18 L60 22 L90 14 L120 26 L150 22 L180 16 L210 22 L240 8 L270 28 L300 22 L330 20 L360 24 L390 10 L420 26 L450 22 L480 18 L510 22 L540 4 L570 30 L600 22 L630 20 L660 24 L690 12 L720 26 L750 22 L780 18 L800 22' stroke='%235eead4' stroke-width='1.5' fill='none'/></svg>");
    animation-duration: 12s;
}
.viz-wave-web {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 34' preserveAspectRatio='none'><path d='M0 23 L50 23 L70 17 L90 25 L140 23 L180 20 L220 23 L260 12 L280 28 L320 23 L370 23 L390 18 L410 23 L450 23 L490 14 L510 26 L560 23 L600 21 L640 23 L680 10 L700 28 L740 23 L780 20 L800 23' stroke='%23fd8b4e' stroke-width='1.5' fill='none'/></svg>");
    animation-duration: 17s;
}

.viz-val {
    font-size: 12px;
    color: var(--ok);
    text-align: right;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.viz-val.ok { color: var(--ok); }

.viz-foot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--dim);
    letter-spacing: 0.06em;
}
.viz-pulse {
    color: var(--ok);
    animation: viz-beat 1.4s ease-in-out infinite;
}

@keyframes viz-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes viz-beat {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

@media (max-width: 720px) {
    .viz { margin: 40px 0 64px; }
    .viz-box { padding: 18px 16px; border-radius: 10px; }
    .viz-head { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
    .viz-row { grid-template-columns: 78px 1fr 68px; gap: 10px; }
    .viz-name { font-size: 11.5px; }
    .viz-track { height: 28px; }
    .viz-val { font-size: 11px; }
    .viz-foot { font-size: 10.5px; flex-wrap: wrap; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .viz-wave, .dot-live, .viz-pulse { animation: none; }
}