/* ==========================================================
   VULNEXIA HOME V1
   SecureLensAI — Exposure Intelligence Interface
   ========================================================== */

:root {
    --vx-bg: #05070a;
    --vx-bg-soft: #090c12;
    --vx-surface: rgba(13, 18, 27, 0.82);
    --vx-surface-strong: #0d121b;
    --vx-surface-hover: #111824;

    --vx-border: rgba(255, 255, 255, 0.08);
    --vx-border-strong: rgba(255, 255, 255, 0.13);

    --vx-text: #f7f9fc;
    --vx-text-soft: #a5afbd;
    --vx-text-muted: #687383;

    --vx-blue: #4c8dff;
    --vx-blue-bright: #70a7ff;
    --vx-violet: #8b6cff;
    --vx-cyan: #5ce1e6;
    --vx-green: #55d6a0;
    --vx-red: #ff6577;

    --vx-radius-sm: 12px;
    --vx-radius-md: 18px;
    --vx-radius-lg: 26px;
    --vx-radius-xl: 34px;

    --vx-shadow:
        0 24px 80px rgba(0, 0, 0, 0.34);

    --vx-glow:
        0 0 70px rgba(76, 141, 255, 0.10);
}


/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% -10%,
            rgba(76, 141, 255, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(139, 108, 255, 0.09),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #05070a 0%,
            #070a0f 48%,
            #05070a 100%
        );

    color: var(--vx-text);

    font-family:
        'Inter',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.65),
            transparent 82%
        );
}


/* ----------------------------------------------------------
   PAGE SHELL
   ---------------------------------------------------------- */

.page-shell {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding-bottom: 72px;
}


/* ----------------------------------------------------------
   TOP NAVIGATION
   ---------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 14px;
    z-index: 100;

    margin-top: 14px;
    padding: 13px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    background: rgba(7, 10, 15, 0.78);
    border: 1px solid var(--vx-border);
    border-radius: 20px;

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.26),
        inset 0 1px rgba(255,255,255,.025);
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

.brand-title {
    color: #ffffff;
    letter-spacing: -0.055em;
}

.brand-parent {
    color: rgba(255,255,255,.48);
}

.brand-subtext {
    color: var(--vx-text-muted);
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.hero-grid {
    position: relative;

    margin-top: 54px;
    gap: 28px;

    align-items: stretch;
}

.hero-grid::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    top: -190px;
    left: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(76,141,255,.11),
            transparent 67%
        );

    filter: blur(14px);
    pointer-events: none;
}

.hero-title {
    color: #ffffff;

    text-shadow:
        0 0 60px rgba(76,141,255,.07);
}

.hero-title .accent,
.text-gradient {
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #8eb8ff 42%,
            #9b83ff 78%,
            #ffffff 120%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero-copy,
.hero-description {
    color: var(--vx-text-soft);
}


/* ----------------------------------------------------------
   PANELS
   ---------------------------------------------------------- */

.panel,
.stat-card,
.feature-card,
.pricing-card,
.ecosystem-card,
.compare-card {

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(17, 23, 34, .92),
            rgba(9, 13, 20, .88)
        );

    border: 1px solid var(--vx-border);

    box-shadow:
        var(--vx-shadow),
        inset 0 1px rgba(255,255,255,.025);
}

.panel::before,
.feature-card::before,
.pricing-card::before,
.ecosystem-card::before {

    content: "";
    position: absolute;

    left: 20px;
    right: 20px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(112,167,255,.42),
            transparent
        );

    opacity: .6;
}


/* ----------------------------------------------------------
   SCAN CONSOLE
   ---------------------------------------------------------- */

.scan-panel {
    border-color: rgba(92, 146, 255, .19);

    box-shadow:
        0 30px 90px rgba(0,0,0,.38),
        0 0 80px rgba(76,141,255,.075),
        inset 0 1px rgba(255,255,255,.035);
}

.scan-panel::after {
    content: "";
    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    top: -100px;

    background:
        radial-gradient(
            circle,
            rgba(76,141,255,.13),
            transparent 68%
        );

    pointer-events: none;
}


/* ----------------------------------------------------------
   INPUTS
   ---------------------------------------------------------- */

.input,
.select,
input,
select {

    background: rgba(3, 6, 10, .72);

    border:
        1px solid rgba(255,255,255,.095);

    color: #f5f8fc;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        transform .18s ease;
}

.input:hover,
.select:hover,
input:hover,
select:hover {

    border-color:
        rgba(112,167,255,.28);
}

.input:focus,
.select:focus,
input:focus,
select:focus {

    outline: none;

    border-color:
        rgba(112,167,255,.66);

    background:
        rgba(6,10,16,.94);

    box-shadow:
        0 0 0 4px rgba(76,141,255,.10),
        0 0 32px rgba(76,141,255,.07);
}


/* ----------------------------------------------------------
   BUTTON SYSTEM
   ---------------------------------------------------------- */

.btn,
button {

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.btn:hover,
button:hover {
    transform: translateY(-2px);
}

.btn-blue {

    background:
        linear-gradient(
            135deg,
            #3d7fff,
            #5d94ff
        );

    color: #ffffff;

    border:
        1px solid rgba(132,177,255,.52);

    box-shadow:
        0 10px 32px rgba(61,127,255,.20);
}

.btn-blue:hover {

    box-shadow:
        0 14px 40px rgba(61,127,255,.28);
}

.btn-purple {

    background:
        linear-gradient(
            135deg,
            #7357f6,
            #957aff
        );

    border:
        1px solid rgba(177,160,255,.42);

    color: white;

    box-shadow:
        0 10px 32px rgba(115,87,246,.18);
}


/* ----------------------------------------------------------
   LABELS / PILLS
   ---------------------------------------------------------- */

.micro-pill,
.soft-pill,
.plan-pill {

    border:
        1px solid rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.035);

    color:
        #c9d4e2;
}

.section-kicker,
.card-kicker {

    color:
        #82adff;
}


/* ----------------------------------------------------------
   STATS
   ---------------------------------------------------------- */

.stats-grid {
    gap: 16px;
}

.stat-card {

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.stat-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(112,167,255,.19);

    background:
        linear-gradient(
            145deg,
            rgba(20,27,40,.95),
            rgba(10,14,21,.92)
        );
}


/* ----------------------------------------------------------
   FEATURES
   ---------------------------------------------------------- */

.feature-grid {
    gap: 18px;
}

.feature-card {

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.feature-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(112,167,255,.21);

    box-shadow:
        0 28px 80px rgba(0,0,0,.40),
        0 0 45px rgba(76,141,255,.055);
}

.feature-title {
    color:
        #f6f8fc;
}


/* ----------------------------------------------------------
   COMPARISON
   ---------------------------------------------------------- */

.compare-grid {
    gap: 18px;
}

.compare-card {

    border-radius:
        var(--vx-radius-lg);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.compare-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,.14);
}


/* ----------------------------------------------------------
   PRICING
   ---------------------------------------------------------- */

.pricing-grid {
    gap: 20px;
}

.pricing-card {

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

.pricing-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(112,167,255,.22);
}

.pricing-card.highlight {

    border:
        1px solid rgba(139,108,255,.36);

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(139,108,255,.14),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(20,22,39,.96),
            rgba(10,13,22,.94)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.40),
        0 0 70px rgba(139,108,255,.07);
}


/* ----------------------------------------------------------
   ECOSYSTEM
   ---------------------------------------------------------- */

.ecosystem-grid {
    gap: 18px;
}

.ecosystem-card {

    transition:
        transform .22s ease,
        border-color .22s ease;
}

.ecosystem-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(92,225,230,.18);
}


/* ----------------------------------------------------------
   SECTION RHYTHM
   ---------------------------------------------------------- */

.content-block,
.stats-grid,
.feature-grid,
.compare-grid,
.pricing-grid,
.ecosystem-grid {

    position: relative;
}

.section-head {

    margin-top:
        96px;

    margin-bottom:
        28px;
}

.section-head h2 {

    color:
        #f8faff;

    letter-spacing:
        -.045em;
}


/* ----------------------------------------------------------
   LIVE INTELLIGENCE
   ---------------------------------------------------------- */

.live-intel-item {

    color:
        var(--vx-text-soft);
}

.pulse-dot {

    box-shadow:
        0 0 0 5px rgba(85,214,160,.08),
        0 0 20px rgba(85,214,160,.34);
}


/* ----------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------- */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #05070a;
}

::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,.13);

    border-radius:
        999px;

    border:
        2px solid #05070a;
}

::-webkit-scrollbar-thumb:hover {

    background:
        rgba(255,255,255,.20);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .page-shell {
        width:
            min(100% - 28px, 1440px);
    }

    .topbar {
        top: 8px;
    }

    .hero-grid {
        margin-top: 34px;
    }

    .section-head {
        margin-top: 72px;
    }
}


@media (max-width: 640px) {

    .page-shell {
        width:
            min(100% - 20px, 1440px);
    }

    .topbar {
        border-radius: 16px;
    }

    .hero-title {
        font-size:
            clamp(2.65rem, 13vw, 4rem);
    }

    .section-head {
        margin-top: 58px;
    }
}

/* ==========================================================
   VULNEXIA HERO V2
   Decision Intelligence Experience
   ========================================================== */

.hero-grid {
    grid-template-columns:
        minmax(0, 1.48fr)
        minmax(350px, .82fr);

    gap: 22px;
    align-items: stretch;
}


/* ----------------------------------------------------------
   LEFT COMMAND EXPERIENCE
   ---------------------------------------------------------- */

.hero-command {
    min-height: 650px;
    padding: 0;

    display: flex;
    align-items: center;

    isolation: isolate;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(77, 136, 255, .11),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(12, 17, 25, .98),
            rgba(6, 9, 14, .98)
        );
}

.hero-command::before {
    opacity: .8;
}

.hero-command-content {
    position: relative;
    z-index: 5;

    width: min(720px, 76%);

    padding:
        54px 48px 52px;
}


/* ----------------------------------------------------------
   AMBIENT 3D VISUAL
   ---------------------------------------------------------- */

.hero-command-visual {
    position: absolute;

    inset: 0 0 0 auto;

    width: 53%;
    overflow: hidden;

    z-index: 1;

    opacity: .48;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.22) 20%,
            rgba(0,0,0,.95) 72%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.22) 20%,
            rgba(0,0,0,.95) 72%
        );
}

.hero-command-spline {
    position: absolute;

    width: 145%;
    height: 125%;

    right: -31%;
    bottom: -13%;

    border: 0;

    pointer-events: none;

    filter:
        saturate(.82)
        contrast(1.06)
        brightness(.72);
}

.hero-command-glow {
    position: absolute;

    width: 440px;
    height: 440px;

    right: -120px;
    top: -100px;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(70, 142, 255, .14),
            transparent 68%
        );

    filter: blur(18px);

    pointer-events: none;
}


/* ----------------------------------------------------------
   EYEBROW
   ---------------------------------------------------------- */

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 22px;

    padding: 8px 11px;

    border:
        1px solid rgba(92, 225, 230, .17);

    border-radius: 999px;

    background:
        rgba(92, 225, 230, .045);

    color:
        #8de8ec;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #59e1e7;

    box-shadow:
        0 0 14px rgba(89,225,231,.76);
}


/* ----------------------------------------------------------
   HEADLINE
   ---------------------------------------------------------- */

.hero-v2-title {
    margin: 0;

    max-width: 10.5ch;

    font-family:
        'Sora',
        'Inter',
        sans-serif;

    font-size:
        clamp(3rem, 5.2vw, 5.3rem);

    line-height: .94;

    font-weight: 800;

    letter-spacing: -.07em;

    color: #ffffff;
}

.hero-v2-title span {
    display: block;

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #93bcff 42%,
            #9e87ff 78%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero-v2-copy {
    max-width: 630px;

    margin:
        24px 0 30px;

    color:
        #aab6c6;

    font-size:
        1.02rem;

    line-height:
        1.72;
}


/* ----------------------------------------------------------
   DECISION LIST
   ---------------------------------------------------------- */

.hero-decision-list {
    display: grid;
    gap: 10px;

    max-width: 620px;

    margin-bottom: 28px;
}

.hero-decision-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding:
        13px 14px;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.026);

    backdrop-filter:
        blur(10px);
}

.hero-check {
    flex:
        0 0 auto;

    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius:
        9px;

    background:
        rgba(77,136,255,.10);

    border:
        1px solid rgba(111,164,255,.18);

    color:
        #82adff;

    font-size:
        .64rem;

    font-weight:
        800;
}

.hero-decision-item strong {
    display: block;

    margin-bottom: 3px;

    color:
        #eff4fb;

    font-size:
        .86rem;
}

.hero-decision-item small {
    display: block;

    max-width: 54ch;

    color:
        #788697;

    font-size:
        .75rem;

    line-height:
        1.46;
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.hero-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 5px;
}

.hero-primary-action,
.hero-secondary-action {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-inline: 20px;
}

.hero-secondary-action {
    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.09);
}


/* ----------------------------------------------------------
   TRUST SIGNALS
   ---------------------------------------------------------- */

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 22px;
}

.hero-trust-row span {
    padding:
        6px 8px;

    border-radius:
        999px;

    border:
        1px solid rgba(255,255,255,.055);

    color:
        #738092;

    background:
        rgba(255,255,255,.018);

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .025em;
}


/* ----------------------------------------------------------
   SCAN CONSOLE ALIGNMENT
   ---------------------------------------------------------- */

.scan-panel {
    min-height: 650px;

    padding: 20px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(77,136,255,.08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(14,20,30,.97),
            rgba(8,12,18,.98)
        );
}

.scan-panel .section-kicker {
    margin-bottom: 12px;
}


/* ----------------------------------------------------------
   DE-EMPHASISE DUPLICATE INTRO BELOW HERO
   ---------------------------------------------------------- */

.content-block {
    margin-top: 34px;
}

.content-block > .hero-title {
    font-size:
        clamp(2.3rem, 4.1vw, 4rem);

    max-width:
        14ch;
}


/* ----------------------------------------------------------
   RESPONSIVE HERO
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-command,
    .scan-panel {
        min-height: auto;
    }

    .hero-command {
        min-height: 610px;
    }

    .scan-panel {
        width: 100%;
    }
}


@media (max-width: 720px) {

    .hero-command {
        min-height: auto;
    }

    .hero-command-content {
        width: auto;

        padding:
            38px 22px 34px;
    }

    .hero-command-visual {
        width: 72%;
        opacity: .24;
    }

    .hero-v2-title {
        font-size:
            clamp(2.7rem, 12.8vw, 4.1rem);

        max-width:
            11ch;
    }

    .hero-v2-copy {
        font-size: .95rem;
    }

    .hero-decision-item small {
        font-size: .72rem;
    }

    .hero-trust-row {
        display: none;
    }

    .scan-panel {
        border-radius: 24px;
    }
}


/* ==========================================================
   VULNEXIA HOMEPAGE POLISH V2
   Navigation + positioning + rhythm
   ========================================================== */


/* ----------------------------------------------------------
   PREMIUM NAVIGATION
   ---------------------------------------------------------- */

.topbar {
    min-height: 68px;

    padding:
        10px 12px 10px 14px;

    border:
        1px solid rgba(255,255,255,.075);

    background:
        linear-gradient(
            180deg,
            rgba(9,13,20,.91),
            rgba(6,9,14,.88)
        );

    box-shadow:
        0 18px 55px rgba(0,0,0,.31),
        inset 0 1px rgba(255,255,255,.025);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.logo-shell {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(76,141,255,.13),
            transparent 56%
        ),
        rgba(255,255,255,.018);

    border:
        1px solid rgba(112,167,255,.09);
}

.logo-shell img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.brand-title {
    margin: 0;

    font-size:
        1.42rem;

    line-height:
        1;

    letter-spacing:
        -.055em;
}

.brand-parent {
    margin-top: 4px;

    color:
        #788596;

    font-size:
        .59rem;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.brand-subtext {
    margin-top: 3px;

    font-size:
        .63rem;

    color:
        #4f5c6c;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.nav-actions .btn {
    min-height: 38px;

    padding:
        0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius:
        11px;

    font-size:
        .72rem;

    font-weight:
        700;
}

.nav-actions .btn-dark {
    background:
        rgba(255,255,255,.026);

    border:
        1px solid rgba(255,255,255,.06);
}

.nav-actions .btn-dark:hover {
    background:
        rgba(255,255,255,.055);

    border-color:
        rgba(255,255,255,.11);
}

.nav-actions .btn-light-logout {
    background:
        #edf3fb;

    color:
        #09101a;

    border-color:
        rgba(255,255,255,.72);
}

.nav-actions .btn-light-logout:hover {
    background:
        #ffffff;
}


/* ----------------------------------------------------------
   DECISION POSITIONING BAND
   ---------------------------------------------------------- */

.decision-positioning-band {
    margin-top: 24px;
    margin-bottom: 20px;

    padding:
        26px 28px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, .7fr);

    align-items: center;

    gap: 32px;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius:
        22px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(76,141,255,.075),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(12,17,25,.88),
            rgba(7,10,15,.90)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.20);
}

.decision-positioning-copy h2 {
    margin:
        8px 0 11px;

    max-width:
        26ch;

    font-family:
        'Sora',
        'Inter',
        sans-serif;

    font-size:
        clamp(1.65rem, 2.5vw, 2.55rem);

    font-weight:
        700;

    line-height:
        1.06;

    letter-spacing:
        -.05em;

    color:
        #f6f8fb;
}

.decision-positioning-copy h2 span {
    color:
        #8fb6ff;
}

.decision-positioning-copy p {
    margin: 0;

    max-width:
        72ch;

    color:
        #8290a2;

    font-size:
        .88rem;

    line-height:
        1.65;
}

.decision-positioning-signals {
    display: grid;
    gap: 7px;
}

.decision-positioning-signals span {
    position: relative;

    padding:
        10px 12px 10px 30px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.022);

    color:
        #a7b3c2;

    font-size:
        .73rem;

    font-weight:
        650;
}

.decision-positioning-signals span::before {
    content: "";

    position: absolute;

    left: 12px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        #5ce1e6;

    box-shadow:
        0 0 10px rgba(92,225,230,.48);
}


/* ----------------------------------------------------------
   SECTION RHYTHM
   ---------------------------------------------------------- */

.stats-grid {
    margin-top:
        18px;
}

.feature-grid {
    margin-top:
        14px;
}

.section-head {
    margin-top:
        72px;

    margin-bottom:
        20px;
}

.compare-grid,
.pricing-grid,
.ecosystem-grid {
    margin-top:
        0;
}


/* ----------------------------------------------------------
   CLEANER CARD HIERARCHY
   ---------------------------------------------------------- */

.stat-card {
    min-height: 126px;
}

.stat-value {
    margin-top:
        4px;
}

.feature-card,
.compare-card,
.pricing-card,
.ecosystem-card {
    border-color:
        rgba(255,255,255,.07);
}


/* ----------------------------------------------------------
   RESPONSIVE POLISH
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .brand-subtext {
        display: none;
    }

    .decision-positioning-band {
        grid-template-columns:
            1fr;
    }

    .decision-positioning-signals {
        grid-template-columns:
            1fr 1fr;
    }
}


@media (max-width: 640px) {

    .topbar {
        min-height: 60px;
    }

    .brand-parent {
        display: none;
    }

    .nav-actions {
        gap: 4px;
    }

    .nav-actions .btn {
        padding:
            0 10px;

        font-size:
            .66rem;
    }

    .decision-positioning-band {
        padding:
            21px 18px;
    }

    .decision-positioning-signals {
        grid-template-columns:
            1fr;
    }
}