/*
Theme Name: RSG Unlocked
Theme URI: https://example.com/rsg-unlocked
Author: RSG
Description: Custom landing page theme for Real Solo Girls Creator Card drops.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: rsg-unlocked
*/

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --bg: #050505;
  --surface: #0d0d0e;
  --surface-2: #141416;
  --line: #303033;
  --pink: #e24b91;
  --pink-light: #ff6eb0;
  --text: #f8f7f8;
  --muted: #b7b4b7;
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--body); }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.6; }
.page-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.site-header { height: 112px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 24px; }
.logo { display: inline-flex; width: 175px; align-items: center; }
.logo img { display: block; width: 100%; height: auto; }
.site-header .logo { width: 165px; }
.logo-mark { color: white; font-family: Georgia, serif; font-size: 52px; line-height: .8; letter-spacing: -5px; text-transform: none; }
.main-nav { display: flex; justify-content: center; gap: 42px; color: #d2cfd2; font-size: 13px; text-transform: uppercase; }
.main-nav ul { display: flex; margin: 0; padding: 0; align-items: center; justify-content: center; gap: 42px; list-style: none; }
.main-nav a { padding-block: 12px; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav .active, .main-nav .current-menu-item > a { color: var(--pink-light); border-color: var(--pink); }
.auth-actions { display: flex; gap: 14px; }
.button { display: inline-flex; min-height: 46px; padding: 0 28px; align-items: center; justify-content: center; border: 1px solid var(--pink); border-radius: 6px; color: white; background: transparent; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.button-primary { background: linear-gradient(135deg, var(--pink-light), #cb377b); }
.button-outline:hover, .button-primary:hover { box-shadow: 0 0 22px #e24b9166; transform: translateY(-1px); }
.menu-toggle { display: none; }

.hero { min-height: 720px; display: grid; grid-template-columns: 390px 1fr; align-items: center; gap: 30px; padding-block: 30px 52px; }
.hero-copy { position: relative; z-index: 3; }
.eyebrow { margin: 0 0 12px; color: var(--pink-light); font-size: 13px; font-weight: 700; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); text-transform: uppercase; }
h1 { font-size: clamp(74px, 8vw, 108px); line-height: .86; letter-spacing: -2px; }
h1 strong { color: var(--pink); }
.hero-description { max-width: 390px; margin: 24px 0; font-size: 17px; }
.steps-mini { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.steps-mini article { padding: 2px 12px; text-align: center; border-right: 1px solid #29292b; }
.steps-mini article:last-child { border: 0; }
.step-icon, .stat-icon { display: block; color: var(--pink-light); font-size: 28px; font-weight: 700; }
.steps-mini strong { display: block; margin: 5px 0 1px; text-transform: uppercase; font-size: 13px; }
.steps-mini p { margin: 0; font-size: 12px; line-height: 1.4; }
.hero-button { width: 100%; margin-top: 22px; min-height: 68px; flex-direction: column; font-size: 18px; line-height: 1.3; }
.hero-button small { font-size: 11px; font-weight: 500; }
.security-note { margin: 10px 0 0; text-align: center; font-size: 11px; }

.hero-visual { position: relative; min-height: 650px; display: grid; place-items: center; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 2% -4% 0; z-index: -3; background: radial-gradient(circle at 52% 46%, #e24b9145 0, #8f245128 32%, transparent 66%); filter: blur(14px); }
.sparkles { position: absolute; inset: 10%; z-index: -2; opacity: .55; background-image: radial-gradient(#ff71b5 1px, transparent 1px); background-size: 33px 31px; mask-image: radial-gradient(circle, black, transparent 70%); }
.wheel-wrap { position: relative; transform: translateX(-12px); }
.wheel { position: relative; width: min(54vw, 590px); aspect-ratio: 1; border: 18px solid #111114; border-radius: 50%; background: conic-gradient(from -18deg, #f7f2f5 0 36deg, #09090b 36deg 72deg, #d83d84 72deg 108deg, #09090b 108deg 144deg, #d83d84 144deg 180deg, #09090b 180deg 216deg, #d83d84 216deg 252deg, #09090b 252deg 288deg, #d83d84 288deg 324deg, #09090b 324deg); box-shadow: 0 0 0 2px #ffd0e5, 0 0 0 6px #bc376f, 0 0 0 12px #09090b, 0 0 0 15px #e55395, 0 0 36px #e24b91aa, inset 0 0 28px #000, inset 0 0 0 2px #ffd0e555; }
.wheel::before { content: ""; position: absolute; inset: -12px; border: 4px dotted #ffc1dd; border-radius: 50%; filter: drop-shadow(0 0 5px #ff5da6); }
.wheel::after { content: ""; position: absolute; inset: 3%; border: 3px solid #f19abcaa; border-radius: 50%; background: radial-gradient(circle at 32% 20%, #ffffff22, transparent 27%); box-shadow: 0 0 12px #ff78b2, inset 0 0 16px #000, inset 0 0 0 1px #fff4; }
.wheel-center { position: absolute; inset: 34%; z-index: 2; display: grid; place-content: center; border: 5px solid #a83a69; border-radius: 50%; text-align: center; background: radial-gradient(circle at 35% 28%, #292329, #080809 55%); box-shadow: 0 0 0 3px #050506, 0 0 0 5px #f083b4, 0 0 22px #000, inset 0 0 20px #000; }
.wheel-center span { font-family: Georgia, serif; font-size: clamp(28px, 4vw, 54px); font-weight: 700; }
.wheel-center span::first-letter { color: var(--pink); }
.wheel-center small { color: var(--pink-light); text-transform: uppercase; font-size: 7px; letter-spacing: 1px; }
.wheel-pointer { position: absolute; top: -43px; left: calc(50% - 37px); z-index: 4; width: 74px; height: 100px; border: 3px solid #d94c8b; border-radius: 18px 18px 28px 28px; background: linear-gradient(90deg, #070709, #252027 48%, #09090b); box-shadow: inset 0 0 0 2px #ff9ac455, inset 0 -10px 15px #000, 0 0 0 3px #09090b, 0 0 0 5px #e05a95, 0 0 18px #e24b91, 0 8px 8px #000c; clip-path: polygon(13% 0, 87% 0, 100% 13%, 100% 43%, 66% 43%, 50% 100%, 34% 43%, 0 43%, 0 13%); }
.wheel-pointer::before { content: ""; position: absolute; top: 11px; left: 10px; right: 10px; height: 15px; border: 1px solid #ffb3d2; border-radius: 10px; background: linear-gradient(90deg, #8e2756, #ff74ae 45%, #ffd1e2 52%, #db4384 64%, #7b204b); box-shadow: 0 0 8px #ff65a4, inset 0 1px 2px #fff8; }
.wheel-pointer::after { content: ""; position: absolute; top: 34px; left: calc(50% - 4px); width: 8px; height: 48px; border-radius: 5px; background: linear-gradient(#ffd7e7, #e35091 50%, #7c1d48); box-shadow: 0 0 7px #ff69a7; }
.wheel-label { position: absolute; z-index: 1; font-size: clamp(9px, 1.2vw, 15px); font-weight: 800; line-height: 1.12; text-align: center; }
.label-1 { top: 11%; left: 46%; color: #111; }
.label-2 { top: 18%; right: 24%; transform: rotate(36deg); }
.label-3 { top: 34%; right: 13%; color: #111; transform: rotate(72deg); }
.label-4 { right: 14%; bottom: 33%; transform: rotate(108deg); }
.label-5 { right: 26%; bottom: 17%; color: #111; transform: rotate(144deg); }
.label-6 { bottom: 10%; left: 46%; transform: rotate(180deg); }
.label-7 { left: 25%; bottom: 17%; color: #111; transform: rotate(216deg); }
.label-8 { left: 13%; bottom: 34%; transform: rotate(252deg); }
.label-9 { top: 34%; left: 13%; color: #111; transform: rotate(288deg); }
.label-10 { top: 18%; left: 24%; transform: rotate(324deg); }
.wheel-stand { width: 68%; height: 48px; margin: -5px auto 0; border: 3px solid #e55b99; border-radius: 50%; background: linear-gradient(180deg, #302129, #09090a 64%); box-shadow: inset 0 5px 9px #ffffff19, 0 18px 0 9px #09090a, 0 20px 0 12px #9d2b61, 0 23px 0 14px #ef66a4, 0 0 28px #e24b91; }

.creator-card { position: relative; aspect-ratio: 973 / 1472; min-width: 0; overflow: hidden; border-radius: 6.5% / 4.5%; background: url("assets/creator-card-clean.png") center / 100% 100% no-repeat; filter: drop-shadow(0 0 7px #e34b9170); }
.card-number { position: absolute; top: 3.5%; right: 3.1%; z-index: 2; display: grid; width: 30.2%; height: 11.7%; place-items: center; color: white; background: transparent; font-size: clamp(8px, 1.2vw, 17px); line-height: 1; text-align: center; }
.hero-card { position: absolute; right: -2px; bottom: 52px; width: 155px; z-index: 5; filter: drop-shadow(0 0 10px #ff2d2d88); transform: rotate(8deg); }
.hero-card img { display: block; width: 100%; height: auto; }

@media (min-width: 981px) {
  .hero { grid-template-columns: 390px minmax(0, 1fr); }
  .hero-visual { justify-items: center; }
  .wheel-wrap { margin-left: 22px; }
  .hero-card { right: -8px; bottom: 48px; width: 170px; }
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 58px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.stats article { display: flex; align-items: center; justify-content: center; gap: 22px; border-right: 1px solid var(--line); }
.stats article:last-child { border: 0; }
.stats strong { font-size: 24px; }
.stats p { margin: 3px 0 0; }
.tiers-icon, .rewards-icon, .discovery-icon { display: grid; width: 46px; height: 46px; place-items: center; }
.tiers-icon svg, .rewards-icon svg, .discovery-icon svg { width: 42px; height: 42px; fill: #e24b9130; stroke: var(--pink-light); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #e24b9180); }
.custom-icon { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px #e24b9180); }

.preview { display: grid; grid-template-columns: .55fr 1fr; align-items: stretch; gap: 36px; padding-bottom: 68px; }
.preview h2 { font-size: 30px; }
.how-preview { display: flex; min-height: 100%; flex-direction: column; }
.how-preview ol { padding: 0; list-style: none; }
.how-preview li { display: flex; align-items: center; gap: 20px; margin: 14px 0; }
.how-preview li > .how-icon { display: grid; width: 74px; height: 74px; place-items: center; flex: 0 0 auto; border: 1px solid #28282b; border-radius: 50%; background: #101011; }
.how-icon svg { width: 48px; height: 48px; overflow: visible; fill: none; stroke: var(--pink-light); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #e24b91); }
.how-icon .custom-icon { width: 48px; height: 48px; }
.how-preview strong { text-transform: uppercase; }
.how-preview p { margin: 3px 0; font-size: 13px; }
.callout { display: flex; min-height: 88px; margin-top: auto; padding: 14px 20px; align-items: center; gap: 24px; border: 2px solid #a94b78; border-radius: 11px; box-shadow: inset 0 0 0 1px #351626; }
.callout p { margin: 0; color: var(--pink-light); font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.crown-icon { display: block; flex: 0 0 auto; color: var(--pink-light); font-family: Georgia, serif; font-size: 50px; line-height: 1; }
.library-preview { padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.section-heading a { padding: 8px 22px; border: 1px solid var(--pink); border-radius: 20px; color: var(--pink-light); font-size: 12px; text-transform: uppercase; }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.library-card { min-width: 0; filter: drop-shadow(0 0 8px #e24b9150); transition: transform .2s ease, filter .2s ease; }
.library-card:hover { transform: translateY(-4px); filter: drop-shadow(0 0 12px #e24b9180); }
.library-card img { display: block; width: 100%; aspect-ratio: 403 / 650; object-fit: contain; }
.locked-note { margin-top: 26px; padding: 20px; border: 1px solid #7d3154; border-radius: 6px; color: var(--pink-light); text-align: center; }

footer { border-top: 1px solid #29292b; background: #101011; }
.footer-inner { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; padding-block: 55px; }
.footer-inner div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-inner ul, .footer-menu { display: flex; margin: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 10px; list-style: none; }
.footer-inner li { margin: 0; padding: 0; }
.footer-inner strong { margin-bottom: 5px; text-transform: uppercase; font-size: 13px; }
.footer-inner a, .footer-inner p { margin: 0; color: #c3c0c3; font-size: 12px; }
.socials { display: flex !important; flex-direction: row !important; gap: 14px !important; }
.socials a { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d64989; border-radius: 50%; }
.socials svg { width: 15px; height: 15px; fill: none; stroke: var(--pink-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.standard-page { min-height: 420px; padding: 70px 0 90px; }
.standard-page-content { max-width: 760px; }
.standard-page-content h1 { font-size: 54px; }
.standard-page-content .entry-content { margin-top: 24px; color: var(--muted); }
.standard-page-content .entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.inner-mini-hero {
  max-width: 860px;
  margin: 0 0 38px;
}
.inner-mini-hero h1 {
  margin: 0;
  font-family: var(--display);
  line-height: .92;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.inner-mini-hero p:not(.eyebrow) {
  max-width: 680px;
  margin: 16px 0 0;
  font-size: 16px;
}
.inner-mini-hero[style*="center"],
.inner-mini-hero.is-center {
  margin-inline: auto;
}
.inner-mini-hero-image {
  max-width: 420px;
  margin-top: 28px;
}
.inner-mini-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}
.inner-mini-hero[style*="center"] .inner-mini-hero-image,
.inner-mini-hero.is-center .inner-mini-hero-image {
  margin-inline: auto;
}
.inner-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.concept-hero { display: grid; min-height: 690px; grid-template-columns: 420px minmax(0, 1fr); align-items: center; gap: 48px; padding: 34px 0 48px; }
.concept-copy { position: relative; z-index: 3; }
.concept-copy h1 { font-size: 98px; }
.concept-description { max-width: 405px; margin: 24px 0 26px; font-size: 17px; }
.benefit-strip { overflow: hidden; border: 1px solid #373137; border-radius: 10px; background: linear-gradient(145deg, #131214, #09090a); box-shadow: inset 0 1px 0 #ffffff0d, 0 12px 30px #0007; }
.benefit-strip article { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px; padding: 14px 17px; border-bottom: 1px solid #2b272b; }
.benefit-strip article:last-child { border: 0; }
.benefit-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #6e3150; border-radius: 9px; background: linear-gradient(145deg, #27151f, #0c0b0d); box-shadow: inset 0 0 12px #e24b9120; }
.benefit-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--pink-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #e24b9190); }
.benefit-strip strong { display: block; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.benefit-strip p { margin: 2px 0 0; font-size: 11px; line-height: 1.25; }
.concept-cta { width: 100%; min-height: 68px; margin-top: 20px; font-size: 18px; letter-spacing: .4px; }
.concept-visual { position: relative; min-height: 650px; isolation: isolate; }
.concept-aura { position: absolute; inset: 2% -2% 2% 0; z-index: -2; background: radial-gradient(circle at 48% 45%, #e24b913a, transparent 55%), radial-gradient(circle at 82% 57%, #ff2b2b2b, transparent 28%); filter: blur(16px); }
.concept-wheel-wrap { position: absolute; top: 47%; left: 42%; transform: translate(-50%, -50%); }
.concept-wheel-wrap .wheel { width: 520px; }
.concept-wheel-wrap .wheel-stand { width: 70%; }
.concept-mythic { position: absolute; right: 0; bottom: 66px; width: 205px; z-index: 5; filter: drop-shadow(0 0 14px #ff25258f) drop-shadow(0 18px 22px #000); transform: rotate(4deg); }
.concept-mythic img { display: block; width: 100%; }
.rarity-label { position: absolute; top: -34px; left: 50%; width: max-content; padding: 7px 15px; border: 1px solid #ff4b4b; border-radius: 20px; color: #ff8585; background: #130708e8; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; transform: translateX(-50%); }

/* Premium chrome and rarity accents */
.concept-wheel-wrap .wheel {
  border-color: #101114;
  box-shadow:
    0 0 0 2px #f0f1f3,
    0 0 0 5px #73767d,
    0 0 0 9px #17181b,
    0 0 0 13px #b8bbc1,
    0 0 0 16px #4b4d53,
    0 0 34px #e24b9185,
    inset 0 0 28px #000,
    inset 0 0 0 2px #ffffff45;
}
.concept-wheel-wrap .wheel::before { border-color: #e5e6e9; filter: drop-shadow(0 0 4px #ffffff80); }
.concept-wheel-wrap .wheel::after { border-color: #aeb1b899; box-shadow: 0 0 10px #e24b9180, inset 0 0 18px #000, inset 0 0 0 1px #fff6; }
.concept-wheel-wrap .wheel-center { border-color: #7b7e85; background: radial-gradient(circle at 35% 28%, #34363b, #09090b 58%); box-shadow: 0 0 0 3px #050506, 0 0 0 5px #c6c8cd, 0 0 22px #000, inset 0 0 20px #000; }
.concept-wheel-wrap .wheel-stand { border-color: #8d9097; background: linear-gradient(180deg, #474950, #111216 45%, #070708 75%); box-shadow: inset 0 5px 9px #ffffff25, 0 18px 0 9px #09090a, 0 20px 0 12px #55575d, 0 23px 0 14px #b9bbc0, 0 0 24px #e24b9160; }
.wheel-label.rarity-common { color: #ff70b2; text-shadow: 0 0 5px #e24b91; }
.wheel-label.rarity-rare { color: #55baff; text-shadow: 0 0 6px #168eea; }
.wheel-label.rarity-epic { color: #bd75ff; text-shadow: 0 0 6px #8335d4; }
.wheel-label.rarity-legendary { color: #ffd45d; text-shadow: 0 0 6px #c98b16; }
.wheel-label.rarity-mythic { color: #ff6767; text-shadow: 0 0 7px #e21f2f; }
.benefit-strip, .stats, .library-preview { border-color: #42444a; background: linear-gradient(145deg, #17181b, #0c0c0e 58%); box-shadow: inset 0 1px 0 #ffffff18, inset 0 0 0 1px #0008, 0 12px 28px #0005; }
.benefit-icon, .how-preview li > .how-icon { border-color: #55575e; background: linear-gradient(145deg, #292a2f, #101114 60%); box-shadow: inset 0 1px 0 #ffffff1c, inset 0 0 10px #0008; }

/* Focused eight-outcome wheel redesign */
.concept-wheel-wrap .wheel {
  border: 13px solid #101114;
  background:
    radial-gradient(circle at 34% 20%, #ffffff1c, transparent 27%),
    repeating-conic-gradient(from -22.5deg, transparent 0 44.25deg, #e9d6df65 44.25deg 45deg),
    conic-gradient(
      from -22.5deg,
      #9d1726 0 45deg,
      #09090b 45deg 90deg,
      #d83d84 90deg 135deg,
      #09090b 135deg 180deg,
      #bb831e 180deg 225deg,
      #09090b 225deg 270deg,
      #d83d84 270deg 315deg,
      #09090b 315deg 360deg
    );
  box-shadow:
    0 0 0 2px #3e4046,
    0 0 0 5px #111216,
    0 0 0 7px #b44b78,
    0 0 0 10px #09090b,
    0 0 22px #e24b9160,
    inset 0 0 32px #000,
    inset 0 0 0 2px #ffffff30;
}
.concept-wheel-wrap .wheel::before {
  inset: -8px;
  border: 2px solid #e35b99;
  filter: drop-shadow(0 0 5px #d74887);
}
.concept-wheel-wrap .wheel::after {
  inset: 3.2%;
  border: 2px solid #5d6067;
  background: radial-gradient(circle at 35% 22%, #ffffff20, transparent 28%);
  box-shadow: inset 0 0 18px #000, inset 0 0 0 1px #ffffff24;
}
.concept-wheel-wrap .wheel-center {
  inset: 33.5%;
  border: 3px solid #565960;
  background: radial-gradient(circle at 36% 28%, #292a2f, #070708 60%);
  box-shadow: 0 0 0 3px #050506, 0 0 0 5px #a84470, 0 0 18px #000, inset 0 0 22px #000;
}
.concept-wheel-wrap .wheel-stand {
  border-color: #55585f;
  background: linear-gradient(180deg, #35373c, #101115 48%, #060607 80%);
  box-shadow: inset 0 4px 8px #ffffff1b, 0 18px 0 9px #080809, 0 20px 0 11px #3d3f45, 0 22px 0 13px #9f426c, 0 0 20px #9f426c70;
}
.concept-wheel-wrap .wheel-pointer {
  top: -31px;
  left: calc(50% - 25px);
  width: 50px;
  height: 76px;
  border: 2px solid #656870;
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(90deg, #090a0c, #34363b 48%, #0a0b0d);
  box-shadow: inset 0 1px 0 #ffffff38, inset 0 -8px 12px #000, 0 0 0 2px #080809, 0 0 0 4px #a84470, 0 0 12px #d7488780, 0 7px 8px #000c;
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 38%, 64% 38%, 50% 100%, 36% 38%, 0 38%, 0 12%);
}
.concept-wheel-wrap .wheel-pointer::before {
  top: 8px;
  left: 9px;
  right: 9px;
  height: 8px;
  border: 0;
  border-radius: 6px;
  background: #ec5a99;
  box-shadow: 0 0 7px #ec5a99;
}
.concept-wheel-wrap .wheel-pointer::after {
  top: 25px;
  left: calc(50% - 3px);
  width: 6px;
  height: 38px;
  background: linear-gradient(#f6b1cf, #d84787 58%, #651d3e);
  box-shadow: 0 0 5px #d84787;
}
.concept-wheel-wrap .wheel-label {
  display: grid;
  min-width: 52px;
  justify-items: center;
  color: #f7f4f6;
  font-size: 14px;
  line-height: 1.08;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}
.concept-wheel-wrap .label-on-pink,
.concept-wheel-wrap .label-on-special {
  color: #100d0f;
  text-shadow: 0 1px 1px #ffffff35;
}
.concept-wheel-wrap .label-1 { top: 12%; left: 45%; transform: none; }
.concept-wheel-wrap .label-2 { top: 22%; right: 19%; transform: rotate(45deg); }
.concept-wheel-wrap .label-3 { top: 44%; right: 10%; transform: rotate(90deg); }
.concept-wheel-wrap .label-4 { right: 19%; bottom: 21%; transform: rotate(135deg); }
.concept-wheel-wrap .label-5 { bottom: 11%; left: 45%; transform: rotate(180deg); }
.concept-wheel-wrap .label-6 { left: 19%; bottom: 21%; transform: rotate(225deg); }
.concept-wheel-wrap .label-7 { top: 44%; left: 10%; transform: rotate(270deg); }
.concept-wheel-wrap .label-8 { top: 22%; left: 19%; transform: rotate(315deg); }
.outcome-gem {
  display: block;
  width: 8px;
  height: 8px;
  margin-bottom: 3px;
  border: 1px solid #ffffff8c;
  transform: rotate(45deg);
  box-shadow: 0 0 5px currentColor;
}
.gem-common { color: #ff70b2; background: #ff70b2; }
.gem-rare { color: #55baff; background: #55baff; }
.gem-epic { color: #bd75ff; background: #bd75ff; }
.gem-legendary { color: #ffd45d; background: #ffd45d; }
.gem-mythic { color: #ff5353; background: #ff5353; }

/* Corrected wheel palette and radial label alignment */
.concept-wheel-wrap .wheel {
  background:
    radial-gradient(circle at 34% 20%, #ffffff18, transparent 27%),
    repeating-conic-gradient(from -22.5deg, transparent 0 44.3deg, #f1d6e25c 44.3deg 45deg),
    conic-gradient(
      from -22.5deg,
      #d83d84 0 45deg,
      #09090b 45deg 90deg,
      #d83d84 90deg 135deg,
      #09090b 135deg 180deg,
      #d83d84 180deg 225deg,
      #09090b 225deg 270deg,
      #d83d84 270deg 315deg,
      #09090b 315deg 360deg
    );
}
.concept-wheel-wrap .wheel-label {
  display: block;
  min-width: 58px;
  color: #f8f5f7;
  font-size: 14px;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
  transform: translate(-50%, -50%);
}
.concept-wheel-wrap .label-on-pink,
.concept-wheel-wrap .label-on-special {
  color: #100d0f;
  text-shadow: 0 1px 1px #ffffff45;
}
.concept-wheel-wrap .label-1 { top: 18.5%; left: 50%; }
.concept-wheel-wrap .label-2 { top: 27.7%; right: auto; left: 72.3%; }
.concept-wheel-wrap .label-3 { top: 50%; right: auto; left: 81.5%; }
.concept-wheel-wrap .label-4 { right: auto; bottom: auto; top: 72.3%; left: 72.3%; }
.concept-wheel-wrap .label-5 { bottom: auto; top: 81.5%; left: 50%; }
.concept-wheel-wrap .label-6 { left: 27.7%; bottom: auto; top: 72.3%; }
.concept-wheel-wrap .label-7 { top: 50%; left: 18.5%; }
.concept-wheel-wrap .label-8 { top: 27.7%; left: 27.7%; }
.concept-wheel-wrap .outcome-gem {
  width: 7px;
  height: 7px;
  margin: 0 auto 4px;
  border-color: currentColor;
  color: inherit;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}

/* Exact center-anchored label geometry */
.concept-wheel-wrap .wheel-label {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 64px;
  min-width: 64px;
  transform:
    translate(-50%, -50%)
    rotate(var(--label-angle))
    translateY(-164px)
    rotate(var(--label-counter-angle));
  transform-origin: center;
}
.concept-wheel-wrap .label-1 { --label-angle: 0deg; --label-counter-angle: 0deg; }
.concept-wheel-wrap .label-2 { --label-angle: 45deg; --label-counter-angle: -45deg; }
.concept-wheel-wrap .label-3 { --label-angle: 90deg; --label-counter-angle: -90deg; }
.concept-wheel-wrap .label-4 { --label-angle: 135deg; --label-counter-angle: -135deg; }
.concept-wheel-wrap .label-5 { --label-angle: 180deg; --label-counter-angle: -180deg; }
.concept-wheel-wrap .label-6 { --label-angle: 225deg; --label-counter-angle: -225deg; }
.concept-wheel-wrap .label-7 { --label-angle: 270deg; --label-counter-angle: -270deg; }
.concept-wheel-wrap .label-8 { --label-angle: 315deg; --label-counter-angle: -315deg; }

/* Final wheel finish */
.concept-wheel-wrap .wheel {
  border-width: 12px;
  box-shadow:
    0 0 0 2px #42444a,
    0 0 0 5px #0a0b0d,
    0 0 0 7px #bd4779,
    0 0 0 10px #080809,
    0 0 20px #d94b8980,
    inset 0 0 34px #000,
    inset 0 0 0 2px #ffffff26;
}
.concept-wheel-wrap .wheel::before {
  inset: -7px;
  border: 1px solid #ef6ca5;
  box-shadow: 0 0 8px #d94b8970;
  filter: none;
}
.concept-wheel-wrap .wheel::after {
  inset: 3.4%;
  border-color: #6c6e74;
  box-shadow: inset 0 0 20px #000, inset 0 0 0 1px #ffffff20;
}
.concept-wheel-wrap .wheel-label {
  letter-spacing: .15px;
}
.concept-wheel-wrap .wheel-label strong {
  font-size: 17px;
  line-height: 1;
}
.concept-wheel-wrap .wheel-pointer {
  top: -28px;
  width: 46px;
  height: 72px;
  left: calc(50% - 23px);
  border-color: #55585f;
  border-radius: 8px 8px 15px 15px;
  box-shadow: inset 0 1px 0 #ffffff32, inset 0 -7px 11px #000, 0 0 0 2px #080809, 0 0 0 3px #a9406c, 0 0 10px #d7488775, 0 6px 7px #000c;
}
.concept-wheel-wrap .wheel-pointer::before {
  left: 8px;
  right: 8px;
  height: 7px;
}
.concept-wheel-wrap .wheel-pointer::after {
  top: 23px;
  height: 35px;
}
.concept-wheel-wrap .wheel-stand {
  width: 66%;
  height: 43px;
  border-width: 2px;
  box-shadow: inset 0 4px 7px #ffffff17, 0 16px 0 8px #080809, 0 18px 0 10px #3d3f45, 0 20px 0 12px #984067, 0 0 17px #98406760;
}

/* Monthly Creator Card Drops hero */
.concept-copy h1 { font-size: clamp(72px, 7.4vw, 98px); }
.drop-strip {
  overflow: hidden;
  border: 1px solid #42444a;
  border-radius: 10px;
  background: linear-gradient(145deg, #17181b, #0c0c0e 58%);
  box-shadow: inset 0 1px 0 #ffffff18, inset 0 0 0 1px #0008, 0 12px 28px #0005;
}
.drop-strip article {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border-bottom: 1px solid #2f3035;
}
.drop-strip article:last-child { border: 0; }
.drop-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #55575e;
  border-radius: 9px;
  background: linear-gradient(145deg, #292a2f, #101114 60%);
  box-shadow: inset 0 1px 0 #ffffff1c, inset 0 0 10px #0008;
}
.drop-icon svg {
  width: 28px;
  height: 28px;
  fill: #e24b9124;
  stroke: var(--pink-light);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #e24b9190);
}
.drop-strip strong { display: block; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.drop-strip p { margin: 2px 0 0; font-size: 11px; line-height: 1.25; }
.drop-hero-visual { display: grid; place-items: center; overflow: visible; }
.drop-aura {
  position: absolute;
  inset: 6% 0 4%;
  z-index: -2;
  background: radial-gradient(circle at 50% 46%, #e24b9138, transparent 36%), radial-gradient(circle at 26% 51%, #168eea24, transparent 25%), radial-gradient(circle at 74% 52%, #dcb54e1f, transparent 26%);
  filter: blur(18px);
}
.drop-hero-visual::before {
  content: "";
  position: absolute;
  inset: 6% 1% 9%;
  z-index: -1;
  border: 1px solid #ffffff0b;
  border-radius: 50%;
  background-image: radial-gradient(#ffffff38 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, black, transparent 67%);
}
.drop-pack {
  position: absolute;
  top: 164px;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 245px;
  height: 330px;
  place-content: center;
  padding: 32px;
  border: 1px solid #5c5e65;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(145deg, #ffffff18, transparent 24%), repeating-linear-gradient(135deg, #ffffff05 0 12px, transparent 12px 24px), linear-gradient(160deg, #282a30, #0b0b0d 58%, #25131d);
  box-shadow: inset 0 1px 0 #ffffff35, inset 0 0 0 1px #000b, 0 0 0 2px #09090b, 0 0 0 4px #e24b913a, 0 30px 44px #000c, 0 0 32px #e24b9155;
  transform: translateX(-50%);
}
.drop-pack::before,
.drop-pack::after { content: ""; position: absolute; pointer-events: none; }
.drop-pack::before { inset: 16px; border: 1px solid #ffffff18; border-radius: 16px; }
.drop-pack::after {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff75b5, #9a315f 70%);
  box-shadow: 0 0 18px #e24b9180;
}
.drop-pack-kicker { margin-bottom: 18px; color: #ff77b7; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.drop-pack strong { font-family: Georgia, serif; font-size: 70px; line-height: .8; }
.drop-pack strong::first-letter { color: var(--pink); }
.drop-pack > span:not(.drop-pack-kicker) { margin-top: 10px; color: #f2edf0; font-family: var(--display); font-size: 28px; line-height: 1; text-transform: uppercase; }
.drop-pack small { margin-top: 18px; color: #a39ca1; font-size: 8px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.drop-card-stack { position: absolute; inset: 0; }
.drop-card { position: absolute; width: 162px; filter: drop-shadow(0 18px 20px #000b); transition: transform .25s ease, filter .25s ease; }
.drop-card img { display: block; width: 100%; height: auto; }
.drop-card-common { left: 11%; top: 314px; z-index: 2; filter: drop-shadow(0 0 10px #e24b9170) drop-shadow(0 18px 20px #000b); transform: rotate(-13deg); }
.drop-card-rare { left: 19%; top: 184px; z-index: 3; filter: drop-shadow(0 0 10px #168eea80) drop-shadow(0 18px 20px #000b); transform: rotate(-8deg); }
.drop-card-epic { right: 18%; top: 190px; z-index: 3; filter: drop-shadow(0 0 10px #a958f580) drop-shadow(0 18px 20px #000b); transform: rotate(8deg); }
.drop-card-legendary { right: 10%; top: 318px; z-index: 2; filter: drop-shadow(0 0 11px #dcb54e80) drop-shadow(0 18px 20px #000b); transform: rotate(13deg); }
.drop-card:hover { z-index: 8; filter: drop-shadow(0 0 18px #e24b91a0) drop-shadow(0 20px 24px #000c); }
.drop-card-common:hover { transform: rotate(-9deg) translateY(-8px); }
.drop-card-rare:hover { transform: rotate(-4deg) translateY(-8px); }
.drop-card-epic:hover { transform: rotate(4deg) translateY(-8px); }
.drop-card-legendary:hover { transform: rotate(9deg) translateY(-8px); }
.achievement-badge {
  position: absolute;
  right: 5%;
  top: 74px;
  z-index: 6;
  padding: 11px 14px;
  border: 1px solid #ff5555;
  border-radius: 11px;
  background: linear-gradient(145deg, #2c0b0f, #09090a);
  box-shadow: inset 0 1px 0 #ffffff22, 0 0 20px #ff2c3d50;
  transform: rotate(4deg);
}
.achievement-badge span { display: block; color: #ff7777; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.achievement-badge strong { display: block; margin-top: 4px; color: white; font-size: 11px; text-transform: uppercase; }
.drop-plinth {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 1;
  width: 560px;
  height: 60px;
  border: 1px solid #77798070;
  border-radius: 50%;
  background: radial-gradient(ellipse, #e24b9124, #101012 45%, #050506 72%);
  box-shadow: 0 13px 0 3px #080809, 0 15px 0 5px #484a5055, 0 0 28px #e24b9140;
  transform: translateX(-50%);
}

/* Revised drop display layout */
.drop-pack {
  top: 75px;
  z-index: 2;
  width: 270px;
  height: 330px;
  opacity: .92;
}
.drop-card { width: 154px; }
.drop-card-common { left: 5%; top: 292px; z-index: 5; transform: rotate(-8deg); }
.drop-card-rare { left: 28%; top: 258px; z-index: 6; transform: rotate(-3deg); }
.drop-card-epic { right: 28%; top: 258px; z-index: 6; transform: rotate(3deg); }
.drop-card-legendary { right: 5%; top: 292px; z-index: 5; transform: rotate(8deg); }
.drop-card-common:hover { transform: rotate(-5deg) translateY(-8px); }
.drop-card-rare:hover { transform: rotate(-1deg) translateY(-8px); }
.drop-card-epic:hover { transform: rotate(1deg) translateY(-8px); }
.drop-card-legendary:hover { transform: rotate(5deg) translateY(-8px); }
.drop-tray {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  display: flex;
  width: min(590px, 92%);
  min-height: 78px;
  padding: 19px 28px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #42444a;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff12, transparent 22%), linear-gradient(180deg, #1b1c20, #09090a 72%);
  box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #000, 0 18px 32px #0009, 0 0 24px #e24b9124;
  transform: translateX(-50%);
}
.drop-tray::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e24b91, #168eea, #a958f5, #dcb54e, transparent);
  box-shadow: 0 0 10px #e24b9180;
}
.drop-tray span {
  color: #f5f1f4;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.drop-tray strong {
  color: #ff77b7;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.drop-plinth { display: none; }

/* Subscription tiers */
.tiers-section { scroll-margin-top: 28px; padding: 20px 0 78px; }
.tiers-heading { max-width: 660px; margin: 0 auto 38px; text-align: center; }
.tiers-heading h2 { font-size: 48px; }
.tiers-heading > p:last-child { margin: 14px auto 0; font-size: 15px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 22px; }
.tier-card { position: relative; display: flex; min-height: 520px; padding: 28px; flex-direction: column; overflow: hidden; border: 1px solid #484950; border-radius: 12px; background: linear-gradient(155deg, #191a1e, #0c0c0e 54%); box-shadow: inset 0 1px 0 #ffffff18, 0 18px 34px #0006; }
.tier-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, #ffffff0e, transparent 35%); }
.tier-card-top { position: relative; z-index: 1; min-height: 250px; padding-bottom: 28px; border-bottom: 1px solid #34353b; text-align: center; }
.tier-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 17px; place-items: center; border: 1px solid #5a5c63; border-radius: 50%; background: linear-gradient(145deg, #292a2f, #101114); box-shadow: inset 0 1px 0 #ffffff21, 0 0 16px #e24b9128; }
.tier-icon svg { width: 38px; height: 38px; fill: #e24b9128; stroke: #e57aaa; stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 0 4px #e24b9180); }
.tier-kicker { margin: 0 0 9px; color: #d285a5; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.tier-card h3 { margin: 0; font-family: var(--display); font-size: 42px; line-height: 1; text-transform: uppercase; }
.tier-summary { min-height: 44px; margin: 16px 0 0; font-size: 12px; line-height: 1.45; }
.tier-card ul { position: relative; z-index: 1; display: grid; gap: 14px; margin: 24px 0 30px; padding: 0; list-style: none; }
.tier-card li { position: relative; padding-left: 24px; color: #d1cdd0; font-size: 12px; line-height: 1.4; }
.tier-card li::before { content: "✓"; position: absolute; left: 0; color: #e875a7; font-weight: 700; }
.tier-button { position: relative; z-index: 1; width: 100%; margin-top: auto; }
.tier-premium { border-color: #d94b89; background: linear-gradient(155deg, #2c1722, #111013 50%); box-shadow: inset 0 1px 0 #ffffff20, 0 0 0 1px #e24b9130, 0 0 26px #e24b9138, 0 20px 40px #0007; transform: translateY(-12px); }
.tier-premium .tier-icon { border-color: #d94b89; background: linear-gradient(145deg, #4a1d32, #151116); }
.tier-ultra { border-color: #6d6469; background: linear-gradient(155deg, #211d20, #0b0b0d 55%); }
.tier-ultra .tier-icon svg { fill: #d7b45c25; stroke: #e2c068; filter: drop-shadow(0 0 4px #d1a63d75); }
.recommended-badge { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 8px 12px; border: 1px solid #c58aff; border-radius: 6px 6px 6px 14px; color: white; background: linear-gradient(135deg, #b160fa, #7132ac); box-shadow: inset 0 1px 0 #ffffff35, 0 0 14px #a958f54d; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.tiers-note { margin: 22px 0 0; color: #746d72; font-size: 10px; text-align: center; }

/* Tier rarity accents */
.tier-card {
  --tier-accent: #168eea;
  --tier-rgb: 22, 142, 234;
  border-color: rgba(var(--tier-rgb), .46);
  box-shadow: inset 0 1px 0 #ffffff18, 0 18px 34px #0006, 0 0 22px rgba(var(--tier-rgb), .09);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tier-card:hover {
  border-color: rgba(var(--tier-rgb), .78);
  box-shadow: inset 0 1px 0 #ffffff20, 0 22px 42px #0008, 0 0 30px rgba(var(--tier-rgb), .26);
  transform: translateY(-5px);
}
.tier-card::before { background: radial-gradient(circle at 50% 0, rgba(var(--tier-rgb), .13), transparent 38%); }
.tier-icon {
  width: 72px;
  height: 72px;
  border-color: rgba(var(--tier-rgb), .72);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(var(--tier-rgb), .16), #101114 70%);
  box-shadow: inset 0 1px 0 #ffffff21, 0 0 18px rgba(var(--tier-rgb), .23);
  transform: none;
}
.tier-icon svg {
  width: 45px;
  height: 45px;
  fill: rgba(var(--tier-rgb), .08);
  stroke: var(--tier-accent);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--tier-rgb), .6));
}
.tier-kicker,
.tier-card h3,
.tier-card li::before { color: var(--tier-accent); }
.tier-card h3 { text-shadow: 0 0 16px rgba(var(--tier-rgb), .22); }
.tier-price { display: flex; margin: 15px 0 0; align-items: baseline; justify-content: center; gap: 6px; }
.tier-price strong { color: #f7f3f5; font-size: 27px; line-height: 1; letter-spacing: -.6px; }
.tier-price span { color: #8f888d; font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.tier-button {
  border-color: rgba(var(--tier-rgb), .68);
  color: var(--tier-accent);
  background: linear-gradient(135deg, rgba(var(--tier-rgb), .12), transparent);
}
.tier-button:hover { background: rgba(var(--tier-rgb), .18); box-shadow: 0 0 18px rgba(var(--tier-rgb), .24); }
.tier-premium {
  --tier-accent: #a958f5;
  --tier-rgb: 169, 88, 245;
  border-color: rgba(var(--tier-rgb), .58);
  background: linear-gradient(155deg, #21172b, #0e0d11 52%);
  box-shadow: inset 0 1px 0 #ffffff20, 0 0 0 1px rgba(var(--tier-rgb), .19), 0 0 26px rgba(var(--tier-rgb), .22), 0 20px 40px #0007;
}
.tier-premium:hover { transform: translateY(-17px); }
.tier-premium .tier-icon { border-color: rgba(var(--tier-rgb), .72); background: linear-gradient(145deg, rgba(var(--tier-rgb), .18), #101114 70%); }
.tier-premium .tier-button { color: white; background: linear-gradient(135deg, #b160fa, #7132ac); }
.tier-ultra {
  --tier-accent: #dcb54e;
  --tier-rgb: 220, 181, 78;
  border-color: rgba(var(--tier-rgb), .5);
  background: linear-gradient(155deg, #241f15, #0b0b0d 55%);
}
.tier-ultra .tier-icon svg { fill: rgba(var(--tier-rgb), .08); stroke: var(--tier-accent); filter: drop-shadow(0 0 4px rgba(var(--tier-rgb), .6)); }

/* Premium Drop Case hero */
.case-hero {
  display: grid;
  min-height: 720px;
  grid-template-columns: 395px minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  padding: 24px 0 34px;
}
.case-copy { position: relative; z-index: 3; }
.case-copy h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(70px, 7vw, 92px);
  line-height: .86;
  letter-spacing: -2px;
  text-transform: uppercase;
}
.case-copy h1 strong { color: var(--pink); text-shadow: 0 0 22px #e24b9145; }
.case-description { max-width: 385px; margin: 20px 0 22px; font-size: 16px; }
.case-benefits {
  overflow: hidden;
  border: 1px solid #42444a;
  border-radius: 10px;
  background: linear-gradient(145deg, #17181b, #0c0c0e 58%);
  box-shadow: inset 0 1px 0 #ffffff18, inset 0 0 0 1px #0008, 0 12px 28px #0005;
}
.case-benefits article {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #2f3035;
}
.case-benefits article:last-child { border: 0; }
.case-benefits span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #55575e;
  border-radius: 9px;
  color: var(--pink-light);
  background: linear-gradient(145deg, #292a2f, #101114 60%);
  box-shadow: inset 0 1px 0 #ffffff1c, inset 0 0 10px #0008;
  font-size: 11px;
  font-weight: 800;
}
.case-benefits strong { display: block; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.case-benefits p { margin: 2px 0 0; font-size: 11px; line-height: 1.25; }
.case-cta { width: 100%; min-height: 62px; margin-top: 18px; font-size: 18px; letter-spacing: .4px; }
.case-visual {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: translateX(36px);
}
.case-glow {
  position: absolute;
  inset: 2% -8% -2%;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 58%, #168eea24, transparent 24%),
    radial-gradient(circle at 39% 42%, #e24b912b, transparent 28%),
    radial-gradient(circle at 64% 39%, #a958f529, transparent 25%),
    radial-gradient(circle at 84% 62%, #dcb54e26, transparent 27%);
  opacity: .72;
  filter: blur(18px);
}
.case-visual::before {
  content: "";
  position: absolute;
  inset: 7% -2% 6%;
  z-index: -1;
  border: 1px solid #ffffff0b;
  border-radius: 50%;
  background-image: radial-gradient(#ffffff35 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, black, transparent 67%);
}
.case-mist {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 19%;
  z-index: 4;
  height: 34%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 62%, #168eea3b 0 8%, #168eea16 20%, transparent 42%),
    radial-gradient(ellipse at 34% 78%, #e24b9142 0 9%, #e24b9118 22%, transparent 45%),
    radial-gradient(ellipse at 66% 74%, #a958f53a 0 8%, #a958f514 22%, transparent 44%),
    radial-gradient(ellipse at 88% 60%, #dcb54e35 0 8%, #dcb54e12 22%, transparent 43%);
  filter: blur(20px);
  opacity: .82;
}
.real-drop-chest {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 5;
  width: min(810px, 116%);
  transform: translateX(-50%);
  filter: none;
}
.real-drop-chest::after { content: none; }
.real-drop-chest img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}
.vault-status {
  position: absolute;
  left: calc(50% + 14px);
  bottom: 4px;
  z-index: 6;
  width: min(553px, 77%);
  padding: 18px 24px;
  border: 1px solid #42444a;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #e24b9112, transparent 42%),
    linear-gradient(145deg, #121316cc, #080809dc 62%);
  box-shadow: inset 0 1px 0 #ffffff12, 0 14px 28px #0008;
  transform: translateX(-50%);
}
.vault-status::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(#168eea, #e24b91, #a958f5, #dcb54e);
  box-shadow: 0 0 12px #e24b9180;
}
.vault-status p {
  margin: 0 0 5px 14px;
  color: var(--pink-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.vault-status strong {
  display: block;
  margin-left: 14px;
  color: #f7f3f5;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
}
.vault-status span {
  display: block;
  margin: 7px 0 0 14px;
  color: #bdb6bb;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { position: absolute; display: none; top: 90px; left: 20px; right: 20px; z-index: 10; padding: 24px; flex-direction: column; gap: 10px; background: #111; border: 1px solid var(--line); }
  .main-nav.open { display: flex; }
  .auth-actions { display: none; }
  .menu-toggle { display: grid; width: 44px; padding: 10px; gap: 5px; border: 1px solid var(--pink); border-radius: 5px; background: transparent; }
  .menu-toggle span:not(.sr-only) { height: 2px; background: white; }
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: 600px; margin-inline: auto; }
  .hero-description { margin-inline: auto; }
  .hero-visual { min-height: 590px; margin-top: 24px; }
  .wheel-wrap { transform: none; }
  .wheel { width: min(78vw, 520px); }
  .preview { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .tier-premium { transform: none; }
  .tier-card:hover,
  .tier-premium:hover { transform: translateY(-5px); }
}

@media (max-width: 680px) {
  .page-shell { width: min(100% - 24px, 1180px); }
  .site-header { height: 88px; }
  .logo-mark { font-size: 43px; }
  .logo { width: 145px; }
  .hero { min-height: auto; padding: 18px 0 42px; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(64px, 18vw, 84px); }
  .hero-description { margin-block: 18px; font-size: 15px; }
  .steps-mini { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 14px 2px; }
  .steps-mini article { padding: 0 4px; border-right: 1px solid #29292b; }
  .steps-mini article:last-child { border-right: 0; }
  .steps-mini p { font-size: 9px; }
  .step-icon { font-size: 22px; }
  .hero-button { min-height: 60px; margin-top: 16px; }
  .hero-visual { min-height: 390px; margin-top: 34px; }
  .wheel { width: min(76vw, 390px); border-width: 10px; }
  .wheel-pointer { top: -25px; left: calc(50% - 17px); width: 34px; height: 52px; }
  .hero-card { width: 86px; right: 3%; bottom: 40px; }
  .wheel-label { font-size: 7px; }
  .wheel-stand { height: 24px; box-shadow: 0 11px 0 5px #080808, 0 13px 0 7px #bd3576, 0 0 18px var(--pink); }
  .stats { grid-template-columns: 1fr; gap: 22px; }
  .stats article { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
  .stats article:last-child { border: 0; padding: 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}