/* ===============================
   GLOBAL RESET
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --bg1: #02030a;
  --bg2: #0b1020;
  --accent1: #5da9ff;
  --accent2: #ffd36a;
  --muted: #cfd8ff;
}

/* Body + background */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #fff;
  overflow-x: hidden;
  background: linear-gradient(120deg, var(--bg1), var(--bg2), var(--bg1));
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.locked {
  overflow: hidden;
}

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
}
.loader-content { text-align: center; }
.glitch { font-size: 2rem; letter-spacing: 0.4em; }
.progress { width: 200px; height: 2px; background: rgba(255,255,255,0.15); margin-top: 20px; }
.progress span { display: block; height: 100%; width: 0%; background: var(--accent1); }

/* Brand */
.brand { position: fixed; top: 20px; left: 20px; display:flex; align-items:center; gap:14px; z-index:20; pointer-events:none; }
.logo-orbit { width:48px; height:48px; }
#logo { width:100%; height:100%; border-radius:50%; filter:drop-shadow(0 0 12px rgba(255,215,120,0.4)); }
.brand-text { font-size:1.3rem; font-weight:800; letter-spacing:.25em; background:linear-gradient(120deg,var(--accent1),var(--accent2),var(--accent1)); background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientFlow 6s linear infinite; }
@keyframes gradientFlow { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }

/* Background layers */
#quantum, #nfts { position: fixed; inset: 0; z-index:-1; pointer-events:none; }
/* NFT images */
#nfts img { position: absolute; width:120px; opacity:0.85; filter:drop-shadow(0 0 14px rgba(93,169,255,0.25)); }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; padding:0 10vw; position:relative; z-index:5; }
.hero-text { max-width:520px; }
.hero h1 { background: linear-gradient(120deg, var(--accent1), var(--accent2), #9b7cff, var(--accent1)); background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:heroColorFlow 6s linear infinite; }
@keyframes heroColorFlow { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
.hero p { margin-top:14px; color:var(--muted); line-height:1.6; }

/* Roadmap */
.roadmap { padding:120px 10vw; max-width:100%; position:relative; z-index:5; }
.roadmap h2 { font-size:2.5rem; margin-bottom:40px; }
.roadmap-wrapper { display:grid; grid-template-columns:1fr 80px; gap:60px; align-items:flex-start; }
.roadmap-content { width:100%; min-width:0; }
.roadmap-track { position:relative; padding-left:40px; }
.roadmap-track::before { content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background: rgba(93,169,255,0.15); }
.trace { position:absolute; left:10px; top:0; width:2px; height:80px; background: linear-gradient(to bottom, transparent, var(--accent1), transparent); filter:drop-shadow(0 0 10px var(--accent1)); }
.step { margin-bottom:60px; width:100%; }
.phase-toggle { background:none; border:none; color:white; width:100%; text-align:left; display:flex; align-items:center; cursor:pointer; gap:12px; }
.phase-toggle h3 { font-size:1.2rem; line-height:1.3; }
.arrow { font-size:1.4rem; color:var(--accent1); transition:transform .3s ease; }
.step .content { max-width:100%; overflow:visible; opacity:0; max-height:0; transition:max-height .5s ease, opacity .3s ease; }
.step.active .content { opacity:1; max-height:600px; margin-top:10px; }
.step.active .arrow { transform: rotate(45deg); }
.step .content p { color:var(--muted); line-height:1.6; word-break:break-word; }

/* Roadmap socials */
.roadmap-socials { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:14px; flex-wrap:nowrap; }
.social-btn { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; }
.social-btn img { width:40px; height:40px; }
.social-btn:hover { transform:scale(1.08); box-shadow:0 0 20px rgba(93,169,255,0.6); }
.whitelist-text-btn { margin-top:6px; font-weight:800; letter-spacing:.2em; cursor:pointer; text-transform:uppercase; background:linear-gradient(120deg,var(--accent1),var(--accent2),var(--accent1)); background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:wlGlow 4s ease infinite; }
@keyframes wlGlow { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
.whitelist-text-btn:hover { animation:wlPulse 1.2s ease-in-out infinite; }
@keyframes wlPulse { 0%{text-shadow:0 0 6px rgba(93,169,255,0.4)}50%{text-shadow:0 0 16px rgba(255,211,106,0.9)}100%{text-shadow:0 0 6px rgba(93,169,255,0.4)} }
.whitelist-text-btn { position:relative; }
.whitelist-text-btn::after { content:""; position:absolute; left:0; bottom:-6px; width:0%; height:2px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:0 0 12px rgba(255,211,106,0.9); transition:width .4s ease; }
.whitelist-text-btn.active::after { width:100%; }
.apply-btn { /* subtle pulse to attract attention */ animation: applyPulse 3s ease-in-out infinite; }
@keyframes applyPulse { 0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)} }

/* Wallet UI */
.wallet-inline { max-width:420px; margin:40px auto 0; padding:26px; background: linear-gradient(180deg,#0b1020,#02030a); border:1px solid rgba(255,255,255,0.15); opacity:0; transform:translateY(40px); max-height:0; overflow:hidden; transition:all .6s ease; border-radius:18px; }
.wallet-inline.show { opacity:1; transform:translateY(0); max-height:500px; }
.wallet-inline button { padding:14px 34px; font-size:15px; border-radius:999px; border:none; font-weight:600; cursor:pointer; background:linear-gradient(120deg,var(--accent1),var(--accent2)); color:#02030a; margin-right:10px; }
#wallet input { width:100%; height:48px; padding:0 16px; margin-bottom:18px; background:rgba(255,255,255,0.06); border:1px solid rgba(120,170,255,0.35); border-radius:14px; color:#fff; font-size:.95rem; letter-spacing:.04em; transition:all .25s ease; }
#wallet input::placeholder { color:rgba(255,255,255,.5); }
#wallet input:focus { outline:none; border-color:var(--accent2); box-shadow:0 0 0 2px rgba(255,211,106,0.15), 0 0 20px rgba(255,211,106,0.35); }
#wallet button:hover { box-shadow:0 12px 30px rgba(255,211,106,0.45); }
#wlResult { margin-top:14px; font-size:.9rem; text-align:center; }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.72); display:none; align-items:center; justify-content:center; z-index:9999; padding:28px; }
.modal-inner { width:min(720px,96%); max-width:720px; background: linear-gradient(120deg, rgba(11,16,32,0.98), rgba(3,6,12,0.98)); border-radius:14px; padding:28px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,0.6), inset 0 0 60px rgba(93,169,255,0.02); border:1px solid rgba(255,255,255,0.05); background-size:300% 300%; animation: modalGradient 6s linear infinite; }
@keyframes modalGradient { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
.modal-close { position:absolute; right:14px; top:12px; background:transparent; border:none; font-size:20px; color:rgba(255,255,255,0.8); cursor:pointer; }

/* Form */
#whitelistForm { display:grid; gap:10px; margin-top:8px; }
#whitelistForm label { font-size:.85rem; color:rgba(255,255,255,0.9); margin-top:6px; }
#whitelistForm input[type="text"], #whitelistForm input[type="url"], #whitelistForm textarea { width:100%; padding:12px 14px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); color:#fff; border-radius:10px; font-size:.95rem; resize:vertical; }
#whitelistForm textarea { min-height:90px; }
#whitelistForm button { padding:12px 18px; border-radius:12px; border:none; font-weight:700; cursor:pointer; background:linear-gradient(120deg,var(--accent1),var(--accent2)); color:#07101a; }

/* Responsive */
@media (max-width: 768px) {
  #nfts img { width:80px; opacity:.75; }
  .brand-text { font-size:1.1rem; }
  .roadmap-wrapper { grid-template-columns:1fr; }
  .wallet-inline { width:94%; padding:24px 20px 28px; }
  .modal-inner { padding:18px; border-radius:12px; }
}

/* Keep background layers non-interactive */
#nfts, #nfts img, #quantum { pointer-events:none !important; z-index:-1 !important; }