/* Layout reference: Portal / Refero. All illustrations and branding are Pocket Magic. */
:root {
  --bg: #000000;
  --panel: #0f0f13;
  --ink: #e6e6e6;
  --muted: #a6a6b1;
  --gold: #b296f8;
  --line: #292929;
  --radius: 10px;
  --glow: 0 25px 50px -12px rgb(178 150 248 / 14%);
  font-family: Arial, Helvetica, sans-serif;
}
.topbar { max-width: 1360px; height: 104px; }
.brand img { width: 125px; height: 76px; }
.account-button { border-color: #4b3f71; background: #0f0f13; border-radius: var(--radius); }
nav a[aria-current] { border-color: var(--gold); }
.hero {
  max-width: 1280px;
  min-height: 560px;
  background: #0f0f13;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--glow);
}
.hero::before {
  background: linear-gradient(90deg, #08070ee8, #0b0915bb 44%, #0b091557), url('assets/forest.png') 70% 46% / cover;
}
.hero-copy { padding-top: 82px; padding-bottom: 82px; }
h1, h2 { font-weight: 900; letter-spacing: -.025em; color: #fff; }
h1 { font-size: clamp(48px, 5.2vw, 72px); line-height: 1; }
h2 { line-height: 1.11; }
.eyebrow { color: #c5aaff; letter-spacing: .2em; }
.intro { color: #c3bfce; }
.primary {
  border-radius: var(--radius);
  background: var(--gold);
  color: #120c22;
  border: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgb(178 150 248 / 12%);
}
.primary:hover { background: #c8afff; }
.primary:disabled:hover { background: var(--gold); }
.hero-art img { filter: drop-shadow(0 20px 22px rgb(8 2 20 / 65%)); }
.mage { width: 85%; height: 91%; left: -9%; bottom: 0; transform: rotate(-4deg); }
.hunter { width: 72%; height: 76%; right: -3%; bottom: 1%; transform: rotate(4deg); }
.art-caption { color: #d0c6e6; bottom: 30px; }
.launch-note, .shop, .how { max-width: 1160px; }
.launch-note { border-color: #292929; }
.shop, .how { margin-top: 64px; margin-bottom: 64px; }
.section-heading .eyebrow { margin-bottom: 16px; }
.pack {
  padding: 24px;
  border-radius: var(--radius);
  border-color: #292929;
  background: radial-gradient(ellipse at 50% 35%, #b296f815, transparent 65%), #0f0f13;
  box-shadow: var(--glow);
}
.pack-badge {
  color: #ede9fe;
  background: #b296f80b;
  border-color: #4b3f71;
  border-radius: var(--radius);
  letter-spacing: .15em;
}
.pack h3 { color: #fff; font-weight: 900; }
.pack-button {
  background: #b296f8;
  color: #120c22;
  border: 1px solid #b296f8;
  border-radius: var(--radius);
  padding: 15px 8px;
}
.pack-button:hover { background: #c8afff; }
.how { border-color: #2a2a36; }
.how h3 { color: #fff; }
footer { border-color: #2a2a36; }
dialog { background: #0f0f13; border-color: #4b3f71; border-radius: var(--radius); box-shadow: var(--glow); }
dialog::backdrop { background: #000c; }
.provider { background: #17131f; border-color: #4b3f71; border-radius: var(--radius); }
@media (max-width: 1350px) { .hero { margin-left: 3%; margin-right: 3%; } }
@media (max-width: 760px) {
  .topbar { height: 88px; }
  .brand img { width: 105px; height: 66px; }
  .hero { min-height: 675px; }
  .hero-copy { padding: 40px 8% 0; }
  .hero::before { background: linear-gradient(180deg, #090611bd, #0b091557), url('assets/forest.png') 50% 55% / cover; }
  h1 { font-size: 44px; }
  .hero-art { min-height: 300px; height: 300px; }
  .mage { width: 75%; height: 106%; left: 0; bottom: 0; }
  .hunter { width: 73%; height: 89%; right: -1%; bottom: 0; }
  .pack { padding: 14px 10px; }
  .shop, .how { margin-top: 48px; margin-bottom: 48px; }
}