/* ========= Base ========= */
:root{
  --bg:#020617;
  --card:#0f1f4a;
  --card2:#13295d;
  --text:#e6efff;
  --muted:#9bb8ff;
  --line:#274fa0;
  --accent:#64c8ff;
  --accent2:#8aa9ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 700px at 70% -10%, #0d1f56 0%, #07143d 35%, var(--bg) 70%);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: url("./db bot.jpg") center right 8% / min(38vw,560px) auto no-repeat;
  opacity:.11;
  pointer-events:none;
  z-index:0;
  transform: translate3d(0,0,0);
  animation: dbScreensaver 32s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  width:min(38vw,500px);
  aspect-ratio:1/1;
  left:-12vw;
  top:22vh;
  border-radius:50%;
  background: radial-gradient(circle, rgba(106,170,255,.20) 0%, rgba(80,140,255,.08) 42%, rgba(12,25,60,0) 74%);
  filter: blur(2px);
  pointer-events:none;
  z-index:0;
  animation: leftGlowDrift 24s ease-in-out infinite alternate;
}
.topbar,.container,.footer{position:relative;z-index:1}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px;
  border-bottom:1px solid var(--line);
  background:rgba(2,8,28,.78);
  backdrop-filter: blur(8px);
}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800}
.logo{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#041433;font-weight:900
}
.topbar nav{display:flex;gap:1rem;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.topbar nav a{color:#bfd5ff;text-decoration:none;font-weight:600}
.topbar nav a:hover{color:#fff}

.container{max-width:1180px;margin:0 auto;padding:28px 22px 66px}
.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start;margin-top:8px;
}
.badge{
  display:inline-block;
  background:rgba(8,164,255,.18);
  border:1px solid rgba(81,192,255,.55);
  color:#8fe3ff;
  padding:.35rem .65rem;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
}
.hero-chips{
  margin-top:.55rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.hero-status-row{
  margin-top:.55rem;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.75rem;
  flex-wrap:wrap;
}
.hero-status-row .hero-chips{margin-top:0}
.chip{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(125,168,255,.45);
  background:rgba(14,30,72,.52);
  color:#cfe1ff;
  border-radius:999px;
  padding:.28rem .64rem;
  font-size:.82rem;
  font-weight:700;
}
.chip-status{
  border-color:rgba(122,210,255,.65);
  color:#d8f3ff;
}
h1{
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.05;
  margin:12px 0 12px;
}
h1 span{color:var(--accent2)}
.sub{font-size:clamp(1.04rem,2vw,1.75rem);color:#b8ccff;max-width:62ch}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:18px;
}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  border-radius:14px;padding:.78rem 1rem;font-weight:800;
  border:1px solid transparent;
}
.btn.primary{
  background:linear-gradient(135deg,#58b7ff,#7fd8ff);
  color:#052145;
}
.btn.ghost{
  border-color:#305cae;background:rgba(12,32,75,.45);color:#c7daff;
}
.btn:hover{transform:translateY(-1px)}

.servers-counter-card{
  margin-top:10px;
  border:1px solid rgba(124,176,255,.5);
  background:linear-gradient(160deg,rgba(19,39,89,.72),rgba(13,29,70,.6));
  border-radius:13px;
  padding:.56rem .72rem;
  display:inline-flex;
  align-items:baseline;
  gap:.62rem;
  flex-wrap:wrap;
}
.servers-label{
  color:#b8d1ff;
  font-size:.9rem;
  font-weight:700;
}
.servers-count{
  font-size:1.28rem;
  font-weight:900;
  letter-spacing:.2px;
  color:#e5f2ff;
}
.hero-counter{
  margin-top:0;
  padding:.38rem .6rem;
  border-radius:999px;
  gap:.45rem;
  white-space:nowrap;
}
.hero-counter .servers-label{
  font-size:.82rem;
}
.hero-counter .servers-count{
  font-size:1rem;
}
.everything-grid .card{min-height:100%}
#donate .card code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:rgba(112,165,255,.12);
  border:1px solid rgba(112,165,255,.35);
  border-radius:8px;
  padding:.1rem .3rem;
}
.donate-hero{margin-bottom:12px}

.music-inline{
  margin-top:12px;
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem;
}
.btn-music{
  border:1px solid #3a64b4;
  background:rgba(22,42,90,.55);
  color:#d9e6ff;
  border-radius:12px;
  padding:.48rem .76rem;
  cursor:pointer;
  font-weight:700;
}
.btn-music.small{padding:.46rem .62rem;font-weight:700}
.vol-wrap{
  display:flex; align-items:center; gap:.45rem;
  border:1px solid #345a9b;
  background:rgba(18,37,76,.46);
  color:#c6d9ff;
  border-radius:10px;
  padding:.35rem .56rem;
  font-size:.88rem;
  font-weight:700;
}
.vol-slider{width:74px;height:16px;accent-color:#78b6ff}
.music-nowplaying{color:#9fbcff;font-size:.95rem}

.price-card{
  border:1px solid #2f5fb7;
  border-radius:18px;
  padding:18px;
  background:linear-gradient(160deg,rgba(23,45,103,.95),rgba(11,27,65,.92));
}
.price{font-size:3.1rem;font-weight:900}
.price span{font-size:1.85rem;font-weight:700}
.price-card ul{margin:.7rem 0 0 1.2rem;padding:0}
.price-card li{margin:.35rem 0}

h2{font-size:2.9rem;margin:44px 0 14px}
.grid{display:grid;gap:.8rem}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{
  border:1px solid #2e5bab;
  border-radius:15px;
  padding:12px;
  background:rgba(20,40,90,.55);
}
.card h3{margin:.1rem 0 .35rem}
.bullets{margin:.5rem 0 0 1rem}
.bullets li{margin:.35rem 0}
.premium{background:linear-gradient(160deg,rgba(29,49,108,.95),rgba(18,35,83,.92));}

.founders-card{margin-top:1rem}
.founders-bar-wrap{
  width:100%; height:14px; border-radius:999px;
  overflow:hidden; background:rgba(255,255,255,.09); border:1px solid rgba(137,177,255,.35);
}
.founders-bar{
  width:0%; height:100%;
  background:linear-gradient(90deg,#56c3ff,#7ea7ff);
  transition:width .4s ease;
}
.founders-meta{
  margin-top:.55rem;
  display:flex; justify-content:flex-start; gap:.8rem; flex-wrap:wrap;
  color:#bcd3ff; font-weight:700;
}

.mt{margin-top:1.4rem}
.muted{opacity:.86}

.tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin:.8rem 0 1rem}
.tab-btn{
  border:1px solid rgba(124,165,255,.45);
  background:rgba(22,39,81,.45);
  color:#d7e6ff;
  padding:.5rem .82rem;
  border-radius:11px;
  cursor:pointer;
  font-weight:700;
}
.tab-btn.active{
  border-color:rgba(122,194,255,.9);
  background:rgba(115,190,255,.22);
}
.panel{
  border:1px solid rgba(120,162,255,.35);
  border-radius:14px;
  padding:1rem;
  background:rgba(18,33,74,.48);
}
.panel-title{margin:0 0 .7rem}
.cmd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.cmd-row{
  border:1px solid rgba(125,171,255,.26);
  border-radius:12px;
  padding:.74rem;
  background:rgba(16,30,68,.45);
}
.cmd-row code{font-weight:800}
.cmd-row p{margin:.35rem 0 0;color:#c3d8ff}

.demo-modal{
  position:fixed;
  inset:0;
  background:rgba(4,10,26,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:45;
}
.demo-modal.open{display:flex}
.demo-modal-content{
  width:min(860px,95vw);
  border:1px solid rgba(129,178,255,.55);
  background:linear-gradient(160deg,rgba(16,34,79,.97),rgba(10,22,53,.96));
  border-radius:16px;
  padding:14px 14px 12px;
  position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.48);
}
.demo-modal-content h3{margin:.2rem 0 .5rem}
.demo-video{
  width:100%;
  max-height:72vh;
  border-radius:12px;
  border:1px solid rgba(129,178,255,.35);
  background:#020716;
}
.demo-fallback{margin:.6rem .1rem 0}
.demo-close{
  position:absolute;
  right:10px;
  top:10px;
  border:1px solid rgba(131,178,255,.6);
  background:rgba(18,37,85,.72);
  color:#e8f2ff;
  border-radius:10px;
  width:34px;
  height:34px;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
}
body.modal-open{overflow:hidden}

.footer{
  text-align:center;
  border-top:1px solid #274a93;
  color:#a5c2ff;
  padding:18px;
  background:rgba(2,12,34,.6);
}

@keyframes dbScreensaver{
  0%{transform:translate3d(18vw,-14vh,0)}
  20%{transform:translate3d(6vw,6vh,0)}
  40%{transform:translate3d(-8vw,20vh,0)}
  60%{transform:translate3d(-16vw,-2vh,0)}
  80%{transform:translate3d(2vw,12vh,0)}
  100%{transform:translate3d(14vw,18vh,0)}
}
@keyframes leftGlowDrift{
  0%{transform:translate3d(-8vw,16vh,0) scale(1)}
  25%{transform:translate3d(2vw,-10vh,0) scale(1.03)}
  50%{transform:translate3d(16vw,8vh,0) scale(1.07)}
  75%{transform:translate3d(4vw,26vh,0) scale(1.02)}
  100%{transform:translate3d(-10vw,2vh,0) scale(1)}
}

/* Responsive */
@media (max-width:1050px){
  .hero{grid-template-columns:1fr}
  .cards-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cards-2,.cards-4{grid-template-columns:1fr}
  .cmd-list{grid-template-columns:1fr}
  .topbar{padding:14px}
  h1{font-size:clamp(1.8rem,9vw,3rem)}
  h2{font-size:2rem}
  .vol-slider{width:58px}
  .chip{font-size:.76rem}
  .hero-status-row{align-items:stretch}
  .hero-counter{width:100%;justify-content:flex-start;border-radius:12px}
  .servers-counter-card{display:flex;width:100%}
}


/* Hero meta chips alignment fix */
.hero-meta,
.hero-top-row,
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start !important;
}
.hero-meta .servers-protected-chip,
.hero-meta #protectedCountChip,
#protectedCountChip {
  margin-left: 0 !important;
  position: static !important;
  transform: none !important;
}



/* Discord growth link */
.nav-discord{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .8rem;
  border-radius:10px;
  text-decoration:none;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}


/* Hero chip placement + CTA balance tweak */
.hero-status-row{
  align-items:flex-start;
  flex-direction:column;
  gap:.45rem;
}
.hero-counter{
  margin-left:0;
}
.hero-actions{
  gap:.58rem;
}
.btn.invite-link{
  border:1px solid rgba(124,182,255,.9);
  background:rgba(20,44,102,.65);
  color:#e2efff;
  box-shadow:inset 0 0 0 1px rgba(120,170,255,.18);
}
.btn.invite-link:hover{
  background:rgba(24,52,118,.8);
}
@media (min-width: 980px){
  .hero-actions .discord-server-link{
    margin-left:.1rem;
  }
}



/* === Final polish: uniform hero buttons (desktop + mobile) === */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:.72rem;
}
.hero-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  line-height:1;
  padding:.78rem 1.05rem;
  border-radius:14px;
  white-space:nowrap;
  font-weight:800;
}
@media (min-width: 980px){
  .hero-actions .btn{
    min-width:170px;
  }
}
@media (max-width: 979px){
  .hero-actions .btn{
    flex:1 1 calc(50% - .72rem);
    min-width:160px;
  }
}
@media (max-width: 560px){
  .hero-actions .btn{
    flex:1 1 100%;
    width:100%;
  }
}


/* ===== Multi-page polish ===== */
.page-hero {
  margin-bottom: 18px;
}

.section-lead {
  max-width: 70ch;
  color: #bcd1ff;
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.9rem;
}
.summary-card {
  border:1px solid rgba(124,176,255,.35);
  border-radius:16px;
  padding:1rem;
  background:rgba(15,29,68,.55);
}
.summary-card .eyebrow {
  display:inline-block;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#9fd8ff;
  margin-bottom:.35rem;
}
.summary-card h3 { margin:.1rem 0 .45rem; }

.badge-row {
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin:.55rem 0 .75rem;
}
.feature-badge {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  border-radius:999px;
  padding:.28rem .6rem;
  font-size:.78rem;
  font-weight:800;
  border:1px solid rgba(132,177,255,.35);
  background:rgba(16,34,74,.6);
  color:#d7e7ff;
}
.feature-badge.premium {
  border-color:rgba(114,213,255,.5);
  color:#d8f5ff;
}
.feature-badge.free {
  border-color:rgba(154,179,255,.3);
  color:#d9e2ff;
}

.feature-detail-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.9rem;
}
.feature-detail-card {
  border:1px solid rgba(124,176,255,.35);
  border-radius:16px;
  padding:1rem;
  background:rgba(14,28,68,.58);
}
.feature-detail-card h3 { margin:.15rem 0 .4rem; }
.feature-detail-card p { margin:.2rem 0 .75rem; color:#c7d8ff; }

.mini-note {
  margin-top:.75rem;
  color:#a8c2ff;
  font-size:.94rem;
}

.cta-strip {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(120,172,255,.35);
  border-radius:16px;
  padding:1rem 1.1rem;
  background:rgba(15,31,72,.58);
}
.cta-strip p { margin:.2rem 0; color:#c7d8ff; }

.page-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
}
.page-link-card {
  border:1px solid rgba(121,171,255,.3);
  border-radius:16px;
  padding:1rem;
  background:rgba(16,31,70,.5);
}
.page-link-card h3 { margin:.1rem 0 .4rem; }
.page-link-card p { margin:0 0 .8rem; color:#c8d8ff; }

.footer-links {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:.35rem;
}
.footer-links a {
  color:#bfd5ff;
  text-decoration:none;
  font-weight:700;
}
.footer-links a:hover { color:#fff; }

.nav-current {
  color:#fff !important;
}

@media (max-width: 900px){
  .summary-grid,
  .feature-detail-grid,
  .page-links { grid-template-columns:1fr; }
}