/* QuestFit website. Palette and fonts match the app's "Shadowbound" theme. */
:root {
  color-scheme: dark;
  --void: #070812;
  --panel: #101323;
  --panel-2: #151a31;
  --line: #2d3150;
  --text: #f3f1ff;
  --muted: #a3a8c4;
  --violet: #b8a0ff;
  --violet-pale: #e2d9ff;
  --violet-deep: #7659df;
  --blue: #6c9cff;
  --ember: #ff6f9e;
  --grad: linear-gradient(180deg, #fff 25%, #a9a5cb 100%); /* the soft white-to-grey on headlines */

  --font-display: Rajdhani, "Arial Narrow", sans-serif;
  --font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* fluid type scale: phone → desktop */
  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --step-4: clamp(3rem, 1.6rem + 6.6vw, 7rem);

  --space-s: clamp(1rem, .9rem + .5vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-l: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 400 var(--step-0)/1.6 var(--font-body);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1; }
h2 { font-size: var(--step-3); letter-spacing: -.01em; }
h3 { font-size: var(--step-2); font-weight: 600; line-height: 1.1; }
p { margin: 0; }
a { color: var(--violet-pale); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 0; padding: .75rem 1rem; background: var(--violet); color: var(--void); z-index: 100; }
.skip-link:focus { left: 1rem; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 8, 18, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(184, 160, 255, .12);
}
.nav { display: flex; align-items: center; gap: var(--space-s); min-height: 64px; }
.logo { color: var(--violet); font: 700 1.6rem/1 var(--font-display); letter-spacing: -.1em; text-decoration: none; text-shadow: 0 0 22px rgba(184, 160, 255, .35); }
.logo span { color: var(--blue); }
.nav-links { display: flex; gap: 1.75rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a { color: var(--muted); font-weight: 600; font-size: .95rem; text-decoration: none; }
.nav-links a:hover { color: var(--text); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .8rem 1.4rem;
  border: 1px solid transparent; border-radius: 12px;
  font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--violet); color: #0d0b1b; box-shadow: 0 10px 30px rgba(118, 89, 223, .35); }
.btn--primary:hover { background: var(--violet-pale); }
.btn--soon { background: transparent; border-color: var(--line); color: var(--muted); cursor: default; }
.btn--soon svg { width: 18px; height: 18px; fill: currentColor; }
.play-badge img { height: 56px; width: auto; }
.play-slot--small .btn { min-height: 40px; padding: .55rem 1rem; font-size: .875rem; }
.play-slot--small .play-badge img { height: 40px; }

/* hero: centred copy, then JD standing in front of a glowing arch with the app beside him */
.hero { position: relative; isolation: isolate; padding-block: clamp(1.5rem, 1rem + 3vw, 3.5rem) 0; text-align: center; }
.hero-copy { max-width: 900px; margin-inline: auto; }
.hero-title { font-size: clamp(2.4rem, 1rem + 5vw, 5rem); line-height: .98; letter-spacing: -.02em; }
.hero-title .line { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { max-width: 46ch; margin: var(--space-s) auto 0; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: var(--space-m); }
.hero-note { color: var(--muted); font-size: .9rem; }
.hero-scene { position: relative; height: clamp(400px, 42vw, 520px); margin-top: var(--space-s); overflow: hidden; }
.hero-jd { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 267px; height: 400px; margin-left: -134px; pointer-events: none; }
.hero-phone { position: absolute; left: calc(50% + 150px); bottom: -150px; width: 270px; transform: rotate(4deg); }
.chip {
  position: absolute; z-index: 3; margin: 0; padding: .55rem .9rem;
  border: 1px solid rgba(184, 160, 255, .28); border-radius: 14px;
  background: rgba(16, 19, 35, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.chip strong { color: var(--text); }
.chip--quest { left: calc(50% - 400px); top: 24%; }
.chip--tier { left: calc(50% - 330px); top: 54%; }

/* the arch of light behind JD, here and at the bottom of the page */
.hero::before, .cta::before, .hero::after, .cta::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: min(780px, 100%);
}
.hero::before, .cta::before { background: radial-gradient(44% 72% at 50% 100%, rgba(196, 168, 255, .7), rgba(118, 89, 223, .32) 40%, transparent 72%); }
.hero::before { background: radial-gradient(44% 72% at 50% 92%, rgba(196, 168, 255, .7), rgba(118, 89, 223, .32) 40%, transparent 72%); mask-image: linear-gradient(to top, transparent, #000 16%); -webkit-mask-image: linear-gradient(to top, transparent, #000 16%); }
.hero::after, .cta::after {
  background: repeating-radial-gradient(circle at 50% 100%, transparent 0 110px, rgba(184, 160, 255, .16) 111px 112px);
  mask-image: radial-gradient(circle at 50% 100%, #000, transparent 68%); -webkit-mask-image: radial-gradient(circle at 50% 100%, #000, transparent 68%);
}
.hero::after { mask-image: radial-gradient(circle at 50% 100%, #000, transparent 68%), linear-gradient(to top, transparent, #000 16%); mask-composite: intersect; -webkit-mask-composite: source-in; }

/* the pill that sits above every headline */
.pill {
  display: flex; width: fit-content; align-items: center; gap: .45rem; margin: 0 auto 1.1rem; padding: .35rem .95rem;
  border: 1px solid rgba(184, 160, 255, .3); border-radius: 99px; background: rgba(118, 89, 223, .13);
  color: var(--violet-pale); font-size: .85rem; font-weight: 600;
}
.demo-copy .pill { margin-left: 0; }

/* phone frame around real app screenshots */
.phone {
  position: relative; margin: 0;
  padding: 10px; border-radius: 44px;
  background: linear-gradient(160deg, #23264a, #0c0e1d);
  border: 1px solid rgba(184, 160, 255, .25);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(118, 89, 223, .18);
}
.phone img { border-radius: 34px; width: 100%; }

/* the one page-load moment: headline lines rise in turn, then the phone settles */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-title .line:nth-child(2) { animation-delay: .1s; }
  .hero-lede, .hero-actions { animation: rise .8s .35s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-phone { animation: settle 1.1s .25s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-title .line:nth-child(2) { animation: rise .8s .1s cubic-bezier(.2, .8, .2, 1) both, shimmer 1.8s 1.2s ease-in-out both; }
  .chip { animation: chip-float 5s ease-in-out infinite; }
  .chip--tier { animation-delay: -2.5s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(.6em); } }
@keyframes settle { from { opacity: 0; transform: translateY(40px) rotate(10deg); } }
@keyframes chip-float { 50% { transform: translateY(-10px); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* demo: the playable quest */
.demo {
  padding-block: var(--space-l);
  background:
    radial-gradient(60% 80% at 80% 50%, rgba(118, 89, 223, .22), transparent 70%),
    linear-gradient(180deg, transparent, rgba(16, 19, 35, .7) 20%, rgba(16, 19, 35, .7) 80%, transparent);
}
.demo-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
.demo-copy p { max-width: 38ch; margin-top: var(--space-s); color: var(--muted); font-size: var(--step-1); }
.demo-stage { display: grid; gap: 1.25rem; }

.guide-wrap { display: flex; align-items: center; gap: 1.25rem; }
/* JD, the 3D guide; the glow shows until (or if) the model loads. */
.guide {
  flex-shrink: 0; width: 190px; height: 280px;
  background: radial-gradient(closest-side at 50% 72%, rgba(115, 92, 255, .3), transparent);
}
.guide canvas { display: block; width: 100%; height: 100%; }
.guide-says {
  position: relative; padding: .75rem 1rem;
  border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  background: var(--panel); font-weight: 600; font-size: .95rem;
}

.quest {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid rgba(184, 160, 255, .55);
  border-radius: 8px 22px 8px 22px;
  background: linear-gradient(120deg, rgba(52, 37, 89, .55), rgba(16, 19, 35, .95));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  transition: border-color .3s, box-shadow .3s;
}
.quest.is-done { border-color: var(--violet-pale); box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 4px rgba(184, 160, 255, .15); }
.quest-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.quest-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(184, 160, 255, .14); color: var(--violet-pale); font-size: 1.4rem; }
.quest-kind { color: var(--violet); font-size: .85rem; font-weight: 600; }
.quest-reward { color: var(--violet-pale); font-weight: 700; font-size: .85rem; text-align: right; line-height: 1.35; }
.quest-desc { margin: 1rem 0 1.25rem; color: var(--muted); }
.bar { height: 8px; overflow: hidden; border-radius: 99px; background: #252844; }
.bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet-deep), var(--violet-pale)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.quest-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.quest-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.reward { min-height: 1.6em; margin-top: .75rem; color: var(--violet-pale); font-weight: 700; }
.reward:empty { min-height: 0; margin: 0; }
.xp { padding: 0 .25rem; }
.xp p { display: flex; justify-content: space-between; margin-bottom: .5rem; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.xp strong { color: var(--text); }
.bar--xp { height: 6px; }
.bar--xp span { background: linear-gradient(90deg, #477bea, #84c8ff); }

/* how it works: a real sequence, so it's numbered */
.how { padding-block: var(--space-l); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); margin: var(--space-m) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1.25rem; border-top: 2px solid var(--line); }
.steps li::before { content: counter(step); display: block; margin-bottom: .75rem; color: var(--violet); font: 700 var(--step-3)/1 var(--font-display); }
.steps p { margin-top: .75rem; color: var(--muted); }

/* classes */
.classes { padding-block: var(--space-l); background: var(--panel); border-block: 1px solid var(--line); }
.class-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.class { --accent: var(--violet); display: flex; gap: 1.25rem; padding: var(--space-m) var(--space-s) var(--space-m) 0; border-top: 1px solid var(--line); }
.class:nth-child(even) { padding-left: var(--space-s); border-left: 1px solid var(--line); }
.class--warrior { --accent: #f4c76b; }
.class--ranger { --accent: #6ad4d1; }
.class--mage { --accent: #c5a7ff; }
.class--allrounder { --accent: var(--ember); }
.class-icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 1.75rem; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent); }
.class-focus { margin: .35rem 0 .6rem; color: var(--accent); font-weight: 700; }
.class-body > p:last-child { color: var(--muted); }

/* stakes */
.stakes { padding-block: var(--space-l); }
.stakes-lede { max-width: 50ch; margin-top: var(--space-s); color: var(--muted); font-size: var(--step-1); }
.modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-m);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
}
.mode { padding: var(--space-m) var(--space-s); }
.mode + .mode { border-left: 1px solid var(--line); }
.mode p { margin-top: .75rem; color: var(--muted); }
/* intensity rises left to right */
.mode--soft { background: linear-gradient(180deg, rgba(108, 156, 255, .1), transparent); }
.mode--soft h3 { color: var(--blue); }
.mode--balanced { background: linear-gradient(180deg, rgba(184, 160, 255, .14), transparent); }
.mode--balanced h3 { color: var(--violet); }
.mode--hardcore { background: linear-gradient(180deg, rgba(255, 111, 158, .18), transparent); }
.mode--hardcore h3 { color: var(--ember); }
.stakes-safe { max-width: 62ch; margin-top: var(--space-s); color: var(--muted); }

/* coming soon */
.soon { padding-block: var(--space-l); }
.soon-lede { margin-top: var(--space-s); color: var(--muted); font-size: var(--step-1); }
.soon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-l); margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.soon-list li { padding-left: 1.25rem; border-left: 2px dashed rgba(184, 160, 255, .4); }
.soon-list p { margin-top: .6rem; color: var(--muted); }

/* faq */
.faq { max-width: 860px; padding-block: var(--space-l); }
.faq h2 { margin-bottom: var(--space-m); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: 700; font-size: var(--step-1); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--violet); font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62ch; padding-bottom: 1.25rem; color: var(--muted); }

/* final call */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-l); border-top: 1px solid var(--line); }
.cta h2 { font-size: var(--step-4); line-height: .9; }

/* footer */
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.footer-row p { margin-left: auto; }

/* privacy page */
.legal { max-width: 760px; padding-block: var(--space-l); }
.legal h1 { font-size: var(--step-3); }
.legal h2 { margin-top: var(--space-m); font-size: var(--step-2); }
.legal p, .legal li { color: var(--muted); }
.legal p, .legal ul { margin-top: .9rem; }
.legal .updated { margin-top: .75rem; }

/* tablet */
@media (max-width: 900px) {
  .hero-phone { left: calc(50% + 90px); width: 220px; }
  .chip { display: none; }
  .demo-grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .steps { grid-template-columns: 1fr; }
  .soon-list { grid-template-columns: 1fr; }
}
/* phone */
@media (max-width: 640px) {
  .nav-links { display: none; }
  .play-slot--small { margin-left: auto; }
  .class-list { grid-template-columns: 1fr; }
  .class, .class:nth-child(even) { padding: var(--space-s) 0; border-left: 0; }
  .modes { grid-template-columns: 1fr; }
  .mode + .mode { border-left: 0; border-top: 1px solid var(--line); }
  .quest-head { grid-template-columns: auto 1fr; }
  .quest-reward { grid-column: 1 / -1; text-align: left; }
  .footer-row p { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Animations ----------
   JS adds .motion to <html> only when the visitor allows motion, so every
   hidden-until-revealed state below is skipped for reduced-motion visitors. */

/* hero: drifting runes and a glow that follows the cursor */
.hero { position: relative; }
.hero > :not(.runes) { position: relative; z-index: 1; }
.runes {
  position: absolute; inset: 0 calc(50% - 50vw); z-index: 0;
  overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
}
.runes::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(460px circle at var(--mx, 70%) var(--my, 35%), rgba(118, 89, 223, .22), transparent 70%);
  opacity: var(--glow, 0); transition: opacity .6s ease;
}
.rune {
  position: absolute; left: var(--x); top: var(--y);
  color: var(--violet); font-size: var(--s); text-shadow: 0 0 14px rgba(184, 160, 255, .8);
  opacity: 0; animation: drift var(--d) linear var(--delay) infinite;
}
@keyframes drift {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  20%, 70% { opacity: var(--o); }
  100% { opacity: 0; translate: var(--sway) -180px; rotate: 90deg; }
}

/* the last headline line gets one light sweep after it lands */
.hero-title .line:nth-child(2) {
  background: linear-gradient(100deg, var(--text) 40%, var(--violet-pale) 47%, #fff 50%, var(--violet-pale) 53%, var(--text) 60%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* scroll reveals: single elements and staggered groups */
.motion .reveal, .motion [data-stagger] > * {
  opacity: 0; translate: 0 28px;
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), translate .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.motion .reveal.is-visible, .motion [data-stagger].is-visible > * { opacity: 1; translate: 0 0; }

/* step numbers pop in after their step */
.motion .steps.is-visible li::before { animation: num-in .7s calc(var(--i, 0) * 110ms + .25s) cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes num-in { from { opacity: 0; scale: .3; text-shadow: 0 0 40px var(--violet); } }

/* penalty modes light up left to right; Hardcore pulses once */
.motion .modes.is-visible .mode { animation: light-up .9s calc(var(--i, 0) * 260ms + .3s) ease-out both; }
.motion .modes.is-visible .mode--hardcore { animation: light-up .9s .82s ease-out both, ember-pulse 1.4s 1.5s ease-out; }
@keyframes light-up { from { filter: brightness(.35) saturate(.4); } }
@keyframes ember-pulse { 40% { box-shadow: inset 0 0 0 1px var(--ember), inset 0 0 70px rgba(255, 111, 158, .35); } }

/* quest demo */
.quest { position: relative; }
.quest-foot { position: relative; }
.quest-icon { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), color .3s, background-color .3s, box-shadow .3s; }
.quest.is-done .quest-icon { color: #f4c76b; background: rgba(244, 199, 107, .16); transform: rotate(360deg) scale(1.08); box-shadow: 0 0 26px rgba(244, 199, 107, .35); }
.float-num {
  position: absolute; right: 1rem; bottom: 100%;
  color: var(--violet-pale); font: 700 1.25rem/1 var(--font-display);
  text-shadow: 0 0 14px rgba(184, 160, 255, .8);
  pointer-events: none; animation: float-up .9s ease-out forwards;
}
@keyframes float-up {
  from { opacity: 0; translate: 0 10px; scale: .7; }
  20% { opacity: 1; scale: 1.2; }
  to { opacity: 0; translate: 0 -54px; scale: 1; }
}
.spark {
  position: absolute; left: var(--x); top: var(--y);
  color: var(--c); font-size: var(--s); line-height: 1;
  pointer-events: none; animation: burst .9s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes burst { to { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--r); scale: .4; } }
.levelup {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(118, 89, 223, .55), rgba(7, 8, 18, .85) 70%);
  color: #fff; font: 700 clamp(2.5rem, 2rem + 3vw, 4rem)/1 var(--font-display); letter-spacing: .02em;
  text-shadow: 0 0 30px var(--violet);
  pointer-events: none; animation: levelup 1.8s ease forwards;
}
@keyframes levelup {
  0% { opacity: 0; scale: .6; }
  15% { opacity: 1; scale: 1.08; }
  25%, 75% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.1; }
}

/* hover and tap feedback */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  translate: -120% 0; pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::after { translate: 120% 0; transition: translate .7s ease; }
  .class-icon { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, background-color .3s; }
  .class:hover .class-icon { transform: scale(1.08); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 55%, transparent); }
}
/* class icons: play on hover, or once on scroll-in where there's no hover (main.js adds .is-played) */
.class-icon .glyph { display: inline-block; }
.class-icon::before, .class-icon::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
/* shared impact ring; each class adds its own move on the glyph and ::after */
.class-icon::before { inset: -1px; border: 1px solid var(--accent); border-radius: 50%; }
.class:is(:hover, .is-played) .class-icon::before { animation: ring .7s ease-out; }

/* Warrior: swing the swords, slash across, then the ring hits */
.class--warrior:is(:hover, .is-played) .glyph { animation: swing .55s cubic-bezier(.3, 1.6, .5, 1); }
.class--warrior .class-icon::after { left: 50%; top: 50%; width: 92px; height: 2px; translate: -50% -50%; rotate: -45deg; background: linear-gradient(90deg, transparent, var(--accent), #fff, var(--accent), transparent); }
.class--warrior:is(:hover, .is-played) .class-icon::after { animation: slash .45s .15s ease-out; }
.class--warrior:is(:hover, .is-played) .class-icon::before { animation-delay: .25s; }

/* Ranger: draw back, loose the arrow up-right along its trail, nock a new one */
.class--ranger:is(:hover, .is-played) .glyph { animation: loose .9s ease-in-out; }
.class--ranger .class-icon::after { left: 50%; top: 50%; width: 110px; height: 2px; transform-origin: 0 50%; rotate: -45deg; background: linear-gradient(90deg, transparent, var(--accent)); }
.class--ranger:is(:hover, .is-played) .class-icon::after { animation: trail .55s .25s ease-out; }
.class--ranger:is(:hover, .is-played) .class-icon::before { animation-delay: .25s; }

/* Mage: the star spins and glows while a rune arc circles the icon */
.class--mage:is(:hover, .is-played) .glyph { animation: twinkle .9s ease-in-out; }
.class--mage .class-icon::after { inset: -7px; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 50%; }
.class--mage:is(:hover, .is-played) .class-icon::after { animation: orbit .9s ease-out; }

/* All-Rounder: the burst turns and throws rays every way */
.class--allrounder:is(:hover, .is-played) .glyph { animation: turn .7s cubic-bezier(.3, 1.6, .5, 1); }
.class--allrounder .class-icon::after {
  inset: -16px; border-radius: 50%;
  background: repeating-conic-gradient(var(--accent) 0 5deg, transparent 5deg 30deg);
  mask: radial-gradient(closest-side, transparent 62%, #000 64%, transparent 100%);
}
.class--allrounder:is(:hover, .is-played) .class-icon::after { animation: rays .7s ease-out; }
@keyframes ring { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.6; } }
@keyframes swing { 35% { rotate: -40deg; scale: 1.1; } 60% { rotate: 25deg; scale: 1.25; } }
@keyframes slash { 0% { opacity: 1; scale: 0 1; } 60% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 1; } }
@keyframes loose {
  25% { translate: -5px 5px; }
  40% { translate: 46px -46px; opacity: 0; }
  60% { translate: -10px 10px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes trail { 0% { opacity: 1; scale: 0 1; } 50% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 1; translate: 20px -20px; } }
@keyframes twinkle { 50% { rotate: 180deg; scale: 1.35; text-shadow: 0 0 18px var(--accent); } 100% { rotate: 360deg; } }
@keyframes orbit { 0% { opacity: 1; rotate: 0deg; } 80% { opacity: 1; } 100% { opacity: 0; rotate: 540deg; } }
@keyframes turn { 50% { rotate: 60deg; scale: 1.3; } 100% { rotate: 90deg; } }
@keyframes rays { from { opacity: 1; scale: .6; rotate: 0deg; } to { opacity: 0; scale: 1.3; rotate: 25deg; } }

/* FAQ answers are animated by JS; this keeps the text clipped while they open */
.faq details p { overflow: hidden; }

/* anchor targets clear the sticky header and their heading glows on arrival */
section[id] { scroll-margin-top: 72px; }
h2.is-arrived { animation: arrive 1.3s ease-out; }
@keyframes arrive { 30% { color: var(--violet-pale); text-shadow: 0 0 30px rgba(184, 160, 255, .8); } }


.jd-mood { margin-top: .75rem; color: var(--muted); font-size: .85rem; }
.jd-mood strong { color: var(--violet-pale); }
.jd-mood button { min-width: 2.2rem; margin-left: .25rem; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.jd-mood button[aria-pressed="true"] { border-color: var(--violet); color: var(--text); }

/* JD's four attitudes */
.jd { padding-block: var(--space-l); }
.jd-lede { max-width: 52ch; margin-top: var(--space-s); color: var(--muted); font-size: var(--step-1); }
.jd-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-s); margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.jd-tier { --tint: 115, 92, 255; padding: 0 1rem 1.25rem; border: 1px solid var(--line); border-radius: 8px 22px 8px 22px; background: radial-gradient(ellipse at 50% 28%, rgba(var(--tint), .3), transparent 62%), var(--panel); overflow: hidden; }
.jd-tier--aloof { --tint: 108, 156, 255; }
.jd-tier--grudging { --tint: 184, 160, 255; }
.jd-tier--warm { --tint: 244, 199, 107; }
.jd-tier--proud { --tint: 255, 111, 158; }
.jd-tier img { width: 100%; height: auto; margin-bottom: .5rem; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.jd-levels { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jd-tier h3 { margin-top: .25rem; }
.jd-quote { margin-top: .6rem; color: var(--violet-pale); font-weight: 600; }
.jd-try { margin-top: var(--space-s); }
@media (max-width: 900px) { .jd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- One JD for the whole page (assets/jdstage.js) ---------- */
#jd-layer { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
#jd-stage { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; will-change: transform; }
.guide img { width: 100%; height: 100%; object-fit: contain; transition: opacity .4s; }
.hero-jd { transition: opacity .4s; }
.stage-on .guide img, .stage-on .hero-jd { opacity: 0; }

/* ---------- Inside the app: the phone stays put while the steps scroll past ---------- */
.tour { padding-block: var(--space-l); }
.tour-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-l); align-items: start; margin-top: var(--space-m); }
.tour-steps { margin: 0; padding: 0; list-style: none; }
.tour-step { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; opacity: .3; transition: opacity .5s ease; }
.tour-step.is-active { opacity: 1; }
.tour-num { color: var(--violet); font: 700 var(--step-3)/1 var(--font-display); }
.tour-step h3 { margin-top: .5rem; font-size: var(--step-3); }
.tour-step p { max-width: 36ch; margin-top: .9rem; color: var(--muted); font-size: var(--step-1); }
.tour-inline { display: none; }
.tour-phone { position: sticky; top: max(84px, calc(50vh - 340px)); }
.tour-phone img { opacity: 0; transition: opacity .6s ease; }
.tour-phone img.is-active { opacity: 1; }
.tour-phone img + img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
@media (max-width: 900px) {
  .tour-grid { grid-template-columns: 1fr; gap: 0; }
  .tour-phone { display: none; }
  .tour-step { min-height: 0; padding-block: var(--space-m); opacity: 1; }
  .tour-inline { display: block; width: min(78%, 300px); margin: var(--space-s) auto 0; }
}

/* ---------- Depth: aurora behind the page, glowing tilting cards, headlines that rise word by word ---------- */
.motion body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(118, 89, 223, .2), transparent),
    radial-gradient(34% 28% at 82% 58%, rgba(108, 156, 255, .13), transparent),
    radial-gradient(30% 24% at 48% 92%, rgba(255, 111, 158, .09), transparent);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.12); } }

.glow-card { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.glow-card.is-hot { transition-duration: .1s; }
.glow-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 160, 255, .17), transparent 62%);
}
.glow-card.is-hot::after { opacity: 1; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.motion .words .w > span { display: inline-block; translate: 0 115%; transition: translate .85s cubic-bezier(.2, .8, .2, 1) calc(var(--wi) * 55ms); }
.motion .words.is-visible .w > span { translate: 0 0; }

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Headlines: one pattern everywhere (pill, gradient headline, one line), centred ---------- */
main section:not(.legal) h2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
main h2.words { background: none; color: var(--text); }
.words .w > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jd h2, .how h2, .classes h2, .stakes h2, .tour h2, .soon h2, .faq h2 { text-align: center; }
.jd-lede, .stakes-lede, .soon-lede, .stakes-safe { margin-inline: auto; text-align: center; }
.faq h2 { margin-bottom: var(--space-m); }
.jd-try { text-align: center; }

/* ---------- Floating pill navigation ---------- */
.site-header { background: rgba(7, 8, 18, .45); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav-links { justify-self: center; gap: .15rem; margin: 0; padding: .3rem; border: 1px solid rgba(184, 160, 255, .2); border-radius: 99px; background: rgba(16, 19, 35, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-links a { display: block; padding: .45rem 1rem; border-radius: 99px; transition: background-color .2s, color .2s; }
.nav-links a:hover { background: rgba(184, 160, 255, .14); }
.play-slot--small { justify-self: end; }
@media (max-width: 640px) { .nav { grid-template-columns: 1fr auto; } }

/* ---------- A scene of light behind each section ---------- */
.demo, .jd, .how, .classes, .stakes, .tour, .watch, .soon, .cta { position: relative; isolation: isolate; }
.demo::before, .jd::before, .how::before, .classes::before, .stakes::before, .tour::before, .watch::before, .soon::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc(50% - 50vw);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
/* demo: a column of light behind the quest card */
.demo::before { background: linear-gradient(90deg, transparent 58%, rgba(150, 110, 255, .08) 66%, rgba(196, 168, 255, .2) 76%, rgba(150, 110, 255, .08) 86%, transparent 94%), radial-gradient(30% 40% at 76% 100%, rgba(196, 168, 255, .35), transparent); }
/* JD's section: a spotlight cone from above */
.jd::before { background: conic-gradient(from 150deg at 50% -4%, transparent 0deg, rgba(196, 168, 255, .3) 30deg, transparent 60deg); filter: blur(24px); }
/* how it works: a horizon of blue light rising from the floor */
.how::before { background: radial-gradient(70% 46% at 50% 100%, rgba(108, 156, 255, .3), transparent 72%); }
/* classes: one soft light per class colour */
.classes::before { background:
  radial-gradient(26% 40% at 10% 10%, rgba(244, 199, 107, .16), transparent),
  radial-gradient(26% 40% at 90% 10%, rgba(98, 230, 215, .14), transparent),
  radial-gradient(26% 40% at 10% 90%, rgba(184, 160, 255, .16), transparent),
  radial-gradient(26% 40% at 90% 90%, rgba(255, 111, 158, .15), transparent); }
/* stakes: an ember glow over a perspective grid floor */
.stakes::before { background:
  radial-gradient(60% 40% at 50% 100%, rgba(255, 111, 158, .28), transparent 75%),
  repeating-linear-gradient(90deg, rgba(184, 160, 255, .12) 0 1px, transparent 1px 72px),
  repeating-linear-gradient(0deg, rgba(184, 160, 255, .12) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(to top, #000, transparent 62%); -webkit-mask-image: linear-gradient(to top, #000, transparent 62%); transform: perspective(700px) rotateX(58deg); transform-origin: 50% 100%; }
/* the app tour: a violet glow where the phone sits */
.tour::before { background: radial-gradient(34% 46% at 80% 38%, rgba(118, 89, 223, .34), transparent 72%); }
.soon::before { background: radial-gradient(60% 40% at 50% 0%, rgba(108, 156, 255, .2), transparent 75%); }

/* closing call to action: the hero's arch again */
.cta { flex-direction: column; justify-content: flex-end; align-items: center; min-height: 520px; text-align: center; border-top: 0; padding-bottom: 0; }
.cta-jd { width: 200px; height: 300px; margin-top: var(--space-s); pointer-events: none; }
.cta-jd img { width: 100%; height: 100%; object-fit: contain; transition: opacity .4s; }
.stage-on .cta-jd img { opacity: 0; }
@media (min-width: 900px) { .site-footer .footer-row { padding-right: 150px; } }
.cta h2 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.5rem); line-height: .95; }

/* ---------- Phones: JD and the app stack instead of sitting side by side ---------- */
@media (max-width: 700px) {
  .hero-scene { height: 380px; }
  .hero-jd { width: 227px; height: 340px; margin-left: -114px; }
  .hero-phone { display: none; }
}

/* ---------- Video: the app in motion ---------- */
.watch { padding-block: var(--space-l); }
.watch h2 { text-align: center; }
.watch::before { background: radial-gradient(40% 55% at 50% 50%, rgba(118, 89, 223, .3), transparent 72%); }
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr); gap: var(--space-m); align-items: center; margin-top: var(--space-m); }
.watch-steps { grid-column: 1; margin: 0; padding: 0; list-style: none; justify-self: end; max-width: 30ch; }
.watch-steps li { padding: .9rem 0 .9rem 1rem; border-left: 2px solid var(--line); opacity: .4; transition: opacity .4s, border-color .4s; }
.watch-steps li.is-active { opacity: 1; border-color: var(--violet); }
.watch-steps strong { display: block; font: 700 var(--step-1)/1.2 var(--font-display); }
.watch-steps span { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; }
.watch-phone { grid-column: 2; width: 100%; }
.watch-phone video { display: block; width: 100%; aspect-ratio: 780 / 1665; border-radius: 34px; background: #0c0e1d; object-fit: cover; }
.watch-toggle { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; border: 1px solid rgba(184, 160, 255, .4); border-radius: 50%; background: rgba(16, 19, 35, .8); backdrop-filter: blur(8px); color: var(--text); font-size: 1rem; cursor: pointer; }
@media (max-width: 900px) {
  .watch-grid { grid-template-columns: 1fr; }
  .watch-phone { grid-column: 1; width: min(78%, 300px); justify-self: center; order: -1; }
  .watch-steps { grid-column: 1; justify-self: center; }
}