/* ==========================================================================
   D2C GAME — CORE UI SYSTEM
   ========================================================================== */

:root {
    --d2c-purple: #6d2cff;
    --d2c-purple-hover: #5d20e8;
    --d2c-purple-soft: #f1ebff;

    --d2c-black: #07090d;
    --d2c-dark: #050817;
    --d2c-dark-2: #0a0d18;

    --d2c-white: #ffffff;
    --d2c-page: #f7f8fc;

    --d2c-text: #111827;
    --d2c-muted: #667085;
    --d2c-dark-copy: #c5ccdc;

    --d2c-border: #e2e6ed;

    --d2c-font:
        Inter,
        "Helvetica Neue",
        Arial,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --d2c-max: 1280px;

    --d2c-radius-sm: 8px;
    --d2c-radius: 14px;
    --d2c-radius-lg: 18px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
    font-family: var(--d2c-font);
}

body {
    margin: 0;
    color: var(--d2c-text);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 850;
    letter-spacing: -.045em;
}

h1 {
    font-size: clamp(48px, 5vw, 68px);
    line-height: .98;
}

h2 {
    font-size: clamp(38px, 3.6vw, 52px);
    line-height: 1.02;
}

h3 {
    font-size: 22px;
    line-height: 1.15;
}

p {
    line-height: 1.65;
}

[data-d2c-theme="dark"] {
    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(109, 44, 255, .23),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            var(--d2c-dark),
            var(--d2c-dark-2)
        );

    color: var(--d2c-white);
}

[data-d2c-theme="light"] {
    background: var(--d2c-page);
    color: var(--d2c-text);
}

.d2c-accent {
    color: var(--d2c-purple);
}

[data-d2c-theme="dark"] .d2c-accent {
    color: #9664ff;
}

.d2c-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 52px;

    padding:
        0
        22px;

    border:
        1px solid
        var(--d2c-purple);

    border-radius:
        var(--d2c-radius-sm);

    background:
        var(--d2c-purple);

    color:
        var(--d2c-white);

    font-size: 15px;
    line-height: 1;

    font-weight: 800;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

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

.d2c-primary-button:hover {
    background:
        var(--d2c-purple-hover);

    border-color:
        var(--d2c-purple-hover);

    transform:
        translateY(-1px);
}

/* HEADER */

.d2c-site-header {
    position: sticky;
    z-index: 100;
    top: 0;

    width: 100%;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .08);

    background:
        rgba(5, 8, 23, .96);

    color: #ffffff;

    backdrop-filter: blur(10px);
}

.d2c-header-shell {
    display: flex;
    align-items: center;

    width:
        min(
            var(--d2c-max),
            calc(100% - 80px)
        );

    min-height: 80px;

    margin:
        0 auto;

    gap: 34px;
}

.d2c-brand {
    display: inline-flex;

    flex: 0 0 auto;
    flex-direction: column;

    line-height: 1;

    text-decoration: none;
}

.d2c-brand strong {
    color: #ffffff;

    font-size: 22px;

    font-weight: 900;

    letter-spacing: -.045em;
}

.d2c-brand strong span {
    color: #8f5cff;
}

.d2c-brand small {
    margin-top: 5px;

    color: #b8bfd0;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .14em;
}

.d2c-main-nav {
    display: flex;
    align-items: center;

    gap: 26px;

    margin-left: auto;
}

.d2c-main-nav a {
    color: #d8dce7;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}

.d2c-main-nav a:hover {
    color: #ffffff;
}

.d2c-header-cta {
    min-height: 44px;

    padding:
        0 16px;

    font-size: 12px;
}

/* FOOTER */

.d2c-site-footer {
    padding:
        62px 0
        26px;

    background:
        var(--d2c-dark);

    color:
        #ffffff;
}

.d2c-footer-shell {
    width:
        min(
            var(--d2c-max),
            calc(100% - 80px)
        );

    margin:
        0 auto;
}

.d2c-footer-grid {
    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr;

    gap: 54px;
}

.d2c-footer-grid h4 {
    margin-bottom: 17px;

    color: #ffffff;

    font-size: 15px;

    letter-spacing: 0;
}

.d2c-footer-grid > div > a:not(.d2c-brand) {
    display: block;

    margin: 9px 0;

    color: #b9c0d0;

    font-size: 14px;

    text-decoration: none;
}

.d2c-footer-grid > div > a:hover {
    color: #ffffff;
}

.d2c-footer-tagline {
    margin-top: 20px;

    color: #b9c0d0;

    font-size: 14px;
}

.d2c-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 42px;

    padding-top: 23px;

    border-top:
        1px solid
        rgba(255, 255, 255, .12);

    color: #aeb6c8;

    font-size: 12px;
}

.d2c-footer-bottom div {
    display: flex;

    gap: 20px;
}

.d2c-footer-bottom a {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 900px) {

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 34px;
    }

    .d2c-header-shell,
    .d2c-footer-shell {
        width: calc(100% - 40px);
    }

    .d2c-main-nav {
        display: none;
    }

    .d2c-header-cta {
        margin-left: auto;
    }

    .d2c-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .d2c-footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {

    body {
        font-size: 15px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 20px;
    }

    .d2c-header-shell {
        min-height: 70px;
    }

    .d2c-header-cta {
        display: none;
    }

    .d2c-primary-button {
        min-height: 50px;

        font-size: 14px;
    }

    .d2c-footer-grid {
        grid-template-columns: 1fr;
    }

    .d2c-footer-grid > div:first-child {
        grid-column: auto;
    }

    .d2c-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}