:root{
  --bg:#181818;
  --pink:#E82890;
  --blush:#F8B8B8;
  --pastel:#F8D8E8;
  --white:#FFFFFF;
  --body:#E0E0E0;
  --muted:#999999;
  --radius:16px;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.45);
  --container: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;
  letter-spacing:.2px;
}

a{color:inherit}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
}

.page{
  min-height:100%;
}

/* ─── Hero ─── */
.hero{
  padding:72px 0 40px;
  text-align:center;
}
.hero__title{
  margin:0;
  color:var(--white);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-size:clamp(28px, 4vw, 52px);
  line-height:1.06;
}
.hero__subtitle{
  margin:16px 0 0;
  color:var(--blush);
  font-style:italic;
  font-weight:500;
  font-size:clamp(14px, 1.6vw, 18px);
}
.hero__divider{
  width:min(520px, 72%);
  height:1px;
  background:rgba(232,40,144,.9);
  margin:22px auto 0;
}
.hero__copy{
  margin:18px auto 0;
  max-width:860px;
  color:var(--body);
  font-size:16px;
  line-height:1.7;
}

/* ─── Cards Section ─── */
.cards{
  padding:26px 0 22px;
}

.cards__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:stretch;
}

.card{
  position:relative;
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:22px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(12px);
  opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .6s ease, box-shadow .35s ease, border-color .35s ease;
  will-change:transform, opacity;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.2px;
  background:var(--tier-border, linear-gradient(90deg, rgba(232,40,144,.55), rgba(248,184,184,.35)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.card::after{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle at 30% 30%, rgba(248,216,232,.18), rgba(232,40,144,0));
  transform:rotate(18deg);
  opacity:.7;
  pointer-events:none;
}

.card--featured{
  background:rgba(255,255,255,.05);
}

.card__top{display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.card__bottom{margin-top:18px}

.card__tag{
  align-self:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(232,40,144,.95);
  color:var(--white);
  font-weight:800;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1.2px;
  box-shadow:0 10px 26px rgba(232,40,144,.22);
}

.card__icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  align-self:center;
}

.icon{display:block}

.card__tier{
  margin:0;
  text-align:center;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--white);
  font-size:22px;
}

.card__price{
  text-align:center;
  color:var(--white);
  font-weight:800;
  font-size:30px;
  letter-spacing:.4px;
}

.card__badge{
  align-self:center;
  padding:8px 12px;
  border-radius:999px;
  background:var(--pink);
  color:var(--white);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:12px;
}

.card__benefits{
  margin:0;
  text-align:center;
  color:var(--body);
  line-height:1.7;
  font-size:14.5px;
}

/* ─── Card Meta (Access / Booking) ─── */
.card__meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.card__meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.card__meta-label{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  flex-shrink:0;
}

.card__meta-value{
  font-size:13px;
  font-weight:600;
  color:var(--blush);
  text-align:right;
}

/* ─── Card Perks List ─── */
.card__perks{
  margin-top:4px;
}

.card__perks-title{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--pink);
  margin-bottom:8px;
  text-align:center;
}

.card__perks-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.card__perks-list li{
  position:relative;
  padding-left:16px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--body);
}

.card__perks-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pink);
  opacity:.75;
}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;
  width:100%;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  user-select:none;
}

.btn--primary{
  background:var(--pink);
  color:var(--white);
  box-shadow:0 14px 30px rgba(232,40,144,.22);
}

.btn--primary:hover{
  box-shadow:0 16px 42px rgba(232,40,144,.32);
  transform:translateY(-1px);
}

.btn--primary:active{transform:translateY(0)}

/* ─── Card Hover ─── */
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.card:focus-within{
  box-shadow:var(--shadow);
}

/* ─── Tier Colors ─── */
.card--platinum{--tier-border:linear-gradient(90deg, #FFFFFF, #C0C0C0, rgba(255,255,255,.65))}
.card--gold{--tier-border:linear-gradient(90deg, #FFD700, #B8860B)}
.card--silver{--tier-border:linear-gradient(90deg, #C0C0C0, #A9A9A9)}
.card--bronze{--tier-border:linear-gradient(90deg, #CD7F32, #8B4513)}

.icon--platinum{color:#EDEDED}
.icon--gold{color:#FFD700}
.icon--silver{color:#C0C0C0}
.icon--bronze{color:#CD7F32}

.card__tier--gold{color:#FFD700}
.card__tier--silver{color:#C0C0C0}
.card__tier--bronze{color:#CD7F32}

.card--platinum:hover{box-shadow:0 18px 52px rgba(255,255,255,.10), 0 18px 52px rgba(232,40,144,.18)}
.card--gold:hover{box-shadow:0 18px 52px rgba(255,215,0,.14)}
.card--silver:hover{box-shadow:0 18px 52px rgba(192,192,192,.14)}
.card--bronze:hover{box-shadow:0 18px 52px rgba(205,127,50,.14)}

/* ─── Reveal Animation ─── */
.revealed{
  opacity:1;
  transform:translateY(0);
}

/* ─── Perks Section ─── */
.perks{
  padding:52px 0 20px;
}

.section__title{
  margin:0 0 18px;
  text-align:center;
  color:var(--white);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-size:22px;
}

.perks__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.perk{
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(232,40,144,.18);
  padding:18px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}

.perk__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(248,216,232,.06);
  color:var(--pastel);
  flex:0 0 auto;
}

.perk__text{
  color:var(--body);
  font-size:14.5px;
  line-height:1.4;
}

/* ─── CTA ─── */
.cta{
  padding:60px 0 52px;
  text-align:center;
}

.cta__inner{
  border-radius:calc(var(--radius) + 6px);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(232,40,144,.22);
  padding:36px 18px;
}

.cta__title{
  margin:0;
  color:var(--white);
  font-weight:900;
  letter-spacing:1.2px;
  font-size:clamp(22px, 3vw, 34px);
}

.cta__subtitle{
  margin:10px 0 22px;
  color:var(--blush);
  font-style:normal;
  font-weight:500;
}

.btn--cta{
  max-width:420px;
  margin:0 auto;
  background:var(--pink);
  color:var(--white);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 18px 46px rgba(232,40,144,.22);
}

.btn--cta:hover{
  box-shadow:0 20px 58px rgba(248,216,232,.22), 0 20px 58px rgba(232,40,144,.22);
  transform:translateY(-1px);
}

/* ─── Footer ─── */
.footer{
  padding:14px 0 26px;
}

.footer__divider{
  height:1px;
  width:100%;
  background:rgba(232,40,144,.85);
  margin:0 0 16px;
}

.footer__text{
  margin:0;
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
}

/* ─── Desktop ─── */
@media (min-width: 820px){
  .cards__grid{
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
  .card--featured{
    transform:translateY(14px) scale(1.03);
  }
  .card--featured.revealed{transform:translateY(0) scale(1.03)}
  .card--featured:hover{transform:translateY(-6px) scale(1.03)}

  .perks__grid{
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
  .perk{padding:20px 18px}
}

@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .btn{transition:none}
}