:root{
  --black:#020106;
  --dark:#08030f;
  --panel:rgba(8, 5, 15, .78);
  --panel-hard:rgba(10, 5, 18, .94);
  --purple:#a83cff;
  --purple-soft:#7e21df;
  --violet:#48106f;
  --gold:#c4a15d;
  --silver:#f1eef5;
  --muted:#b6adbf;
  --line:rgba(168,60,255,.38);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--black);
  color:white;
  font-family:"Inter",Arial,sans-serif;
  overflow-x:hidden;
}

.loading{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  background:#020106;
  transition:opacity .6s ease, visibility .6s ease;
}
.loading img{width:240px;filter:drop-shadow(0 0 28px rgba(168,60,255,.55))}
.loading span{
  margin-top:150px;
  position:absolute;
  color:#bfa6d3;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
}
.loading.hide{opacity:0;visibility:hidden}

.bg-layer{
  position:fixed;
  inset:-2%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.83) 25%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.50) 72%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.22) 55%, #020106 99%),
    url("assets/backgrounds/hero-bg.jpg") center/cover no-repeat;
  transform:scale(1.02);
  z-index:-5;
  will-change:transform;
}
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 32%, transparent 0 30%, rgba(0,0,0,.38) 62%, rgba(0,0,0,.85) 100%),
    radial-gradient(circle at 16% 45%, rgba(103,17,164,.20), transparent 34%);
  z-index:-4;
}
#embers{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:-1;
}

.fog{
  position:fixed;
  width:150vw;
  height:42vh;
  left:-25vw;
  bottom:-12vh;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(130,74,165,.20), transparent 36%),
    radial-gradient(ellipse at 55% 50%, rgba(255,255,255,.09), transparent 34%),
    radial-gradient(ellipse at 85% 40%, rgba(109,39,160,.16), transparent 28%);
  filter:blur(20px);
  opacity:.72;
  z-index:-2;
  animation:fogMove 24s ease-in-out infinite alternate;
}
.fog-b{
  bottom:10vh;
  opacity:.33;
  animation-duration:35s;
  animation-direction:alternate-reverse;
}
@keyframes fogMove{
  from{transform:translateX(-5vw)}
  to{transform:translateX(7vw)}
}

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:92px;
  z-index:50;
  display:flex;
  align-items:center;
  gap:34px;
  padding:0 5vw;
  background:linear-gradient(180deg, rgba(4,2,8,.92), rgba(4,2,8,.62));
  border-bottom:1px solid rgba(168,60,255,.25);
  backdrop-filter:blur(14px);
}
.brand{
  display:flex;
  align-items:center;
  height:100%;
  text-decoration:none;
}
.brand img{
  width:178px;
  max-height:82px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(168,60,255,.45));
}
.main-nav{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
}
.main-nav a{
  color:#e5deea;
  text-decoration:none;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:1.35px;
  font-weight:800;
  position:relative;
  transition:.25s ease;
}
.main-nav a:hover,.main-nav a.active{color:white;text-shadow:0 0 12px rgba(168,60,255,.85)}
.main-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-28px;
  width:0;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--purple),transparent);
  box-shadow:0 0 18px var(--purple);
  transition:.25s ease;
}
.main-nav a:hover::after,.main-nav a.active::after{width:86px}

.account-btn{
  display:flex;
  align-items:center;
  gap:8px;
  color:white;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:13px;
  font-weight:800;
  padding:15px 24px;
  border:1px solid rgba(168,60,255,.70);
  background:linear-gradient(180deg,rgba(78,19,129,.78),rgba(17,7,29,.72));
  clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);
  box-shadow:0 0 22px rgba(168,60,255,.25), inset 0 0 22px rgba(168,60,255,.12);
}
.user-icon{color:var(--purple);filter:drop-shadow(0 0 8px var(--purple))}
.menu-toggle{display:none}

.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:132px 5vw 34px;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  left:0;
  top:92px;
  width:42vw;
  height:calc(100% - 92px);
  background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.34),transparent);
  pointer-events:none;
}

.hero-copy{
  position:relative;
  z-index:2;
  width:min(610px,100%);
  animation:enter .85s ease both;
}
@keyframes enter{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
.server-type{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:10px;
  color:var(--purple);
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:10px;
  font-size:25px;
  text-shadow:0 0 20px rgba(168,60,255,.85);
}
.server-type::before,.server-type::after{
  content:"";
  height:1px;
  width:74px;
  background:linear-gradient(90deg,transparent,var(--purple));
  box-shadow:0 0 12px var(--purple);
}
.server-type::after{background:linear-gradient(90deg,var(--purple),transparent)}

.hero-logo{
  width:min(470px,88vw);
  display:block;
  margin:0 0 -18px -20px;
  filter:drop-shadow(0 0 26px rgba(168,60,255,.48));
}
.hero h1{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
}
.hero h2{
  font-family:"Cinzel",serif;
  color:#f4ecff;
  text-transform:uppercase;
  letter-spacing:8px;
  font-size:clamp(24px,3.2vw,39px);
  margin:0 0 24px;
  text-shadow:0 0 18px rgba(168,60,255,.48);
}
.intro{
  max-width:430px;
  color:#d1c8db;
  line-height:1.7;
  font-size:15px;
  margin-bottom:26px;
}
.opening-card span{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  font-family:"Cinzel",serif;
  font-size:31px;
  letter-spacing:2px;
  text-shadow:0 0 8px rgba(196,161,93,.28);
}
.opening-card strong{
  display:block;
  margin-top:4px;
  color:white;
  font-family:"Cinzel",serif;
  font-size:clamp(38px,5vw,57px);
  letter-spacing:10px;
  text-shadow:0 3px 0 #1b1720,0 0 20px rgba(255,255,255,.26);
}
.opening-card em{
  display:inline-block;
  margin-top:9px;
  padding:9px 54px;
  color:#f2eaff;
  font-style:normal;
  font-weight:700;
  letter-spacing:2px;
  background:linear-gradient(90deg,transparent,rgba(75,14,122,.96),transparent);
  border-top:1px solid rgba(168,60,255,.60);
  border-bottom:1px solid rgba(168,60,255,.60);
  text-shadow:0 0 10px rgba(168,60,255,.8);
}
.countdown-card{
  margin-top:24px;
  width:min(560px,100%);
  padding:18px 18px 20px;
  background:linear-gradient(180deg,rgba(13,8,22,.93),rgba(5,3,10,.94));
  border:1px solid rgba(168,60,255,.52);
  box-shadow:0 0 40px rgba(88,16,153,.25), inset 0 0 36px rgba(168,60,255,.06);
  clip-path:polygon(4% 0,96% 0,100% 18%,100% 82%,96% 100%,4% 100%,0 82%,0 18%);
}
.countdown-card p{
  color:#c765ff;
  text-align:center;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:1.2px;
  font-weight:800;
  margin-bottom:10px;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.countdown div{
  text-align:center;
  border-right:1px solid rgba(168,60,255,.25);
}
.countdown div:last-child{border-right:0}
.countdown strong{
  display:block;
  color:var(--purple);
  font-family:"Cinzel",serif;
  font-size:42px;
  line-height:1;
  text-shadow:0 0 18px rgba(168,60,255,.88);
}
.countdown span{
  display:block;
  margin-top:8px;
  color:#eee9f4;
  font-size:12px;
  text-transform:uppercase;
}

.quick-actions{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  width:min(1450px,100%);
  margin:34px auto 28px;
  background:linear-gradient(180deg,rgba(14,9,23,.95),rgba(4,3,8,.96));
  border:1px solid rgba(168,60,255,.36);
  box-shadow:0 0 45px rgba(0,0,0,.65), inset 0 0 40px rgba(168,60,255,.04);
  clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);
}
.quick-action{
  min-height:90px;
  display:grid;
  grid-template-columns:62px 1fr;
  grid-template-rows:1fr 1fr;
  align-items:center;
  padding:20px 24px;
  color:white;
  text-decoration:none;
  border-right:1px solid rgba(168,60,255,.24);
  transition:.25s ease;
}
.quick-action:last-child{border-right:0}
.quick-action:hover{
  background:linear-gradient(180deg,rgba(168,60,255,.20),rgba(168,60,255,.06));
  box-shadow:inset 0 0 34px rgba(168,60,255,.16);
}
.quick-action i{
  grid-row:1/3;
  font-style:normal;
  color:var(--purple);
  font-size:39px;
  line-height:1;
  filter:drop-shadow(0 0 12px rgba(168,60,255,.85));
}
.quick-action strong{
  color:#c26cff;
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:1.4px;
}
.quick-action span{color:#bbb3c4;font-size:13px}
.quick-action.donate{
  transform:scale(1.1);
  z-index:2;
  border:1px solid rgba(168,60,255,.82);
  background:linear-gradient(180deg,rgba(45,11,81,.98),rgba(6,4,12,.98));
  box-shadow:0 0 42px rgba(168,60,255,.42), inset 0 0 44px rgba(168,60,255,.14);
  animation:donatePulse 2.5s ease-in-out infinite;
}
@keyframes donatePulse{
  50%{box-shadow:0 0 68px rgba(168,60,255,.64), inset 0 0 54px rgba(168,60,255,.22)}
}

.server-stats{
  position:relative;
  z-index:3;
  width:min(1450px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:linear-gradient(180deg,rgba(17,13,22,.93),rgba(5,4,8,.94));
  border:1px solid rgba(168,60,255,.30);
  box-shadow:0 0 35px rgba(0,0,0,.55);
  padding:18px;
}
.server-stats article{
  min-height:70px;
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-rows:1fr 1fr;
  align-items:center;
  padding:0 20px;
  border-right:1px solid rgba(255,255,255,.08);
}
.server-stats article:last-child{border-right:0}
.stat-icon{
  grid-row:1/3;
  color:var(--gold);
  font-size:26px;
  filter:drop-shadow(0 0 10px rgba(196,161,93,.35));
}
.server-stats small{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:1.1px;
  font-weight:800;
}
.server-stats strong{
  color:#f7f2fb;
  text-transform:uppercase;
  font-size:15px;
  font-weight:700;
}

.below{
  padding:90px 5vw;
  background:
    linear-gradient(180deg,#020106 0%,#08030f 100%);
}
.section-title{
  text-align:center;
  max-width:720px;
  margin:0 auto 38px;
}
.section-title span{
  color:var(--purple);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:4px;
}
.section-title h3{
  font-family:"Cinzel",serif;
  font-size:42px;
  margin:12px 0;
}
.section-title p{color:var(--muted);line-height:1.7}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:1160px;
  margin:0 auto;
}
.feature-grid article{
  padding:28px;
  background:linear-gradient(180deg,rgba(18,10,30,.92),rgba(8,5,14,.94));
  border:1px solid rgba(168,60,255,.26);
  box-shadow:0 0 28px rgba(0,0,0,.35);
}
.feature-grid h4{
  color:#d18aff;
  text-transform:uppercase;
  letter-spacing:1.1px;
  margin-bottom:12px;
}
.feature-grid p{color:#bdb5c6;line-height:1.65}

.footer{
  min-height:96px;
  padding:22px 5vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#020106;
  border-top:1px solid rgba(168,60,255,.22);
  color:#8f8797;
}
.footer img{width:130px;filter:drop-shadow(0 0 14px rgba(168,60,255,.32))}
.footer-links{display:flex;gap:12px}
.footer-links a{
  color:#aaa2b2;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:10px 13px;
  font-size:12px;
}

@media(max-width:1180px){
  .topbar{padding:0 24px}
  .main-nav{gap:18px}
  .brand img{width:145px}
  .server-stats{grid-template-columns:repeat(3,1fr)}
  .server-stats article{border-bottom:1px solid rgba(255,255,255,.08)}
}

@media(max-width:980px){
  .menu-toggle{
    display:grid;
    gap:5px;
    margin-left:auto;
    background:rgba(17,8,29,.75);
    border:1px solid rgba(168,60,255,.55);
    padding:12px;
  }
  .menu-toggle span{width:26px;height:2px;background:white;display:block}
  .main-nav{
    position:fixed;
    top:92px;
    right:0;
    width:310px;
    height:calc(100vh - 92px);
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:30px;
    background:rgba(5,3,10,.98);
    border-left:1px solid rgba(168,60,255,.35);
    transform:translateX(100%);
    transition:.28s ease;
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav a::after{bottom:-7px}
  .account-btn{display:none}
  .quick-actions{grid-template-columns:1fr 1fr;clip-path:none}
  .quick-action.donate{transform:none}
  .feature-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
  .topbar{height:78px}
  .brand img{width:120px}
  .main-nav{top:78px;height:calc(100vh - 78px)}
  .hero{padding:108px 20px 28px}
  .hero::before{width:100%;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.45))}
  .server-type{font-size:16px;letter-spacing:6px}
  .server-type::before,.server-type::after{width:36px}
  .hero-logo{width:330px;margin-left:-14px}
  .hero h2{font-size:20px;letter-spacing:5px}
  .opening-card span{font-size:23px}
  .opening-card strong{font-size:34px;letter-spacing:5px}
  .opening-card em{padding:8px 28px;font-size:13px}
  .countdown-card{clip-path:none}
  .countdown{grid-template-columns:repeat(2,1fr);gap:18px}
  .countdown div:nth-child(2){border-right:0}
  .countdown strong{font-size:34px}
  .quick-actions{grid-template-columns:1fr;clip-path:none}
  .server-stats{grid-template-columns:1fr}
  .server-stats article{border-right:0}
  .section-title h3{font-size:32px}
  .footer{flex-direction:column;text-align:center;gap:18px}
}


/* V2 edits: rates, Discord floating button and download section */
.rates-box{
  position:relative;
  padding-top:58px;
}
.rates-title{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:18px;
  font-weight:800;
  text-shadow:0 0 12px rgba(196,161,93,.35);
  white-space:nowrap;
}
.rates-title::before,
.rates-title::after{
  content:"";
  display:inline-block;
  width:120px;
  height:1px;
  margin:0 18px 5px;
  background:linear-gradient(90deg,transparent,var(--purple));
  box-shadow:0 0 10px var(--purple);
}
.rates-title::after{
  background:linear-gradient(90deg,var(--purple),transparent);
}

.discord-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(168,60,255,.55);
  background:radial-gradient(circle, rgba(168,60,255,.38), rgba(21,8,35,.95));
}

.floating-discord{
  position:fixed;
  right:34px;
  top:128px;
  z-index:45;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:white;
  text-decoration:none;
}
.discord-logo{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:46px;
  color:white;
  background:
    radial-gradient(circle at 45% 35%, rgba(255,255,255,.18), transparent 30%),
    radial-gradient(circle, rgba(168,60,255,.70), rgba(43,9,75,.96));
  border:1px solid rgba(196,113,255,.8);
  box-shadow:0 0 26px rgba(168,60,255,.65), inset 0 0 30px rgba(255,255,255,.08);
  animation:discordPulse 2.4s infinite ease-in-out;
}
.floating-discord small{
  padding:9px 15px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800;
  font-size:11px;
  background:rgba(5,3,10,.82);
  border:1px solid rgba(168,60,255,.35);
}
@keyframes discordPulse{
  50%{transform:translateY(-4px);box-shadow:0 0 42px rgba(168,60,255,.85), inset 0 0 34px rgba(255,255,255,.12)}
}

.download-section{
  padding:88px 5vw 30px;
  background:linear-gradient(180deg,#020106 0%,#07020d 100%);
}
.download-card{
  max-width:1160px;
  margin:0 auto;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  padding:42px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88),rgba(16,7,28,.78)),
    url("assets/backgrounds/hero-bg.jpg") center/cover no-repeat;
  border:1px solid rgba(168,60,255,.38);
  box-shadow:0 0 45px rgba(0,0,0,.55), inset 0 0 55px rgba(168,60,255,.08);
  clip-path:polygon(3% 0,97% 0,100% 12%,100% 88%,97% 100%,3% 100%,0 88%,0 12%);
}
.mini-title{
  color:var(--purple);
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:900;
}
.download-copy h3{
  margin:12px 0;
  font-family:"Cinzel",serif;
  font-size:40px;
  text-transform:uppercase;
}
.download-copy p{
  max-width:620px;
  color:#c8c0cf;
  line-height:1.7;
}
.download-main-btn{
  min-width:250px;
  text-decoration:none;
  text-align:center;
  color:white;
  padding:22px 28px;
  border:1px solid rgba(168,60,255,.75);
  background:linear-gradient(180deg,rgba(98,24,160,.92),rgba(14,5,25,.96));
  box-shadow:0 0 35px rgba(168,60,255,.34), inset 0 0 32px rgba(168,60,255,.18);
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
  transition:.25s;
}
.download-main-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 55px rgba(168,60,255,.58), inset 0 0 38px rgba(168,60,255,.25);
}
.download-main-btn strong{
  display:block;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:18px;
}
.download-main-btn span{
  display:block;
  margin-top:5px;
  color:#d9c9e8;
}

@media(max-width:980px){
  .floating-discord{display:none}
  .download-card{flex-direction:column;text-align:center;clip-path:none}
  .rates-title::before,.rates-title::after{display:none}
}
@media(max-width:680px){
  .rates-box{padding-top:72px}
  .rates-title{font-size:15px}
  .download-section{padding:55px 20px 20px}
  .download-card{padding:28px 20px}
  .download-copy h3{font-size:29px}
  .download-main-btn{width:100%;min-width:0}
}


/* V3 - Server progression timeline */
.progression-section{
  position:relative;
  padding:92px 5vw 80px;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,60,255,.18), transparent 28%),
    linear-gradient(180deg,#020106 0%,#090413 58%,#020106 100%);
  overflow:hidden;
}
.progression-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 49.85%, rgba(168,60,255,.38) 49.9% 50.1%, transparent 50.15% 100%);
  opacity:.45;
  pointer-events:none;
}
.progression-title{
  position:relative;
  z-index:2;
}
.stage-progress{
  position:relative;
  z-index:3;
  max-width:920px;
  margin:0 auto 58px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.stage-progress::before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:26px;
  height:2px;
  background:linear-gradient(90deg,var(--purple),rgba(168,60,255,.22),rgba(168,60,255,.12));
  box-shadow:0 0 18px rgba(168,60,255,.55);
  z-index:-1;
}
.stage-step{
  text-align:center;
  color:#bdb4c8;
}
.stage-step b{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:50%;
  border:1px solid rgba(168,60,255,.55);
  background:radial-gradient(circle,rgba(45,12,75,.96),rgba(8,4,14,.96));
  box-shadow:0 0 22px rgba(168,60,255,.22);
  color:#e8d9ff;
  font-family:"Cinzel",serif;
}
.stage-step.active b{
  color:white;
  border-color:rgba(196,161,93,.85);
  background:radial-gradient(circle,rgba(168,60,255,.68),rgba(20,5,35,.98));
  box-shadow:0 0 36px rgba(168,60,255,.62), inset 0 0 18px rgba(255,255,255,.08);
}
.stage-step span{
  display:block;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
}

.timeline{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:38px;
}
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--purple),rgba(196,161,93,.75),var(--purple),transparent);
  box-shadow:0 0 22px rgba(168,60,255,.65);
}
.stage-card{
  position:relative;
  width:calc(50% - 58px);
  min-height:270px;
  display:flex;
  align-items:stretch;
  background:
    linear-gradient(180deg,rgba(19,10,32,.95),rgba(5,3,10,.97)),
    radial-gradient(circle at 80% 15%,rgba(168,60,255,.28),transparent 28%);
  border:1px solid rgba(168,60,255,.34);
  box-shadow:0 0 42px rgba(0,0,0,.48), inset 0 0 44px rgba(168,60,255,.06);
  clip-path:polygon(5% 0,95% 0,100% 10%,100% 90%,95% 100%,5% 100%,0 90%,0 10%);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.stage-card:hover{
  transform:translateY(-6px);
  border-color:rgba(196,161,93,.65);
  box-shadow:0 0 58px rgba(168,60,255,.30), inset 0 0 48px rgba(168,60,255,.10);
}
.stage-card:nth-child(odd){justify-self:start}
.stage-card:nth-child(even){justify-self:end}
.stage-card::after{
  content:"";
  position:absolute;
  top:44px;
  width:58px;
  height:2px;
  background:linear-gradient(90deg,var(--purple),transparent);
  box-shadow:0 0 16px var(--purple);
}
.stage-card:nth-child(odd)::after{right:-58px}
.stage-card:nth-child(even)::after{
  left:-58px;
  background:linear-gradient(90deg,transparent,var(--purple));
}
.stage-orb{
  position:absolute;
  top:18px;
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:34px;
  background:radial-gradient(circle,rgba(168,60,255,.72),rgba(13,5,24,.98));
  border:1px solid rgba(168,60,255,.75);
  box-shadow:0 0 32px rgba(168,60,255,.60), inset 0 0 24px rgba(255,255,255,.08);
}
.stage-card:nth-child(odd) .stage-orb{right:-96px}
.stage-card:nth-child(even) .stage-orb{left:-96px}
.stage-orb.crown{
  background:radial-gradient(circle,rgba(196,161,93,.75),rgba(35,10,55,.98));
  border-color:rgba(196,161,93,.85);
  box-shadow:0 0 36px rgba(196,161,93,.45),0 0 48px rgba(168,60,255,.38);
}
.stage-content{
  padding:34px 36px;
  width:100%;
}
.stage-content small{
  color:var(--gold);
  text-transform:uppercase;
  font-family:"Cinzel",serif;
  letter-spacing:4px;
  font-weight:900;
}
.stage-content h4{
  margin:10px 0 18px;
  color:#f4edff;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  font-size:30px;
  letter-spacing:1px;
  text-shadow:0 0 16px rgba(168,60,255,.35);
}
.stage-content ul{
  list-style:none;
  display:grid;
  gap:12px;
}
.stage-content li{
  color:#cfc6d8;
  line-height:1.55;
  padding-left:18px;
  position:relative;
}
.stage-content li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 10px var(--purple);
}
.stage-content strong{color:white}
.stage-content em{color:#b994d9;font-style:normal}

.reveal{
  opacity:0;
  transform:translateY(34px);
}
.reveal.visible{
  opacity:1;
  transform:none;
  transition:opacity .75s ease, transform .75s ease;
}

@media(max-width:980px){
  .progression-section::before{display:none}
  .stage-progress{grid-template-columns:1fr;max-width:420px}
  .stage-progress::before{display:none}
  .timeline::before{left:38px}
  .stage-card,
  .stage-card:nth-child(odd),
  .stage-card:nth-child(even){
    width:calc(100% - 96px);
    justify-self:end;
    clip-path:none;
    border-radius:18px;
  }
  .stage-card::after,
  .stage-card:nth-child(odd)::after,
  .stage-card:nth-child(even)::after{
    left:-58px;
    right:auto;
    background:linear-gradient(90deg,transparent,var(--purple));
  }
  .stage-card:nth-child(odd) .stage-orb,
  .stage-card:nth-child(even) .stage-orb{
    left:-96px;
    right:auto;
  }
}
@media(max-width:620px){
  .progression-section{padding:68px 20px}
  .timeline::before{left:25px}
  .stage-card,
  .stage-card:nth-child(odd),
  .stage-card:nth-child(even){
    width:calc(100% - 58px);
  }
  .stage-card:nth-child(odd) .stage-orb,
  .stage-card:nth-child(even) .stage-orb{
    left:-58px;
    width:52px;
    height:52px;
    font-size:24px;
  }
  .stage-card::after,
  .stage-card:nth-child(odd)::after,
  .stage-card:nth-child(even)::after{
    left:-28px;
    width:28px;
  }
  .stage-content{padding:28px 24px}
  .stage-content h4{font-size:24px}
}


/* V4 - Donate page */
.donate-page .bg-layer{
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.70), rgba(0,0,0,.86)),
    linear-gradient(180deg, rgba(0,0,0,.18), #020106 98%),
    url("assets/backgrounds/hero-bg.jpg") center/cover no-repeat;
}
.donate-hero{
  min-height:100vh;
  padding:145px 5vw 70px;
}
.donate-header{
  max-width:780px;
  margin:0 auto 44px;
  text-align:center;
}
.donate-header span{
  color:var(--purple);
  text-transform:uppercase;
  letter-spacing:5px;
  font-weight:900;
}
.donate-header h1{
  margin:12px 0;
  font-family:"Cinzel",serif;
  font-size:clamp(44px,7vw,86px);
  text-transform:uppercase;
  color:#f7efff;
  text-shadow:0 0 28px rgba(168,60,255,.42);
}
.donate-header p{
  color:#cfc7d8;
  line-height:1.75;
}
.donate-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.donate-pack{
  position:relative;
  overflow:hidden;
  min-height:315px;
  padding:30px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(18,10,30,.94),rgba(6,4,11,.98));
  border:1px solid rgba(168,60,255,.30);
  box-shadow:0 0 36px rgba(0,0,0,.46), inset 0 0 38px rgba(168,60,255,.05);
  clip-path:polygon(8% 0,92% 0,100% 9%,100% 91%,92% 100%,8% 100%,0 91%,0 9%);
  transition:.25s;
}
.donate-pack:hover{
  transform:translateY(-7px);
  border-color:rgba(196,161,93,.65);
  box-shadow:0 0 55px rgba(168,60,255,.30), inset 0 0 42px rgba(168,60,255,.11);
}
.donate-pack.featured{
  border-color:rgba(168,60,255,.85);
  box-shadow:0 0 58px rgba(168,60,255,.34), inset 0 0 44px rgba(168,60,255,.12);
}
.pack-glow{
  position:absolute;
  width:180px;
  height:180px;
  top:-70px;
  right:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,60,255,.36),transparent 65%);
}
.donate-pack small{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:900;
}
.donate-pack h2{
  font-family:"Cinzel",serif;
  font-size:34px;
  margin:18px 0 8px;
  color:#f6efff;
}
.donate-pack strong{
  color:var(--purple);
  font-size:25px;
  text-shadow:0 0 14px rgba(168,60,255,.50);
}
.donate-pack p{
  color:#bcb4c6;
  line-height:1.55;
  margin:20px 0;
}
.buy-btn,.checkout-btn{
  cursor:pointer;
  border:1px solid rgba(168,60,255,.70);
  color:white;
  background:linear-gradient(180deg,rgba(98,24,160,.92),rgba(14,5,25,.96));
  padding:15px 22px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:1.1px;
  box-shadow:0 0 24px rgba(168,60,255,.25), inset 0 0 24px rgba(168,60,255,.12);
  transition:.25s;
}
.buy-btn:hover,.buy-btn.selected,.checkout-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 42px rgba(168,60,255,.58), inset 0 0 28px rgba(168,60,255,.20);
}
.donate-form-card{
  max-width:920px;
  margin:54px auto 0;
  padding:36px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:32px;
  background:linear-gradient(180deg,rgba(14,8,24,.94),rgba(5,3,9,.96));
  border:1px solid rgba(168,60,255,.36);
  box-shadow:0 0 40px rgba(0,0,0,.46);
}
.donate-form-card h3{
  margin:10px 0;
  font-family:"Cinzel",serif;
  font-size:34px;
}
.donate-form-card p{
  color:#c7bfce;
  line-height:1.65;
}
#donateForm{
  display:grid;
  gap:16px;
}
#donateForm label{
  color:#d8d0df;
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.9px;
}
#donateForm input{
  width:100%;
  margin-top:8px;
  padding:14px 15px;
  color:white;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(168,60,255,.32);
  outline:none;
}
#donateForm input:focus{
  border-color:rgba(168,60,255,.85);
  box-shadow:0 0 18px rgba(168,60,255,.20);
}
.donate-message{
  grid-column:1/-1;
  min-height:22px;
  color:#d7a4ff;
  text-align:center;
  font-weight:800;
}
.donate-info{
  max-width:1080px;
  margin:44px auto 0;
  text-align:center;
  padding:30px;
  background:rgba(5,3,10,.72);
  border:1px solid rgba(168,60,255,.20);
}
.donate-info h3{
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  margin-bottom:20px;
}
.flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.flow span{
  padding:12px 16px;
  border:1px solid rgba(168,60,255,.34);
  background:rgba(168,60,255,.08);
  color:#efe9f5;
}
.flow i{
  color:var(--purple);
  font-style:normal;
  font-weight:900;
}
@media(max-width:1050px){
  .donate-grid{grid-template-columns:repeat(2,1fr)}
  .donate-form-card{grid-template-columns:1fr}
}
@media(max-width:640px){
  .donate-hero{padding:115px 20px 50px}
  .donate-grid{grid-template-columns:1fr}
  .donate-form-card{padding:25px 20px}
}


/* V3 autocuenta cleanup */
.topbar{
  justify-content:space-between;
}
.main-nav{
  flex:1;
}
.donate-form-card .mini-title + h3 + p{
  color:#cfc7d8;
}


/* V4 VladCoins custom amount */
.vladcoin-grid .donate-pack h2{
  font-size:30px;
}
.custom-coins-card{
  max-width:920px;
  margin:42px auto 0;
  padding:34px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:30px;
  background:linear-gradient(180deg,rgba(14,8,24,.94),rgba(5,3,9,.96));
  border:1px solid rgba(168,60,255,.36);
  box-shadow:0 0 40px rgba(0,0,0,.46), inset 0 0 40px rgba(168,60,255,.05);
}
.custom-coins-card h3{
  margin:10px 0;
  font-family:"Cinzel",serif;
  font-size:34px;
  text-transform:uppercase;
}
.custom-coins-card p{
  color:#c7bfce;
  line-height:1.65;
}
.custom-coins-box{
  display:grid;
  gap:16px;
}
.custom-coins-box label{
  color:#d8d0df;
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.9px;
}
.custom-coins-box input{
  width:100%;
  margin-top:8px;
  padding:15px;
  color:white;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(168,60,255,.32);
  outline:none;
}
.custom-coins-box input:focus{
  border-color:rgba(168,60,255,.85);
  box-shadow:0 0 18px rgba(168,60,255,.20);
}
.custom-total{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 18px;
  padding:18px;
  border:1px solid rgba(168,60,255,.25);
  background:rgba(168,60,255,.06);
}
.custom-total span{
  color:#bdb4c8;
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
}
.custom-total strong{
  color:#c56cff;
  font-size:20px;
  text-shadow:0 0 14px rgba(168,60,255,.45);
}
.custom-buy-btn{
  width:100%;
}
@media(max-width:820px){
  .custom-coins-card{grid-template-columns:1fr;padding:25px 20px}
  .custom-total{grid-template-columns:1fr}
}