/* ============================================================
   THE CELESTIAL WEAVE
   MASTER WEBSITE DESIGN SYSTEM
   Version 1.0
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

    /* Midnight foundation */
    --cw-midnight-950: #030611;
    --cw-midnight-900: #070c1c;
    --cw-midnight-850: #0a1024;
    --cw-midnight-800: #0d1530;
    --cw-midnight-700: #131f42;

    /* Celestial silver */
    --cw-silver-100: #f4f7fb;
    --cw-silver-200: #dce3ec;
    --cw-silver-300: #bcc8d6;
    --cw-silver-400: #94a4b8;
    --cw-silver-500: #718198;

    /* Sapphire */
    --cw-sapphire-300: #78b8ff;
    --cw-sapphire-400: #4298ff;
    --cw-sapphire-500: #1673e6;
    --cw-sapphire-600: #0d55b7;
    --cw-sapphire-700: #083d89;

    /* Luminous ivory */
    --cw-ivory: #fffdf4;

    /* Semantic */
    --cw-success: #79ddb0;
    --cw-warning: #f3cf77;
    --cw-danger: #ff7c8a;

    /* Glass surfaces */
    --cw-glass:
        rgba(10, 18, 40, 0.78);

    --cw-glass-light:
        rgba(22, 36, 72, 0.58);

    --cw-glass-dark:
        rgba(3, 7, 18, 0.90);

    /* Borders */
    --cw-border:
        rgba(188, 200, 214, 0.24);

    --cw-border-bright:
        rgba(120, 184, 255, 0.55);

    /* Text */
    --cw-text:
        #dce3ec;

    --cw-text-muted:
        #94a4b8;

    --cw-heading:
        #fffdf4;

    /* Shadows */
    --cw-shadow:
        0 18px 60px rgba(0, 0, 0, 0.45);

    --cw-glow:
        0 0 24px rgba(66, 152, 255, 0.22);

    /* Layout */
    --cw-max-width:
        1440px;

    --cw-header-height:
        76px;

    --cw-radius-sm:
        8px;

    --cw-radius-md:
        14px;

    --cw-radius-lg:
        22px;

    /* Transitions */
    --cw-transition:
        180ms ease;
}


/* ============================================================
   2. RESET
   ============================================================ */

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


html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    scroll-behavior: smooth;
}


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

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(22, 115, 230, 0.20),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(66, 152, 255, 0.08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            var(--cw-midnight-900),
            var(--cw-midnight-950)
        );

    color:
        var(--cw-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;
}


img {
    max-width: 100%;
    height: auto;
}


a {
    color:
        var(--cw-sapphire-300);

    text-decoration:
        none;

    transition:
        color var(--cw-transition);
}


a:hover {
    color:
        var(--cw-ivory);
}


/* ============================================================
   3. CELESTIAL BACKGROUND EFFECT
   ============================================================ */

.cw-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}


.cw-page::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.55) 0,
            rgba(255, 255, 255, 0.55) 1px,
            transparent 1.5px
        );

    background-size:
        82px 82px;

    opacity:
        0.13;

    z-index:
        -1;
}


/* ============================================================
   4. GLOBAL CONTAINER
   ============================================================ */

.cw-container {
    width:
        min(
            calc(100% - 40px),
            var(--cw-max-width)
        );

    margin:
        0 auto;
}


/* ============================================================
   5. HEADER
   ============================================================ */

.cw-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    min-height:
        var(--cw-header-height);

    background:
        rgba(3, 6, 17, 0.88);

    border-bottom:
        1px solid var(--cw-border);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.cw-header-inner {
    min-height:
        var(--cw-header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


/* ============================================================
   6. BRAND
   ============================================================ */

.cw-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-width:
        max-content;
}


.cw-brand-mark {
    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--cw-border-bright);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(66, 152, 255, 0.25),
            rgba(7, 12, 28, 0.95)
        );

    color:
        var(--cw-ivory);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    letter-spacing:
        1px;

    box-shadow:
        var(--cw-glow);
}


.cw-brand-text {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.1;
}


.cw-brand-title {
    color:
        var(--cw-heading);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.cw-brand-subtitle {
    margin-top:
        5px;

    color:
        var(--cw-silver-400);

    font-size:
        10px;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;
}


/* ============================================================
   7. NAVIGATION
   ============================================================ */

.cw-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;
}


.cw-nav-link {
    padding:
        10px 13px;

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

    color:
        var(--cw-silver-300);

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    transition:
        background var(--cw-transition),
        color var(--cw-transition),
        box-shadow var(--cw-transition);
}


.cw-nav-link:hover,
.cw-nav-link.is-active {
    background:
        rgba(66, 152, 255, 0.10);

    color:
        var(--cw-ivory);

    box-shadow:
        inset 0 -1px 0
        var(--cw-sapphire-400);
}


/* ============================================================
   8. HEADER ACTIONS
   ============================================================ */

.cw-header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


/* ============================================================
   9. BUTTONS
   ============================================================ */

.cw-button {
    appearance:
        none;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        10px 18px;

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

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

    background:
        var(--cw-glass-light);

    color:
        var(--cw-silver-100);

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    cursor:
        pointer;

    transition:
        transform var(--cw-transition),
        border-color var(--cw-transition),
        background var(--cw-transition),
        box-shadow var(--cw-transition);
}


.cw-button:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--cw-border-bright);

    background:
        rgba(66, 152, 255, 0.12);

    box-shadow:
        var(--cw-glow);
}


.cw-button-primary {
    border-color:
        rgba(120, 184, 255, 0.72);

    background:
        linear-gradient(
            135deg,
            var(--cw-sapphire-600),
            var(--cw-sapphire-500)
        );

    color:
        #ffffff;
}


.cw-button-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--cw-sapphire-500),
            var(--cw-sapphire-400)
        );
}


/* ============================================================
   10. MAIN CONTENT
   ============================================================ */

.cw-main {
    min-height:
        calc(
            100vh
            -
            var(--cw-header-height)
        );
}


/* ============================================================
   11. HERO
   ============================================================ */

.cw-hero {
    position:
        relative;

    min-height:
        620px;

    display:
        flex;

    align-items:
        center;

    padding:
        90px 0;
}


.cw-hero-content {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            760px,
            100%
        );
}


.cw-eyebrow {
    margin-bottom:
        16px;

    color:
        var(--cw-sapphire-300);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.28em;

    text-transform:
        uppercase;
}


.cw-hero-title {
    margin:
        0;

    color:
        var(--cw-heading);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            46px,
            7vw,
            88px
        );

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -0.03em;

    text-shadow:
        0 0 35px
        rgba(66, 152, 255, 0.16);
}


.cw-hero-description {
    max-width:
        680px;

    margin:
        28px 0 0;

    color:
        var(--cw-silver-300);

    font-size:
        18px;

    line-height:
        1.8;
}


.cw-hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        34px;
}


/* ============================================================
   12. PANELS / CARDS
   ============================================================ */

.cw-panel {
    position:
        relative;

    padding:
        28px;

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

    border-radius:
        var(--cw-radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(19, 31, 66, 0.66),
            rgba(7, 12, 28, 0.82)
        );

    box-shadow:
        var(--cw-shadow);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.cw-panel::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        22px;

    right:
        22px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cw-sapphire-300),
            transparent
        );

    opacity:
        0.55;
}


.cw-panel-title {
    margin:
        0 0 10px;

    color:
        var(--cw-heading);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    font-weight:
        400;
}


.cw-panel-text {
    margin:
        0;

    color:
        var(--cw-text-muted);
}


/* ============================================================
   13. GRID
   ============================================================ */

.cw-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        20px;
}


/* ============================================================
   14. SECTION
   ============================================================ */

.cw-section {
    padding:
        72px 0;
}


.cw-section-heading {
    margin-bottom:
        34px;
}


.cw-section-title {
    margin:
        0;

    color:
        var(--cw-heading);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    font-weight:
        400;
}


.cw-section-description {
    max-width:
        720px;

    margin:
        12px 0 0;

    color:
        var(--cw-text-muted);
}


/* ============================================================
   15. FORMS
   ============================================================ */

.cw-form-group {
    margin-bottom:
        18px;
}


.cw-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--cw-silver-300);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.cw-input {
    width:
        100%;

    min-height:
        46px;

    padding:
        10px 13px;

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

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

    outline:
        none;

    background:
        rgba(3, 7, 18, 0.76);

    color:
        var(--cw-silver-100);

    font:
        inherit;

    transition:
        border-color var(--cw-transition),
        box-shadow var(--cw-transition);
}


.cw-input:focus {
    border-color:
        var(--cw-sapphire-400);

    box-shadow:
        0 0 0 3px
        rgba(66, 152, 255, 0.10);
}


/* ============================================================
   16. STATUS
   ============================================================ */

.cw-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--cw-text-muted);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.cw-status-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--cw-success);

    box-shadow:
        0 0 12px
        rgba(121, 221, 176, 0.65);
}


/* ============================================================
   17. FOOTER
   ============================================================ */

.cw-footer {
    margin-top:
        70px;

    padding:
        34px 0;

    border-top:
        1px solid var(--cw-border);

    background:
        rgba(3, 6, 17, 0.72);
}


.cw-footer-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--cw-text-muted);

    font-size:
        12px;
}


.cw-footer-brand {
    color:
        var(--cw-silver-300);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ============================================================
   18. ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline:
        2px solid
        var(--cw-sapphire-300);

    outline-offset:
        3px;
}


/* ============================================================
   19. RESPONSIVE
   ============================================================ */

@media (
    max-width: 1050px
) {

    .cw-nav {
        display:
            none;
    }


    .cw-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (
    max-width: 700px
) {

    .cw-container {
        width:
            min(
                calc(100% - 28px),
                var(--cw-max-width)
            );
    }


    .cw-brand-subtitle {
        display:
            none;
    }


    .cw-header-actions
    .cw-button:not(
        .cw-button-primary
    ) {
        display:
            none;
    }


    .cw-hero {
        min-height:
            520px;

        padding:
            70px 0;
    }


    .cw-hero-description {
        font-size:
            16px;
    }


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


    .cw-section {
        padding:
            52px 0;
    }


    .cw-footer-inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}