@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  --bg:#030305;
  --bg2:#08060a;
  --panel:#0b080d;
  --panel2:#100b12;

  --red:#ff1744;
  --red2:#b00020;

  --purple:#7c00ff;
  --purple2:#3b006f;

  --white:#f7f4f8;
  --text:#d7d0da;
  --muted:#746c78;

  --line:rgba(255,255,255,.075);

  --gradient:linear-gradient(
    120deg,
    #ff1744 0%,
    #b000ff 55%,
    #5b00ff 100%
  );
}


/* =========================
   RESET
   ========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  color:var(--white);
  font-family:Inter,sans-serif;
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(124,0,255,.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 0% 55%,
      rgba(255,23,68,.08),
      transparent 27%
    ),
    radial-gradient(
      circle at 100% 85%,
      rgba(124,0,255,.09),
      transparent 30%
    ),
    var(--bg);

  overflow-x:hidden;
}


/* RED/PURPLE AMBIENT LIGHT */

body:before{
  content:"";
  position:fixed;
  width:650px;
  height:650px;
  top:-300px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(112,0,255,.11);
  filter:blur(130px);
  pointer-events:none;
  z-index:-2;
}


/* GRID TEXTURE */

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.025;

  background-image:
    linear-gradient(
      rgba(255,255,255,.5) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.5) 1px,
      transparent 1px
    );

  background-size:50px 50px;

  z-index:-1;
}


/* =========================
   TOP NAV
   ========================= */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;

  height:74px;

  z-index:500;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 26px;

  background:rgba(3,3,5,.78);
  backdrop-filter:blur(22px);

  border-bottom:1px solid var(--line);
}


/* RED TOP GLOW */

.topbar:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;

  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,23,68,.5),
    rgba(124,0,255,.5),
    transparent
  );
}


/* MENU */

.menu{
  width:44px;
  height:44px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  cursor:pointer;

  border:1px solid var(--line);
  border-radius:12px;

  background:rgba(255,255,255,.035);

  transition:.3s;
}

.menu:hover{
  border-color:rgba(255,23,68,.35);
  background:rgba(255,23,68,.06);
  box-shadow:0 0 25px rgba(255,23,68,.12);
}

.menu span{
  width:19px;
  height:2px;

  border-radius:5px;

  background:#eee;

  transition:.3s;
}


/* BRAND */

.brand{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  color:#fff;

  text-decoration:none;

  font:900 25px Rajdhani,sans-serif;

  letter-spacing:4px;
}

.brand span{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* ONLINE STATUS */

.status{
  display:flex;
  align-items:center;
  gap:8px;

  color:#77717b;

  font-size:9px;
  font-weight:800;

  letter-spacing:1px;
}

.status-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#45ff8a;

  box-shadow:
    0 0 7px #45ff8a,
    0 0 18px rgba(69,255,138,.5);
}


/* =========================
   SIDEBAR
   ========================= */

.overlay{
  position:fixed;
  inset:0;

  z-index:700;

  background:rgba(0,0,0,.72);

  backdrop-filter:blur(7px);

  opacity:0;
  visibility:hidden;

  transition:.35s;
}

.overlay.open{
  opacity:1;
  visibility:visible;
}


.sidebar{
  position:fixed;

  top:0;
  left:0;
  bottom:0;

  width:min(355px,89vw);

  z-index:800;

  padding:28px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(124,0,255,.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #0d080f,
      #040305
    );

  border-right:1px solid rgba(124,0,255,.2);

  transform:translateX(-105%);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1);
}

.sidebar.open{
  transform:translateX(0);
}


.side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-bottom:24px;

  border-bottom:1px solid var(--line);
}

.side-logo{
  font:900 28px Rajdhani,sans-serif;
  letter-spacing:3px;
}

.side-logo span{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


.close{
  border:0;
  background:none;

  color:#777;

  font-size:28px;

  cursor:pointer;

  transition:.25s;
}

.close:hover{
  color:#ff1744;
  transform:rotate(90deg);
}


/* NAV */

.nav{
  display:grid;
  gap:8px;

  margin-top:27px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:14px;

  padding:13px;

  border:1px solid transparent;
  border-radius:12px;

  color:#89818d;

  text-decoration:none;

  font-size:13px;
  font-weight:700;

  transition:.25s;
}

.nav a:hover,
.nav a.active{
  color:#fff;

  border-color:rgba(124,0,255,.16);

  background:
    linear-gradient(
      90deg,
      rgba(255,23,68,.09),
      rgba(124,0,255,.08)
    );

  box-shadow:
    inset 3px 0 0 #ff1744;
}

.nav a .ico{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:10px;

  color:#a8a0ac;

  background:rgba(255,255,255,.035);

  transition:.25s;
}

.nav a:hover .ico,
.nav a.active .ico{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      rgba(255,23,68,.18),
      rgba(124,0,255,.18)
    );
}


.side-bottom{
  position:absolute;

  left:28px;
  right:28px;
  bottom:28px;

  padding:16px;

  border:1px solid var(--line);
  border-radius:14px;

  background:rgba(255,255,255,.025);
}

.side-bottom small{
  color:#56505a;

  font-size:9px;
  letter-spacing:1px;
}


/* =========================
   PAGE
   ========================= */

.page{
  max-width:1200px;

  min-height:100vh;

  margin:auto;

  padding:
    145px
    25px
    75px;
}


/* =========================
   HERO
   ========================= */

.hero{
  min-height:650px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  position:relative;
}


.hero:before{
  content:"";

  position:absolute;

  width:550px;
  height:550px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(124,0,255,.14),
      rgba(255,23,68,.035),
      transparent 70%
    );

  filter:blur(15px);

  z-index:-1;
}


.hero-content{
  animation:
    heroIn .9s .1s both;
}

@keyframes heroIn{

  from{
    opacity:0;
    transform:translateY(28px) scale(.98);
  }

  to{
    opacity:1;
    transform:none;
  }

}


/* SMALL LABEL */

.mini{
  display:inline-block;

  padding:8px 14px;

  border:1px solid rgba(255,23,68,.2);

  border-radius:100px;

  color:#b6aab8;

  background:
    linear-gradient(
      90deg,
      rgba(255,23,68,.07),
      rgba(124,0,255,.07)
    );

  font-size:9px;
  font-weight:900;

  letter-spacing:2px;

  box-shadow:
    0 0 30px rgba(124,0,255,.05);
}


/* HERO TITLE */

.hero h1{
  margin-top:25px;

  font:900 clamp(70px,12vw,145px)/.78 Rajdhani,sans-serif;

  letter-spacing:-5px;
}

.gradient{
  background:
    linear-gradient(
      90deg,
      #ff1744 0%,
      #e90068 25%,
      #a000ff 65%,
      #5c00ff 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 0 25px rgba(124,0,255,.13));
}


.hero p{
  max-width:630px;

  margin:32px auto;

  color:#817984;

  line-height:1.8;

  font-size:13px;
}


/* BUTTONS */

.actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:11px;
}


.btn{
  display:inline-block;

  padding:14px 21px;

  border-radius:10px;

  color:#fff;

  text-decoration:none;

  font-size:10px;
  font-weight:900;

  letter-spacing:.5px;

  border:1px solid var(--line);

  transition:.3s;

  cursor:pointer;
}

.btn:hover{
  transform:translateY(-3px);
}


.primary{
  border:0;

  background:
    linear-gradient(
      120deg,
      #c90032,
      #7600d9
    );

  box-shadow:
    0 10px 35px rgba(255,23,68,.12),
    0 5px 25px rgba(124,0,255,.12);
}

.primary:hover{
  box-shadow:
    0 14px 40px rgba(255,23,68,.2),
    0 10px 35px rgba(124,0,255,.2);
}


.secondary{
  background:rgba(255,255,255,.035);
}

.secondary:hover{
  border-color:rgba(124,0,255,.3);
  background:rgba(124,0,255,.06);
}


/* SERVER IP */

.ip{
  width:min(420px,100%);

  margin:30px auto 0;

  padding:6px;

  display:flex;

  border-radius:12px;

  border:1px solid rgba(255,255,255,.075);

  background:rgba(0,0,0,.3);

  box-shadow:
    inset 0 0 30px rgba(0,0,0,.3);
}

.ip code{
  flex:1;

  padding:12px;

  color:#a88bc0;

  text-align:left;

  font-size:11px;
}

.copy{
  border:0;

  padding:0 15px;

  border-radius:8px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #a000ff,
      #d00045
    );

  cursor:pointer;

  font-size:9px;
  font-weight:900;
}


/* =========================
   PAGE TITLE
   ========================= */

.page-title{
  text-align:center;

  margin-bottom:55px;
}

.page-title h1{
  margin-top:17px;

  font:900 clamp(48px,8vw,84px) Rajdhani,sans-serif;

  letter-spacing:-2px;
}

.page-title p{
  max-width:620px;

  margin:14px auto;

  color:#7b737f;

  line-height:1.8;

  font-size:13px;
}


/* =========================
   MODE CARDS
   ========================= */

.mode-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}


.mode{
  min-height:235px;

  padding:26px;

  position:relative;
  overflow:hidden;

  border-radius:19px;

  border:1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

  transition:.35s;
}

.mode:after{
  content:"";

  position:absolute;

  width:130px;
  height:130px;

  right:-70px;
  bottom:-70px;

  border-radius:50%;

  background:rgba(124,0,255,.1);

  filter:blur(25px);
}

.mode:hover{
  transform:translateY(-7px);

  border-color:rgba(255,23,68,.25);

  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    inset 0 0 30px rgba(124,0,255,.025);
}

.mode-icon{
  font-size:31px;

  margin-bottom:52px;
}

.mode h3{
  font:800 27px Rajdhani,sans-serif;
}

.mode p{
  margin-top:7px;

  color:#756d79;

  font-size:11px;

  line-height:1.7;
}


/* =========================
   STORE
   ========================= */

.store-card{
  max-width:850px;

  margin:auto;

  padding:75px 30px;

  text-align:center;

  border:1px solid rgba(124,0,255,.15);

  border-radius:24px;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(124,0,255,.1),
      transparent 55%
    ),
    rgba(255,255,255,.02);

  box-shadow:
    0 30px 80px rgba(0,0,0,.25);
}

.store-card h2{
  font:800 42px Rajdhani,sans-serif;
}

.store-card p{
  max-width:600px;

  margin:12px auto 25px;

  color:#766e7b;

  line-height:1.7;

  font-size:12px;
}


/* =========================
   VOTE CARDS
   ========================= */

.vote-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}

.vote-card{
  padding:28px;

  text-align:center;

  border-radius:19px;

  border:1px solid var(--line);

  background:rgba(255,255,255,.03);
}

.vote-card .number{
  font:800 46px Rajdhani;

  background:var(--gradient);

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.vote-card h3{
  margin:5px 0 10px;

  font:800 24px Rajdhani;
}

.vote-card p{
  color:#746d79;

  font-size:11px;

  line-height:1.7;
}


/* =========================
   ABOUT
   ========================= */

.about{
  max-width:850px;

  margin:auto;
}

.about-box{
  padding:32px;

  margin-bottom:14px;

  border:1px solid var(--line);

  border-radius:19px;

  background:rgba(255,255,255,.025);

  transition:.3s;
}

.about-box:hover{
  border-color:rgba(124,0,255,.2);
}

.about-box h2{
  margin-bottom:12px;

  font:800 28px Rajdhani;
}

.about-box p{
  color:#817985;

  font-size:13px;

  line-height:1.8;
}


/* =========================
   CONTACT
   ========================= */

.contact{
  max-width:700px;

  margin:auto;
}

.contact-box{
  padding:34px;

  border-radius:20px;

  border:1px solid var(--line);

  background:rgba(255,255,255,.025);
}

.field{
  margin-bottom:16px;
}

.field label{
  display:block;

  margin-bottom:7px;

  color:#aaa1ad;

  font-size:10px;
  font-weight:800;
}

.field input,
.field textarea{
  width:100%;

  padding:13px;

  outline:0;

  border:1px solid var(--line);

  border-radius:10px;

  color:#fff;

  background:rgba(0,0,0,.3);

  font:13px Inter;

  transition:.25s;
}

.field input:focus,
.field textarea:focus{
  border-color:rgba(124,0,255,.4);

  box-shadow:
    0 0 20px rgba(124,0,255,.06);
}

.field textarea{
  min-height:140px;

  resize:vertical;
}


/* =========================
   FOOTER
   ========================= */

footer{
  padding:35px 25px;

  text-align:center;

  color:#4f4853;

  font-size:9px;

  letter-spacing:.5px;

  border-top:1px solid var(--line);

  background:#020204;
}


/* =========================
   INTRO
   ========================= */

#intro{
  position:fixed;

  inset:0;

  z-index:9999;

  display:grid;

  place-items:center;

  background:
    radial-gradient(
      circle at center,
      #12071a,
      #030305 65%
    );

  animation:introOut .8s 2.15s forwards;

  pointer-events:none;
}

.intro-inner{
  text-align:center;

  animation:introIn .9s both;
}

.intro-mark{
  width:75px;
  height:75px;

  margin:auto;

  display:grid;
  place-items:center;

  border-radius:22px;

  font:900 42px Rajdhani;

  background:
    linear-gradient(
      135deg,
      #ff1744,
      #7900ff
    );

  box-shadow:
    0 0 60px rgba(124,0,255,.25),
    0 0 35px rgba(255,23,68,.15);

  color:#fff;
}

.intro-title{
  margin-top:20px;

  font:900 34px Rajdhani;

  letter-spacing:6px;
}

.intro-title span{
  background:var(--gradient);

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.intro-line{
  width:0;
  height:2px;

  margin:15px auto 0;

  background:
    linear-gradient(
      90deg,
      #ff1744,
      #7800ff
    );

  animation:
    lineGrow 1s .4s forwards;
}

@keyframes introIn{

  from{
    opacity:0;
    transform:scale(.8);
  }

  to{
    opacity:1;
    transform:scale(1);
  }

}

@keyframes lineGrow{

  to{
    width:170px;
  }

}

@keyframes introOut{

  to{
    opacity:0;
    visibility:hidden;
  }

}


/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1000px){

  .mode-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .vote-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media(max-width:700px){

  .topbar{
    padding:0 16px;
  }

  .status{
    display:none;
  }

  .brand{
    font-size:21px;
  }

  .page{
    padding-left:16px;
    padding-right:16px;
  }

  .mode-grid,
  .vote-grid{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:570px;
  }

  .hero h1{
    letter-spacing:-3px;
  }

  .page-title h1{
    letter-spacing:-1px;
  }

}


@media(max-width:450px){

  .intro-title{
    font-size:28px;
    letter-spacing:4px;
  }

  .intro-mark{
    width:65px;
    height:65px;
    font-size:36px;
  }

  .hero h1{
    font-size:65px;
  }

}

/* =========================
   FINAL FULL WIDTH FIX
   ========================= */

html,
body{
  width:100% !important;
  min-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

main,
main.page,
.page{
  width:100% !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero-content{
  width:100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.page-title,
.vote-page,
.about,
.contact{
  width:100%;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

footer{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.topbar{
  width:100% !important;
}


/* =====================================================
   ZENTRAMC — ADVANCED ANIMATION PACK
   ===================================================== */

/* PAGE ENTRY */

body{
  animation:pageFade .7s ease both;
}

@keyframes pageFade{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* HERO FLOATING LIGHT */

.hero:before{
  animation:
    heroGlow 6s ease-in-out infinite alternate;
}

@keyframes heroGlow{
  0%{
    transform:scale(.9);
    opacity:.55;
  }

  100%{
    transform:scale(1.15);
    opacity:1;
  }
}


/* HERO TEXT */

.hero h1{
  animation:
    titleReveal 1s cubic-bezier(.16,1,.3,1) .15s both;
}

.hero p{
  animation:
    fadeUp .8s ease .35s both;
}

.hero .actions{
  animation:
    fadeUp .8s ease .5s both;
}

.ip{
  animation:
    fadeUp .8s ease .65s both;
}

@keyframes titleReveal{
  from{
    opacity:0;
    transform:translateY(35px) scale(.92);
    filter:blur(8px);
  }

  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* MINI BADGES */

.mini{
  animation:
    badgeIn .8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes badgeIn{
  from{
    opacity:0;
    transform:translateY(12px) scale(.9);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* BUTTON SHINE */

.btn{
  position:relative;
  overflow:hidden;
}

.btn:after{
  content:"";

  position:absolute;

  top:-120%;
  left:-70%;

  width:40%;
  height:300%;

  transform:rotate(25deg);

  background:rgba(255,255,255,.13);

  transition:.6s;
}

.btn:hover:after{
  left:135%;
}


/* BUTTON PRESS */

.btn:active{
  transform:scale(.96) !important;
}


/* CARD REVEAL */

.mode,
.vote-card,
.about-box,
.contact-box,
.store-card{
  animation:
    cardReveal .75s cubic-bezier(.16,1,.3,1) both;
}

.mode:nth-child(1),
.vote-card:nth-child(1){
  animation-delay:.05s;
}

.mode:nth-child(2),
.vote-card:nth-child(2){
  animation-delay:.12s;
}

.mode:nth-child(3),
.vote-card:nth-child(3){
  animation-delay:.19s;
}

.mode:nth-child(4),
.vote-card:nth-child(4){
  animation-delay:.26s;
}

.mode:nth-child(5),
.vote-card:nth-child(5){
  animation-delay:.33s;
}

.mode:nth-child(6),
.vote-card:nth-child(6){
  animation-delay:.40s;
}

.vote-card:nth-child(7){
  animation-delay:.47s;
}

.vote-card:nth-child(8){
  animation-delay:.54s;
}

.vote-card:nth-child(9){
  animation-delay:.61s;
}

.vote-card:nth-child(10){
  animation-delay:.68s;
}

@keyframes cardReveal{
  from{
    opacity:0;
    transform:
      translateY(30px)
      scale(.96);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* MODE CARD GLOW */

.mode:hover{
  box-shadow:
    0 20px 55px rgba(0,0,0,.5),
    0 0 35px rgba(124,0,255,.08);
}

.mode:before,
.vote-card:before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.045),
      transparent 70%
    );

  transform:translateX(-100%);

  transition:.8s;

  pointer-events:none;
}

.mode,
.vote-card{
  position:relative;
  overflow:hidden;
}

.mode:hover:before,
.vote-card:hover:before{
  transform:translateX(100%);
}


/* VOTE LOGO ANIMATION */

.vote-logo{
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s,
    border-color .4s;
}

.vote-card:hover .vote-logo{
  transform:
    rotate(-4deg)
    scale(1.08);

  border-color:rgba(255,23,68,.3);

  box-shadow:
    0 0 25px rgba(124,0,255,.18);
}

.vote-logo img{
  transition:transform .4s ease;
}

.vote-card:hover .vote-logo img{
  transform:scale(1.08);
}


/* VOTE NUMBER / TEXT */

.vote-info h3{
  transition:
    color .3s,
    transform .3s;
}

.vote-card:hover .vote-info h3{
  color:#fff;
  transform:translateX(3px);
}


/* SIDEBAR LINKS */

.nav a{
  transform:translateX(-8px);
  opacity:.7;
}

.sidebar.open .nav a{
  animation:
    navReveal .45s cubic-bezier(.16,1,.3,1) forwards;
}

.sidebar.open .nav a:nth-child(1){
  animation-delay:.08s;
}

.sidebar.open .nav a:nth-child(2){
  animation-delay:.13s;
}

.sidebar.open .nav a:nth-child(3){
  animation-delay:.18s;
}

.sidebar.open .nav a:nth-child(4){
  animation-delay:.23s;
}

.sidebar.open .nav a:nth-child(5){
  animation-delay:.28s;
}

.sidebar.open .nav a:nth-child(6){
  animation-delay:.33s;
}

@keyframes navReveal{
  to{
    transform:none;
    opacity:1;
  }
}


/* MENU ICON */

.menu span{
  transition:
    transform .35s,
    opacity .25s;
}

.menu:hover span:nth-child(1){
  transform:translateX(3px);
}

.menu:hover span:nth-child(3){
  transform:translateX(-3px);
}


/* LOGO PULSE */

.brand{
  animation:
    brandPulse 4s ease-in-out infinite;
}

@keyframes brandPulse{
  0%,100%{
    text-shadow:
      0 0 0 transparent;
  }

  50%{
    text-shadow:
      0 0 25px rgba(180,0,255,.16);
  }
}


/* ONLINE DOT */

.status-dot{
  animation:
    onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.35);
    opacity:.65;
  }
}


/* IP BOX */

.ip{
  transition:
    border-color .35s,
    box-shadow .35s,
    transform .35s;
}

.ip:hover{
  transform:translateY(-3px);

  border-color:
    rgba(124,0,255,.3);

  box-shadow:
    0 15px 45px rgba(0,0,0,.35),
    0 0 25px rgba(124,0,255,.07);
}

.copy{
  transition:
    transform .25s,
    box-shadow .25s;
}

.copy:hover{
  transform:scale(1.04);

  box-shadow:
    0 0 25px rgba(124,0,255,.2);
}


/* STORE CARD */

.store-card{
  transition:
    transform .45s,
    border-color .45s,
    box-shadow .45s;
}

.store-card:hover{
  transform:translateY(-6px);

  border-color:
    rgba(124,0,255,.25);

  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 40px rgba(124,0,255,.07);
}


/* ABOUT BOX */

.about-box{
  transition:
    transform .35s,
    border-color .35s,
    background .35s;
}

.about-box:hover{
  transform:translateX(5px);

  background:
    rgba(124,0,255,.035);
}


/* FORM */

.field input,
.field textarea{
  transition:
    border-color .3s,
    box-shadow .3s,
    transform .3s;
}

.field input:focus,
.field textarea:focus{
  transform:translateY(-2px);
}


/* FOOTER */

footer{
  animation:
    footerReveal 1s ease both;
}

@keyframes footerReveal{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


/* PAGE TITLE */

.page-title h1{
  animation:
    titleReveal .9s cubic-bezier(.16,1,.3,1) both;
}

.page-title p{
  animation:
    fadeUp .8s ease .2s both;
}


/* VOTE REWARD */

.vote-reward{
  animation:
    rewardFloat 4s ease-in-out infinite;
}

@keyframes rewardFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }
}


/* RED/PURPLE MOVING AMBIENT EFFECT */

body:after{
  animation:
    gridMove 18s linear infinite;
}

@keyframes gridMove{
  from{
    background-position:0 0;
  }

  to{
    background-position:50px 50px;
  }
}


/* RED LINE UNDER NAV */

.topbar:after{
  animation:
    navGlow 4s ease-in-out infinite;
}

@keyframes navGlow{
  0%,100%{
    opacity:.35;
  }

  50%{
    opacity:1;
  }
}


/* MOBILE */

@media(max-width:700px){

  .mode:hover{
    transform:translateY(-4px);
  }

  .vote-card:hover{
    transform:translateY(-4px);
  }

}


/* REDUCED MOTION ACCESSIBILITY */

@media(prefers-reduced-motion:reduce){

  *,
  *:before,
  *:after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

}



/* =====================================================
   ZENTRAMC DISCORD PAGE
   ===================================================== */

.discord-page{
  min-height:100vh;
  width:100%;
  overflow:hidden;

  padding:
    150px 20px 90px;

  position:relative;
}


/* HERO */

.discord-hero{
  position:relative;

  width:100%;
  max-width:1050px;

  margin:auto;

  text-align:center;

  z-index:1;
}


/* AMBIENT ORBS */

.discord-orb{
  position:absolute;

  width:300px;
  height:300px;

  border-radius:50%;

  filter:blur(90px);

  opacity:.28;

  pointer-events:none;

  z-index:-1;
}

.orb-one{
  top:30px;
  left:2%;

  background:#7300ff;

  animation:
    discordFloatOne 7s ease-in-out infinite alternate;
}

.orb-two{
  right:0;
  top:300px;

  background:#ff1744;

  animation:
    discordFloatTwo 8s ease-in-out infinite alternate;
}

@keyframes discordFloatOne{
  from{
    transform:translate(-30px,-15px) scale(.8);
  }

  to{
    transform:translate(80px,45px) scale(1.15);
  }
}

@keyframes discordFloatTwo{
  from{
    transform:translate(40px,20px) scale(.85);
  }

  to{
    transform:translate(-70px,-50px) scale(1.2);
  }
}


/* BADGE */

.discord-badge{
  display:inline-flex;

  align-items:center;
  gap:9px;

  padding:9px 16px;

  border:1px solid rgba(124,0,255,.22);

  border-radius:100px;

  color:#aaa0ae;

  background:
    linear-gradient(
      90deg,
      rgba(255,23,68,.06),
      rgba(124,0,255,.07)
    );

  font-size:9px;
  font-weight:900;

  letter-spacing:2px;

  animation:
    discordBadgeIn .8s both;
}

.discord-live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#7c3cff;

  box-shadow:
    0 0 10px #7c3cff;

  animation:
    discordDot 1.7s ease-in-out infinite;
}

@keyframes discordDot{
  50%{
    transform:scale(1.5);
    opacity:.5;
  }
}

@keyframes discordBadgeIn{
  from{
    opacity:0;
    transform:translateY(15px) scale(.9);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* TITLE */

.discord-hero h1{
  margin-top:24px;

  font:
    900 clamp(55px,9vw,105px)/.88
    Rajdhani,sans-serif;

  letter-spacing:-3px;

  animation:
    discordTitleIn 1s cubic-bezier(.16,1,.3,1) .1s both;
}

.discord-hero h1 span{
  display:block;

  background:
    linear-gradient(
      90deg,
      #ff1744,
      #c000ff,
      #6200ff
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(
      0 0 30px
      rgba(124,0,255,.18)
    );
}

@keyframes discordTitleIn{
  from{
    opacity:0;
    transform:
      translateY(35px)
      scale(.9);

    filter:blur(10px);
  }

  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}


.discord-hero > p{
  max-width:620px;

  margin:25px auto 40px;

  color:#817985;

  font-size:13px;

  line-height:1.8;

  animation:
    fadeUp .8s ease .35s both;
}


/* =====================================================
   DISCORD CARD
   ===================================================== */

.discord-card{
  position:relative;

  display:flex;
  align-items:center;

  gap:25px;

  width:100%;
  max-width:820px;

  margin:auto;

  padding:30px;

  text-align:left;

  border-radius:25px;

  border:1px solid rgba(124,0,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.015)
    );

  box-shadow:
    0 35px 100px rgba(0,0,0,.4),
    inset 0 1px rgba(255,255,255,.035);

  overflow:hidden;

  animation:
    discordCardIn .9s cubic-bezier(.16,1,.3,1) .45s both;

  transition:
    transform .4s,
    border-color .4s,
    box-shadow .4s;
}

.discord-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(124,0,255,.35);

  box-shadow:
    0 40px 110px rgba(0,0,0,.5),
    0 0 50px rgba(124,0,255,.08);
}

.discord-card:before{
  content:"";

  position:absolute;

  top:-100%;
  left:-30%;

  width:35%;
  height:300%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      transparent,
      rgba(255,255,255,.055),
      transparent
    );

  animation:
    discordShine 5s ease-in-out infinite;
}

@keyframes discordShine{

  0%,55%{
    left:-40%;
  }

  75%,100%{
    left:130%;
  }

}

@keyframes discordCardIn{

  from{
    opacity:0;
    transform:
      translateY(40px)
      scale(.94);
  }

  to{
    opacity:1;
    transform:none;
  }

}


/* DISCORD ICON */

.discord-icon{
  flex:none;

  width:100px;
  height:100px;

  display:grid;
  place-items:center;

  border-radius:27px;

  background:
    linear-gradient(
      135deg,
      #7100ff,
      #c000d9 50%,
      #ff1744
    );

  box-shadow:
    0 0 45px rgba(124,0,255,.23),
    inset 0 1px rgba(255,255,255,.25);

  animation:
    discordIconFloat 4s ease-in-out infinite;
}

.discord-icon span{
  width:57px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:17px;

  color:white;

  font-size:32px;

  background:rgba(0,0,0,.2);

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.15);
}

@keyframes discordIconFloat{

  0%,100%{
    transform:translateY(0) rotate(0);
  }

  50%{
    transform:translateY(-7px) rotate(-2deg);
  }

}


/* CARD CONTENT */

.discord-card-content{
  flex:1;
  min-width:0;
}

.discord-card-title{
  display:flex;
  align-items:center;
  gap:12px;

  flex-wrap:wrap;
}

.discord-card-title h2{
  font:
    800 29px Rajdhani,sans-serif;
}

.discord-online{
  display:flex;
  align-items:center;
  gap:6px;

  padding:6px 9px;

  border-radius:7px;

  color:#77717c;

  background:rgba(255,255,255,.035);

  font-size:7px;
  font-weight:900;

  letter-spacing:1px;
}

.discord-online span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#9c4dff;

  box-shadow:
    0 0 8px #9c4dff;
}

.discord-card-content > p{
  margin-top:7px;

  color:#756d79;

  font-size:11px;
}


/* INVITE */

.discord-invite{
  display:flex;
  align-items:center;

  margin-top:18px;

  padding:5px;

  border:1px solid rgba(255,255,255,.07);

  border-radius:11px;

  background:rgba(0,0,0,.3);
}

.discord-invite span{
  flex:1;

  min-width:0;

  padding:10px;

  color:#a88dbd;

  font:
    11px
    monospace;

  overflow:hidden;
  text-overflow:ellipsis;
}

.discord-invite button{
  border:0;

  padding:11px 14px;

  border-radius:8px;

  color:white;

  background:
    linear-gradient(
      135deg,
      #7b00ff,
      #d00055
    );

  font-size:8px;
  font-weight:900;

  cursor:pointer;

  transition:.25s;
}

.discord-invite button:hover{
  transform:scale(1.04);

  box-shadow:
    0 0 25px rgba(124,0,255,.2);
}


/* JOIN */

.discord-join{
  margin-top:15px;
}

.discord-join span{
  margin-left:8px;

  display:inline-block;

  transition:.3s;
}

.discord-join:hover span{
  transform:translateX(5px);
}


/* =====================================================
   FEATURES
   ===================================================== */

.discord-features{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;

  max-width:820px;

  margin:18px auto 0;
}

.discord-features > div{
  padding:18px;

  text-align:left;

  border:1px solid rgba(255,255,255,.06);

  border-radius:15px;

  background:rgba(255,255,255,.018);

  animation:
    fadeUp .7s ease both;

  transition:.3s;
}

.discord-features > div:nth-child(1){
  animation-delay:.65s;
}

.discord-features > div:nth-child(2){
  animation-delay:.75s;
}

.discord-features > div:nth-child(3){
  animation-delay:.85s;
}

.discord-features > div:hover{
  transform:translateY(-4px);

  border-color:
    rgba(255,23,68,.18);

  background:
    rgba(124,0,255,.035);
}

.discord-features strong{
  display:block;

  color:#cfc7d2;

  font:
    800 13px Rajdhani,sans-serif;

  letter-spacing:1px;
}

.discord-features span{
  display:block;

  margin-top:5px;

  color:#655e69;

  font-size:9px;

  line-height:1.5;
}


/* MOBILE */

@media(max-width:700px){

  .discord-page{
    padding-top:125px;
  }

  .discord-hero h1{
    font-size:60px;
  }

  .discord-card{
    flex-direction:column;

    text-align:center;

    padding:25px 18px;
  }

  .discord-card-title{
    justify-content:center;
  }

  .discord-invite{
    text-align:left;
  }

  .discord-features{
    grid-template-columns:1fr;
  }

  .discord-icon{
    width:85px;
    height:85px;
    border-radius:23px;
  }

}

@media(max-width:430px){

  .discord-hero h1{
    font-size:52px;
  }

  .discord-card-title h2{
    font-size:25px;
  }

}


#zentra-auth-box{
  position:fixed;
  top:18px;
  right:18px;
  z-index:99999;
}

.zentra-account{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid rgba(255,0,130,.25);
  border-radius:13px;
  background:rgba(8,6,12,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 0 25px rgba(160,0,255,.12);
  animation:accountIn .5s ease;
}

.zentra-account a,
.zentra-account button{
  color:#fff;
  text-decoration:none;
  border:0;
  background:transparent;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  cursor:pointer;
}

.zentra-account a:hover,
.zentra-account button:hover{
  color:#ff00a8;
}

.account-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00ff88;
  box-shadow:0 0 10px #00ff88;
}

.account-name{
  color:#eee;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@keyframes accountIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:600px){
  #zentra-auth-box{top:10px;right:10px}
  .zentra-account{padding:8px 9px}
}

/* ===== ZENTRAMC BUY POPUP ===== */
.zentra-buy-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
}

.zentra-buy-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.zentra-buy-popup{
  width:min(440px,calc(100% - 35px));
  padding:32px 26px;
  text-align:center;
  border:1px solid rgba(180,0,255,.35);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,0,100,.16),transparent 45%),
    #0b080f;
  box-shadow:
    0 0 80px rgba(170,0,255,.22),
    0 20px 80px rgba(0,0,0,.7);
  transform:translateY(30px) scale(.94);
  transition:.45s cubic-bezier(.16,1,.3,1);
}

.zentra-buy-overlay.active .zentra-buy-popup{
  transform:translateY(0) scale(1);
}

.zentra-buy-icon{
  width:58px;
  height:58px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  font-size:26px;
  background:linear-gradient(135deg,#ff005d,#8d00ff);
  box-shadow:0 0 35px rgba(220,0,180,.3);
  animation:buyPulse 1.5s infinite;
}

.zentra-buy-popup h2{
  margin:0 0 10px;
  font-size:24px;
}

.zentra-buy-popup h2 span{
  background:linear-gradient(90deg,#ff176f,#a500ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.zentra-buy-popup p{
  margin:0 auto 22px;
  color:#aaa;
  line-height:1.6;
  font-size:14px;
}

.zentra-count{
  font-size:38px;
  font-weight:900;
  margin:5px 0 15px;
  background:linear-gradient(90deg,#ff005d,#a500ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.zentra-progress{
  height:5px;
  width:100%;
  overflow:hidden;
  border-radius:20px;
  background:#211827;
}

.zentra-progress-bar{
  height:100%;
  width:100%;
  transform-origin:left;
  background:linear-gradient(90deg,#ff005d,#a500ff);
  box-shadow:0 0 15px rgba(210,0,255,.6);
}

.zentra-cancel{
  margin-top:18px;
  border:0;
  background:none;
  color:#777;
  cursor:pointer;
  font-size:12px;
}

.zentra-cancel:hover{
  color:#fff;
}

@keyframes buyPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

@keyframes buyProgress{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}


/* =========================================================
   ZENTRA PREMIUM ANIMATED BACKGROUND
   ========================================================= */

html,
body {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(180, 0, 255, .16),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 55%,
      rgba(255, 0, 110, .08),
      transparent 32%
    ),
    radial-gradient(
      circle at 100% 75%,
      rgba(110, 0, 255, .10),
      transparent 35%
    ),
    #050308;
}

/* Particle layer */
#zentra-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .8;
}

/* Moving futuristic grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 92%
    );

  animation: zentraGrid 18s linear infinite;
}

@keyframes zentraGrid {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 55px 55px;
  }
}

/* Giant animated purple/pink atmosphere */
body::after {
  content: "";
  position: fixed;
  width: 65vw;
  height: 65vw;
  max-width: 800px;
  max-height: 800px;

  left: 50%;
  top: 20%;

  transform: translate(-50%, -50%);

  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle,
      rgba(170,0,255,.11) 0%,
      rgba(255,0,130,.055) 25%,
      transparent 70%
    );

  filter: blur(35px);

  animation: zentraAura 8s ease-in-out infinite alternate;
}

@keyframes zentraAura {
  0% {
    transform: translate(-55%, -48%) scale(.85);
    opacity: .55;
  }

  50% {
    transform: translate(-45%, -52%) scale(1.08);
    opacity: .9;
  }

  100% {
    transform: translate(-50%, -45%) scale(.95);
    opacity: .65;
  }
}

/* Keep actual website above effects */
body > * {
  position: relative;
  z-index: 1;
}

#zentra-particles {
  z-index: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* ===== ZENTRAMC EPIC BACKGROUND ===== */
body {
  background:
    radial-gradient(circle at 15% 20%, rgba(165,0,255,.18), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(255,0,110,.14), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(120,0,255,.12), transparent 35%),
    #030006;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(200,80,255,.4) 1px, transparent 1.5px);
  background-size: 90px 90px, 140px 140px;
  animation: particleDrift 8s linear infinite;
  opacity: .55;
}

body::after {
  content: "";
  position: fixed;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(
    circle,
    rgba(165,0,255,.13) 0%,
    rgba(255,0,120,.05) 30%,
    transparent 70%
  );
  filter: blur(35px);
  animation: ambientGlow 7s ease-in-out infinite alternate;
}

@keyframes particleDrift {
  from {
    transform: translate(0,0) rotate(0deg);
  }
  to {
    transform: translate(90px,140px) rotate(8deg);
  }
}

@keyframes ambientGlow {
  from {
    opacity: .45;
    transform: translate(-50%,-50%) scale(.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.15);
  }
}

/* Moving neon grid */
body {
  background-image:
    linear-gradient(rgba(165,0,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,120,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(130,0,255,.12), transparent 45%);
  background-size: 55px 55px, 55px 55px, 100% 100%;
  background-attachment: fixed;
}


/* ===== FIX: KEEP ALL UI CLICKABLE ===== */
#zentra-particles,
body::before,
body::after {
  pointer-events: none !important;
}

#zentra-particles {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
}

#header,
header,
main,
section,
nav,
button,
a,
input,
textarea,
select,
.card,
.btn,
button *,
a * {
  position: relative;
  z-index: 5;
}

#header {
  z-index: 100 !important;
}

.sidebar,
.sidebar.open,
.overlay {
  z-index: 1000 !important;
}

.menu,
.close,
.nav a {
  pointer-events: auto !important;
}


/* =========================================================
   ZENTRAMC PERFORMANCE PATCH
   Visual design preserved — lower GPU/CPU workload
   ========================================================= */

/* Promote only genuinely animated UI layers */
.sidebar,
.overlay,
.menu,
.close,
.rank-card,
.coin-card,
.btn,
#zentraIntro,
#zentraEnter {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Use compositor-friendly transforms */
.rank-card,
.coin-card {
  will-change: transform;
}

.rank-card:hover,
.coin-card:hover {
  will-change: auto;
}

/* Keep animated intro smooth without continuously repainting
   expensive blur layers */
#zentraIntro .introGlow,
.zentraIntroGlow {
  will-change: transform, opacity;
  contain: strict;
}

/* Avoid expensive backdrop/filter work on small screens */
@media (max-width: 700px) {

  .rank-card,
  .coin-card {
    will-change: auto;
  }

  #zentraIntro .introGlow,
  .zentraIntroGlow {
    filter: blur(18px) !important;
    width: 420px !important;
    height: 420px !important;
  }

  /* Keep visual movement, but reduce repaint frequency */
  #zentraIntro .introStars {
    animation-duration: 12s !important;
  }
}

/* Respect devices that explicitly request reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prevent accidental huge paint areas */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* GPU-friendly scrolling */
.sidebar {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Don't animate expensive shadows on hover */
.rank-card:hover,
.coin-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

/* =========================================================
   END PERFORMANCE PATCH
   ========================================================= */

/* =========================================================
   ZENTRAMC MOBILE PERFORMANCE FIX
   Keeps the same visual design
   ========================================================= */

.rank-card,
.coin-card {
  will-change: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#zentraIntro,
.zentraIntroGlow,
#zentraIntro .introGlow {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Don't constantly promote every element to GPU */
.btn,
.copy,
.menu,
.close,
.sidebar,
.overlay {
  will-change: auto !important;
}

/* Mobile: preserve glow but make it cheaper */
@media (max-width:700px) {

  .zentraIntroGlow,
  #zentraIntro .introGlow {
    filter: blur(12px) !important;
  }

  .rank-card:hover,
  .coin-card:hover {
    transform: none;
  }

  .rank-card,
  .coin-card {
    transition: transform .2s ease, border-color .2s ease !important;
  }
}

/* Reduce expensive painting while page is moving */
@media (max-width:700px) {
  body {
    -webkit-tap-highlight-color: transparent;
  }
}


/* ===== BUY POPUP: ALWAYS CENTERED ===== */

.zentra-buy-overlay{
  position:fixed !important;
  inset:0 !important;

  width:100vw !important;
  height:100vh !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:20px !important;

  z-index:999999 !important;

  margin:0 !important;
}

.zentra-buy-popup{
  position:relative !important;

  margin:0 !important;

  max-height:calc(100vh - 40px) !important;
  overflow-y:auto !important;

  transform-origin:center !important;
}