*{box-sizing:border-box}
:root{--bg:#0D0D0D;--gold:#D4AF37;--gold-soft:#bfa35c;--text:#e7e3d5}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}
/* background waves */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.wave{position:absolute;left:-20%;width:140%;height:35vh;background:linear-gradient(90deg,rgba(212,175,55,0),rgba(212,175,55,.18),rgba(212,175,55,0));filter:blur(14px);transform:skewY(-6deg);animation:flow 14s linear infinite;opacity:.55}
.w1{top:10vh;animation-duration:16s}.w2{top:38vh;animation-duration:12s}.w3{top:66vh;animation-duration:18s}
@keyframes flow{0%{transform:translateX(0) skewY(-6deg)}50%{transform:translateX(-12%) skewY(-6deg)}100%{transform:translateX(0) skewY(-6deg)}}
#particles{position:fixed;inset:0;z-index:-1}
/* top bar */
.topbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.35), rgba(0,0,0,0));backdrop-filter:blur(6px);z-index:10}
.brand{width:150px;filter:drop-shadow(0 0 10px rgba(212,175,55,.35))}
.nav{display:flex;gap:14px}
.nav a{color:#cfcab4;text-decoration:none;padding:8px 12px;border-radius:10px;transition:.25s}
.nav a:hover{color:var(--gold)}
.nav a.active{color:var(--bg);background:var(--gold)}
/* hero */
.hero{text-align:center;margin:30px 16px 10px}
.hero h1{font-family:Montserrat,sans-serif;font-weight:700;color:#fff;font-size:clamp(26px,4vw,40px);margin:.3rem 0}
.hero .sub{color:var(--gold-soft);margin:0 0 10px}
/* pricing grid */
.pricing{display:grid;grid-template-columns:repeat(4, minmax(220px, 1fr));max-width:1400px;gap:22px;width:min(1100px,95%);margin:26px auto 36px;padding:0 6px}
.card{position:relative;background:rgba(0,0,0,.45);border:1px solid rgba(212,175,55,.3);border-radius:18px;padding:26px 20px;text-align:center;backdrop-filter:blur(8px);box-shadow:0 0 20px rgba(0,0,0,.4);transition:.25s}
.card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.6);box-shadow:0 0 24px rgba(212,175,55,.2)}
.card.popular{border-color:rgba(212,175,55,.75);box-shadow:0 0 28px rgba(212,175,55,.25)}
.tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#0D0D0D;font-weight:700;border-radius:999px;padding:6px 12px;font-size:.8rem;box-shadow:0 8px 20px rgba(212,175,55,.35)}
.tag.silver{background:linear-gradient(90deg,#D4AF37,#f1dd8c,#D4AF37)} .tag.gold{background:linear-gradient(90deg,#b78d2a,#D4AF37,#b78d2a)}
.duration{margin:.2rem 0 .5rem;color:#cfcab4}
.price{font-size:2rem;margin:.2rem 0 .8rem}
.currency{font-size:1.2rem;margin-right:2px}
.features{list-style:none;margin:0 0 14px;padding:0;color:#cfcab4}
.features li{margin:6px 0}
.btn{display:inline-block;border-radius:999px;padding:12px 22px;border:1px solid var(--gold);text-decoration:none;color:var(--bg);background:var(--gold);font-weight:600;transition:transform .25s, box-shadow .25s}
.btn.outline{background:transparent;color:var(--gold)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,.25)}
/* redeem */
.redeem{text-align:center;margin:50px auto;width:min(900px,95%)}
.redeem .hint{color:#cfcab4;margin-top:-4px}
.redeem-row{display:flex;gap:10px;justify-content:center;margin-top:12px}
.redeem-row input{width:min(340px,70vw);padding:12px 14px;border-radius:12px;border:1px solid rgba(212,175,55,.25);background:rgba(0,0,0,.6);color:#e7e3d5}
.msg{color:var(--gold-soft)}
/* footer */
footer{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 18px 32px;color:#8e8e8e}
.divider{width:min(1100px, 92%);height:1px;background:linear-gradient(90deg, transparent, rgba(212,175,55,.6), transparent)}
/* modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal-card{width:min(420px,92vw);background:rgba(0,0,0,.85);border:1px solid rgba(212,175,55,.35);border-radius:16px;padding:20px;box-shadow:0 10px 28px rgba(0,0,0,.5);text-align:center}
.modal-card h3{margin:0 0 10px;color:var(--gold)}
/* animations */
.fade-in{opacity:0;transform:translateY(12px);animation:fadeUp .9s ease forwards}
.hero.fade-in{animation-delay:.15s}.pricing.fade-in{animation-delay:.3s}.redeem.fade-in{animation-delay:.45s}.footer.fade-in{animation-delay:.6s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
/* responsive */
@media (max-width:900px){.pricing{grid-template-columns:1fr 1fr}.brand{width:130px}}
@media (max-width:560px){.pricing{grid-template-columns:1fr}.topbar{padding:14px 16px}.brand{width:120px}.nav{gap:8px}.nav a{padding:6px 8px}}

/* === Uniwave premium plans layout overrides (safe, page-specific) === */
.pricing {
  align-items: stretch;
}

.pricing .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}

.pricing .card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at top, rgba(212,175,55,0.45), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: scale(1.02);
}

.pricing .card:hover::before {
  opacity: 1;
  transform: scale(1.03);
}

.pricing .card > * {
  position: relative;
  z-index: 1;
}

.pricing .features {
  flex-grow: 1;
}

.pricing .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* Responsive refinement */
@media (max-width: 1100px) {
  .pricing {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 560px) {
  .pricing {
    grid-template-columns: 1fr;
  }
}