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

html{
    scroll-behavior:smooth;
}

body{

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

    background:
    radial-gradient(circle at top,#20123d 0%,#090B10 35%,#05070D 100%);

    color:#F5F7FA;

    overflow-x:hidden;

    line-height:1.7;

}

/* NAV */

nav{

    position:sticky;

    top:0;

    z-index:999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 8%;

    backdrop-filter:blur(14px);

    background:rgba(9,11,16,.70);

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

}

nav h2{

    color:#A855F7;

    letter-spacing:2px;

}

nav div{

    display:flex;

    gap:26px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

nav a:hover{

    color:#A855F7;

}

/* HERO */

.hero{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:100vh;

    padding:40px 20px;

    overflow:hidden;

}

/* Purple glow */

.hero::before{

content:"";

position:absolute;

width:900px;

height:900px;

right:-250px;

top:-300px;

border-radius:50%;

background:radial-gradient(circle,
rgba(168,85,247,.28),
transparent 70%);

filter:blur(50px);

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

}

/* Moon */

.moon{

position:absolute;

top:80px;

right:8%;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(circle at 35% 35%,
#ffffff,
#D5D8E6 70%);

box-shadow:

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

0 0 250px rgba(168,85,247,.18);

opacity:.95;

}

/* Stars */

.stars{

position:absolute;

inset:0;

background-image:

radial-gradient(white 1px,transparent 1px);

background-size:65px 65px;

opacity:.18;

animation:stars 90s linear infinite;

}

/* Content */

.hero-content{

position:relative;

z-index:2;

max-width:720px;

}

.tag{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:rgba(168,85,247,.12);

border:1px solid rgba(168,85,247,.35);

color:#D7C5FF;

margin-bottom:30px;

letter-spacing:1px;

font-size:.9rem;

}

.hero h1{

font-size:4.5rem;

line-height:1;

margin-bottom:22px;

font-weight:700;

}

.hero h1 span{

color:#A855F7;

}

.hero p{

color:#BCC7E7;

font-size:1.2rem;

margin-bottom:40px;

}

.buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.buttons a{

padding:16px 30px;

border-radius:14px;

font-weight:bold;

text-decoration:none;

transition:.35s;

}

.primary{

background:linear-gradient(135deg,#7C5CFF,#A855F7);

color:white;

box-shadow:0 15px 35px rgba(124,92,255,.35);

}

.primary:hover{

transform:translateY(-5px);

box-shadow:0 22px 45px rgba(124,92,255,.45);

}

.secondary{

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

color:white;

}

.secondary:hover{

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

border-color:#A855F7;

}

/* Sections */

section{

max-width:1100px;

margin:auto;

padding:110px 24px;

}

section h2{

font-size:2.3rem;

margin-bottom:30px;

}

/* Cards */

.card{

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

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

backdrop-filter:blur(18px);

padding:28px;

border-radius:22px;

margin-top:22px;

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

border-color:#A855F7;

box-shadow:0 25px 60px rgba(168,85,247,.12);

}

/* Footer */

footer{

padding:70px 20px;

text-align:center;

color:#7E859C;

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

}

/* Animations */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes stars{

from{

transform:translateY(0);

}

to{

transform:translateY(-300px);

}

}

/* Mobile */

@media(max-width:768px){

nav{

flex-direction:column;

gap:16px;

}

nav div{

flex-wrap:wrap;

justify-content:center;

}

.hero h1{

font-size:2.8rem;

}

.hero p{

font-size:1rem;

}

.moon{

width:140px;

height:140px;

right:-20px;

top:100px;

opacity:.45;

}

}
/* ==========================
   MISSION CONTROL LOADER
========================== */

#loader{

position:fixed;

inset:0;

background:#05070D;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:opacity .8s ease, visibility .8s ease;

}

#loader.hidden{

opacity:0;

visibility:hidden;

pointer-events:none;

}

.loader-content{

text-align:center;

max-width:320px;

padding:20px;

animation:fadeIn 1s ease;

}

.loader-logo{

font-size:64px;

margin-bottom:18px;

animation:float 3s ease-in-out infinite;

}

.loader-content h1{

font-size:2.3rem;

letter-spacing:6px;

margin-bottom:18px;

color:#A855F7;

}

.loader-content p{

font-size:1rem;

margin-bottom:20px;

color:#D7C5FF;

min-height:24px;

}

.loader-content span{

display:block;

margin-top:18px;

color:#8E95B8;

font-size:.9rem;

}

.loader-bar{

width:100%;

height:8px;

border-radius:999px;

overflow:hidden;

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

}

.loader-progress{

width:0%;

height:100%;

background:linear-gradient(90deg,#7C5CFF,#A855F7);

animation:loading 3s linear forwards;

}

@keyframes loading{

0%{width:0%;}

100%{width:100%;}

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}
/* ==========================
   TRANSMISSION COUNTDOWN
========================== */

.countdown-card{
    margin:40px auto;
    padding:30px;
    max-width:760px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(168,85,247,.20);
    border-radius:24px;
    backdrop-filter:blur(12px);
    box-shadow:0 0 35px rgba(168,85,247,.12);
}

#countdown{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin:28px 0;
}

.time-box{
    width:90px;
    padding:18px 12px;
    border-radius:18px;
    background:rgba(168,85,247,.08);
    border:1px solid rgba(168,85,247,.15);
    transition:.25s ease;
}

.time-box:hover{
    transform:translateY(-4px) scale(1.03);
    border-color:#A855F7;
    box-shadow:0 0 24px rgba(168,85,247,.35);
}

.time-box span{
    display:block;
    font-size:2.2rem;
    font-weight:700;
    color:#fff;
    text-shadow:
        0 0 8px rgba(168,85,247,.55),
        0 0 18px rgba(168,85,247,.35);
}

.time-box small{
    display:block;
    margin-top:6px;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.7;
}

#launch-status{
    margin-top:15px;
    line-height:1.6;
    opacity:.9;
}

@media(max-width:768px){

    .countdown-card{
        padding:24px;
    }

    .time-box{
        width:75px;
        padding:15px 10px;
    }

    .time-box span{
        font-size:1.7rem;
    }

}
/* ==========================
   COORDINATE REVEAL
========================== */

.launch-reveal{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    width:100%;
}

.ca-box{
    width:100%;
    max-width:700px;
    padding:18px 22px;
    border-radius:16px;
    background:rgba(168,85,247,.08);
    border:1px solid rgba(168,85,247,.25);
    color:#fff;
    font-family:monospace;
    font-size:.95rem;
    word-break:break-all;
    text-align:center;
    box-shadow:0 0 24px rgba(168,85,247,.18);
}

#copyCA{
    padding:14px 28px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#7C5CFF,#A855F7);
    color:white;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 10px 28px rgba(124,92,255,.30);
}

#copyCA:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(124,92,255,.45);
}