:root{
  --bg:#04070a; --panel:#0b1318; --panel-2:#0f1a21;
  --line:rgba(126,224,235,0.10); --line-strong:rgba(126,224,235,0.22);
  --cyan:#7ee0eb; --cyan-bright:#a8f4ff; --teal:#3fd9c4;
  --violet:#9b8cff; --violet-bright:#c4b6ff;
  --text:#dfeef2; --muted:#6f8893; --muted-2:#516570;
  --danger:#ff6b7d; --warn:#ffc46b; --good:#5ef0c0;
  --display:'Space Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--display);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:rgba(126,224,235,0.25);color:#fff}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* 3D / fallback background */
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg-fallback{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:
    radial-gradient(60% 50% at 22% 38%, rgba(63,217,196,0.18), transparent 60%),
    radial-gradient(55% 45% at 74% 46%, rgba(155,140,255,0.20), transparent 60%),
    radial-gradient(50% 40% at 30% 70%, rgba(126,224,235,0.12), transparent 60%);
  animation:driftbg 16s ease-in-out infinite alternate}
#bg-fallback.on{display:block}
@keyframes driftbg{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.12) translateY(-20px)}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 60% 30%,transparent 40%,rgba(4,7,10,0.55) 78%,var(--bg) 100%)}

/* page-enter loader / transition */
#scene-loader{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:opacity .8s}
#scene-loader.hide{opacity:0;pointer-events:none}
#scene-loader .ring{width:42px;height:42px;border:2px solid var(--line);border-top-color:var(--cyan);
  border-radius:50%;animation:spin 1s linear infinite}
#scene-loader span{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}

/* route transition wipe (used when navigating to scanner) */
#route-wipe{position:fixed;inset:0;z-index:80;background:var(--bg);transform:scaleY(0);transform-origin:bottom;
  pointer-events:none;display:flex;align-items:center;justify-content:center}
#route-wipe.go{animation:wipeUp .65s cubic-bezier(.7,0,.3,1) forwards}
#route-wipe .rw-mark{opacity:0}
#route-wipe.go .rw-mark{animation:rwFade .65s ease forwards}
@keyframes wipeUp{0%{transform:scaleY(0);transform-origin:bottom}45%{transform:scaleY(1);transform-origin:bottom}
  55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}}
@keyframes rwFade{0%,100%{opacity:0}40%,60%{opacity:1}}
.rw-mark img{width:54px;border-radius:12px;box-shadow:0 0 30px rgba(126,224,235,.5)}

/* page intro fade-up for scanner page */
.page-enter{opacity:0;transform:translateY(18px)}
.page-enter.ready{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(4,7,10,0.85),rgba(4,7,10,0.2));border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600}
.brand img{width:34px;height:34px;border-radius:9px;object-fit:cover;box-shadow:0 0 18px rgba(126,224,235,0.4)}
.brand b{font-size:16px}.brand span{color:var(--cyan)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--cyan)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-cta{font-family:var(--mono);font-size:12.5px;padding:9px 16px;border:1px solid var(--line-strong);
  border-radius:8px;color:var(--cyan);transition:.2s}
.nav-cta:hover{background:rgba(126,224,235,0.08);box-shadow:0 0 22px rgba(126,224,235,0.2)}
.buy-coin{font-family:var(--mono);font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:8px;
  background:linear-gradient(120deg,var(--cyan),var(--teal));color:#022026;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 0 24px rgba(63,217,196,0.32);transition:.2s;border:1px solid transparent}
.buy-coin:hover{transform:translateY(-1px);box-shadow:0 0 38px rgba(63,217,196,0.55)}
.menu-btn{display:none;background:none;border:1px solid var(--line-strong);color:var(--cyan);
  border-radius:7px;padding:7px 11px;font-size:18px;cursor:pointer}

/* buttons */
.btn{font-family:var(--mono);font-size:13.5px;padding:14px 24px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;transition:.2s;display:inline-flex;align-items:center;gap:9px}
.btn-primary{background:linear-gradient(120deg,var(--cyan),var(--teal));color:#022026;font-weight:700;
  box-shadow:0 0 30px rgba(63,217,196,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(63,217,196,0.5)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(155,140,255,0.07);border-color:var(--violet)}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:880px){
  .nav-links{display:none}.menu-btn{display:block}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  #route-wipe.go{animation:none}
}