:root{
  --bg: #0a0a0a;
  --bg-deep: #050505;
  --cyan: #5dd6ff;
  --violet: #b56cff;
  --pink: #ff62c0;
  --tile: #10131a;
  --tile-edge: #1a2040;
  --shine: rgba(93,214,255,0.35);
  --white: #eaf6ff;
}

*{ box-sizing: border-box; text-align:center;}
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Chakra Petch", system-ui, sans-serif;
  color: var(--white);
  background: radial-gradient(1200px 700px at 50% -10%, #0f1630 0%, var(--bg) 55%), var(--bg);
  overflow-x:hidden;
}

/* Hintergrund Effekte */
.bg-gradient{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(132,106,255,0.25), transparent 60%),
    radial-gradient(900px 600px at 20% 120%, rgba(93,214,255,0.16), transparent 70%),
    radial-gradient(900px 600px at 80% 120%, rgba(255,98,192,0.12), transparent 70%);
  pointer-events:none;
  z-index: 0;
}
.layer{ position: fixed; inset:0; pointer-events:none; z-index: 1; }
.stars, .stars:before, .stars:after{
  content:"";
  position:absolute; inset:0;
  background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 60px 80px, rgba(193,240,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 150px, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 200px 40px, rgba(165,220,255,.8) 50%, transparent 52%);
  animation: drift 140s linear infinite;
  opacity:.35;
}
.stars2{ filter:blur(0.6px); animation-duration: 200s; opacity:.25; }
.stars3{ filter:blur(1px); animation-duration: 280s; opacity:.2; }
@keyframes drift{ from{ transform:translateY(0) } to{ transform:translateY(-600px) } }

/* Logo */
.hero{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  padding-top: min(8vh, 40px);
}
.logo{
  width:min(90vw, 1100px);
  height:auto;
  display:block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(93,214,255,.18));
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}
.tagline{ margin: 6px 0 18px; letter-spacing: .04em; opacity: .9; }

/* Countdown */
.countdown-wrap{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding: 16px 24px 48px;
}
.headline{
  margin: 8px 0 0;
  font-size: clamp(1.15rem, 1.2rem + 0.5vw, 1.6rem);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(181,108,255,.25);
}
.countdown{
  display:flex;
  align-items:stretch;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14,18,28,.6), rgba(8,10,16,.6));
  box-shadow: inset 0 0 0 1px rgba(93,214,255,.18), 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}
.tile{
  min-width: 80px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #11172a, #0c1020 60%, #0a0f1a 100%);
  box-shadow: inset 0 0 0 1px var(--tile-edge), 0 8px 18px rgba(0,0,0,.55);
  text-align:center;
  position:relative;
}
.num{
  display:block;
  font-weight: 700;
  font-size: 2.5rem;
  text-shadow: 0 0 16px rgba(93,214,255,.35), 0 0 32px rgba(181,108,255,.25);
}
.label{ display:block; margin-top:6px; font-size:.8rem; opacity:.85; }
.sep{ align-self:center; font-size: 1.6rem; opacity:.6; }

/* Downloads */
.hidden{ display:none; }
.downloads{ margin-top: 20px; text-align:center; }
.downloads-title{ margin: 6px 0 14px; font-size: 1.3rem; text-shadow: 0 0 16px rgba(93,214,255,.25); }
.downloads-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
  width: min(820px, 92vw);
  margin: 0 auto;
}
.dl-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration:none;
  color: #f7fbff;
  background: linear-gradient(180deg, #121a33, #0c1226 60%, #0a1020);
  box-shadow: inset 0 0 0 1px rgba(93,214,255,.25), 0 12px 28px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dl-btn:hover{ transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(181,108,255,.35), 0 0 36px rgba(93,214,255,.35); }
.dl-btn .icon{ width: 34px; height: 34px; fill: currentColor; }
.dl-btn .text{ display:flex; flex-direction:column; align-items:flex-start; }
.dl-btn .text strong{ font-size: 1.05rem; }
.dl-btn .text em{ font-size:.9rem; opacity:.8; }
.dl-btn.cf{ color: #ff7846; }
.dl-btn.pl{ color: #5dd6ff; }
.hash-note{ margin-top:10px; opacity:.72; font-size:.92rem; }

/* Footer */
.foot{ position: fixed; bottom: 14px; width: 100%; text-align:center; z-index: 2; opacity:.6; }
.footer-links{
  margin-bottom: 8px;
}

.discord-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  background:linear-gradient(135deg,#5865F2,#4752C4);
  color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.discord-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.5),0 0 12px rgba(88,101,242,.6);
}
.discord-btn .icon{
  width:22px;
  height:22px;
  fill:currentColor;
}
/* Responsiv */
@media (max-width: 640px){
  .downloads-grid{ grid-template-columns: 1fr; }
}