/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#000; --bg2:#0a0a1a; --ink:#fff; --muted:#aaa; --accent:#6cb6ff;
  --panel:#000; --panelBorder:rgba(255,255,255,.18); --rule:rgba(255,255,255,.08);
  --glass:rgba(20,20,40,.8); --glassGlow:rgba(100,100,255,.2);
}
html,body{
  width:100%; min-height:100%;
  color:var(--ink);
  background: radial-gradient(circle at center, var(--bg2) 0%, var(--bg) 100%);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-overflow-scrolling:touch; overflow-x:hidden;
}
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:transparent;pointer-events:none}
.content{position:relative;z-index:2;text-align:center;padding:3rem 1.5rem 6rem}

/* ===== Brand row (logo + menu) ===== */
.brand-row{
  position:relative; display:inline-block; /* keeps logo centered via .content text-align */
}
.logo{width:420px; max-width:80vw; height:auto; display:block; margin:0 auto 1rem}

/* Place the hamburger to the RIGHT of the logo without moving the logo */
.navbar{
  position:absolute; top:50%; left:100%; transform:translate(12px,-50%); /* 12px gap to the right */
  z-index:10000; display:flex; justify-content:flex-end; align-items:flex-start;
}

/* On very narrow screens, keep it visible by pinning to viewport right */
@media (max-width:480px){
  .navbar{ position:fixed; top:16px; right:16px; left:auto; transform:none; }
}

/* Hamburger button */
.menu-toggle{
  display:inline-flex; flex-direction:column; gap:6px;
  padding:10px 12px; background:#000;
  border:1px solid rgba(255,255,255,.3); border-radius:10px;
  cursor:pointer; color:#fff; z-index:5;
}
.menu-toggle .bar{width:24px;height:2px;background:#fff;border-radius:2px;display:block}

/* Dropdown panel: fixed overlay (does not push layout) */
.nav-links{
  position:fixed; top:0; left:0; z-index:9999; min-width:240px;
  background:var(--panel); border:1px solid var(--panelBorder); border-radius:12px;
  list-style:none; margin:0; padding:8px 6px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  perspective:900px;
}
.navbar.open .nav-links{opacity:1;visibility:visible;pointer-events:auto}

/* Rectangles + flip animation */
.nav-links li{transform-origin:top;transform:rotateX(-90deg);opacity:0}
.nav-links a{
  display:block; margin:6px 6px; padding:.85rem 1rem;
  background:#0b0b12; border:1px solid rgba(255,255,255,.08); border-radius:10px;
  color:#fff; text-decoration:none; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.25) inset, 0 3px 10px rgba(0,0,0,.18);
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.nav-links a:hover{ background:#111324; border-color:rgba(255,255,255,.14); transform:translateY(-1px)}
.nav-links a.active{ color:var(--accent) }

@keyframes flipIn{0%{transform:rotateX(-90deg);opacity:0}60%{transform:rotateX(12deg);opacity:1}100%{transform:rotateX(0);opacity:1}}
.navbar.open .nav-links.animate li:nth-child(1){animation:flipIn .36s ease-out .02s forwards}
.navbar.open .nav-links.animate li:nth-child(2){animation:flipIn .36s ease-out .08s forwards}
.navbar.open .nav-links.animate li:nth-child(3){animation:flipIn .36s ease-out .14s forwards}
.navbar.open .nav-links.animate li:nth-child(4){animation:flipIn .36s ease-out .20s forwards}
.navbar.open .nav-links.animate li:nth-child(5){animation:flipIn .36s ease-out .26s forwards}
.navbar.open .nav-links.animate li:nth-child(6){animation:flipIn .36s ease-out .32s forwards}
.navbar:not(.open) .nav-links li{transform:rotateX(-90deg);opacity:0}

/* Card + text */
.form-container{
  background:var(--glass); backdrop-filter:blur(8px);
  border-radius:16px; padding:2rem; margin:0 auto; max-width:720px;
  box-shadow:0 0 20px var(--glassGlow);
}
.form-container h1{margin-bottom:.75rem}
.form-container p{line-height:1.6;margin-bottom:.75rem}
.links-list{list-style:none} .links-list li{margin:.5rem 0}
a{color:var(--accent);text-decoration:underline}
footer{margin-top:3rem;font-size:.9rem;color:var(--muted)}