:root{
  --bg:#05070f;
  --cyan:#2ee9ff;
  --magenta:#ff2e9a;
  --violet:#8b6bff;
  --gold:#ffd166;
  --text:#e6edff;
  --muted:#7e8db5;
  --glass:rgba(14,22,44,.55);
  --line:rgba(120,170,255,.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Rajdhani',sans-serif;color:var(--text);background:var(--bg);
  height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
}

.scene{position:fixed;inset:0;z-index:0;overflow:hidden;}
.aurora{
  position:absolute;inset:-20% -10% auto -10%;height:70%;
  background:
    radial-gradient(60% 80% at 25% 0%, rgba(46,233,255,.20), transparent 60%),
    radial-gradient(55% 75% at 80% 10%, rgba(255,46,154,.18), transparent 60%),
    radial-gradient(50% 60% at 55% 30%, rgba(139,107,255,.16), transparent 65%);
  filter:blur(8px);
}
.grid{
  position:absolute;left:50%;bottom:0;width:240%;height:46%;
  transform:translateX(-50%) perspective(420px) rotateX(70deg);transform-origin:bottom center;
  background-image:
    linear-gradient(rgba(46,233,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,233,255,.18) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to top, #000 0%, transparent 75%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 75%);
  opacity:.55;
}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;z-index:1;}
.skyline.back{opacity:.45;filter:blur(2px);bottom:8%;}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,.7));}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px, rgba(0,0,0,.10) 3px 4px);mix-blend-mode:overlay;opacity:.5;}

.panel{
  position:relative;z-index:5;width:min(560px,92vw);
  padding:clamp(20px,3.5vh,34px) clamp(20px,5vw,40px);
  background:var(--glass);border:1px solid var(--line);border-radius:18px;
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(46,233,255,.06);
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg, rgba(46,233,255,.6), transparent 40%, transparent 60%, rgba(255,46,154,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.panel::after{
  content:"";position:absolute;inset:8px;border-radius:12px;pointer-events:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left top/14px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left top/1px 14px no-repeat,
    linear-gradient(var(--magenta),var(--magenta)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--magenta),var(--magenta)) right bottom/1px 14px no-repeat;
  opacity:.7;
}

.eyebrow{display:flex;align-items:center;gap:8px;justify-content:center;
  font-weight:600;letter-spacing:.42em;font-size:.66rem;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s ease-in-out infinite;}

h1{
  font-family:'Orbitron',sans-serif;font-weight:900;text-align:center;
  font-size:clamp(1.3rem,4.6vw,2rem);letter-spacing:.16em;line-height:1;
  background:linear-gradient(180deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:clamp(12px,2.4vh,22px);
}

/* ---------- carousel ---------- */
.carousel-wrapper{position:relative;overflow:hidden;}
.carousel{display:flex;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.carousel-page{min-width:100%;flex-shrink:0;}

.readout{text-align:center;margin-bottom:clamp(12px,2vh,18px);}
.pct{
  font-family:'Orbitron',sans-serif;font-weight:900;line-height:.9;
  font-size:clamp(3.4rem,16vw,6.2rem);letter-spacing:.02em;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pct-main{background-image:linear-gradient(180deg,var(--cyan) 0%,#bff6ff 45%,var(--violet) 100%);}
.pct-hlta{background-image:linear-gradient(180deg,var(--magenta) 0%,#ffb8d4 45%,var(--violet) 100%);}
.pct .u{font-size:.42em;color:var(--magenta);-webkit-text-fill-color:var(--magenta);filter:none;margin-left:.05em;}
.pct-label{font-weight:600;letter-spacing:.34em;font-size:.66rem;color:var(--muted);text-transform:uppercase;margin-top:2px;}

.track{position:relative;height:12px;border-radius:20px;margin:0 0 8px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);overflow:hidden;}
.fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:20px;
  transition:width 2.2s cubic-bezier(.16,1,.3,1);}
.fill-main{
  background:linear-gradient(90deg,var(--violet),var(--cyan) 60%,#dffaff);}
.fill-hlta{
  background:linear-gradient(90deg,var(--violet),var(--magenta) 60%,#ffb8d4);}
.fill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:200% 100%;animation:sheen 2.4s linear infinite;}
.ends{display:flex;justify-content:space-between;font-weight:600;font-size:.68rem;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:clamp(14px,2.6vh,22px);}
.ends b{color:var(--text);font-weight:700;}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stat{text-align:center;padding:clamp(8px,1.6vh,14px) 4px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);}
.stat .n{font-family:'Orbitron',sans-serif;font-weight:700;color:#fff;font-size:clamp(1.05rem,4.5vw,1.6rem);text-shadow:0 0 14px rgba(46,233,255,.35);}
.stat .c{font-weight:600;letter-spacing:.18em;font-size:.56rem;color:var(--muted);text-transform:uppercase;margin-top:3px;}

.dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(10px,1.6vh,14px);}
.dot-nav{width:6px;height:6px;border-radius:50%;background:rgba(46,233,255,.25);cursor:pointer;transition:all .3s ease;}
.dot-nav.active{background:var(--cyan);width:16px;border-radius:3px;}

.status{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(12px,2.2vh,18px);
  font-weight:600;letter-spacing:.28em;font-size:.6rem;color:var(--muted);text-transform:uppercase;}
.status .live{width:7px;height:7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta);animation:pulse 1.6s ease-in-out infinite;}

.wealth{width:100%;margin-top:clamp(10px,1.8vh,16px);}
.wealth-eyebrow{text-align:center;font-weight:600;letter-spacing:.34em;font-size:.58rem;color:var(--gold);
  text-transform:uppercase;margin-bottom:6px;text-shadow:0 0 10px rgba(255,209,102,.5);}
.pct-cash{font-size:clamp(2rem,9vw,3.2rem);background-image:linear-gradient(180deg,var(--gold) 0%,#fff3cf 45%,var(--violet) 100%);}

.home{display:none;text-align:center;font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.16em;color:var(--cyan);
  font-size:clamp(1rem,4vw,1.4rem);margin-top:14px;text-shadow:0 0 18px rgba(46,233,255,.6);}

.joke{
  position:relative;z-index:5;width:min(520px,92vw);
  margin-top:clamp(12px,2.6vh,24px);text-align:center;pointer-events:none;
  animation:jokeIn 1.1s cubic-bezier(.16,1,.3,1) .35s both;
}
.joke-eyebrow{font-weight:600;letter-spacing:.34em;font-size:.58rem;color:var(--magenta);
  text-transform:uppercase;margin-bottom:6px;text-shadow:0 0 10px rgba(255,46,154,.5);}
.joke-text{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-weight:600;font-size:clamp(.95rem,3.4vw,1.25rem);line-height:1.25;
  color:var(--text);padding:10px 18px;border-radius:14px;
  background:rgba(10,16,34,.66);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 26px rgba(46,233,255,.12);
  animation:floaty 4.5s ease-in-out infinite;
}

.qctext{font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff,#bcd6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.qcflag,.caflag{
  position:relative;display:inline-block;flex:0 0 auto;
  width:clamp(70px,20vw,98px);aspect-ratio:3/2;border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.25);
}
.qcflag{background:linear-gradient(#fff,#fff) 50% 50%/13% 100% no-repeat,linear-gradient(#fff,#fff) 50% 50%/100% 20% no-repeat,#0a3d91;}
.qcflag .fdl{position:absolute;color:#fff;line-height:1;font-size:clamp(12px,3.6vw,18px);transform:translate(-50%,-50%);text-shadow:0 0 4px rgba(0,0,0,.2);}
.qcflag .tl{left:25%;top:27%;} .qcflag .tr{left:75%;top:27%;}
.qcflag .bl{left:25%;top:73%;} .qcflag .br{left:75%;top:73%;}
.caflag{background:linear-gradient(90deg,#d52b1e 0 25%,#fff 25% 75%,#d52b1e 75% 100%);}
.caflag .leaf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(20px,6vw,30px);line-height:1;}

@keyframes jokeIn{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes floaty{0%,100%{transform:translateY(-3px);}50%{transform:translateY(3px);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes sheen{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@keyframes flick{0%,100%{opacity:.9;}48%{opacity:.4;}52%{opacity:1;}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .fill{transition:width .5s ease;}
  .carousel{transition:transform .3s ease;}
}