:root {
    --vault-bg: #070b14;
    --vault-app: #f4f7fb;
    --vault-panel: rgba(13, 20, 35, 0.82);
    --vault-panel-strong: rgba(10, 16, 29, 0.96);
    --vault-border: rgba(94, 242, 184, 0.24);
    --vault-green: #5ef2b8;
    --vault-blue: #316bff;
    --vault-cyan: #42d8ff;
    --vault-gold: #ffcc66;
    --vault-text: #f4f7ff;
    --vault-muted: #9ba9bd;
    --dexe-ink: #09111f;
    --dexe-mint: #5ef2b8;
    --dexe-blue: #316bff;
}

.dexeness-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    letter-spacing: 0;
    text-transform: lowercase;
}

.dexeness-logo {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.navbar-brand.dexeness-lockup {
    color: #fff;
    font-size: 1.22rem;
    font-weight: 800;
}

.dexeness-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: lowercase;
}

.dexeness-mobile-brand img {
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
}

.sv-logout-form {
    margin-top: auto;
}

.sv-logout-form .sv-logout {
    width: 100%;
    border: 0;
    text-align: left;
}

.sv-mobile-actions form {
    margin: 0;
}

.landing-page {
    color: #f4f7ff;
    background:
        linear-gradient(rgba(94, 242, 184, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 107, 255, 0.045) 1px, transparent 1px),
        linear-gradient(135deg, #070b14 0%, #0a1422 58%, #07191a 100%);
    background-size: 56px 56px, 56px 56px, auto;
}

.landing-page::before {
    background:
        linear-gradient(118deg, transparent 0 53%, rgba(49, 107, 255, 0.1) 53.2% 63%, transparent 63.2%),
        linear-gradient(62deg, transparent 0 64%, rgba(94, 242, 184, 0.1) 64.2% 72%, transparent 72.2%);
    opacity: 0.9;
}

.landing-page .vault-nav {
    background: rgba(7, 11, 20, 0.76);
    border-bottom-color: rgba(151, 170, 199, 0.16);
}

.landing-page .navbar-brand,
.landing-page .nav-link {
    color: #f4f7ff !important;
}

.landing-page .hero-section {
    min-height: calc(86vh - 72px);
    padding-top: 4rem;
}

.landing-page .hero-section h1,
.landing-page .section-heading h2,
.landing-page .glass-card h2,
.landing-page .glass-card h3 {
    color: #f4f7ff;
}

.landing-page .hero-section h1 {
    max-width: 780px;
    font-size: clamp(3rem, 6.2vw, 6.3rem);
    line-height: 0.96;
}

.landing-page .hero-copy,
.landing-page .feature-grid p,
.landing-page .text-muted {
    color: #a9b7ca !important;
}

.landing-page .hero-kicker,
.landing-page .section-heading span {
    color: var(--dexe-mint);
}

.hero-live-dot {
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.52rem;
    border-radius: 50%;
    background: var(--dexe-mint);
    box-shadow: 0 0 0 5px rgba(94, 242, 184, 0.11);
}

.landing-page .glass-card {
    color: #f4f7ff;
    border: 1px solid rgba(151, 170, 199, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
        rgba(10, 17, 31, 0.84);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.landing-page .hero-card {
    border-top: 3px solid var(--dexe-mint);
}

.landing-page .hero-card::after {
    content: "DX";
    position: absolute;
    right: 1rem;
    bottom: -1.8rem;
    color: rgba(49, 107, 255, 0.1);
    font: 800 8rem/1 Inter, sans-serif;
    pointer-events: none;
}

.landing-page .metric-xl,
.landing-page .counter {
    color: #fff;
}

.landing-page .landing-secondary-btn {
    color: #f4f7ff !important;
    border-color: rgba(244, 247, 255, 0.35) !important;
}

.btn-vault,
.sv-btn-green {
    color: #06120e;
    border-color: var(--dexe-mint);
    background: var(--dexe-mint);
    box-shadow: 0 12px 28px rgba(94, 242, 184, 0.2);
}

.btn-vault:hover,
.btn-vault:focus,
.sv-btn-green:hover,
.sv-btn-green:focus {
    color: #fff;
    border-color: var(--dexe-blue);
    background: var(--dexe-blue);
}

.sv-light-page {
    background:
        linear-gradient(rgba(9, 17, 31, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 107, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
    background-size: 52px 52px, 52px 52px, auto;
}

.sv-sidebar {
    border-right-color: #dce4ef;
    background: rgba(250, 252, 255, 0.9);
}

.sv-brand.dexeness-lockup {
    color: var(--dexe-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.sv-brand.dexeness-lockup .dexeness-logo {
    width: 2rem;
    height: 2rem;
}

.sv-user-card,
.sv-card,
.sv-stat-card,
.sv-stake-card,
.sv-withdraw-item,
.stake-command-card {
    border-radius: 8px;
}

.sv-nav a.active,
.investment-app-hero,
.sv-stat-card.blue,
.sv-withdraw-blue {
    background: linear-gradient(135deg, #0a1422, #133263 70%, #0f725c);
}

.investment-app-hero {
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(9, 17, 31, 0.2);
}

.sv-stat-icon.green,
.sv-pill-active {
    color: #08724f;
    background: #d9faec;
}

.auth-page,
.sv-info-page {
    background:
        linear-gradient(rgba(49, 107, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 242, 184, 0.05) 1px, transparent 1px),
        linear-gradient(145deg, #f8fbff 0%, #edf3f8 100%);
    background-size: 52px 52px, 52px 52px, auto;
}

.auth-page .auth-card,
.sv-info-card {
    border-radius: 8px;
    border-top: 3px solid var(--dexe-blue);
}

@media (max-width: 760px) {
    body.landing-page {
        overflow-x: hidden;
    }

    .navbar-brand.dexeness-lockup .dexeness-logo {
        width: 1.85rem;
        height: 1.85rem;
    }

    .auth-page .auth-card {
        width: calc(100vw - 44px) !important;
        max-width: calc(100vw - 44px) !important;
    }

    .mobile-home-auth {
        box-sizing: border-box;
        right: auto;
        left: 12px;
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }

    .landing-page .hero-section {
        min-height: auto;
        padding-top: 5.5rem;
    }

    .landing-page .hero-section .container {
        box-sizing: border-box;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin-right: 12px;
        margin-left: 12px;
        padding-right: 0;
        padding-left: 0;
    }

    .landing-page .hero-section .row {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .landing-page .hero-section [class*="col-"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .landing-page .hero-card {
        width: 100%;
        min-width: 0;
    }

    .landing-page .hero-card .metric-xl {
        font-size: 3rem;
    }

    .landing-page .hero-section h1 {
        font-size: 3.1rem;
        line-height: 0.98;
    }

    .sv-sidebar {
        border: 1px solid rgba(151, 170, 199, 0.24);
        border-radius: 8px;
        background: rgba(9, 17, 31, 0.94);
    }
}