*{

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

}

body{

    background:#040608;

    color:white;

    font-family:'Inter',sans-serif;

    min-height:100vh;

    overflow-x:hidden;

    overflow-y:auto;

}

.background-grid{

position:fixed;

inset:0;

background:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg,
rgba(255,255,255,.03) 1px,
transparent 1px);

background-size:60px 60px;

z-index:-3;

}

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top right,
rgba(0,255,255,.10),
transparent 35%),

radial-gradient(circle at bottom left,
rgba(124,255,79,.08),
transparent 35%);

z-index:-2;

}

main{

    position:relative;

    z-index:2;

    width:min(900px,90%);

    margin:0 auto;

    padding:120px 0 80px;

    text-align:center;

}

.logo{

    width:170px;

    margin-bottom:35px;

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

    filter:
        drop-shadow(0 0 18px rgba(114,255,131,.30))
        drop-shadow(0 0 40px rgba(34,211,238,.18));

}

.tag{

display:inline-block;

padding:10px 20px;

border-radius:50px;

border:1px solid rgba(124,255,79,.35);

color:#7dff64;

margin-bottom:30px;

letter-spacing:.08em;

text-transform:uppercase;

font-size:.85rem;

}

h1{

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

font-size:clamp(3rem,7vw,5.5rem);

line-height:1.05;

margin-bottom:30px;

}

.description{

max-width:720px;

margin:auto;

font-size:1.25rem;

line-height:1.9;

color:#9BA6B8;

}

.buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}

.primary{

background:#7dff64;

color:black;

padding:16px 34px;

border-radius:999px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.primary:hover{

transform:translateY(-4px);

}

.secondary{

padding:16px 34px;

border:1px solid #3cdcff;

border-radius:999px;

text-decoration:none;

color:#3cdcff;

transition:.3s;

}

.secondary:hover{

background:#3cdcff;

color:black;

}

.features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-top:80px;

font-size:1.1rem;

color:#B6C2D2;

}

footer{

margin-top:80px;

color:#6F7B8E;

font-size:.95rem;

line-height:1.8;

}

@media(max-width:768px){

.features{

grid-template-columns:1fr;

}

.buttons{

flex-direction:column;

}

.logo{

width:130px;

}

}
/* ==========================================
   PARTICLE BACKGROUND
========================================== */

#particle-background{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}
.particle{

    position:absolute;

    border-radius:50%;

    opacity:.5;

    will-change:transform;

}
.particle.green{

    background:#72ff83;

    box-shadow:

        0 0 10px #72ff83,

        0 0 25px rgba(114,255,131,.5);

}
.particle.cyan{

    background:#22D3EE;

    box-shadow:

        0 0 10px #22D3EE,

        0 0 25px rgba(34,211,238,.5);

}
.particle.white{

    background:white;

    box-shadow:

        0 0 8px white;

}
@keyframes twinkle{

    0%,100%{

        opacity:.2;

    }

    50%{

        opacity:1;

    }

}

.particle{

    animation:twinkle 4s ease-in-out infinite;

}
@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}
@keyframes logoFloat{

    0%{

        transform:translateY(0px) scale(1);

    }

    50%{

        transform:translateY(-15px) scale(1.02);

    }

    100%{

        transform:translateY(0px) scale(1);

    }

}
.tag{

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

}

@keyframes tagGlow{

    0%,100%{

        box-shadow:0 0 10px rgba(124,255,79,.15);

    }

    50%{

        box-shadow:
            0 0 20px rgba(124,255,79,.35),
            0 0 35px rgba(34,211,238,.15);

    }

}