/*==================================================
                RESET
==================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;

}

body{

    min-height:100vh;

}


/*==================================================
                ROOT VARIABLES
==================================================*/

:root{

    /* Colors */

    --bg:#020611;
    --bg2:#061326;

    --white:#ffffff;

    --text:#d7e7ff;

    --muted:#9db5d8;

    --blue:#5bb8ff;

    --blue-light:#7fd2ff;

    --blue-dark:#167bff;

    --cyan:#7cf7ff;

    --glass:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.15);

    /* Shadows */

    --shadow-blue:
    0 0 40px rgba(91,184,255,.25);

    --shadow-glow:
    0 0 120px rgba(91,184,255,.18);

    /* Radius */

    --radius-sm:12px;

    --radius-md:18px;

    --radius-lg:28px;

    --radius-xl:40px;

    /* Layout */

    --container:1250px;

    --section-padding:120px;

    /* Animation */

    --speed-fast:.25s;

    --speed:.45s;

    --speed-slow:1s;

}


/*==================================================
                BASE
==================================================*/

html,
body{

    width:100%;
    overflow-x:hidden;

    background:var(--bg);

    color:var(--white);

    font-family:"Space Grotesk",sans-serif;

}


/*==================================================
                BODY
==================================================*/

body{

    position:relative;

    background:

    radial-gradient(
    circle at top,
    #071932 0%,
    #04101f 30%,
    #020611 70%,
    #01040a 100%
    );

    line-height:1.6;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}


/*==================================================
                LINKS
==================================================*/

a{

    color:inherit;

    text-decoration:none;

}


/*==================================================
                IMAGES
==================================================*/

img{

    display:block;

    max-width:100%;

    user-select:none;

    -webkit-user-drag:none;

}


/*==================================================
                BUTTONS
==================================================*/

button{

    font:inherit;

    border:none;

    background:none;

    cursor:pointer;

}


/*==================================================
                LISTS
==================================================*/

ul,
ol{

    list-style:none;

}


/*==================================================
                SELECTION
==================================================*/

::selection{

    background:rgba(91,184,255,.35);

    color:#fff;

}


/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#030814;

}

::-webkit-scrollbar-thumb{

    background:rgba(91,184,255,.45);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:rgba(91,184,255,.8);

}
/*==================================================
                BACKGROUND SYSTEM
==================================================*/

#scene{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}


/*==================================================
                GRADIENT GLOW
==================================================*/

#gradient-glow{

    position:absolute;

    inset:-25%;

    background:

    radial-gradient(
        circle at 50% 35%,
        rgba(91,184,255,.22),
        transparent 55%
    ),

    radial-gradient(
        circle at 20% 80%,
        rgba(0,140,255,.12),
        transparent 45%
    ),

    radial-gradient(
        circle at 80% 20%,
        rgba(0,255,255,.08),
        transparent 40%
    );

    filter:blur(90px);

    animation:
    glowMove 18s ease-in-out infinite alternate;

    will-change:transform;

}


/*==================================================
                NEBULA
==================================================*/

#nebula{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 25% 30%,
        rgba(0,180,255,.07),
        transparent 35%
    ),

    radial-gradient(
        circle at 75% 70%,
        rgba(120,0,255,.05),
        transparent 40%
    ),

    radial-gradient(
        circle at 55% 45%,
        rgba(255,255,255,.03),
        transparent 60%
    );

    filter:blur(60px);

    opacity:.9;

    will-change:transform;

}


/*==================================================
                SPACE FOG
==================================================*/

#space-fog{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.02),
        transparent 70%
    );

    mix-blend-mode:screen;

    opacity:.45;

}


/*==================================================
                STARS
==================================================*/

#stars{

    position:absolute;

    inset:0;

    overflow:hidden;

}


/*==================================================
                SHOOTING STARS
==================================================*/

#shooting-stars{

    position:absolute;

    inset:0;

    overflow:hidden;

}


/*==================================================
                DNA LAYER
==================================================*/

#dna-container{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:3;

    perspective:1400px;

}


#dna{

    width:min(42vw,520px);

    height:min(70vh,700px);

    opacity:.18;

    filter:
    drop-shadow(0 0 20px rgba(91,184,255,.4))
    drop-shadow(0 0 60px rgba(91,184,255,.2));

    transform-style:preserve-3d;

    will-change:transform;

    transition:transform .08s linear;

}

/*==================================================
                HERO LAYER
==================================================*/

#hero{

    position:relative;

    z-index:10;

}


/*==================================================
                BACKGROUND ANIMATION
==================================================*/

@keyframes glowMove{

    0%{

        transform:
        translate(-3%,-2%)
        scale(1);

    }

    50%{

        transform:
        translate(2%,3%)
        scale(1.08);

    }

    100%{

        transform:
        translate(-2%,2%)
        scale(1.02);

    }

}

/*==================================================
                    HERO SECTION
==================================================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:80px 30px;

}


.hero-content{

    width:min(100%,900px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    z-index:20;

}



/*==================================================
                        LOGO
==================================================*/

.logo{

    width:170px;

    height:auto;

    margin-bottom:28px;

    filter:
    drop-shadow(0 0 15px rgba(91,184,255,.25))
    drop-shadow(0 0 40px rgba(91,184,255,.15));

    animation:
    logoFloat 8s ease-in-out infinite;

    transform-style:preserve-3d;

    will-change:transform;

}



/*==================================================
                    EYEBROW TEXT
==================================================*/

.eyebrow{

    color:var(--blue-light);

    font-size:.9rem;

    letter-spacing:.45rem;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:24px;

    opacity:.9;

}



/*==================================================
                    MAIN TITLE
==================================================*/

.hero-title{

    font-size:clamp(3rem,8vw,6.5rem);

    font-weight:700;

    line-height:1;

    letter-spacing:-3px;

    color:var(--white);

    margin-bottom:20px;

    text-wrap:balance;

}



.hero-title span{

    display:block;

    margin-top:10px;

    background:

    linear-gradient(

    90deg,

    #ffffff,

    #8fd9ff,

    #5bb8ff,

    #ffffff

    );

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    animation:

    titleGradient 8s linear infinite;

}



/*==================================================
                    SUBTITLE
==================================================*/

.hero-subtitle{

    width:min(100%,760px);

    font-size:1.18rem;

    color:var(--muted);

    line-height:1.9;

    margin-bottom:50px;

}



/*==================================================
                    BUTTON AREA
==================================================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}



/*==================================================
                    ANIMATIONS
==================================================*/

@keyframes logoFloat{

    0%{

        transform:

        translateY(0px);

    }

    50%{

        transform:

        translateY(-12px);

    }

    100%{

        transform:

        translateY(0px);

    }

}



@keyframes titleGradient{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}
/*==================================================
                    PREMIUM BUTTONS
==================================================*/

.primary-btn{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    min-width:240px;

    height:64px;

    padding:0 42px;

    border-radius:999px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.14);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.03em;

    overflow:hidden;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;

    box-shadow:

    0 15px 45px rgba(0,0,0,.35),

    0 0 30px rgba(91,184,255,.12);

}



/*=====================================
        Glow Border
=====================================*/

.primary-btn::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    padding:2px;

    background:

    linear-gradient(
        120deg,
        rgba(91,184,255,.8),
        rgba(124,247,255,.35),
        rgba(91,184,255,.8)
    );

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:.55;

    transition:opacity .35s ease;

}



/*=====================================
        Animated Glow Sweep
=====================================*/

.primary-btn::after{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );

    transform:skewX(-25deg);

    transition:left .8s ease;

}



/*=====================================
        Hover
=====================================*/

.primary-btn:hover{

    transform:

    translateY(-6px)

    scale(1.03);

    border-color:

    rgba(124,247,255,.45);

    box-shadow:

    0 25px 60px rgba(0,0,0,.4),

    0 0 60px rgba(91,184,255,.3),

    0 0 120px rgba(91,184,255,.12);

}



.primary-btn:hover::after{

    left:170%;

}



.primary-btn:hover::before{

    opacity:1;

}



/*=====================================
        Active
=====================================*/

.primary-btn:active{

    transform:

    translateY(-2px)

    scale(.98);

}



/*=====================================
        Keyboard Focus
=====================================*/

.primary-btn:focus-visible{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(91,184,255,.35),

    0 0 50px rgba(91,184,255,.35);

}



/*==================================================
                SECONDARY BUTTON
==================================================*/

.secondary-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:180px;

    height:64px;

    padding:0 34px;

    border-radius:999px;

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

    color:var(--muted);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    transition:

    all .35s ease;

}



.secondary-btn:hover{

    color:#fff;

    border-color:rgba(91,184,255,.4);

    background:rgba(91,184,255,.08);

    transform:translateY(-5px);

}
/*==================================================
                    STARFIELD
==================================================*/

.star{

    position:absolute;

    border-radius:50%;

    background:#ffffff;

    pointer-events:none;

    will-change:transform, opacity;

    animation:twinkle ease-in-out infinite;

}



/*==================================================
                    STAR SIZES
==================================================*/

.star.s1{

    width:1px;
    height:1px;

    opacity:.45;

    box-shadow:
    0 0 4px rgba(255,255,255,.45);

}



.star.s2{

    width:2px;
    height:2px;

    opacity:.65;

    box-shadow:
    0 0 8px rgba(255,255,255,.7);

}



.star.s3{

    width:3px;
    height:3px;

    opacity:.9;

    box-shadow:

    0 0 12px rgba(255,255,255,.9),

    0 0 24px rgba(91,184,255,.35);

}



.star.s4{

    width:4px;
    height:4px;

    opacity:1;

    box-shadow:

    0 0 15px rgba(255,255,255,1),

    0 0 30px rgba(124,247,255,.45),

    0 0 60px rgba(91,184,255,.25);

}



/*==================================================
                STAR TWINKLE
==================================================*/

@keyframes twinkle{

    0%{

        opacity:.25;

    }

    20%{

        opacity:.8;

    }

    40%{

        opacity:.45;

    }

    60%{

        opacity:1;

    }

    80%{

        opacity:.7;

    }

    100%{

        opacity:.3;

    }

}


/*==================================================
                SHOOTING STAR
==================================================*/

.shooting-star{

    position:absolute;

    width:180px;

    height:2px;

    border-radius:999px;

    background:

    linear-gradient(

        90deg,

        rgba(255,255,255,0),

        rgba(255,255,255,.95),

        rgba(124,247,255,.7),

        rgba(91,184,255,0)

    );

    filter:

    drop-shadow(0 0 8px rgba(255,255,255,.9))

    drop-shadow(0 0 18px rgba(91,184,255,.45));

    transform:

    rotate(-35deg);

    pointer-events:none;

    opacity:0;

}



/*==================================================
            SHOOTING STAR TAIL
==================================================*/

.shooting-star::before{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:10px;

    height:10px;

    border-radius:50%;

    transform:translateY(-50%);

    background:#ffffff;

    box-shadow:

    0 0 12px #ffffff,

    0 0 24px rgba(91,184,255,.8),

    0 0 45px rgba(91,184,255,.45);

}



/*==================================================
        SHOOTING STAR ANIMATION
==================================================*/

@keyframes shootingStar{

    0%{

        opacity:0;

        transform:

        translate3d(0,0,0)

        rotate(-35deg)

        scale(.7);

    }

    10%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

        translate3d(-1400px,700px,0)

        rotate(-35deg)

        scale(1);

    }

}



/*==================================================
            STAR GLOW LAYER
==================================================*/

#stars::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle,

        rgba(91,184,255,.03),

        transparent 70%

    );

    mix-blend-mode:screen;

    pointer-events:none;

}
/*==================================================
            ENTRANCE TRANSITIONS
==================================================*/

.logo,
.eyebrow,
.hero-title,
.hero-subtitle,
.primary-btn{

    will-change:
    transform,
    opacity;

}
/*==================================================
            PERFORMANCE
==================================================*/

.mobile-device .star{

    animation-duration:8s !important;

}

.mobile-device #gradient-glow{

    filter:blur(60px);

}

.mobile-device #nebula{

    opacity:.55;

}

.reduce-motion *{

    animation:none !important;

    transition:none !important;

}