:root{
  --bg-1:#0a0018; /* primary background color requested */
  --bg-2:#020812;
  --accent-1:#5b21b6;
  --accent-2:#06b6d4;
  --muted:#9bb6c7;
  --text:#dfefff;
  --card-bg:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;color:var(--text);background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 70%);-webkit-font-smoothing:antialiased}
.hidden{display:none}

html, body { scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { width: 0; height: 0; }

.site-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;color:#cdeefb;gap:12px}
.logo{display:inline-flex;align-items:center;gap:8px}
.site-logo{height:28px;width:auto;display:block}

@media (max-width:720px){
  .site-logo{height:22px}
}
.site-header nav{display:flex;gap:10px;align-items:center}
.site-header nav a{color:#cdeefb;text-decoration:none}
.btn-ghost{border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:#cdeefb;text-decoration:none}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:8px;color:var(--text);font-weight:700}


#preloader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:9999;background:radial-gradient(ellipse at bottom,#000 0%,transparent 40%),linear-gradient(180deg,#00040a 0%,#020812 60%)}
#preloader .stars{position:absolute;inset:0;background-image:radial-gradient(#7cf0ff 1px, transparent 1px);background-size:12px 12px;opacity:0.06;filter:blur(0.2px);animation: drift 14s linear infinite}
@keyframes drift{from{background-position:0 0}to{background-position:-1000px 600px}}
.loader-planet{transform:translateY(-28px);animation: floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-28px)}50%{transform:translateY(-40px)}}
.planet{width:120px;height:120px;animation: spin 9s linear infinite;filter:drop-shadow(0 6px 18px rgba(124,58,237,0.18))}
.rings{transform-origin:60px 60px;animation: ringspin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ringspin{to{transform:rotate(-360deg)}}
.loading-text{margin-top:20px;color:#cfefff;font-weight:700;letter-spacing:1.2px}
.loading-text .dot{opacity:0;animation: dots 1.2s infinite}
.loading-text .dot:nth-child(1){animation-delay:0s}
.loading-text .dot:nth-child(2){animation-delay:0.15s}
.loading-text .dot:nth-child(3){animation-delay:0.3s}
@keyframes dots{0%{opacity:0}50%{opacity:1}100%{opacity:0}}


.hero{max-width:1000px;margin:120px auto 60px;padding:0 20px;text-align:center;color:#eaf7ff}
.hero h1{font-family:'DM Serif Display',serif;font-size:44px;line-height:1.03;margin-bottom:14px}
.hero h2,.hero h3,.card h3{font-family:'DM Serif Display',serif}
.hero p{opacity:0.9;margin-bottom:18px}
.cta-row{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn-primary{background:linear-gradient(90deg,#5b21b6,#06b6d4);padding:12px 20px;border-radius:10px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 30px rgba(6,182,212,0.08)}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:12px 20px;border-radius:10px;color:#fff;text-decoration:none}
.hero-space{margin-top:28px}
.space-illustration{width:60%;max-width:560px;height:auto;margin:0 auto;display:block;opacity:0.9}
.rocket{animation: rocket 6s linear infinite}
@keyframes rocket{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-80px,-40px) rotate(-10deg)}100%{transform:translate(0,0) rotate(0)}}


.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1000px;margin:24px auto;padding:0 20px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:12px;color:#dff6ff;box-shadow:0 6px 20px rgba(1,6,12,0.8);border:1px solid rgba(255,255,255,0.02)}


.site-footer{max-width:1000px;margin:40px auto;color:#98d6ff;opacity:0.75;padding:18px}


.status-main{max-width:820px;margin:60px auto;padding:20px;color:#eaf7ff}
.status-title{font-family:'DM Serif Display',serif;font-weight:700;letter-spacing:2px;margin-bottom:6px;color:#9be7ff}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
 .muted{opacity:0.65;margin-top:6px;color:#9bb6c7}
 .alt-domain{font-family:monospace;font-weight:700;color:#ffd57f;letter-spacing:1px}


.notice{background:linear-gradient(90deg,rgba(124,58,237,0.06),rgba(6,182,212,0.02));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);color:#dff9ff;margin-top:12px}
.notice.small{opacity:0.95;font-size:14px}
.info-notes{max-width:1000px;margin:18px auto;padding:0 20px}
.info-bottom{max-width:820px;margin:18px auto;padding:0 20px}
.lead{opacity:0.9}
.status-card{display:flex;gap:16px;align-items:center;padding:16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.03)}
.status-card.up{box-shadow:0 12px 40px rgba(6,182,212,0.03)}
.status-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#7cf0ff,#4dd0e1);box-shadow:0 0 18px rgba(76,216,255,0.09)}

.status-card h3{font-size:16px;margin-bottom:6px}
.small-card{display:inline-block;padding:14px;border-radius:8px;background:rgba(255,255,255,0.02);margin:12px 8px;color:#bfefff}
.note{opacity:0.8;margin-top:20px}

.icon{width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:8px;fill:currentColor}
.btn-ghost .icon{opacity:0.95}
.feature-icon{width:28px;height:28px;margin-bottom:8px;display:block}
.social-icon{width:18px;height:18px;vertical-align:middle;display:inline-block;fill:currentColor;margin-right:6px}
.social-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;padding:6px;border-radius:6px}
.social-link:hover{opacity:0.95;transform:translateY(-1px)}
.social-link:focus{outline:2px solid rgba(124,58,237,0.18);outline-offset:3px}


@media (max-width:720px){
  .nav-toggle{display:inline-block}
  .site-header nav{position:absolute;top:64px;right:20px;background:linear-gradient(180deg,rgba(2,8,18,0.98),rgba(2,6,12,0.98));backdrop-filter:blur(6px);padding:12px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.6);display:none;flex-direction:column;gap:10px}
  .site-header.nav-open nav{display:flex}
  .hero{margin:64px auto 36px}
  .hero h1{font-size:28px;margin-top:20px}
  .space-illustration{width:100%}
  .status-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .cta-row{flex-direction:column}
}