/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  height: 100vh;
  overflow: hidden; /* no scroll */
  background: radial-gradient(1200px 800px at 50% 60%, #f7f7f7 0%, #eceff3 35%, #e6eaee 55%, #dfe4ea 100%);
  color: #0a0a0a;
  font-family: Inter, "SF Pro Text", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.2px;
}

/* Backdrop particles canvas */
#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  filter: blur(0.2px) saturate(1.02);
}

/* Glass bars */
.glass-bar {
  position: fixed; left: 0; right: 0;
  height: 64px;
  z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.18));
  border: 1px solid rgba(255,255,255,0.6);
  border-left: none; border-right: none;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(150,160,170,0.25),
    0 8px 24px rgba(0,0,0,0.08);
}
.glass-bar.top { top: 0; }
.glass-bar.bottom { bottom: 0; }

.bar-inner{
  height: 100%;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

/* Left brand cluster */
.brand-left{
  display:flex; align-items:center; gap:16px;
}
.chip{
  padding: 6px 12px; border-radius: 999px;
  font-weight: 600; letter-spacing: 1px; font-size: 12px;
}
.chip-glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 3px 8px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
}
.brand-small{
  text-decoration:none; color:#222;
  font-weight:700; font-size:14px; letter-spacing:2px;
  user-select:none; cursor:default;
  opacity:0.9;
}

/* Right nav */
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-link{
  padding:8px 14px; border-radius:12px;
  text-decoration:none; color:#222;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 4px 10px rgba(0,0,0,0.07);
  font-weight:600; font-size:13px;
}
.nav-link:hover{ transform: translateY(-1px); }

/* Stage (centered content) */
.stage{
  position: relative;
  z-index: 5;
  width: 100%; height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
}

/* Center logo block */
.logo-wrap{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(2.0); /* <- hier! */
  transform-origin: center;
  display: grid; place-items:center;
  user-select:none;
  pointer-events: none;
}
.logo-svg{
  width: min(70vw, 980px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.15));
}
.logo-wrap .shine{
  position: absolute; inset: -10% -5%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.65) 45%, rgba(255,255,255,0.2) 60%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: sweep 6.5s linear infinite;
  pointer-events:none;
}
@keyframes sweep{
  0% { transform: translateX(-60%) rotate(0.5deg); opacity:0.65; }
  50%{ opacity:0.35; }
  100%{ transform: translateX(60%) rotate(0.5deg); opacity:0.65; }
}

/* Callout (2/3 height) */
.callout{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 66vh;
  display: grid; place-items: center;
  gap: 14px;
}

/* Discord glass button */
.btn-glass{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.75);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));
  text-decoration:none; color:#111;
  font-weight:700; letter-spacing:0.8px;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 20px rgba(0,0,0,0.10);
}
.btn-glass .label{ font-size:14px; }
.btn-glass:hover{ transform: translateY(-1px); }

.discord-ico{ width:22px; height:22px; fill:#1f2326; opacity:0.9; }

/* Tagline under button */
.tagline{
  margin:0;
  font-weight: 700;
  letter-spacing: 4px;
  font-size: 12px;
  color:#30343a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Bottom bar text */
.legal{ font-size:12px; letter-spacing:1px; color:#333; opacity:0.9; }

.spacer{ width: 24px; }

/* Responsive tweaks */
@media (max-width: 680px){
  .logo-svg{ width: 86vw; }
  .nav-right .nav-link{ padding:7px 12px; font-size:12px; }
  .chip{ display:none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .logo-wrap .shine{ animation: none; opacity:0.4; }
}