:root{
  --bg:#05070d;
  --bg-2:#0a1120;
  --panel:rgba(11,18,33,.75);
  --panel-strong:rgba(8,14,26,.92);
  --border:rgba(107,155,255,.16);
  --text:#eef3ff;
  --muted:#9cadcf;
  --primary:#4c82ff;
  --primary-2:#74b2ff;
  --accent:#0f2f63;
  --shadow:0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(66,121,255,.18), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(28,90,196,.18), transparent 18%),
    linear-gradient(180deg, #04060b 0%, #07101c 100%);
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    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;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), transparent 70%);
  opacity:.22;
}

.container{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(16px);
  background:rgba(5,7,13,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:82px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:800;
  letter-spacing:.02em;
}

.brand-logo{
  width:48px;
  height:48px;
  object-fit:contain;
}

.menu{
  display:flex;
  gap:26px;
  color:var(--muted);
  font-weight:500;
}

.menu a:hover{color:var(--text)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:14px 22px;
  font-weight:700;
  transition:.25s ease;
  border:1px solid transparent;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-sm{
  padding:11px 18px;
  font-size:.95rem;
}

.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white;
  box-shadow:0 12px 30px rgba(76,130,255,.32);
}

.btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}

.btn-outline{
  border-color:rgba(116,178,255,.35);
  background:rgba(255,255,255,.03);
}

.hero{
  padding:72px 0 34px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:40px;
}

.eyebrow,
.section-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border:1px solid rgba(116,178,255,.18);
  border-radius:999px;
  font-size:.9rem;
  color:#bed0ff;
  background:rgba(80,122,255,.08);
  margin-bottom:18px;
}

.hero h1{
  margin:0;
  font-size:clamp(2.8rem, 7vw, 5.2rem);
  line-height:.95;
  letter-spacing:-.05em;
}

.tagline{
  margin:14px 0 20px;
  font-size:clamp(1.2rem, 2vw, 1.5rem);
  color:#c8d7ff;
  font-weight:700;
}

.lead,
.section-head p,
.info-card p,
.feature-card p,
.community-box p,
.social-card span,
.footer p{
  color:var(--muted);
  line-height:1.7;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:30px 0 28px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.stat-card,
.info-card,
.feature-card,
.social-card,
.community-box{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.stat-card{
  padding:18px;
  border-radius:20px;
}

.stat-card strong{
  display:block;
  font-size:1.35rem;
  margin-bottom:8px;
}

.stat-card span{
  display:block;
  color:var(--muted);
  font-size:.95rem;
}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:600px;
}

.glow-ring{
  position:absolute;
  width:min(520px, 85%);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(116,178,255,.18) 0%, rgba(116,178,255,.05) 40%, transparent 70%);
  filter:blur(16px);
  animation:pulse 6s ease-in-out infinite;
}

.hero-logo{
  position:relative;
  width:min(520px, 100%);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation:float 5.5s ease-in-out infinite;
}

.floating-card{
  position:absolute;
  padding:14px 18px;
  background:rgba(7,12,22,.8);
  border:1px solid rgba(116,178,255,.18);
  border-radius:18px;
  box-shadow:var(--shadow);
  color:#e6efff;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #8cd0ff);
  box-shadow:0 0 18px rgba(116,178,255,.7);
}

.card-1{left:0; top:24%}
.card-2{right:4%; bottom:16%}

.section{
  padding:72px 0;
}

.section-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.section-head{
  max-width:760px;
  margin-bottom:34px;
}

.section-head h2{
  margin:0 0 16px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.05;
  letter-spacing:-.04em;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.info-card{
  border-radius:26px;
  padding:26px;
}

.info-card h3,
.feature-card h3{
  margin:0 0 14px;
  font-size:1.25rem;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

.feature-card{
  padding:28px;
  border-radius:26px;
}

.feature-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  font-weight:800;
  color:white;
  background:linear-gradient(135deg, rgba(76,130,255,.95), rgba(116,178,255,.55));
  box-shadow:0 10px 26px rgba(76,130,255,.22);
}

.community-box{
  border-radius:34px;
  padding:34px;
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:26px;
}

.social-card{
  border-radius:24px;
  padding:22px;
  transition:.25s ease;
}

.social-card:hover,
.info-card:hover,
.feature-card:hover,
.stat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(116,178,255,.3);
}

.social-card strong{
  display:block;
  margin-bottom:10px;
  font-size:1.1rem;
}

.footer{
  padding:28px 0 34px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.12);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-brand img{
  width:44px;
  height:44px;
  object-fit:contain;
}

.footer-brand span{
  display:block;
  color:var(--muted);
  font-size:.92rem;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

@keyframes pulse{
  0%,100%{transform:scale(1); opacity:.85}
  50%{transform:scale(1.04); opacity:1}
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease, transform .65s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 980px){
  .menu{display:none}
  .hero-grid,
  .info-grid,
  .feature-grid,
  .social-grid,
  .footer-inner{
    grid-template-columns:1fr;
  }
  .footer-inner{
    display:grid;
  }
  .stats{
    grid-template-columns:1fr;
  }
  .hero{
    padding-top:42px;
  }
  .hero-visual{
    min-height:420px;
  }
  .card-1{left:4%; top:12%}
  .card-2{right:2%; bottom:7%}
}

@media (max-width: 640px){
  .container{width:min(100% - 28px, 1180px)}
  .nav{min-height:74px}
  .brand span{font-size:.95rem}
  .brand-logo{width:42px;height:42px}
  .btn{width:100%}
  .hero-actions{flex-direction:column}
  .hero-visual{min-height:340px}
  .floating-card{font-size:.88rem; padding:12px 14px}
  .community-box, .info-card, .feature-card{padding:22px}
}


code{
  padding:.15rem .45rem;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.92em;
}

.mini-label{
  display:inline-block;
  color:#bed0ff;
  font-size:.86rem;
  margin-bottom:10px;
}

.status-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
}

.status-card,
.donate-card,
.payment-card,
.note-box{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.status-card{
  border-radius:28px;
  padding:28px;
}

.status-main{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.status-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.status-top h3{
  margin:0;
  font-size:clamp(1.5rem, 3vw, 2rem);
}

.server-badge{
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  min-width:120px;
  text-align:center;
}

.server-badge.loading{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

.server-badge.online{
  background:rgba(35,180,97,.18);
  color:#8ef0b7;
  border:1px solid rgba(35,180,97,.3);
}

.server-badge.offline{
  background:rgba(255,90,90,.12);
  color:#ff9696;
  border:1px solid rgba(255,90,90,.22);
}

.status-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.status-metric{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.status-metric span{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
}

.status-metric strong{
  font-size:1.2rem;
}

.status-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.inner-page{
  padding-bottom:30px;
}

.section-head-center{
  text-align:center;
  max-width:860px;
  margin:0 auto 34px;
}

.page-title{
  margin:0 0 16px;
  font-size:clamp(2.5rem, 7vw, 4.2rem);
  line-height:1;
  letter-spacing:-.05em;
}

.donate-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:30px;
}

.donate-card{
  border-radius:28px;
  padding:30px 26px;
}

.featured-donate{
  border-color:rgba(116,178,255,.4);
  box-shadow:0 24px 80px rgba(76,130,255,.18);
}

.donate-card h3{
  margin:0 0 12px;
  font-size:1.5rem;
}

.price{
  font-size:2rem;
  font-weight:800;
  margin:20px 0;
}

.benefits{
  list-style:none;
  padding:0;
  margin:0 0 26px;
}

.benefits li{
  position:relative;
  padding-left:18px;
  color:var(--muted);
  line-height:1.7;
}

.benefits li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#8cd0ff;
}

.payment-box{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  border-radius:34px;
  padding:34px;
}

.payment-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:24px 0;
}

.payment-card{
  border-radius:24px;
  padding:24px;
}

.payment-card strong{
  display:block;
  margin-bottom:10px;
  font-size:1.08rem;
}

.payment-card span{
  color:var(--muted);
  line-height:1.7;
}

.note-box{
  border-radius:24px;
  padding:20px 22px;
  line-height:1.7;
}

@media (max-width: 980px){
  .status-grid,
  .donate-grid,
  .payment-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .status-actions .btn{
    width:100%;
  }
}