/* TPR — shared design system for the landing page and the dashboard.
   One gradient drives every accent, and the 3D scene samples the same four
   colours, so both pages read as one product. */

:root{
  --ink:#050716;
  --ink-2:#080c24;
  --glass:rgba(9,13,38,.58);
  --glass-2:rgba(14,20,54,.72);
  --glass-solid:#0d1232;
  --line:rgba(0,240,255,.14);
  --line-2:rgba(217,70,239,.22);
  --text:#cbd5e1;
  --muted:#8492a6;
  --white:#ffffff;

  --cyan:#00f0ff;
  --blue:#38bdf8;
  --violet:#8b5cf6;
  --magenta:#d946ef;
  --amber:#fbbf24;
  --gold:#f59e0b;
  --lime:#00e676;
  --red:#f43f5e;

  --grad:linear-gradient(95deg,#00f0ff 0%,#38bdf8 26%,#8b5cf6 64%,#d946ef 100%);
  --grad-gold:linear-gradient(100deg,#fffbeb 0%,#fde047 30%,#f59e0b 70%,#d946ef 100%);

  --f-display:"Outfit","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --wrap:1320px;
  --pad:clamp(18px,4vw,52px);
  --r:20px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --top-h:84px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 12px);}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:400 16px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;color:var(--white);font-family:var(--f-display);font-weight:600;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
strong{color:var(--white);font-weight:600;}
.mono{font-family:var(--f-mono);letter-spacing:.04em;}
::selection{background:var(--magenta);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}

.grad,.grad-gold{
  background:var(--grad);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:grad-slide 9s ease-in-out infinite;
}
.grad-gold{background-image:var(--grad-gold);}
@keyframes grad-slide{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

.label{font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--cyan);}

/* ---------------------------------------------------------------- layers */

.bg-wash{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(45vmax 40vmax at 85% 12%,rgba(217,70,239,.18),transparent 70%),
    radial-gradient(40vmax 36vmax at 5% 45%,rgba(0,240,255,.14),transparent 70%),
    radial-gradient(42vmax 36vmax at 75% 90%,rgba(139,92,246,.18),transparent 70%),
    var(--ink);
}
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;transition:opacity .2s linear;}
.no-webgl .bg-wash{animation:wash-drift 18s ease-in-out infinite alternate;}
@keyframes wash-drift{to{filter:hue-rotate(60deg);}}
.flash{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(120vmax 80vmax at 50% 0%,rgba(190,240,255,.9),rgba(217,70,239,.35) 45%,transparent 75%);}
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.022;   /* at .05 it read as dirt over the particles */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 2.4s steps(4) infinite;
}
@keyframes grain{25%{transform:translate(-3%,2%);}50%{transform:translate(2%,-3%);}75%{transform:translate(-2%,-1%);}}

.glass{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
}

/* ---------------------------------------------------------------- loader */

.loader{
  position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:18px;
  background:var(--ink);transition:opacity .8s var(--ease),visibility .8s;
}
.no-js .loader,.ready .loader{opacity:0;visibility:hidden;pointer-events:none;}
.loader-mark{width:min(260px,58vw);filter:drop-shadow(0 0 30px rgba(0,240,255,.5)) drop-shadow(0 0 50px rgba(217,70,239,.4));animation:loader-float 2.4s ease-in-out infinite;}
@keyframes loader-float{50%{transform:translateY(-8px) scale(1.04);}}
.loader-count{font:600 clamp(2.6rem,7vw,4.4rem)/1 var(--f-display);color:var(--white);letter-spacing:-.02em;}
.loader-bar{width:min(260px,60vw);height:3px;border-radius:9px;background:var(--line);overflow:hidden;}
.loader-bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s linear;}
.loader-cap{font-size:.72rem;text-transform:uppercase;color:var(--muted);letter-spacing:.2em;}

/* ---------------------------------------------------------------- header: floating pill */

.top{position:fixed;top:12px;left:0;right:0;z-index:50;padding-inline:var(--pad);pointer-events:none;}
.top-bar{
  pointer-events:auto;position:relative;max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;gap:18px;height:60px;padding:0 10px 0 16px;border-radius:999px;
  background:rgba(9,13,38,.65);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.top.scrolled .top-bar{background:rgba(7,10,30,.9);border-color:var(--line-2);box-shadow:0 18px 50px -20px rgba(0,0,0,.85),0 0 30px -10px rgba(0,240,255,.2);}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:50px;width:auto;filter:drop-shadow(0 0 12px rgba(0,240,255,.45)) drop-shadow(0 0 20px rgba(217,70,239,.3));transition:transform .4s var(--ease);}
.brand:hover img{transform:scale(1.07) rotate(-2deg);}
.brand-txt{font:700 1.15rem/1 var(--f-display);color:var(--white);letter-spacing:.06em;}

.pill{margin-inline:auto;}
.nav-links{display:flex;gap:2px;}
.nav-links a{display:block;padding:9px 14px;border-radius:999px;font-size:.88rem;color:var(--text);transition:color .25s,background .25s;}
.nav-links a:not(.btn):hover{color:var(--white);background:rgba(255,255,255,.08);}
.nav-links a.active{color:var(--white);background:linear-gradient(100deg,rgba(0,240,255,.2),rgba(139,92,246,.25),rgba(217,70,239,.2));border:1px solid rgba(0,240,255,.3);box-shadow:0 0 16px -4px rgba(0,240,255,.35);}
.nav-cta-sm{display:none;}
.top-actions{display:flex;align-items:center;gap:10px;}
.live-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:.7rem;
  color:var(--muted);border:1px solid var(--line);letter-spacing:.1em;white-space:nowrap;}
.live-chip i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:live 1.8s infinite;}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(0,230,118,.7);}70%{box-shadow:0 0 0 8px rgba(0,230,118,0);}100%{box-shadow:0 0 0 0 rgba(0,230,118,0);}}
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--glass);cursor:pointer;position:relative;}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease);}
.nav-toggle span:first-child{top:16px;}
.nav-toggle span:last-child{top:24px;}
.nav-toggle[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg);}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  padding:.72rem 1.3rem;border-radius:999px;font:700 .9rem/1 var(--f-display);letter-spacing:.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-position .6s var(--ease),border-color .3s,opacity .3s;
  cursor:pointer;border:0;
}
.btn-lg{padding:1rem 1.75rem;font-size:1rem;}
.btn-grad{background:var(--grad);background-size:200% 100%;color:#050716;
  box-shadow:0 0 24px rgba(0,240,255,.38),0 10px 30px -8px rgba(139,92,246,.75),0 0 0 1px rgba(255,255,255,.2) inset;}
.btn-grad:hover{background-position:100% 0;transform:translateY(-2px);
  box-shadow:0 0 34px rgba(217,70,239,.6),0 16px 40px -8px rgba(217,70,239,.8),0 0 0 1px rgba(255,255,255,.3) inset;}
.btn-line{color:var(--white);border:1px solid var(--line-2);background:rgba(255,255,255,.04);backdrop-filter:blur(10px);}
.btn-line:hover{border-color:var(--cyan);background:rgba(0,240,255,.08);box-shadow:0 0 20px rgba(0,240,255,.3);transform:translateY(-2px);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

/* ---------------------------------------------------------------- reveal */

.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js [data-reveal].in{opacity:1;transform:none;}

/* ---------------------------------------------------------------- responsive header */

@media (max-width:1100px){
  .live-chip{display:none;}
  .nav-links a{padding:9px 10px;}
}
@media (max-width:900px){
  /* the one Connect Wallet button stays in the bar; the menu holds only the section links */
  .nav-cta{padding:.6rem 1rem;font-size:.82rem;}
  .nav-toggle{display:block;}
  .top-actions{margin-left:auto;}
  /* the closed menu must not catch taps meant for the page below it */
  .pill{position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;pointer-events:none;}
  .nav-links{
    flex-direction:column;gap:2px;padding:12px;border-radius:24px;
    background:rgba(13,10,43,.97);border:1px solid var(--line-2);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--ease),visibility .3s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .nav-links a:not(.btn){padding:13px 14px;font-size:1.02rem;border-radius:14px;}
  .nav-cta-sm{display:block;padding:8px 0 2px;}
  .nav-cta-sm .btn{width:100%;padding:13px;}
}
@media (max-width:600px){
  :root{--top-h:76px;}
  .top{top:8px;}
  .top-bar{height:54px;}
  .brand img{height:42px;}
}