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

body{
background:#0d1117;
font-family:Segoe UI,Arial,sans-serif;
color:white;
min-height:100vh;
overflow-x:hidden;
}

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(circle at 20% 20%, rgba(139,92,246,.25), transparent 30%),
radial-gradient(circle at 80% 30%, rgba(0,183,255,.18), transparent 30%),
radial-gradient(circle at 50% 80%, rgba(124,58,237,.2), transparent 35%);
z-index:-2;
}

.navbar{
position:sticky;
top:0;
left:0;
width:100%;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(13,17,23,.75);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.08);
z-index:10;
}

.site-brand{
display:inline-flex;
align-items:center;
flex:0 0 auto;
line-height:0;
text-decoration:none;
}

.site-brand-logo{
display:block;
width:auto;
height:auto;
max-height:60px;
max-width:96px;
object-fit:contain;
filter:drop-shadow(0 0 10px rgba(0,183,255,.18));
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.nav-links{
display:flex;
align-items:center;
gap:25px;
}

.nav-links a{
color:white;
text-decoration:none;
font-weight:500;
opacity:.85;
transition:.25s;
}

.nav-links a:hover{
opacity:1;
color:#00b7ff;
}

.nav-connect{
padding:10px 18px;
border-radius:10px;
background:#8b5cf6;
box-shadow:0 0 18px rgba(139,92,246,.45);
}

header{
padding:72px 8% 70px;
animation:fadeUp .9s ease forwards;
}

.hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
max-width:1500px;
margin:0 auto;
}

.hero-left{
flex:1.25;
min-width:650px;
}

.hero-right{
flex:1;
display:flex;
justify-content:center;
}

h1{
font-size:62px;
letter-spacing:3px;
color:#9b6dff;
white-space:nowrap;
text-shadow:
0 0 10px rgba(124,58,237,.65),
0 0 28px rgba(124,58,237,.35),
0 0 55px rgba(124,58,237,.18);
}

header p{
margin-top:20px;
font-size:22px;
opacity:.8;
}

.hero-subtitle{
max-width:720px;
line-height:1.6;
}

.hero-badges{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:24px;
}

.hero-badges span{
padding:9px 16px;
border-radius:999px;
background:rgba(22,27,34,.55);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 18px rgba(139,92,246,.18);
font-size:14px;
font-weight:600;
color:#d8ccff;
}

.buttons{
margin-top:40px;
}

.button{
display:inline-block;
margin:10px;
padding:16px 42px;
font-size:18px;
font-weight:600;
border-radius:14px;
text-decoration:none;
color:white;
background:#8b5cf6;
transition:all .25s ease;
box-shadow:0 0 20px rgba(139,92,246,.45);
}

.button:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:0 0 26px rgba(139,92,246,.75);
}

.secondary{
background:#00b7ff;
box-shadow:0 0 18px rgba(0,183,255,.45);
}

.secondary:hover{
box-shadow:0 0 26px rgba(0,183,255,.75);
}

.status-card{
margin-top:35px;
padding:22px;
max-width:360px;
background:rgba(22,27,34,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.status-card h3{
margin-bottom:8px;
color:#66ff99;
}

.status-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:22px;
padding:10px 0;
border-top:1px solid rgba(255,255,255,.08);
}

.status-row:first-of-type{
margin-top:12px;
}

.status-row span{
opacity:.7;
font-size:15px;
white-space:nowrap;
}

.status-row strong{
font-size:15px;
font-weight:700;
color:white;
text-align:right;
}

.online{
color:#4cff72 !important;
text-shadow:0 0 12px rgba(76,255,114,.6);
}

.offline{
color:#ff4c4c !important;
text-shadow:0 0 12px rgba(255,76,76,.6);
}

.restarting{
color:#ffc83d !important;
text-shadow:0 0 12px rgba(255,200,61,.6);
}

.preview-box{
width:100%;
max-width:420px;
min-height:260px;
border-radius:24px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:rgba(22,27,34,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 15px 45px rgba(124,58,237,.25);
text-align:center;
padding:30px;
}

.preview-box h3{
color:#9b6dff;
letter-spacing:3px;
font-size:24px;
margin-bottom:18px;
}

.preview-box p{
font-size:22px;
font-weight:700;
margin-bottom:18px;
}

.preview-line{
width:120px;
height:3px;
background:#8b5cf6;
box-shadow:0 0 18px rgba(139,92,246,.8);
margin-bottom:18px;
}

.preview-box span{
opacity:.75;
font-size:15px;
max-width:280px;
line-height:1.5;
}

.roadmap-item{
width:100%;
padding:10px 0;
font-size:15px;
font-weight:600;
border-top:1px solid rgba(255,255,255,.08);
}

.roadmap-item.complete{
color:#4cff72;
text-shadow:0 0 10px rgba(76,255,114,.35);
}

.roadmap-item.pending{
color:#d8ccff;
opacity:.8;
}

section{
padding:55px 12%;
}

h2{
text-align:center;
margin-bottom:40px;
font-size:36px;
}

.section-subtitle{
text-align:center;
font-size:18px;
opacity:.7;
margin-top:-20px;
margin-bottom:50px;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
gap:30px;
max-width:1400px;
margin:0 auto;
}

.card{
background:rgba(22,27,34,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
padding:30px;
min-height:260px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
text-align:center;
animation:fadeUp .9s ease forwards;
transition:all .25s ease;
box-shadow:0 8px 35px rgba(0,0,0,.35);
}

.card:hover{
transform:translateY(-6px);
border-color:rgba(139,92,246,.55);
box-shadow:0 12px 35px rgba(124,58,237,.28);
}

.card h3{
margin-bottom:20px;
color:#00b7ff;
}

.card-icon{
font-size:48px;
margin-bottom:18px;
filter:drop-shadow(0 0 12px rgba(139,92,246,.5));
}

.community-section{
padding:60px 12%;
}

.community-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:30px;
max-width:1100px;
margin:0 auto;
}

.community-card{
background:rgba(22,27,34,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
padding:30px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
text-align:center;
box-shadow:0 8px 35px rgba(0,0,0,.35);
transition:all .25s ease;
}

.community-card:hover{
transform:translateY(-6px);
border-color:rgba(0,183,255,.55);
box-shadow:0 12px 35px rgba(0,183,255,.22);
}

.community-card h3{
color:#9b6dff;
margin-bottom:15px;
}

.community-card p{
opacity:.8;
line-height:1.5;
}

footer{
margin-top:80px;
padding:40px;
text-align:center;
background:#111;
}

footer p{
margin:6px 0;
opacity:.8;
}

.stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-1;
}

.star{
position:absolute;
width:2px;
height:2px;
background:white;
border-radius:50%;
opacity:.25;
animation:twinkle 3s infinite ease-in-out;
will-change:opacity, transform;
}

@keyframes twinkle{
0%,100%{
opacity:.15;
transform:scale(1);
}
50%{
opacity:.9;
transform:scale(1.8);
}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@media (max-width:1100px){
.hero{
flex-direction:column;
text-align:center;
}

.hero-left{
min-width:0;
}

.hero-badges{
justify-content:center;
}

.status-card{
margin-left:auto;
margin-right:auto;
}

h1{
font-size:52px;
white-space:normal;
}

.navbar{
position:relative;
flex-direction:column;
gap:18px;
}

.site-brand-logo{
max-height:50px;
max-width:80px;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
}
}

@media (max-width:600px){
.navbar{
padding:14px 5%;
gap:14px;
}

.site-brand-logo{
max-height:46px;
max-width:74px;
}

.nav-links{
gap:14px 18px;
}

.nav-links a{
font-size:14px;
}

.nav-connect{
padding:8px 14px;
}

header{
padding:40px 6% 54px;
}

.hero{
gap:54px;
}

h1{
font-size:clamp(34px,10vw,44px);
letter-spacing:2px;
}
}