:root {

    --bg: #070b14;
    --bg-secondary: rgba(255, 255, 255, 0.05);

    --card-bg: rgba(255, 255, 255, 0.06);

    --text: #ffffff;
    --text-secondary: #dfe6e9;
    --text-muted: #b2bec3;

    --border: rgba(255, 255, 255, 0.08);

    --primary: #6c5ce7;
    --secondary: #00cec9;

    --shadow:
        0 20px 50px rgba(0, 0, 0, .25);

    --blur1: #6c5ce7;
    --blur2: #00cec9;

    --glass-bg:
        linear-gradient(135deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .03));

    --glass-bg-strong:
        linear-gradient(135deg,
            rgba(255, 255, 255, .12),
            rgba(255, 255, 255, .04));

    --grid-color:
        rgba(255, 255, 255, .04);

    --hero-title-1:
        #ffffff;

    --hero-title-2:
        #b2bec3;
}

[data-theme="light"] {

    --bg: #f4f7fb;

    --bg-secondary: rgba(255, 255, 255, .7);

    --card-bg: rgba(255, 255, 255, .8);

    --text: #111827;

    --text-secondary: #374151;

    --text-muted: #6b7280;

    --border: rgba(0, 0, 0, .08);

    --primary: #6c5ce7;

    --secondary: #00cec9;

    --shadow:
        0 20px 50px rgba(0, 0, 0, .08);

    --blur1: #c4b5fd;

    --blur2: #99f6e4;

    --glass-bg:
        linear-gradient(135deg,
            rgba(255, 255, 255, .88),
            rgba(255, 255, 255, .62));

    --glass-bg-strong:
        linear-gradient(135deg,
            rgba(255, 255, 255, .95),
            rgba(255, 255, 255, .72));

    --grid-color:
        rgba(0, 0, 0, .05);

    --hero-title-1:
        #111827;

    --hero-title-2:
        #4b5563;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background: var(--bg);

    color: var(--text);

    font-family: sans-serif;

    overflow-x: hidden;

    transition:
        background .4s ease,
        color .4s ease;
}

section {
    padding: 100px 8%;
}

.blur {

    position: fixed;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(120px);

    z-index: -1;
}

.blur1 {

    background: var(--blur1);

    top: -100px;
    left: -100px;
}

.blur2 {

    background: var(--blur2);

    right: -100px;
    bottom: -100px;
}

.section-title {

    font-size: 35px;

    margin-bottom: 40px;

    font-weight: bold;

    color: var(--text);
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

* {
    max-width: 100%;
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}



body.modal-open .floating-nav,
body.modal-open .top-actions {

    opacity: 0;

    pointer-events: none;

    transform: translateY(30px);
}



.floating-nav,
.top-actions {

    transition:
        opacity .35s ease,
        transform .35s ease;
}