/* Seiteneigenes CSS fuer /index – ausgelagert aus index.php,
   wo es als Inline-Block bei jedem Aufruf neu uebertragen wurde. */
    /* ── @property for conic border animation ── */
    @property --vs-angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }
    @keyframes vs-spin { to { --vs-angle: 360deg; } }

    /* ── Hero shell ── */
    .vs-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        color: #e2e8f0;
        background: linear-gradient(145deg, #061226 0%, #0f1c36 46%, #151b3f 100%);
    }
    .vs-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(180deg, transparent 68%, rgba(248,250,252,.04) 100%),
            linear-gradient(90deg, rgba(59,130,246,.05), transparent 28%, transparent 72%, rgba(129,140,248,.05));
    }
    .vs-hero-orb {
        position: absolute;
        border-radius: 9999px;
        filter: blur(52px);
        pointer-events: none;
        z-index: -1;
    }
    .vs-hero-orb-a {
        width: 520px; height: 520px; top: -210px; right: -120px;
        background: radial-gradient(circle, rgba(59,130,246,.32), transparent 64%);
        animation: vs-orb-drift 18s ease-in-out infinite alternate;
    }
    .vs-hero-orb-b {
        width: 420px; height: 420px; bottom: -190px; left: -140px;
        background: radial-gradient(circle, rgba(14,165,233,.2), transparent 62%);
        animation: vs-orb-drift 22s ease-in-out infinite alternate-reverse;
    }
    @keyframes vs-orb-drift {
        0%   { transform: translate(0, 0) scale(1); }
        100% { transform: translate(36px, -24px) scale(1.1); }
    }
    .vs-dotgrid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image: radial-gradient(rgba(147,197,253,.55) .8px, transparent .8px);
        background-size: 26px 26px;
        opacity: .32;
        mask-image: radial-gradient(ellipse 78% 70% at 62% 38%, black 8%, transparent 78%);
        -webkit-mask-image: radial-gradient(ellipse 78% 70% at 62% 38%, black 8%, transparent 78%);
    }

    .vs-hero-layout {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr);
        align-items: center;
        gap: 1.75rem 2.5rem;
        width: min(1180px, 100%);
        min-height: 0;
        margin: 0 auto;
        padding: 0 1.25rem 1.4rem;
    }
    .vs-hero-copy { position: relative; z-index: 2; min-width: 0; text-align: left; }

    .vs-hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        color: #93c5fd;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
    }
    .vs-hero-kicker svg { color: #60a5fa; flex-shrink: 0; }
    .vs-hero-kicker-mark {
        position: relative;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #60a5fa;
        box-shadow: 0 0 0 5px rgba(96,165,250,.12), 0 0 18px rgba(96,165,250,.85);
    }
    .vs-hero-kicker-mark::after {
        content: '';
        position: absolute;
        inset: -5px;
        border: 1px solid rgba(147,197,253,.45);
        border-radius: 50%;
        animation: vs-kicker-ping 2.4s ease-out infinite;
    }
    @keyframes vs-kicker-ping {
        0% { opacity: .75; transform: scale(.65); }
        75%, 100% { opacity: 0; transform: scale(1.9); }
    }

    .vs-hero-copy h1 {
        margin: 1.05rem 0 0;
        color: #f8fafc;
        font-size: clamp(1.75rem, 3vw, 2.35rem);
        line-height: 1.08;
        letter-spacing: -.055em;
        font-weight: 800;
    }
    .vs-headline-gradient {
        background: linear-gradient(100deg, #93c5fd 0%, #c4b5fd 42%, #67e8f9 78%, #93c5fd 110%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: vs-grad-move 8s ease-in-out infinite;
    }
    @keyframes vs-grad-move {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    .vs-hero-lead {
        max-width: 34rem;
        margin: .7rem 0 0;
        color: #94a3b8;
        font-size: .87rem;
        line-height: 1.65;
    }

    .vs-hero-controls {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .85rem;
        width: 100%;
        max-width: 36rem;
        margin-top: 1.1rem;
    }

    /* ── Device toggle (glass pill) ── */
    .vs-device-toggle {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .vs-device-btn {
        padding: 8px 18px;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        color: rgba(148,163,184,0.85);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .vs-device-btn:hover:not(.vs-device-active) { color: rgba(255,255,255,0.75); }
    .vs-device-btn:focus-visible {
        outline: 2px solid rgba(96,165,250,.7);
        outline-offset: 2px;
    }
    .vs-device-active {
        background: rgba(255,255,255,0.12);
        color: white;
        box-shadow: 0 1px 6px rgba(0,0,0,0.28);
    }

    /* ── URL input bar ── */
    .vs-input-bar {
        width: 100%;
        background: rgba(255,255,255,0.055);
        border: 1.5px solid rgba(255,255,255,0.11);
        box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .vs-input-bar:focus-within {
        border-color: rgba(96,165,250,0.5);
        box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 4px rgba(59,130,246,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    #urlInput { color: white; font-size: 1rem; }
    #urlInput::placeholder { color: rgba(148,163,184,0.95); }

    /* ── Analyze button ── */
    .vs-analyze-btn {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(37,99,235,0.45);
        transition: all 0.2s;
    }
    .vs-analyze-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 6px 22px rgba(37,99,235,0.55);
        transform: translateY(-1px);
    }
    .vs-analyze-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
    .vs-analyze-btn:focus-visible {
        outline: 2px solid rgba(147,197,253,.85);
        outline-offset: 2px;
    }

    /* ── Trust pills ── */
    .vs-hero-trust {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem;
        margin: 1.2rem 0 0;
        padding: 0;
        list-style: none;
    }
    .vs-trust-pill {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .52rem .78rem .52rem .52rem;
        border: 1px solid rgba(148,163,184,.16);
        border-radius: 9999px;
        color: #cbd5e1;
        background: rgba(255,255,255,.045);
        font-size: .68rem;
        font-weight: 700;
    }
    .vs-trust-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 9999px;
        color: #93c5fd;
        background: rgba(59,130,246,.14);
        border: 1px solid rgba(96,165,250,.22);
    }

    /* ── Animated SVG art ── */
    .vs-hero-art {
        display: block;
        justify-self: end;
        width: min(100%, 580px);
        max-width: 100%;
        height: auto;
        overflow: visible;
    }
    .vs-art-orbit { transform-origin: 290px 236px; animation: vs-art-orbit 30s linear infinite; }
    .vs-art-orbit-rev { transform-origin: 290px 236px; animation: vs-art-orbit-rev 38s linear infinite; }
    .vs-art-orbit-slow { transform-origin: 290px 236px; animation: vs-art-orbit 22s linear infinite; }
    @keyframes vs-art-orbit { to { transform: rotate(360deg); } }
    @keyframes vs-art-orbit-rev { to { transform: rotate(-360deg); } }

    .vs-art-glow { transform-origin: 290px 236px; animation: vs-art-glow 4.8s ease-in-out infinite; }
    @keyframes vs-art-glow {
        0%, 100% { opacity: .28; transform: scale(.96); }
        50% { opacity: .72; transform: scale(1.05); }
    }

    .vs-art-core { transform-origin: 290px 216px; animation: vs-art-core 3.6s ease-in-out infinite; }
    @keyframes vs-art-core { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }

    .vs-art-scan { animation: vs-art-scan 4s ease-in-out infinite; }
    .vs-art-scan-edge { animation: vs-art-scan 4s ease-in-out infinite; }
    @keyframes vs-art-scan {
        0%, 100% { opacity: .06; transform: translateY(-52px); }
        50% { opacity: .7; transform: translateY(78px); }
    }

    .vs-art-gauge { animation: vs-art-gauge 5.4s ease-in-out infinite; }
    @keyframes vs-art-gauge {
        0%, 100% { stroke-dashoffset: 62; }
        50% { stroke-dashoffset: 36; }
    }
    .vs-art-gauge-inner { transform-origin: 290px 168px; animation: vs-art-orbit-rev 14s linear infinite; }

    .vs-art-barfill { transform-box: fill-box; transform-origin: left center; animation: vs-art-bar 3.9s ease-in-out infinite; }
    .vs-art-mini-bar { transform-box: fill-box; transform-origin: left center; animation: vs-art-bar 3.2s ease-in-out .4s infinite; }
    @keyframes vs-art-bar { 0%, 100% { transform: scaleX(.76); } 50% { transform: scaleX(1); } }
    .vs-art-bar-glow { animation: vs-art-bar-glow 3.9s ease-in-out infinite; }
    @keyframes vs-art-bar-glow {
        0%, 100% { opacity: .15; transform: translateX(-120px); }
        50% { opacity: .7; transform: translateX(0); }
    }

    .vs-art-spark { stroke-dasharray: 260; animation: vs-art-spark 4.8s ease-in-out infinite; }
    @keyframes vs-art-spark {
        0%, 100% { stroke-dashoffset: 80; opacity: .55; }
        50% { stroke-dashoffset: 0; opacity: 1; }
    }
    .vs-art-spark-dot { animation: vs-art-spark-dot 4.8s ease-in-out infinite; }
    @keyframes vs-art-spark-dot {
        0%, 100% { opacity: .35; }
        50% { opacity: 1; }
    }

    .vs-art-dash { animation: vs-art-dash 7s linear infinite; }
    @keyframes vs-art-dash { to { stroke-dashoffset: -220; } }

    .vs-art-ping { transform-box: fill-box; transform-origin: center; animation: vs-art-ping 2.8s cubic-bezier(.24,.6,.36,1) infinite; }
    @keyframes vs-art-ping {
        0% { transform: scale(.55); opacity: .8; }
        70%, 100% { transform: scale(2.1); opacity: 0; }
    }

    .vs-art-ember { animation: vs-art-ember 4.4s ease-in-out infinite; }
    .vs-art-ember-2 { animation-delay: -2.1s; }
    @keyframes vs-art-ember {
        0%, 100% { transform: translate(0, 0); opacity: .55; }
        50% { transform: translate(18px, -22px); opacity: 1; }
    }

    .vs-art-live-dot { animation: vs-art-live 1.6s ease-in-out infinite; }
    @keyframes vs-art-live { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

    .vs-art-metric { animation: vs-art-float-a 5.4s ease-in-out infinite; }
    .vs-art-metric-2 { animation-delay: .2s; }
    .vs-art-metric-3 { animation-delay: .4s; }
    .vs-art-float-a { animation: vs-art-float-a 5.8s ease-in-out infinite; }
    .vs-art-float-b { animation: vs-art-float-b 6.5s ease-in-out .65s infinite; }
    .vs-art-float-c { animation: vs-art-float-a 7.1s ease-in-out 1s infinite; }
    .vs-art-float-d { animation: vs-art-float-b 6.8s ease-in-out 1.35s infinite; }
    @keyframes vs-art-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes vs-art-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

    @media (max-width: 980px) {
        .vs-hero-layout {
            grid-template-columns: minmax(0, 1fr) minmax(260px, .78fr);
            gap: 1.1rem 1.25rem;
            padding: 0 1.1rem 1.55rem;
        }
        .vs-hero-art { width: min(100%, 420px); }
        .vs-hero-copy h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
    }
    @media (max-width: 760px) {
        .vs-hero-layout {
            display: block;
            padding: 0 1rem 1rem;
        }
        .vs-hero-copy { text-align: center; }
        .vs-hero-kicker { justify-content: center; }
        .vs-hero-lead { margin-left: auto; margin-right: auto; font-size: .9rem; }
        .vs-hero-controls {
            align-items: center;
            margin-top: 1.35rem;
            margin-left: auto;
            margin-right: auto;
        }
        .vs-hero-trust { justify-content: center; margin-top: 1.05rem; }
        .vs-hero-art {
            width: min(100%, 440px);
            margin: .2rem auto -.7rem;
        }
        .vs-hero-copy h1 { font-size: clamp(1.65rem, 7.5vw, 2.2rem); margin-top: .9rem; }
    }
    @media (max-width: 480px) {
        .vs-trust-pill { font-size: .62rem; padding: .46rem .62rem .46rem .42rem; }
        .vs-hero-art { width: 112%; max-width: none; margin-left: -6%; margin-right: -6%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vs-hero-orb-a, .vs-hero-orb-b,
        .vs-hero-kicker-mark::after, .vs-headline-gradient,
        .vs-art-orbit, .vs-art-orbit-rev, .vs-art-orbit-slow, .vs-art-glow, .vs-art-core,
        .vs-art-scan, .vs-art-scan-edge, .vs-art-gauge, .vs-art-gauge-inner,
        .vs-art-barfill, .vs-art-mini-bar, .vs-art-bar-glow,
        .vs-art-spark, .vs-art-spark-dot, .vs-art-dash, .vs-art-ping,
        .vs-art-ember, .vs-art-ember-2, .vs-art-live-dot,
        .vs-art-metric, .vs-art-float-a, .vs-art-float-b, .vs-art-float-c, .vs-art-float-d {
            animation: none !important;
        }
    }

    /* ── Feature card ── */
    .vs-feature-card {
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .vs-feature-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 1rem;
        padding: 1.5px;
        background: conic-gradient(from var(--vs-angle), transparent 70%, #3b82f6, #8b5cf6, transparent);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s;
        animation: vs-spin 3s linear infinite;
        pointer-events: none;
    }
    .vs-feature-card:hover::before { opacity: 1; }
    .vs-feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(59,130,246,0.10); }
    .vs-feature-card:hover .vs-icon { transform: scale(1.1) rotate(-3deg); }
    .vs-icon { transition: transform 0.3s ease; }

    /* ── Feature icon colours ── */
    .vs-icon-blue   { background: rgba(59,130,246,0.10);  color: #3b82f6; border: 1px solid rgba(59,130,246,0.18); }
    .vs-icon-amber  { background: rgba(245,158,11,0.10);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.18); }
    .vs-icon-purple { background: rgba(139,92,246,0.10);  color: #8b5cf6; border: 1px solid rgba(139,92,246,0.18); }
    .vs-icon-emerald{ background: rgba(16,185,129,0.10);  color: #10b981; border: 1px solid rgba(16,185,129,0.18); }
    .dark .vs-icon-blue   { background: rgba(59,130,246,0.15); }
    .dark .vs-icon-amber  { background: rgba(245,158,11,0.15); }
    .dark .vs-icon-purple { background: rgba(139,92,246,0.15); }
    .dark .vs-icon-emerald{ background: rgba(16,185,129,0.15); }

    /* ── How it works – enterprise flow ── */
    .vs-how {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 3.75rem 0 3.5rem;
        background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 48%, #f8fafc 100%);
        border-bottom: 1px solid rgba(226,232,240,.9);
    }
    .dark .vs-how {
        background: linear-gradient(180deg, #020617 0%, #0b1220 48%, #020617 100%);
        border-bottom-color: rgba(30,41,59,.9);
    }
    .vs-how-aura {
        position: absolute;
        top: -120px; left: 50%;
        width: 780px; height: 420px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: -1;
        background: radial-gradient(ellipse at center, rgba(59,130,246,.12), transparent 68%);
    }
    .dark .vs-how-aura {
        background: radial-gradient(ellipse at center, rgba(59,130,246,.16), transparent 68%);
    }
    .vs-how-grid {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: .4;
        background-image:
            linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse 70% 55% at 50% 28%, #000 10%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 28%, #000 10%, transparent 75%);
    }
    .dark .vs-how-grid {
        background-image:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    }

    .vs-how-inner {
        width: min(1080px, 100%);
        margin: 0 auto;
        padding: 0 1.15rem;
    }
    .vs-how-header {
        text-align: center;
        max-width: 56rem;
        margin: 0 auto 2.5rem;
    }
    .vs-how-kicker {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        color: #2563eb;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
    }
    .dark .vs-how-kicker { color: #93c5fd; }
    .vs-how-kicker-mark {
        position: relative;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #3b82f6;
        box-shadow: 0 0 0 5px rgba(59,130,246,.12), 0 0 14px rgba(59,130,246,.55);
    }
    .vs-how-kicker-mark::after {
        content: '';
        position: absolute;
        inset: -5px;
        border: 1px solid rgba(96,165,250,.45);
        border-radius: 50%;
        animation: vs-how-kicker-ping 2.4s ease-out infinite;
    }
    @keyframes vs-how-kicker-ping {
        0% { opacity: .75; transform: scale(.65); }
        75%, 100% { opacity: 0; transform: scale(1.9); }
    }
    .vs-how-header h2 {
        margin: 1rem 0 0;
        color: #0f172a;
        font-size: clamp(1.85rem, 3.2vw, 2.55rem);
        line-height: 1.12;
        letter-spacing: -.04em;
        font-weight: 800;
    }
    .dark .vs-how-header h2 { color: #f8fafc; }
    .vs-how-lead {
        margin: 1rem auto 0;
        color: #475569;
        font-size: .97rem;
        line-height: 1.7;
        max-width: 36rem;
    }
    .dark .vs-how-lead { color: #94a3b8; }
    @media (min-width: 1024px) {
        .vs-how-lead {
            max-width: none;
            white-space: nowrap;
        }
    }

    .vs-how-track {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem 1.75rem;
        align-items: start;
    }
    .vs-how-connector {
        display: none;
        position: absolute;
        top: 68px;
        left: 4%;
        width: 92%;
        height: 48px;
        pointer-events: none;
        overflow: visible;
        z-index: 0;
    }
    @media (min-width: 900px) {
        .vs-how-connector { display: block; }
    }
    .vs-how-flow { animation: vs-how-flow 4.8s linear infinite; }
    @keyframes vs-how-flow { to { stroke-dashoffset: -900; } }
    .vs-how-node-ping {
        transform-box: fill-box;
        transform-origin: center;
        animation: vs-how-node-ping 2.8s cubic-bezier(.24,.6,.36,1) infinite;
    }
    @keyframes vs-how-node-ping {
        0% { transform: scale(.5); opacity: .75; }
        70%, 100% { transform: scale(2.2); opacity: 0; }
    }

    .vs-how-step {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 .35rem;
    }
    .vs-how-emblem {
        position: relative;
        width: 140px;
        height: 140px;
        margin-bottom: 1.35rem;
        filter: drop-shadow(0 18px 28px rgba(37,99,235,.18));
    }
    .vs-how-emblem-2 { filter: drop-shadow(0 18px 28px rgba(124,58,237,.2)); }
    .vs-how-emblem-3 { filter: drop-shadow(0 18px 28px rgba(5,150,105,.2)); }
    .vs-how-emblem-svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .vs-how-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 9999px;
        background: #0f172a;
        color: #fff;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .04em;
        box-shadow: 0 6px 16px rgba(15,23,42,.28);
        border: 1px solid rgba(255,255,255,.12);
    }
    .dark .vs-how-badge {
        background: #f8fafc;
        color: #0f172a;
        border-color: rgba(15,23,42,.08);
    }

    .vs-how-step h3 {
        margin: 0;
        color: #1e293b;
        font-size: 1.12rem;
        font-weight: 800;
        letter-spacing: -.02em;
    }
    .dark .vs-how-step h3 { color: #e2e8f0; }
    .vs-how-step > p {
        margin: .7rem 0 0;
        max-width: 17.5rem;
        color: #475569;
        font-size: .9rem;
        line-height: 1.65;
    }
    .dark .vs-how-step > p { color: #94a3b8; }

    .vs-how-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .45rem;
        margin: 1.1rem 0 0;
        padding: 0;
        list-style: none;
    }
    .vs-how-meta li {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .4rem .7rem;
        border-radius: 9999px;
        border: 1px solid rgba(148,163,184,.22);
        background: rgba(255,255,255,.72);
        color: #475569;
        font-size: .66rem;
        font-weight: 700;
    }
    .dark .vs-how-meta li {
        background: rgba(15,23,42,.55);
        border-color: rgba(148,163,184,.16);
        color: #cbd5e1;
    }
    .vs-how-meta svg { color: #3b82f6; flex-shrink: 0; }
    .vs-how-step:nth-child(3) .vs-how-meta svg { color: #8b5cf6; }
    .vs-how-step:nth-child(4) .vs-how-meta svg { color: #10b981; }

    /* Emblem animations */
    .vs-how-ring { transform-origin: 70px 70px; animation: vs-how-spin 22s linear infinite; }
    .vs-how-ring-rev { transform-origin: 70px 70px; animation: vs-how-spin-rev 16s linear infinite; }
    @keyframes vs-how-spin { to { transform: rotate(360deg); } }
    @keyframes vs-how-spin-rev { to { transform: rotate(-360deg); } }
    .vs-how-pulse-dot { animation: vs-how-dot 2.4s ease-in-out infinite; }
    .vs-how-pulse-ring {
        transform-box: fill-box;
        transform-origin: center;
        animation: vs-how-node-ping 2.4s cubic-bezier(.24,.6,.36,1) infinite;
    }
    @keyframes vs-how-dot { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
    .vs-how-wave { animation: vs-how-wave 2.8s ease-in-out infinite; }
    @keyframes vs-how-wave {
        0%, 100% { transform: translateY(0); opacity: .75; }
        50% { transform: translateY(-3px); opacity: 1; }
    }
    .vs-how-scan-tick { animation: vs-how-scan 3.2s ease-in-out infinite; }
    @keyframes vs-how-scan {
        0%, 100% { opacity: .08; transform: translateY(0); }
        50% { opacity: .35; transform: translateY(28px); }
    }
    .vs-how-score-arc { animation: vs-how-arc 4.6s ease-in-out infinite; }
    @keyframes vs-how-arc {
        0%, 100% { stroke-dashoffset: 28; }
        50% { stroke-dashoffset: 16; }
    }

    @media (max-width: 899px) {
        .vs-how { padding: 3.1rem 0 2.75rem; }
        .vs-how-track {
            grid-template-columns: 1fr;
            gap: 2.35rem;
            max-width: 26rem;
            margin: 0 auto;
        }
        .vs-how-header { margin-bottom: 2rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vs-how-kicker-mark::after,
        .vs-how-flow, .vs-how-node-ping,
        .vs-how-ring, .vs-how-ring-rev,
        .vs-how-pulse-dot, .vs-how-pulse-ring,
        .vs-how-wave, .vs-how-scan-tick, .vs-how-score-arc {
            animation: none !important;
        }
    }

    /* ── Badge section ── */
    .vs-badge-section {
        background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
    }

    /* ── Scroll animations ── */
    .reveal-up    { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
    .reveal-left  { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
    .reveal-right { opacity: 0; transform: translateX(30px);  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
    .reveal-up.active, .reveal-left.active, .reveal-right.active { opacity: 1; transform: translate(0); }

    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
    .delay-400 { transition-delay: 400ms; }
    .delay-500 { transition-delay: 500ms; }
    .delay-600 { transition-delay: 600ms; }