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

body{

    background:#050816;
    color:white;

    font-family:
    Segoe UI,
    sans-serif;

    overflow-x:hidden;
}

#stars{

    position:fixed;

    width:100%;
    height:100%;

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

    background-size:
    80px 80px;

    opacity:0.15;

    z-index:-1;
}

nav{

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    padding:30px 60px;
}

.logo{

    font-size:32px;

    font-weight:700;

    letter-spacing:4px;

    color:#00e5ff;
}

.menu a{

    text-decoration:none;

    color:white;

    margin-left:30px;

    transition:0.3s;
}

.menu a:hover{

    color:#00e5ff;
}

.hero{

    height:80vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.ai-orb{

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(
    #00ffff,
    #0077ff);

    box-shadow:

    0 0 30px #00ffff,
    0 0 60px #00ffff,
    0 0 120px #00ffff;

    animation:
    pulse 4s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }
}

.hero h1{

    margin-top:40px;

    font-size:90px;

    letter-spacing:8px;
}

.hero h2{

    color:#00e5ff;

    margin-top:20px;

    height:40px;
}

.hero p{

    margin-top:20px;

    color:#b0b9d8;
}

.buttons{

    margin-top:40px;
}

button{

    padding:15px 35px;

    border:none;

    border-radius:12px;

    margin:10px;

    background:
    rgba(255,255,255,0.1);

    color:white;

    cursor:pointer;

    transition:0.3s;
}

button:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 20px #00ffff;
}

.primary{

    background:#00d4ff;

    color:black;

    font-weight:bold;
}

.cards{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    padding:50px;
}

.card{

    background:
    rgba(255,255,255,0.05);

    backdrop-filter:
    blur(15px);

    border:
    1px solid rgba(255,255,255,0.1);

    padding:30px;

    border-radius:20px;

    transition:0.4s;
}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 0 30px #00e5ff;
}

.status{

    text-align:center;

    padding:80px 20px;
}

.status-grid{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:40px;

    flex-wrap:wrap;
}

.status-grid div{

    background:
    rgba(255,255,255,0.05);

    padding:30px;

    border-radius:20px;

    width:220px;
}

.status-grid span{

    display:block;

    margin-top:10px;

    color:#00e5ff;

    font-size:30px;
}