:root {
  --vip-night: #020914;
  --vip-panel: #071827;
  --vip-cyan: #65e5ff;
  --vip-gold: #edc76a;
  --vip-text: #eefaff;
  --vip-muted: #a9becb;
  --vip-line: rgba(110, 215, 255, .2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--vip-night); }
body.vip-page { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--vip-text); background: var(--vip-night); font-family: "Outfit", sans-serif; }
body.vip-page::before { content: ""; position: fixed; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(1, 7, 14, .42), #020914 78%), url("assets/images/imperium-storm-sea.png") center top / cover no-repeat; }
body.vip-page::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 72% 5%, rgba(56, 183, 234, .2), transparent 36%); }
button, a { -webkit-tap-highlight-color: transparent; }
.vip-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.vip-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(101, 229, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 229, 255, .045) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.vip-orb { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(85px); opacity: .11; }
.orb-one { top: 8%; left: -160px; background: #46d9ff; }
.orb-two { top: 36%; right: -200px; background: #edbb48; }
.vip-nav { position: sticky; top: 0; z-index: 100; max-width: 100%; padding-inline: max(28px, calc((100vw - 1240px) / 2)); }
.vip-nav::after { left: max(28px, calc((100vw - 1240px) / 2)); right: max(28px, calc((100vw - 1240px) / 2)); }
.vip-nav .ip-links { gap: 26px; }
.vip-nav .ip-links a { font-size: 12px; }
.vip-hero { position: relative; max-width: 1240px; min-height: 690px; margin: 0 auto; padding: 92px 28px 110px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: center; gap: 70px; }
.vip-hero::after { content: ""; position: absolute; inset: auto 28px 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(101, 229, 255, .5), transparent); }
.vip-hero-copy { text-align: left; }
.vip-eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 13px; color: #9cdfff; font-size: 11px; font-weight: 800; letter-spacing: .27em; }
.vip-eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--vip-cyan)); }
.vip-eyebrow span:last-child { transform: rotate(180deg); }
.vip-logo { width: min(410px, 82%); height: auto; display: block; margin: 0 0 15px; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .55)); }
.vip-crown { width: 42px; height: 42px; margin: 0 0 15px; display: grid; place-items: center; color: var(--vip-gold); border: 1px solid rgba(237, 199, 106, .45); background: rgba(237, 199, 106, .08); transform: rotate(45deg); }
.vip-crown i { transform: rotate(-45deg); }
.vip-hero h1 { margin: 0; font: 800 clamp(54px, 7vw, 92px)/.96 "Cinzel", serif; letter-spacing: -.04em; text-shadow: 0 15px 50px #000; }
.vip-hero h1 strong { color: var(--vip-gold); font-weight: 800; text-shadow: 0 0 34px rgba(237, 199, 106, .19); }
.vip-lead { max-width: 700px; margin: 25px 0 30px; color: #bfd0da; font-size: 18px; line-height: 1.7; }
.vip-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vip-button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #dff8ff; border: 1px solid rgba(101, 229, 255, .35); background: rgba(5, 22, 35, .72); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: .2s ease; }
.vip-button:hover { transform: translateY(-2px); border-color: var(--vip-cyan); color: #fff; }
.vip-button.primary { color: #17202a; border-color: transparent; background: linear-gradient(135deg, #f4da8c, #c99336); box-shadow: 0 13px 35px rgba(201, 147, 54, .18); }
.vip-stats { margin-top: 42px; display: flex; gap: 34px; }
.vip-stats div { padding-left: 15px; border-left: 1px solid rgba(101, 229, 255, .3); }
.vip-stats strong { display: block; color: #fff; font: 700 25px "Cinzel", serif; }
.vip-stats span { color: #849eae; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.vip-pass-card { position: relative; width: 100%; margin: 0; padding: 24px; overflow: hidden; color: #fff; text-align: left; border: 1px solid rgba(237, 199, 106, .4); background: linear-gradient(155deg, rgba(18, 46, 67, .97), rgba(4, 15, 25, .98)); box-shadow: 0 35px 90px rgba(0, 0, 0, .46); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); cursor: zoom-in; }
.vip-pass-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--vip-gold), transparent); }
.vip-pass-card::after { content: ""; position: absolute; width: 160px; height: 160px; top: -90px; right: -55px; border: 1px solid rgba(237, 199, 106, .22); transform: rotate(45deg); }
.pass-card-label { display: block; margin-bottom: 13px; color: var(--vip-gold); font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.pass-card-frame { min-height: 165px; display: grid; place-items: center; padding: 25px 14px; border: 1px solid var(--vip-line); background: #03080d; }
.pass-card-frame img { width: 100%; height: auto; display: block; }
.pass-card-title { display: block; margin-top: 20px; color: #fff; font: 700 20px "Cinzel", serif; }
.pass-card-title i { margin-right: 7px; color: var(--vip-gold); }
.pass-card-subtitle { display: block; margin-top: 7px; color: var(--vip-muted); }
.pass-card-zoom { display: block; margin-top: 15px; color: #79dff8; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vip-intro, .vip-rewards { max-width: 1240px; margin: 0 auto; padding: 110px 28px; }
.vip-section-heading { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.vip-section-heading > p { margin: 0 0 10px; color: var(--vip-gold); font-size: 10px; font-weight: 800; letter-spacing: .25em; }
.vip-section-heading h2 { margin: 0 0 13px; font: 700 clamp(32px, 4vw, 52px)/1.1 "Cinzel", serif; }
.vip-section-heading > span { color: var(--vip-muted); font-size: 16px; line-height: 1.65; }
.vip-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vip-how-grid article { position: relative; min-height: 225px; padding: 30px; border: 1px solid var(--vip-line); background: linear-gradient(145deg, rgba(11, 35, 54, .9), rgba(4, 17, 28, .94)); }
.vip-how-grid article::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--vip-cyan), transparent); opacity: .55; }
.vip-how-grid article > i { color: var(--vip-gold); font-size: 24px; }
.vip-how-grid article > span { position: absolute; top: 20px; right: 24px; color: rgba(255, 255, 255, .045); font: 800 55px "Cinzel", serif; }
.vip-how-grid h3 { margin: 25px 0 10px; font: 700 19px "Cinzel", serif; }
.vip-how-grid p { margin: 0; color: var(--vip-muted); line-height: 1.65; }
.vip-special { position: relative; max-width: 1184px; margin: -35px auto 55px; padding: 35px 38px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; overflow: hidden; border: 1px solid rgba(237, 199, 106, .48); background: linear-gradient(125deg, rgba(9, 31, 48, .98), rgba(62, 43, 13, .93)); box-shadow: 0 25px 70px rgba(0, 0, 0, .3); }
.vip-special::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--vip-gold), var(--vip-cyan), transparent); }
.vip-special::after { content: "VIP"; position: absolute; right: 26%; bottom: -35px; color: rgba(255, 255, 255, .025); font: 900 135px "Cinzel", serif; pointer-events: none; }
.special-emblem { position: relative; z-index: 1; width: 76px; height: 76px; display: grid; place-items: center; color: #182027; background: linear-gradient(135deg, #f5dc8f, #c58d31); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: 0 15px 35px rgba(202, 147, 52, .2); font-size: 29px; }
.special-copy { position: relative; z-index: 1; }
.special-copy > p { margin: 0 0 7px; color: var(--vip-gold); font-size: 9px; font-weight: 900; letter-spacing: .22em; }
.special-copy h2 { margin: 0 0 8px; font: 700 30px "Cinzel", serif; }
.special-copy > span { color: #b9ccd7; line-height: 1.55; }
.special-copy > span strong { color: #fff; }
.special-modes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 9px; }
.special-modes span { padding: 7px 10px; color: #dff8ff; border: 1px solid rgba(101, 229, 255, .24); background: rgba(5, 24, 38, .55); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.special-modes i { margin-right: 6px; color: var(--vip-cyan); }
.special-bonuses { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(125px, 1fr)); border: 1px solid rgba(237, 199, 106, .27); background: rgba(3, 13, 22, .66); }
.special-bonuses div { min-height: 92px; padding: 17px; display: grid; place-items: center; align-content: center; text-align: center; }
.special-bonuses div + div { border-left: 1px solid rgba(237, 199, 106, .22); }
.special-bonuses strong { color: var(--vip-gold); font: 800 30px "Cinzel", serif; }
.special-bonuses span { max-width: 125px; color: #c4d4dd; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; }
.vip-rewards { padding-top: 70px; }
.vip-timeline { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.vip-timeline::before { content: ""; position: absolute; top: -18px; bottom: -18px; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(101, 229, 255, .32) 5%, rgba(237, 199, 106, .38) 90%, transparent); }
.vip-reward-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--vip-line); background: linear-gradient(160deg, rgba(11, 35, 54, .96), rgba(3, 14, 24, .97)); box-shadow: 0 20px 50px rgba(0, 0, 0, .22); transition: transform .3s ease, border-color .3s ease, opacity .6s ease; }
.vip-reward-card:hover { transform: translateY(-4px); border-color: rgba(101, 229, 255, .48); }
.vip-reward-card::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--vip-cyan), transparent); }
.vip-level { position: absolute; z-index: 5; top: 14px; left: 14px; width: 74px; height: 74px; display: grid; align-content: center; justify-items: center; color: #fff; border: 1px solid rgba(101, 229, 255, .5); background: rgba(2, 13, 22, .92); clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.vip-level small { color: #82dff7; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.vip-level strong { font: 800 27px "Cinzel", serif; }
.reward-media-stack { background: #020609; }
.reward-media { position: relative; }
.reward-media + .reward-media { border-top: 1px solid rgba(237, 199, 106, .22); }
.media-label { position: absolute; z-index: 6; top: 13px; right: 13px; padding: 7px 10px; color: #06121c; font-size: 8px; font-weight: 900; letter-spacing: .13em; pointer-events: none; }
.reward-label { background: linear-gradient(135deg, #78e8ff, #41afd5); }
.task-label { background: linear-gradient(135deg, #f4d982, #c98f31); }
.reward-image { position: relative; width: 100%; min-height: 225px; padding: 0; display: grid; place-items: center; overflow: hidden; border: 0; border-bottom: 1px solid var(--vip-line); background: #020609; cursor: zoom-in; }
.task-image { min-height: 135px; border-bottom: 0; }
.reward-image img { width: 100%; height: auto; display: block; transition: transform .35s ease, filter .35s ease; }
.reward-image:hover img { transform: scale(1.025); filter: brightness(1.08); }
.reward-image > span { position: absolute; right: 13px; bottom: 12px; width: 35px; height: 35px; display: grid; place-items: center; color: #dffaff; border: 1px solid rgba(101, 229, 255, .35); background: rgba(1, 10, 17, .82); }
.reward-body { padding: 27px 28px 30px; }
.reward-body h3 { margin: 0 0 18px; font: 700 22px "Cinzel", serif; }
.reward-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.reward-details-grid h4 { min-height: 28px; margin: 0 0 9px; color: #8fe6fb; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.reward-details-grid h4 i { margin-right: 6px; }
.reward-details-grid h4 small { margin-left: 4px; color: var(--vip-gold); font-size: 9px; }
.task-list-block { padding-left: 20px; border-left: 1px solid rgba(237, 199, 106, .2); }
.task-list-block h4 { color: var(--vip-gold); }
.reward-body ul { margin: 0; padding: 0; list-style: none; }
.reward-body li { min-height: 42px; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #b9cbd6; border-bottom: 1px solid rgba(255, 255, 255, .065); }
.reward-body li:last-child { border-bottom: 0; }
.reward-body li span::before { content: "✦"; margin-right: 9px; color: #58c9ef; font-size: 9px; }
.reward-body li strong { min-width: 42px; padding: 5px 9px; color: #fff; text-align: center; border: 1px solid rgba(101, 229, 255, .2); background: rgba(101, 229, 255, .07); }
.task-list li span::before { color: var(--vip-gold); content: "◆"; }
.task-list li strong { border-color: rgba(237, 199, 106, .22); background: rgba(237, 199, 106, .08); }
.vip-reward-card.exalted { border-color: rgba(86, 190, 236, .35); }
.vip-reward-card.imperial { border-color: rgba(237, 199, 106, .35); }
.vip-reward-card.imperial::before { background: linear-gradient(90deg, transparent, var(--vip-gold), transparent); }
.vip-reward-card.imperial .vip-level { border-color: rgba(237, 199, 106, .65); }
.vip-reward-card.imperial .vip-level small, .vip-reward-card.imperial .reward-body li span::before { color: var(--vip-gold); }
.vip-final-tag { position: absolute; z-index: 5; top: 19px; right: 17px; padding: 7px 11px; color: #1a2025; background: linear-gradient(135deg, #f1d57f, #c38b31); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.vip-final-tag i { margin-right: 6px; }
.vip-cta { max-width: 1184px; margin: 15px auto 60px; padding: 38px 42px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(237, 199, 106, .35); background: linear-gradient(120deg, rgba(12, 38, 57, .97), rgba(67, 46, 14, .86)); }
.vip-cta p { margin: 0 0 7px; color: var(--vip-gold); font-size: 10px; font-weight: 800; letter-spacing: .23em; }
.vip-cta h2 { margin: 0 0 9px; font: 700 29px "Cinzel", serif; }
.vip-cta span { color: var(--vip-muted); }
.vip-note { max-width: 1000px; margin: 0 auto 85px; padding: 20px 25px; display: flex; align-items: flex-start; gap: 15px; color: #aabfcb; border: 1px solid var(--vip-line); background: rgba(5, 20, 33, .85); }
.vip-note i { margin-top: 3px; color: #62d9f7; }
.vip-note p { margin: 0; line-height: 1.6; }
.vip-note strong { color: #fff; }
.vip-footer { min-height: 130px; padding: 28px max(28px, calc((100vw - 1184px) / 2)); display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(101, 229, 255, .15); background: rgba(2, 9, 15, .93); }
.vip-footer img { width: 48px; height: 48px; object-fit: contain; }
.vip-footer div { display: flex; flex-direction: column; }
.vip-footer strong { font-family: "Cinzel", serif; }
.vip-footer span { color: #7892a2; font-size: 12px; }
.vip-footer > a { margin-left: auto; color: #81ddfa; text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.vip-lightbox { position: fixed; z-index: 9999; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; padding: 65px 24px 30px; background: rgba(0, 5, 10, .96); }
.vip-lightbox.open { display: flex; }
.vip-lightbox img { max-width: min(1100px, 94vw); max-height: 78vh; object-fit: contain; border: 1px solid rgba(101, 229, 255, .24); box-shadow: 0 25px 100px #000; }
.vip-lightbox p { margin: 17px 0 0; color: #e6f8ff; font: 600 14px "Cinzel", serif; text-align: center; }
.lightbox-close { position: absolute; top: 16px; right: 23px; color: #fff; border: 0; background: transparent; font-size: 42px; cursor: pointer; }
body.lightbox-open { overflow: hidden; }
.vip-reward-card.reveal-ready { opacity: 0; transform: translateY(25px); }
.vip-reward-card.reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 960px) {
  .vip-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 70px; gap: 55px; }
  .vip-hero-copy { text-align: center; }
  .vip-eyebrow, .vip-actions, .vip-stats { justify-content: center; }
  .vip-logo, .vip-crown { margin-inline: auto; }
  .vip-lead { margin-inline: auto; }
  .vip-pass-card { max-width: 610px; margin-inline: auto; }
  .vip-how-grid { grid-template-columns: 1fr; }
  .vip-how-grid article { min-height: 180px; }
  .vip-special { margin-inline: 28px; grid-template-columns: auto minmax(0, 1fr); }
  .special-bonuses { grid-column: 1 / -1; width: 100%; }
  .vip-timeline { grid-template-columns: 1fr; max-width: 690px; margin-inline: auto; }
  .vip-timeline::before { display: none; }
  .vip-cta { margin-inline: 28px; }
}
@media (max-width: 820px) {
  .vip-nav { padding-inline: 18px; }
  .vip-nav::after { left: 18px; right: 18px; }
  .vip-nav .ip-links { right: 18px; }
}
@media (max-width: 620px) {
  .vip-hero { padding: 62px 18px 82px; }
  .vip-logo { width: min(330px, 90%); }
  .vip-hero h1 { font-size: clamp(48px, 17vw, 72px); }
  .vip-lead { font-size: 16px; }
  .vip-actions { flex-direction: column; }
  .vip-button { width: 100%; }
  .vip-stats { gap: 15px; }
  .vip-stats div { flex: 1; padding-left: 8px; }
  .vip-stats span { font-size: 9px; }
  .vip-pass-card { padding: 17px; }
  .pass-card-frame { min-height: 120px; padding: 17px 8px; }
  .vip-special { margin: -20px 16px 35px; padding: 27px 20px; grid-template-columns: 1fr; text-align: center; }
  .special-emblem { margin-inline: auto; }
  .special-modes { justify-content: center; }
  .special-bonuses { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .vip-intro, .vip-rewards { padding-inline: 16px; }
  .vip-section-heading { margin-bottom: 32px; }
  .reward-image { min-height: 180px; }
  .task-image { min-height: 105px; }
  .reward-body { padding: 25px 20px 27px; }
  .reward-details-grid { grid-template-columns: 1fr; gap: 24px; }
  .task-list-block { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(237, 199, 106, .2); }
  .reward-body li { align-items: flex-start; font-size: 14px; }
  .vip-cta { margin-inline: 16px; padding: 29px 22px; flex-direction: column; align-items: flex-start; }
  .vip-note { margin-inline: 16px; }
  .vip-footer { flex-wrap: wrap; padding-inline: 20px; }
  .vip-footer > a { width: 100%; margin: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vip-reward-card.reveal-ready { opacity: 1; transform: none; }
}