#page-vip.vip-page {
  display: grid;
  gap: 22px;
  padding: 26px 0 44px;
}
.vip-hero,
.vip-role-card,
.vip-code-panel,
.vip-catalog-lock,
.vip-catalog-room,
.vip-access-granted,
.vip-request-cart {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(242, 196, 94, .24);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(22, 25, 37, .97), rgba(8, 12, 24, .97));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.vip-hero {
  min-height: 310px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(26px, 6vw, 58px);
}
.vip-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.vip-hero-orb {
  position: absolute;
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .52;
  pointer-events: none;
  animation: vipFloat 9s ease-in-out infinite alternate;
}
.vip-hero-orb-one {
  top: -120px; right: 19%;
  background: radial-gradient(circle, rgba(241, 188, 72, .36), transparent 68%);
}
.vip-hero-orb-two {
  right: -120px; bottom: -155px;
  background: radial-gradient(circle, rgba(57, 151, 255, .3), transparent 70%);
  animation-delay: -4s;
}
.vip-eyebrow,
.vip-card-topline,
.vip-hero-pills,
.vip-hero-stamp small,
.vip-hero-stamp > span {
  font-size: .72rem; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
}
.vip-eyebrow { color: #f1c766; margin: 0 0 12px; }
.vip-hero h1 {
  margin: 0; color: #fff; font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: .92; letter-spacing: -3px; font-weight: 1000;
}
.vip-hero h1 span { color: #f1c766; }
.vip-hero-summary {
  max-width: 620px; color: rgba(255,255,255,.76);
  font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.6; margin: 20px 0;
}
.vip-hero-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.vip-hero-pills span {
  padding: 8px 11px; border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.055); font-size: .63rem; letter-spacing: 1px;
}
.vip-hero-stamp {
  position: relative; z-index: 1; flex: 0 0 172px; width: 172px; height: 172px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(7deg); border: 1px solid rgba(255, 220, 143, .58); border-radius: 38px;
  color: #111522; background: linear-gradient(145deg, #ffe6a1, #c89436 70%, #8a621e);
  box-shadow: 0 16px 35px rgba(202, 151, 54, .22), inset 0 0 0 6px rgba(255,255,255,.12);
  animation: vipStamp 5s ease-in-out infinite alternate;
}
.vip-hero-stamp > span, .vip-hero-stamp small { color: rgba(27, 22, 13, .72); letter-spacing: 1px; }
.vip-hero-stamp b { color: #111522; font-size: 3.8rem; line-height: 1; letter-spacing: -4px; }
.vip-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vip-role-card { display: flex; flex-direction: column; padding: clamp(22px, 4vw, 34px); border-color: rgba(255,255,255,.1); }
.vip-role-card::before, .vip-code-panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, transparent, #e3bb60 25%, #55bcff 70%, transparent); opacity: .9;
}
.vip-vendor-card {
  background: radial-gradient(circle at 90% 0, rgba(225, 180, 70, .12), transparent 34%), linear-gradient(135deg, rgba(24, 26, 38, .98), rgba(9, 12, 22, .98));
}
.vip-buyer-card {
  background: radial-gradient(circle at 100% 0, rgba(60, 159, 255, .14), transparent 35%), linear-gradient(135deg, rgba(24, 26, 38, .98), rgba(9, 12, 22, .98));
  border-color: rgba(77, 165, 255, .24);
}
.vip-card-topline { display: flex; align-items: center; justify-content: space-between; color: #9ba5b8; font-size: .64rem; }
.vip-card-topline i { font-size: 1.5rem; font-style: normal; }
.vip-role-card h2, .vip-code-panel h2 {
  margin: 13px 0 7px; color: #fff; font-size: clamp(1.65rem, 4vw, 2.4rem);
  font-weight: 1000; letter-spacing: -.8px;
}
.vip-card-lead { margin: 0 0 12px; color: #f1c766; font-size: 1rem; font-weight: 900; }
.vip-role-card ul { display: grid; gap: 12px; margin: 10px 0 24px; padding-left: 20px; color: rgba(255,255,255,.78); line-height: 1.55; }
.vip-role-card li::marker { color: #f1c766; }
.vip-action { min-height: 48px; margin-top: auto; font-weight: 1000; letter-spacing: .7px; }
.vip-price-row { display: flex; align-items: baseline; gap: 11px; margin: 12px 0 4px; }
.vip-price-row strong { color: #f1c766; font-size: 3rem; line-height: 1; letter-spacing: -2px; }
.vip-price-row span { color: rgba(255,255,255,.67); font-size: .78rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
.vip-buyer-copy { color: rgba(255,255,255,.73); line-height: 1.6; margin: 10px 0 16px; }
.vip-field-label {
  display: block; margin: 10px 0 6px; color: rgba(255,255,255,.77);
  font-size: .76rem; font-weight: 900; letter-spacing: .7px; text-transform: uppercase;
}
.vip-field {
  width: 100%; min-height: 46px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; color: #fff; background: rgba(4, 8, 17, .62);
}
.vip-field::placeholder { color: rgba(255,255,255,.42); }
.vip-age-check {
  display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 10px; align-items: start;
  margin: 16px 0 20px; color: rgba(255,255,255,.78); font-size: .82rem; line-height: 1.45;
}
.vip-age-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #e5bc64; }
.vip-status { min-height: 1.3em; margin: 10px 0 0; color: #9fdaff; font-size: .84rem; line-height: 1.45; }
.vip-status:empty { display: none; }
.vip-status-error { color: #ffaaa7; }
.vip-code-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr);
  gap: 28px; align-items: center; padding: clamp(22px, 4vw, 34px);
  background: linear-gradient(120deg, rgba(19, 24, 38, .98), rgba(13, 18, 31, .96));
}
.vip-code-panel h2 { margin-top: 0; }
.vip-code-panel p:not(.vip-eyebrow) { margin: 0; color: rgba(255,255,255,.68); line-height: 1.55; }
.vip-code-controls { display: grid; align-content: start; }
.vip-code-controls .vip-action { margin-top: 12px; }
.vip-catalog-lock {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center;
  padding: clamp(22px, 4vw, 34px);
  border-color: rgba(77, 165, 255, .25);
}
.vip-lock-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px;
  color: #ffe49b; background: rgba(231, 184, 75, .14); font-size: 1.6rem;
}
.vip-catalog-lock h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.vip-catalog-lock p:not(.vip-eyebrow) { margin: 0; color: rgba(255,255,255,.65); line-height: 1.5; }
.vip-blur-preview { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vip-blur-preview span {
  height: 68px; border-radius: 12px; filter: blur(5px);
  background: linear-gradient(125deg, rgba(81,97,127,.62), rgba(169,114,57,.48), rgba(39,50,76,.7));
}
.vip-catalog-room[hidden] { display: none; }
.vip-catalog-room { padding: clamp(18px, 3vw, 28px); border-color: rgba(115, 224, 169, .3); }
.vip-catalog-heading, .vip-request-cart-heading {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.vip-catalog-heading h2, .vip-request-cart h3 { margin: 0 0 7px; color: #fff; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.vip-catalog-heading p:not(.vip-eyebrow) { max-width: 760px; margin: 0; color: rgba(255,255,255,.69); line-height: 1.55; }
.vip-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 18px 0 24px; }
.vip-item-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(255,255,255,.045); box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.vip-item-card img, .vip-item-image-placeholder { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: linear-gradient(135deg, #242b3d, #654b28); }
.vip-item-card-content { display: grid; gap: 7px; padding: 13px; }
.vip-item-card h3 { margin: 0; color: #fff; font-size: 1rem; line-height: 1.3; }
.vip-item-category { color: #8bcfff; font-size: .67rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.vip-item-description { margin: 0; color: rgba(255,255,255,.65); font-size: .82rem; line-height: 1.45; }
.vip-item-price { color: #f1c766; font-size: 1.1rem; font-weight: 1000; }
.vip-item-card .vip-action { width: 100%; margin-top: 3px; }
.vip-request-cart { padding: clamp(18px, 3vw, 26px); border-radius: 18px; background: rgba(5, 11, 23, .75); }
.vip-request-cart-heading { margin-bottom: 14px; }
.vip-request-cart-heading h3 { margin: 0; font-size: 1.45rem; }
.vip-cart-count { color: #92d2ff; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.vip-cart-lines { display: grid; gap: 9px; }
.vip-cart-line {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto auto auto; gap: 9px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.82);
}
.vip-cart-line-title { font-weight: 800; }
.vip-cart-line button { min-width: 30px; min-height: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #fff; background: rgba(255,255,255,.06); }
.vip-cart-total-row { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; color: rgba(255,255,255,.7); }
.vip-cart-total-row strong { color: #f1c766; font-size: 1.25rem; }
.vip-cart-note { margin: 12px 0 0; color: rgba(255,255,255,.56); font-size: .76rem; line-height: 1.5; }
.vip-access-granted {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 26px;
  border-color: rgba(113, 222, 162, .42); background: linear-gradient(110deg, rgba(27, 87, 65, .28), rgba(10, 23, 28, .96));
}
.vip-access-granted[hidden] { display: none; }
.vip-access-granted > span {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 50%; color: #07140e; background: #71dea2; font-size: 1.3rem; font-weight: 1000;
}
.vip-access-granted h3 { margin: 0 0 6px; color: #9df0be; }
.vip-access-granted p, .vip-disclosure { margin: 0; color: rgba(255,255,255,.68); line-height: 1.6; }
.vip-disclosure { max-width: 950px; margin: 0 auto; text-align: center; font-size: .79rem; }
@keyframes vipFloat {
  from { transform: translate3d(-8px, 0, 0) scale(.94); }
  to { transform: translate3d(12px, 16px, 0) scale(1.07); }
}
@keyframes vipStamp {
  from { transform: rotate(7deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-7px); }
}
@media (max-width: 780px) {
  #page-vip.vip-page { gap: 16px; }
  .vip-hero { min-height: auto; padding: 28px 22px; }
  .vip-hero-stamp { display: none; }
  .vip-role-grid, .vip-code-panel { grid-template-columns: 1fr; }
  .vip-role-card { padding: 23px; }
  .vip-code-panel { gap: 12px; }
  .vip-catalog-heading { align-items: flex-start; flex-direction: column; }
  .vip-blur-preview { grid-template-columns: 1fr; }
  .vip-blur-preview span:nth-child(n+2) { display: none; }
  .vip-cart-line { grid-template-columns: minmax(0,1fr) auto auto auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vip-hero-orb, .vip-hero-stamp { animation: none; }
}