/* ===== Visualization section (keeps your viz style) ===== */
.viz-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #0a0a1a, rgba(18,18,36,0.7));
}

.viz-lead {
    max-width: 900px;
    margin: 0 auto 26px;
    text-align: center;
    opacity: .9;
    font-size: 1.05rem;
}

.viz-lead b {
    color: #00f0b0;
}

/* Scoped viz styles to avoid conflicts with landing */
.viz-wrap {
    max-width: 1180px;
    margin: 12px auto 0;
    padding: 0 12px 12px;
    font-family: var(--vizSans, 'Inter', sans-serif);
}

.viz {
    --bg1:#070a14; --bg2:#0b1020;
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.64);

    --OK:#2ee59d;
    --MUMBLE:#ffc14d;
    --CORRUPT:#4dd3ff;
    --DOWN:#ff5566;
    --UNKNOWN:#a6a6b3;
    --CHECKER_ERROR:#ffd24d;

    --vpn:#4dd3ff;

    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;

    --round: 10s;

    color: var(--text);
}

.viz header {
    display:flex; gap:10px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap:wrap;
    margin-bottom: 10px;
}

.viz .sub {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.viz .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 11px;
    white-space: nowrap;
}

.viz .phaseDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--UNKNOWN);
    box-shadow: 0 0 0 4px rgba(166,166,179,.10);
}

.viz .phaseDot.checks {
    background: var(--OK);
    box-shadow: 0 0 0 4px rgba(46,229,157,.10);
}

.viz .phaseDot.attacks {
    background: var(--DOWN);
    box-shadow: 0 0 0 4px rgba(255,85,102,.10);
}

.viz .phaseDot.gap {
    background: var(--vpn);
    box-shadow: 0 0 0 4px rgba(77,211,255,.10);
}

.viz .panel {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.042);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    overflow:hidden;
}

.viz svg {
    width:100%;
    height:auto;
    display:block;
}

.viz .node {
    fill: rgba(255,255,255,.055);
    stroke: rgba(255,255,255,.14);
    stroke-width: 1.1;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.26));
}

.viz .label {
    fill: rgba(255,255,255,.92);
    font-weight: 850;
    font-size: 12.6px;
    letter-spacing:.2px;
}

.viz .sublabel {
    fill: rgba(255,255,255,.64);
    font-size: 10.6px;
    font-family: var(--mono);
}

.viz .tiny {
    fill: rgba(255,255,255,.62);
    font-size: 10.2px;
    font-family: var(--mono);
}

.viz .wire {
    fill:none; stroke:
        rgba(77,211,255,.16);
    stroke-width: 1.9;
}

.viz .ssh {
    fill: none;
    stroke: rgba(77,211,255,.30);
    stroke-width: 1.9;
    stroke-dasharray: 6 7;
    stroke-linecap: round;
}

.viz .pulse {
    fill: none;
    stroke-linecap: round;
    stroke-width: 2.6;
    stroke-dasharray: 14 24;
    opacity: 0;
    transition: opacity 0.15s ease-in-out; /* Плавное появление/исчезновение */
}

.viz .pulse.check {
    stroke: var(--OK);
    filter: drop-shadow(0 0 10px rgba(46,229,157,.10));
}

.viz .pulse.attack {
    stroke: var(--DOWN);
    filter: drop-shadow(0 0 10px rgba(255,85,102,.08));
}

.viz .svcRow {
    fill: rgba(255,255,255,.05);
    stroke: rgba(255,255,255,.12);
    stroke-width: 1;
}

.viz .statusDot {
    stroke: rgba(255,255,255,.18);
    stroke-width: 1.0;
}

.viz .st-UNKNOWN {
    fill: var(--UNKNOWN);
}

.viz .st-OK {
    fill: var(--OK);
}

.viz .st-CORRUPT {
    fill: var(--CORRUPT);
}

.viz .st-MUMBLE {
    fill: var(--MUMBLE);
}

.viz .st-DOWN {
    fill: var(--DOWN);
}

.viz .st-CHECKER_ERROR {
    fill: var(--CHECKER_ERROR);
}

.viz .fixedNum {
    fill: rgba(255,255,255,.30);
    font-weight: 900;
    font-family: var(--mono);
    font-size: 10.2px;
}

.viz.phase-attacks .fixedNum {
    fill: rgba(255,255,255,.92);
}

.viz .vulnNum {
    fill: rgba(255,255,255,.90);
    font-weight: 900;
    font-family: var(--mono);
    font-size: 10.2px;
}

.viz .legend {
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    padding: 9px 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: var(--muted);
    font-size: 11px;
}

.viz .legend .item {
    display: inline-flex;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    font-family: var(--mono);
    white-space: nowrap;
}

.viz .sw {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}

@media (prefers-reduced-motion: reduce){
    .viz .pulse {
        animation: none !important;
        opacity: .22;
    }
}