:root{
  --bg:#0b0010;       /* deep dark with magenta vibe */
  --accent:#ff00d8;   /* background color spec */
  --pink:#ff00ce;     /* text pink */
  --light:#f2f2f2;    /* light gray */
  --muted:#cfcfcf;
  --card:#140016;
  --border:#2a0b29;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--light);
  font-family: Inter, system-ui, Arial, sans-serif;
  padding-bottom:72px; /* safe space for fixed footer */
}

/* Topbar */
.topbar{
  border-bottom:1px solid var(--border);
  background:#0b000e;
  position:sticky; top:0; z-index:20;
}
.nav{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:16px;
  padding:10px 16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; color:var(--pink); letter-spacing:1px;
  text-decoration:none;
}
.logo{height:28px; width:auto}
.nav-links{display:flex; gap:14px; flex:1}
.nav a{color:var(--light); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}

/* Buttons */
.btn{
  background:#1a001e;
  border:1px solid var(--border);
  color:var(--light);
  padding:8px 14px; border-radius:10px;
  cursor:pointer; transition:.18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:var(--accent); color:#000; border-color:#ff4be6; font-weight:700}
.btn.outline{background:transparent; border-color:var(--pink); color:var(--pink)}

/* Hero */
.hero{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr;
  gap:24px; padding:24px 16px 8px;
}
.left{display:flex; flex-direction:column; gap:16px}

.slogan{
  font-size: clamp(32px, 4vw, 46px);  /* responsive but capped */
  line-height: 1.28;                  /* more space between the 2 lines */
  letter-spacing: .5px;               /* subtle tracking */
  margin: 6px 0 14px;                 /* a touch more bottom space */
  color: var(--pink);
}
.muted{color:var(--muted)}
.actions{display:flex; gap:10px}
.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:var(--card);
  padding:12px; border:1px solid var(--border); border-radius:12px;
}
.stats div{
  display:flex; justify-content:space-between;
  padding:8px 10px; background:#0f0012; border-radius:8px;
}
.stats span{color:var(--muted); font-size:13px}
.stats strong{color:var(--light)}
.status{min-height:22px; color:var(--pink); font-size:14px}

/* Viewer placeholder (RIGHT COLUMN) — smaller now */
.viewer-placeholder{
  width:100%;
  height:520px; /* fixed height so it never jumps */
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:12px;
  background:#000; color:var(--pink);
  overflow:hidden; /* prevents stretching */
}

/* Sections (tab panes) */
.section{
  max-width:1200px; margin:0 auto; padding:32px 16px;
  display:none; opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}
.section.active{
  display:block; opacity:1; transform:translateY(0);
}
.section h2{margin:0 0 12px; color:var(--pink)}
.roadmap{margin:0; padding-left:18px}

/* Open animation placeholder */
.open-anim{
  margin-top:12px; height:120px;
  border:1px dashed var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--pink);
}
.open-anim.flash{animation:flash .3s ease-in-out 3}
@keyframes flash{from{opacity:.3} to{opacity:1}}

/* Footer — fixed bottom nav aligned to 1200px container */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;

  display:flex; justify-content:space-between; align-items:center;
  gap:16px;

  padding:12px 16px;              /* base padding for small screens */
  background:rgba(11, 0, 16, 0.9);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--border);
  box-shadow:0 -6px 24px rgba(0,0,0,0.35);
}

/* Keep button spacing the same */
.footer .group{ display:flex; gap:12px; }

/* Align groups with the 1200px content container on wide screens */
@media (min-width: 1200px){
  .footer .group:first-child{
    margin-left: calc((100vw - 1200px)/2);
  }
  .footer .group:last-child{
    margin-right: calc((100vw - 1200px)/2);
  }
}

/* Mobile tweaks */
@media (max-width: 640px){
  .footer{ justify-content:center; flex-wrap:wrap; gap:10px }
  .footer .group:first-child,
  .footer .group:last-child{ margin-left:0; margin-right:0; }
}

/* Active nav link */
.nav-links a.active{color:var(--pink); font-weight:700}

/* Responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .viewer-placeholder{height:320px}      /* ↓ smaller on tablet/mobile */
  .stats{grid-template-columns:1fr}
}
@media (max-width:640px){
  .footer{justify-content:center; flex-wrap:wrap; gap:10px}
}