:root {
    --brand: #9a82ff;
    --brand-dark: #8065f4;
    --brand-soft: #2b2346;
    --accent: #dcff4f;
    --ink: #f4f1fb;
    --muted: #aaa3b9;
    --surface-soft: #171321;
    --line: #342c44;
    color-scheme: dark;
}

html,
body {
    background: #0e0a16;
}

body {
    color: var(--ink);
}

.site-header {
    background: rgba(14, 10, 22, .9) !important;
}

.site-header.is-scrolled {
    border-color: var(--line) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .34) !important;
}

.mega-menu,
.mobile-panel {
    background: rgba(18, 13, 29, .985) !important;
    border-color: var(--line) !important;
}

.mega-menu {
    box-shadow: 0 28px 60px rgba(0, 0, 0, .4) !important;
}

.mega-link:hover,
.mobile-toggle {
    background: #201a2e !important;
}

.mega-icon,
.capability-icon,
.module-icon,
.flow-node > span,
.journey-steps article > span {
    background: var(--brand-soft) !important;
}

.brand-symbol {
    padding: 3px;
    background: #f7f4ff;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(154, 130, 255, .2), 0 6px 18px rgba(0, 0, 0, .22);
}

.button-ghost {
    color: var(--ink) !important;
    background: #171321 !important;
    border-color: #403653 !important;
}

.button-secondary {
    color: #c2b4ff !important;
    background: #171321 !important;
    border-color: #725be0 !important;
}

.hero {
    background:
        radial-gradient(circle at 78% 30%, rgba(107, 76, 245, .18), transparent 34%),
        linear-gradient(180deg, #0e0a16 0%, #120d1e 68%, #0e0a16 100%) !important;
}

.announcement {
    color: var(--ink) !important;
    background: #181222 !important;
    border-color: #3b3150 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25) !important;
}

.dashboard-card,
.automation-window,
.flow-node,
.floating-card {
    color: var(--ink) !important;
    background: #181321 !important;
    border-color: #3b3150 !important;
}

.dashboard-card {
    box-shadow: 0 40px 100px rgba(0, 0, 0, .46), 0 0 0 1px rgba(154, 130, 255, .08) !important;
}

.dash-topbar,
.window-top,
.run-status {
    border-color: #352d46 !important;
}

.dash-search,
.dash-body aside,
.metric-row > div {
    background: #201a2d !important;
    border-color: #382f49 !important;
}

.dash-content {
    background: #181321 !important;
}

.dash-heading button,
.chart-card {
    color: var(--muted) !important;
    background: #1d1728 !important;
    border-color: #3b3150 !important;
}

.chart-card .grid-line {
    stroke: #332a45 !important;
}

.automation > span,
.flow-node > span {
    background: #2b2346 !important;
}

.platform,
.proof,
.contact {
    background: #0e0a16 !important;
}

.capability-card {
    background: #171321 !important;
    border-color: #2c2539 !important;
}

.capability-card:hover {
    background: #1d1729 !important;
    border-color: #4a3c63 !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .3) !important;
}

.catalog,
.story-dark {
    background: #100b1a !important;
}

.module-card {
    color: var(--ink) !important;
    background: #191422 !important;
    border-color: #362d47 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}

.module-card.featured {
    border-color: var(--accent) !important;
    box-shadow: 0 20px 55px rgba(220, 255, 79, .08) !important;
}

.module-card li,
.module-card > p,
.module-price small {
    color: var(--muted) !important;
}

.story,
.journey,
.about {
    background: #12101a !important;
}

.flow-canvas {
    background-color: #16111f !important;
    background-image: radial-gradient(#3c3150 1px, transparent 1px) !important;
}

.flow-node,
.automation-window {
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38) !important;
}

.proof-heading,
.metric-grid,
.journey-steps article {
    border-color: var(--line) !important;
}

.metric {
    border-color: var(--line) !important;
}

.about-card {
    background: linear-gradient(135deg, #1d1530, #2d1a59 60%, #3d237b) !important;
    border: 1px solid #4a376d;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .3) !important;
}

.contact-card {
    background:
        radial-gradient(circle at 95% 0%, rgba(220, 255, 79, .09), transparent 30%),
        linear-gradient(120deg, #191226, #15101e 58%, #171d17) !important;
    border-color: #3c3150 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
}

.site-footer {
    background: #09060f !important;
}

.app-loading {
    background: #0e0a16;
}

@media (max-width: 980px) {
    .mobile-panel {
        box-shadow: 0 20px 45px rgba(0, 0, 0, .36);
    }
}