* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}


html {
    scroll-behavior:smooth;
}


body {

    background:#050505;
    color:white;
    overflow-x:hidden;

}



body::before {

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.08),
        transparent 70%
    );

    z-index:-1;

}





/* NAV */

.nav {

    width:90%;
    max-width:1100px;

    margin:30px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;


}


.brand {

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:700;

    font-size:18px;

}


.brand img {

    width:38px;

}



.nav-links {

    display:flex;

    gap:30px;

}



.nav-links a {

    color:#888;

    text-decoration:none;

    font-size:15px;

}



.nav-links a:hover {

    color:white;

}







/* HERO */


.hero {

    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:50px 20px;

}



.hero-logo {

    width:120px;

    margin-bottom:30px;

}



.badge {

    padding:8px 15px;

    border-radius:30px;

    border:1px solid #222;

    color:#999;

    font-size:14px;

}



.hero h1 {


margin-top:30px;


font-size:
clamp(50px,8vw,90px);


letter-spacing:-5px;


line-height:1;


}



.hero h1 span {


color:#777;


}



.hero-text {


max-width:650px;


margin:25px auto;


color:#999;


font-size:20px;


line-height:1.6;


}







/* WAITLIST */


.wait-card {


margin-top:40px;

width:min(450px,95%);


padding:25px;


background:#0b0b0b;


border:1px solid #222;


border-radius:20px;


}



.wait-card form {


display:flex;

gap:10px;


}



input,
textarea,
select {


width:100%;

padding:15px;


background:#111;


border:1px solid #292929;


border-radius:12px;


color:white;


outline:none;


}



button {


padding:15px 25px;


border:none;


border-radius:12px;


background:white;


color:black;


font-weight:700;


cursor:pointer;


}







/* WAITLIST DIGITS */


#waitlistCount {


margin-top:20px;


display:flex;


justify-content:center;


gap:5px;


}



.digit-box {


width:32px;

height:42px;


overflow:hidden;


border-radius:8px;


background:#111;


border:1px solid #333;


}



.digit-inner {


transition:
transform .8s cubic-bezier(.22,1,.36,1);


}



.digit {


height:42px;


line-height:42px;


font-size:20px;


text-align:center;


}







/* STATS */


.stats-section {


width:90%;

max-width:1100px;


margin:80px auto;


display:grid;


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


gap:20px;


}



.stats-section div {


background:#0a0a0a;


border:1px solid #222;


padding:35px;


border-radius:20px;


text-align:center;


}



.stats-section h2 {


font-size:50px;


}



.stats-section p {


color:#888;


}









/* SECTIONS */


.section {


width:90%;


max-width:1100px;


margin:130px auto;


text-align:center;


}



.small-title {


color:#666;


font-size:13px;


letter-spacing:3px;


}



.section h2,
.community h2 {


margin-top:15px;


font-size:50px;


letter-spacing:-2px;


}









/* FEATURES */


.features {


margin-top:50px;


display:grid;


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


gap:20px;


}



.feature {


padding:30px;


background:#0a0a0a;


border:1px solid #222;


border-radius:20px;


text-align:left;


}



.feature p {


margin-top:12px;


color:#888;


line-height:1.5;


}








/* STEPS */


.steps {


display:grid;


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


gap:20px;


margin-top:50px;


}



.steps div {


background:#0a0a0a;


border:1px solid #222;


padding:30px;


border-radius:20px;


}



.steps h3 {


font-size:35px;


color:#555;


}








/* COMMUNITY */


.community {


width:90%;


max-width:900px;


margin:100px auto;


padding:60px 30px;


background:#0a0a0a;


border:1px solid #222;


border-radius:25px;


text-align:center;


}



.community p {


color:#888;


margin:20px;


}



.community a {


display:inline-block;


background:white;


color:black;


padding:15px 30px;


border-radius:12px;


text-decoration:none;


font-weight:bold;


}








/* FORMS */


#betaForm {


max-width:600px;


margin:40px auto;


display:flex;


flex-direction:column;


gap:15px;


}



textarea {


height:130px;


resize:none;


}








/* FAQ */


.faq {


max-width:800px;


margin:40px auto;


text-align:left;


}



details {


background:#0a0a0a;


border:1px solid #222;


padding:22px;


border-radius:15px;


margin-bottom:15px;


}



summary {


cursor:pointer;


font-weight:700;


}



details p {


margin-top:15px;


color:#888;


}








footer {


padding:50px;


text-align:center;


color:#666;


}



footer img {


width:50px;


margin-bottom:15px;


}







@media(max-width:700px){


.nav-links {

display:none;

}



.hero h1 {

font-size:50px;

letter-spacing:-3px;

}



.wait-card form {

flex-direction:column;

}



.section h2,
.community h2 {

font-size:35px;

}


}