:root {
  --ink: #070b16;
  --ink-2: #0b1222;
  --panel: rgba(12, 20, 37, .82);
  --panel-solid: #0e1729;
  --gold: #e4b95e;
  --gold-light: #ffe5a0;
  --gold-dark: #7c5623;
  --violet: #a35cff;
  --violet-bright: #c68cff;
  --blue: #4aa5ff;
  --text: #f6f2e9;
  --muted: #9ba9c0;
  --line: rgba(228, 185, 94, .23);
  --shadow: 0 24px 80px rgba(0, 0, 0, .48);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--gold-dark) var(--ink); }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -4; background: radial-gradient(circle at 50% -10%, rgba(69, 77, 151, .18), transparent 42%), linear-gradient(#070b16, #090d19); }
body.menu-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { color: inherit; font: inherit; }
::selection { background: rgba(163, 92, 255, .5); color: white; }

.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 120px 0; }
.scroll-progress { position: fixed; z-index: 200; top: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--violet)); box-shadow: 0 0 14px var(--violet); }
.ambient { position: fixed; z-index: -3; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(120px); opacity: .08; pointer-events: none; }
.ambient-one { top: 15%; left: -25%; background: #4a6cff; }
.ambient-two { top: 60%; right: -28%; background: #8e3cff; }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 82px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: .35s ease; }
.site-header.scrolled { height: 68px; background: rgba(5, 9, 18, .88); border-color: var(--line); backdrop-filter: blur(18px); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-rune { position: relative; display: grid; place-items: center; width: 42px; aspect-ratio: 1; color: var(--gold-light); font: 700 24px var(--serif); border: 1px solid var(--gold-dark); transform: rotate(45deg); background: linear-gradient(135deg, #192744, #090e1a); box-shadow: inset 0 0 16px rgba(163,92,255,.26), 0 0 22px rgba(0,0,0,.4); }
.brand-rune::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(198,140,255,.36); }
.brand-rune { font-size: 0; }
.brand-rune::after { content: "W"; font: 700 22px var(--serif); transform: rotate(-45deg); }
.brand strong { display: block; font: 700 22px/1 var(--serif); letter-spacing: .05em; background: linear-gradient(#fff3c7, #b87b2e); background-clip: text; color: transparent; }
.brand small { display: block; margin-top: 5px; color: #c4a76b; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.main-nav a { position: relative; color: #c4ccda; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: color .25s; }
.main-nav a:not(.nav-download)::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 0; height: 1px; background: var(--gold); transition: .25s; transform: translateX(-50%); }
.main-nav a:hover, .main-nav a.active { color: var(--gold-light); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.nav-download { padding: 12px 18px; border: 1px solid var(--gold-dark); color: var(--gold-light) !important; background: rgba(228,185,94,.06); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: rgba(10,16,29,.8); cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 1px; margin: 5px auto; background: var(--gold); transition: .25s; }

.hero { position: relative; min-height: 920px; height: 100svh; overflow: hidden; background: #070b16; isolation: isolate; }
#starfield { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .8; }
.hero-backdrop { position: absolute; z-index: -3; inset: 0; background: url("assets/hero-castle.png") center 18% / cover no-repeat; transform: scale(1.04); animation: hero-breathe 18s ease-in-out infinite alternate; }
.hero-vignette { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5,8,16,.94) 0%, rgba(5,8,16,.68) 38%, rgba(5,8,16,.06) 68%, rgba(5,8,16,.55) 100%), linear-gradient(0deg, #070b16 0%, transparent 38%), radial-gradient(circle at 72% 45%, transparent 0 24%, rgba(6,9,17,.24) 48%, rgba(6,9,17,.76) 100%); }
.hero-inner { height: 100%; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; padding-top: 82px; }
.hero-copy { position: relative; z-index: 4; padding-top: 40px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero h1 { margin: 0; font: 400 clamp(74px, 9vw, 138px)/.74 var(--serif); letter-spacing: -.07em; text-shadow: 0 12px 45px rgba(0,0,0,.65); }
.hero h1 span { color: var(--gold-light); background: linear-gradient(180deg, #fff4c7 8%, #dca94d 44%, #79501f 74%, #ffd87a 96%); background-clip: text; -webkit-text-stroke: 1px rgba(255,230,160,.18); color: transparent; }
.hero-subtitle { margin: 23px 0 0 8px; color: #d9bb78; font: 400 14px var(--serif); letter-spacing: .55em; text-transform: uppercase; }
.hero-lead { max-width: 570px; margin: 34px 0 0; color: #ccd4e2; font: 400 19px/1.8 var(--serif); }
.hero-actions, .download-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn { position: relative; min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--line); background: rgba(9,15,27,.65); color: #f4e7c4; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; overflow: hidden; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition: transform .25s, border-color .25s, box-shadow .25s; }
.btn::before { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18), transparent 80%); transition: transform .65s; }
.btn:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.btn:hover::before { transform: translateX(110%); }
.btn-primary { color: #100b05; border-color: #f0c96f; background: linear-gradient(135deg, #8d5c21, #f0c86d 47%, #9a6728); box-shadow: inset 0 0 0 1px rgba(255,250,214,.3), 0 10px 30px rgba(168,105,31,.2); }
.btn-ghost:hover { color: var(--gold-light); background: rgba(32,43,68,.68); }
.play-icon { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--gold-dark); border-radius: 50%; font-size: 8px; }
.realm-card { width: fit-content; max-width: 100%; margin-top: 38px; padding: 13px 16px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(152,176,219,.16); background: rgba(6,11,21,.56); backdrop-filter: blur(12px); }
.realm-card i { width: 1px; height: 27px; background: rgba(255,255,255,.12); }
.realm-card div { display: grid; gap: 3px; }
.realm-card small { color: #7f8ca3; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.realm-card strong { color: #e8edf7; font-size: 11px; letter-spacing: .07em; }
.realm-card div:first-of-type strong { color: #84eca5; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #59df88; box-shadow: 0 0 0 5px rgba(89,223,136,.1), 0 0 16px #59df88; animation: pulse 1.8s infinite; }
.copy-ip { padding: 8px 9px; border: 1px solid rgba(228,185,94,.22); background: transparent; color: var(--gold); font-size: 9px; cursor: pointer; text-transform: uppercase; }
.hero-character { position: relative; align-self: end; height: 93%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hero-character img { position: relative; z-index: 2; width: min(620px, 47vw); height: 100%; object-fit: cover; object-position: 50% 22%; filter: drop-shadow(0 30px 36px rgba(0,0,0,.75)); mask-image: linear-gradient(to bottom, #000 0 76%, transparent 98%); }
.character-glow { position: absolute; z-index: 1; top: 18%; left: 20%; width: 65%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(165,88,255,.36), transparent 66%); filter: blur(35px); animation: glow 4s ease-in-out infinite alternate; }
.hero-seal { position: absolute; z-index: 3; right: 1%; bottom: 12%; width: 88px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 1px solid rgba(228,185,94,.5); transform: rotate(45deg); background: rgba(8,13,25,.78); box-shadow: inset 0 0 24px rgba(158,84,255,.25); }
.hero-seal span, .hero-seal strong { transform: rotate(-45deg); }
.hero-seal span { color: #aab6ca; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.hero-seal strong { color: var(--gold-light); font: 32px var(--serif); }
.portal { position: absolute; z-index: -1; right: 8%; top: 21%; width: min(43vw, 660px); aspect-ratio: 1; border-radius: 50%; opacity: .45; filter: drop-shadow(0 0 25px rgba(157,87,255,.5)); }
.portal i { position: absolute; inset: 10%; border: 1px solid rgba(188,124,255,.55); border-radius: 50%; animation: portal-spin 18s linear infinite; }
.portal i:nth-child(2) { inset: 17%; border-style: dashed; animation-duration: 12s; animation-direction: reverse; }
.portal i:nth-child(3) { inset: 24%; box-shadow: inset 0 0 42px rgba(149,76,255,.2), 0 0 28px rgba(149,76,255,.2); animation-duration: 7s; }
.scroll-cue { position: absolute; z-index: 4; bottom: 24px; left: 50%; display: grid; justify-items: center; gap: 9px; color: #8f9bb0; font-size: 8px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue span { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: scroll-line 1.8s ease-in-out infinite; }

.section-heading { margin-bottom: 56px; display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.section-heading h2, .world-copy h2, .download h2, .faq h2, .community h2 { margin: 0; font: 400 clamp(42px, 5vw, 72px)/1.08 var(--serif); letter-spacing: -.04em; }
h2 em { color: var(--gold); font-weight: 400; }
.section-heading > p { max-width: 470px; margin: 0; color: var(--muted); line-height: 1.8; }
.section-heading.centered { display: block; text-align: center; }
.section-heading.centered > p { margin: 20px auto 0; }

.world { background: linear-gradient(180deg, #070b16, #090f1d 50%, #070b16); }
.world-grid { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(60px, 8vw, 110px); }
.world-visual { position: relative; }
.world-frame { position: relative; padding: 9px; border: 1px solid var(--gold-dark); box-shadow: var(--shadow); clip-path: polygon(25px 0,100% 0,100% calc(100% - 25px),calc(100% - 25px) 100%,0 100%,0 25px); }
.world-frame::before, .world-frame::after { content: ""; position: absolute; pointer-events: none; }
.world-frame::before { inset: 17px; border: 1px solid rgba(228,185,94,.22); z-index: 2; }
.world-frame::after { inset: 0; background: linear-gradient(140deg, transparent 40%, rgba(127,59,223,.18)); }
.world-frame img { width: 100%; aspect-ratio: .83; object-fit: cover; object-position: 58% center; filter: saturate(.78) contrast(1.08); }
.world-badge { position: absolute; z-index: 3; left: 34px; right: 34px; bottom: 30px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; background: rgba(7,12,23,.85); border: 1px solid rgba(228,185,94,.25); backdrop-filter: blur(10px); }
.world-badge small { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; }
.world-badge strong { color: var(--gold-light); font: 16px var(--serif); letter-spacing: .08em; }
.floating-stat { position: absolute; z-index: 5; min-width: 160px; padding: 15px 18px; display: flex; gap: 12px; align-items: center; background: rgba(10,17,31,.92); border: 1px solid var(--line); box-shadow: 0 16px 35px rgba(0,0,0,.38); }
.floating-stat strong { color: var(--gold-light); font: 31px var(--serif); }
.floating-stat span { max-width: 76px; color: #a9b3c4; font-size: 9px; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; }
.stat-one { top: 12%; left: -34px; }
.stat-two { right: -38px; bottom: 14%; }
.world-copy > p:not(.section-kicker) { color: var(--muted); font-size: 16px; line-height: 1.9; }
.world-copy blockquote { margin: 30px 0; padding: 20px 24px; border-left: 1px solid var(--gold); color: #e6d3a4; background: linear-gradient(90deg, rgba(228,185,94,.06), transparent); font: italic 18px/1.7 var(--serif); }
.world-points { display: grid; gap: 20px; }
.world-points article { display: grid; grid-template-columns: 48px 1fr; gap: 15px; }
.world-points article > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); color: var(--gold); font: 13px var(--serif); transform: rotate(45deg); }
.world-points article > span::first-line { transform: rotate(-45deg); }
.world-points strong { color: #e8edf7; font: 17px var(--serif); }
.world-points p { margin: 7px 0 0; color: #8996aa; font-size: 13px; line-height: 1.65; }

.realm-vision { position: relative; min-height: 650px; height: 76vh; max-height: 820px; display: flex; align-items: end; overflow: hidden; isolation: isolate; border-block: 1px solid rgba(228,185,94,.18); background: #070b16; }
.realm-vision > img { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; filter: saturate(.9) contrast(1.08) brightness(.78); transform: scale(1.035); animation: vision-drift 16s ease-in-out infinite alternate; }
.vision-still { display: none; }
.vision-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(4,8,16,.92), rgba(4,8,16,.46) 48%, rgba(4,8,16,.18) 72%, rgba(4,8,16,.72)), linear-gradient(0deg, #070b16 0%, transparent 46%, rgba(6,10,19,.36) 100%); }
.vision-shade::after { content: ""; position: absolute; inset: -40% -10%; background: linear-gradient(108deg, transparent 41%, rgba(213,175,255,.13) 49%, rgba(255,226,152,.08) 52%, transparent 59%); transform: translateX(-55%); animation: vision-sweep 7s ease-in-out infinite; mix-blend-mode: screen; }
.vision-content { position: relative; z-index: 4; padding-bottom: 86px; }
.vision-content h2 { max-width: 780px; margin: 0; font: 400 clamp(58px,7vw,104px)/.94 var(--serif); letter-spacing: -.055em; text-shadow: 0 12px 45px #000; }
.vision-content h2 em { color: var(--gold-light); }
.vision-content > p:not(.section-kicker) { max-width: 610px; margin: 26px 0 0; color: #c7d0de; font: 17px/1.8 var(--serif); text-shadow: 0 2px 12px #000; }
.vision-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 30px; }
.vision-live { display: inline-flex; align-items: center; gap: 10px; color: #c8d0de; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vision-live i { width: 7px; height: 7px; border-radius: 50%; background: #bb7bff; box-shadow: 0 0 0 6px rgba(187,123,255,.1), 0 0 18px #bb7bff; animation: pulse 1.8s infinite; }
.vision-portal { position: absolute; z-index: -1; right: 9%; top: 50%; width: min(43vw, 620px); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); filter: drop-shadow(0 0 34px rgba(159,83,255,.7)); opacity: .66; }
.vision-portal::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(235,213,255,.3), rgba(147,75,244,.16) 35%, transparent 68%); box-shadow: 0 0 80px rgba(166,92,255,.35); animation: glow 3.4s ease-in-out infinite alternate; }
.vision-portal i { position: absolute; inset: 9%; border: 1px solid rgba(214,174,255,.46); border-radius: 50%; animation: portal-spin 15s linear infinite; }
.vision-portal i:nth-child(2) { inset: 17%; border-style: dashed; border-color: rgba(228,185,94,.46); animation-duration: 10s; animation-direction: reverse; }
.vision-portal i:nth-child(3) { inset: 26%; border-width: 2px; box-shadow: inset 0 0 40px rgba(164,88,255,.28), 0 0 34px rgba(164,88,255,.22); animation-duration: 7s; }
.vision-rune { position: absolute; z-index: 2; color: var(--gold-light); font: 28px var(--serif); text-shadow: 0 0 18px var(--violet); opacity: .55; animation: rune-float 5s ease-in-out infinite; }
.rune-one { right: 8%; top: 20%; }.rune-two { right: 38%; top: 14%; animation-delay: -1.8s; }.rune-three { right: 28%; bottom: 17%; animation-delay: -3s; }
.vision-coordinates { position: absolute; z-index: 4; right: 4vw; bottom: 31px; display: flex; gap: 22px; color: rgba(236,220,181,.6); font-size: 8px; letter-spacing: .25em; }

.classes { overflow: hidden; }
.classes::before { content: ""; position: absolute; inset: 5% 0 auto; height: 80%; background: radial-gradient(circle at 70% 45%, rgba(113,65,185,.12), transparent 38%); pointer-events: none; }
.class-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; }
.class-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.class-card { min-height: 104px; padding: 14px 12px; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid rgba(140,157,189,.13); background: linear-gradient(135deg, rgba(18,28,48,.78), rgba(9,14,26,.78)); cursor: pointer; transition: .25s ease; }
.class-card > span { flex: 0 0 41px; display: grid; place-items: center; width: 41px; aspect-ratio: 1; border: 1px solid rgba(228,185,94,.28); color: var(--gold); background: #0c1324; font: 22px var(--serif); transform: rotate(45deg); }
.class-card > span::first-line { transform: rotate(-45deg); }
.class-card strong { display: block; font: 15px var(--serif); }
.class-card small { display: block; margin-top: 6px; color: #75839a; font-size: 9px; line-height: 1.35; text-transform: uppercase; }
.class-card:hover, .class-card.active { border-color: rgba(228,185,94,.65); transform: translateY(-2px); background: linear-gradient(135deg, rgba(45,47,77,.9), rgba(13,20,35,.92)); box-shadow: inset 0 0 26px rgba(142,70,231,.12), 0 12px 30px rgba(0,0,0,.2); }
.class-card.active strong { color: var(--gold-light); }
.class-showcase { position: relative; min-height: 444px; padding: 60px 48px; display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 45px; border: 1px solid var(--gold-dark); overflow: hidden; background: radial-gradient(circle at 20% 50%, rgba(135,69,223,.22), transparent 29%), linear-gradient(135deg, #111b30, #090e1a 72%); box-shadow: var(--shadow); clip-path: polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); }
.class-showcase::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(228,185,94,.1); pointer-events: none; }
.class-showcase::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx,20%) var(--my,50%), rgba(196,130,255,.15), transparent 66%); }
.class-symbol { position: relative; z-index: 2; display: grid; place-items: center; width: 140px; aspect-ratio: 1; margin: auto; color: var(--gold-light); font: 74px var(--serif); text-shadow: 0 0 28px rgba(230,185,94,.5); }
.class-symbol::before, .class-symbol::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-dark); transform: rotate(45deg); background: rgba(7,12,23,.54); }
.class-symbol::after { inset: 24px; border-color: rgba(178,99,255,.5); transform: rotate(45deg); box-shadow: inset 0 0 28px rgba(136,61,232,.22); }
.class-symbol { isolation: isolate; }
.class-symbol::before, .class-symbol::after { z-index: -1; }
.class-orbit { position: absolute; left: 34px; top: 50%; width: 210px; aspect-ratio: 1; transform: translateY(-50%); border: 1px solid rgba(228,185,94,.12); border-radius: 50%; animation: portal-spin 22s linear infinite; }
.class-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 14px var(--violet); }
.class-orbit i:first-child { top: -4px; left: 50%; }.class-orbit i:nth-child(2) { bottom: 18%; left: 4%; }.class-orbit i:nth-child(3) { right: 4%; top: 32%; }
.class-content { position: relative; z-index: 2; }
.class-content > p:first-child { margin: 0; color: var(--gold); font-size: 10px; letter-spacing: .18em; }
.class-content h3 { margin: 10px 0 16px; font: 48px var(--serif); }
.class-content > p:not(:first-child) { min-height: 78px; margin: 0; color: #aab5c7; line-height: 1.75; }
.class-bars { margin-top: 24px; display: grid; gap: 10px; }
.class-bars label { display: grid; grid-template-columns: 68px 1fr; align-items: center; color: #8390a5; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.class-bars label > span { height: 3px; background: rgba(255,255,255,.07); }
.class-bars i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--violet)); box-shadow: 0 0 8px rgba(178,91,255,.4); transition: width .45s ease; }
.class-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.class-tags span { padding: 7px 10px; border: 1px solid rgba(228,185,94,.18); color: #c5ad79; font-size: 9px; text-transform: uppercase; }

.experience { background: linear-gradient(180deg, transparent, #0a101e 30%, #0a101e 70%, transparent); }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 265px; gap: 14px; }
.feature-card { position: relative; padding: 30px; border: 1px solid rgba(143,162,196,.14); background: linear-gradient(145deg, rgba(18,29,49,.9), rgba(8,13,24,.95)); overflow: hidden; transition: .3s; }
.feature-card::before, .news-card::before, .media-shot::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,225,151,.16), rgba(168,91,255,.08) 34%, transparent 68%); transition: opacity .3s; }
.feature-card:hover::before, .news-card:hover::before, .media-shot:hover::before { opacity: 1; }
.feature-card::after { content: ""; position: absolute; inset: auto -20% -50% 10%; height: 70%; background: radial-gradient(circle, rgba(142,72,232,.18), transparent 67%); }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(228,185,94,.42); box-shadow: 0 22px 55px rgba(0,0,0,.28); }
.feature-large { grid-column: span 2; grid-row: span 2; padding: 45px; }
.feature-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 150px; align-items: center; }
.feature-number { position: absolute; right: 22px; top: 18px; color: rgba(228,185,94,.22); font: 32px var(--serif); }
.feature-icon { display: grid; place-items: center; width: 50px; aspect-ratio: 1; margin-bottom: 28px; border: 1px solid var(--gold-dark); color: var(--gold-light); font: 24px var(--serif); transform: rotate(45deg); background: rgba(5,9,18,.4); }
.feature-card h3 { position: relative; z-index: 2; margin: 0 0 12px; font: 25px var(--serif); }
.feature-card p { position: relative; z-index: 2; margin: 0; color: #8f9cb0; font-size: 13px; line-height: 1.75; }
.dungeon-art { position: absolute; inset: 34% -3% -2% 26%; opacity: .7; background: linear-gradient(0deg, #0a101e, transparent 60%), url("assets/hero-castle.png") 52% 35%/cover; clip-path: polygon(26% 0,100% 0,100% 100%,0 100%); filter: saturate(.7); }
.guild-sigil { position: relative; z-index: 2; display: grid; place-items: center; width: 110px; aspect-ratio: 1; margin: auto; border: 1px solid var(--gold-dark); transform: rotate(45deg); box-shadow: inset 0 0 30px rgba(153,78,244,.2); }
.guild-sigil span { color: var(--gold-light); font: 50px var(--serif); transform: rotate(-45deg); }

.media { overflow: hidden; }
.media-grid { display: grid; grid-template-columns: 1.45fr .75fr; grid-template-rows: repeat(2, 260px); gap: 14px; }
.media-shot { position: relative; padding: 0; border: 1px solid rgba(228,185,94,.2); background: #0b1220; overflow: hidden; cursor: zoom-in; }
.media-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,8,15,.9), transparent 48%); }
.media-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s, filter .65s; filter: saturate(.82) contrast(1.03); }
.media-shot:hover img { transform: scale(1.04); filter: saturate(1.05) contrast(1.05); }
.media-main { grid-row: span 2; }
.media-shot span { position: absolute; z-index: 2; left: 24px; bottom: 21px; color: #e7edf8; font: 16px var(--serif); text-align: left; }
.media-shot span b { display: block; margin-bottom: 6px; color: var(--gold); font: 800 9px var(--sans); letter-spacing: .18em; }

.text-link { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.text-link span { margin-left: 8px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.news-card { position: relative; min-height: 360px; padding: 32px; border: 1px solid rgba(143,162,196,.13); background: linear-gradient(160deg, rgba(16,25,43,.8), rgba(7,12,22,.92)); transition: .3s; }
.news-card:hover { border-color: var(--gold-dark); transform: translateY(-5px); }
.news-card > * { position: relative; z-index: 2; }
.news-date { display: flex; align-items: center; gap: 10px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.07); }
.news-date strong { color: var(--gold-light); font: 42px/1 var(--serif); }
.news-date span { color: #748198; font-size: 9px; line-height: 1.4; letter-spacing: .12em; }
.news-tag { display: inline-block; margin-top: 26px; color: var(--violet-bright); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.news-card h3 { margin: 15px 0; font: 25px/1.3 var(--serif); }
.news-card p { color: #8996aa; font-size: 13px; line-height: 1.7; }
.news-card > a { position: absolute; z-index: 2; left: 32px; bottom: 28px; color: #d5bb80; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.download { min-height: 680px; display: grid; align-items: center; overflow: hidden; }
.download-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,10,19,.98), rgba(6,10,19,.75) 45%, rgba(6,10,19,.55)), linear-gradient(0deg, #070b16, transparent 35%, #070b16), url("assets/hero-castle.png") center 28%/cover; opacity: .9; }
.download-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 45%, rgba(149,70,246,.2), transparent 34%); }
.download-grid { position: relative; display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 100px; }
.download-copy > p:not(.section-kicker) { max-width: 600px; color: #aab5c7; font-size: 17px; line-height: 1.8; }
.version-note { display: block; margin-top: 18px; color: #76849a; letter-spacing: .08em; }
.install-panel { padding: 34px; border: 1px solid var(--gold-dark); background: rgba(8,14,26,.82); box-shadow: var(--shadow); backdrop-filter: blur(15px); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.install-panel h3 { margin: 0 0 28px; color: var(--gold-light); font: 25px var(--serif); }
.install-panel ol { margin: 0; padding: 0; display: grid; gap: 17px; list-style: none; }
.install-panel li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; }
.install-panel li > span { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border: 1px solid var(--gold-dark); color: var(--gold); font: 14px var(--serif); transform: rotate(45deg); }
.install-panel strong, .install-panel small { display: block; }
.install-panel strong { font: 15px var(--serif); }
.install-panel small { margin-top: 4px; color: #7f8da3; }
.requirements { margin-top: 28px; padding-top: 20px; display: flex; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.requirements span { padding: 6px 8px; color: #8592a8; border: 1px solid rgba(255,255,255,.08); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

.community { padding-top: 50px; }
.community-card { min-height: 260px; padding: 46px 55px; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 42px; border: 1px solid var(--gold-dark); background: radial-gradient(circle at 12% 50%, rgba(144,75,232,.2), transparent 28%), linear-gradient(135deg, #121d33, #090f1c); box-shadow: var(--shadow); }
.community-rune { display: grid; place-items: center; width: 110px; aspect-ratio: 1; border: 1px solid var(--gold-dark); color: var(--gold-light); font: 52px var(--serif); transform: rotate(45deg); box-shadow: inset 0 0 35px rgba(150,76,242,.2); }
.community-card h2 { font-size: 45px; }
.community-card p:not(.section-kicker) { color: #8f9cb0; }

.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }
.faq-grid > div:first-child > p:last-child { color: var(--muted); line-height: 1.7; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid rgba(228,185,94,.16); }
.faq-list summary { padding: 24px 4px; display: flex; align-items: center; justify-content: space-between; color: #dfe5ef; font: 17px var(--serif); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--gold); font: 23px var(--sans); transition: transform .25s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -5px 50px 24px 4px; color: #8592a7; font-size: 13px; line-height: 1.8; }

.site-footer { padding: 60px 0 24px; border-top: 1px solid rgba(228,185,94,.15); background: #050810; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 40px; }
.footer-grid > p { color: #8793a6; font: 14px/1.7 var(--serif); }
.footer-grid > p small { color: #515e72; font: 10px var(--sans); }
.footer-grid nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.footer-grid nav a { color: #8e9aae; font-size: 10px; text-transform: uppercase; }
.footer-grid nav a:hover { color: var(--gold); }
.footer-bottom { margin-top: 45px; padding-top: 22px; display: flex; justify-content: space-between; color: #4c596e; border-top: 1px solid rgba(255,255,255,.05); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.lightbox { width: min(1100px, calc(100% - 30px)); padding: 0; border: 1px solid var(--gold-dark); background: #060a13; box-shadow: 0 30px 100px #000; }
.lightbox::backdrop { background: rgba(3,6,12,.9); backdrop-filter: blur(8px); }
.lightbox img { width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox button { position: absolute; z-index: 2; top: 10px; right: 10px; width: 40px; height: 40px; border: 1px solid var(--gold-dark); background: rgba(5,9,17,.84); color: var(--gold-light); font-size: 24px; cursor: pointer; }
.toast { position: fixed; z-index: 250; left: 50%; bottom: 28px; padding: 13px 18px; color: #f3e6c1; background: rgba(11,18,32,.96); border: 1px solid var(--gold-dark); box-shadow: 0 15px 45px #000; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; transition-delay: calc(var(--delay, 0) * 1ms); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes hero-breathe { to { transform: scale(1.09) translateY(-1%); } }
@keyframes portal-spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(89,223,136,0), 0 0 20px #59df88; } }
@keyframes glow { to { opacity: .65; transform: scale(1.12); } }
@keyframes scroll-line { 0%,100% { transform: scaleY(.4); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes vision-drift { to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
@keyframes vision-sweep { 0%,15% { transform: translateX(-60%); opacity: 0; } 40%,62% { opacity: 1; } 82%,100% { transform: translateX(58%); opacity: 0; } }
@keyframes rune-float { 0%,100% { transform: translateY(0) rotate(0deg); opacity: .3; } 50% { transform: translateY(-22px) rotate(45deg); opacity: .85; } }

@media (max-width: 1050px) {
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 10px; }
  .hero { min-height: 800px; }
  .hero h1 { font-size: 82px; }
  .hero-character img { width: 53vw; }
  .class-layout { grid-template-columns: 1fr; }
  .class-list { order: 2; }
  .class-showcase { order: 1; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .download-grid { gap: 50px; }
}

@media (max-width: 800px) {
  .shell { width: min(100% - 30px, 640px); }
  .section { padding: 82px 0; }
  .site-header { height: 68px; padding: 0 18px; }
  .menu-toggle { display: block; }
  .main-nav { position: fixed; inset: 68px 0 auto; padding: 28px 24px 34px; display: grid; gap: 0; background: rgba(5,9,18,.97); border-bottom: 1px solid var(--gold-dark); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: .32s; }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
  .nav-download { margin-top: 15px; text-align: center; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .hero { height: auto; min-height: 900px; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 120px; }
  .hero-copy { text-align: center; padding-top: 0; }
  .eyebrow { justify-content: center; }
  .hero h1 { font-size: clamp(67px, 22vw, 108px); }
  .hero-subtitle { margin-left: 0; font-size: 10px; letter-spacing: .35em; }
  .hero-lead { margin-inline: auto; font-size: 16px; }
  .hero-actions { justify-content: center; }
  .realm-card { margin-inline: auto; flex-wrap: wrap; justify-content: center; }
  .realm-card i { display: none; }
  .hero-character { height: 520px; margin-top: -15px; }
  .hero-character img { width: min(100%, 500px); object-position: center 16%; }
  .hero-seal { right: 7%; bottom: 17%; }
  .portal { width: 82vw; right: 9%; top: 49%; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 18px; }
  .world-grid, .download-grid, .faq-grid { grid-template-columns: 1fr; }
  .world-grid { gap: 70px; }
  .realm-vision { min-height: 680px; height: 80vh; }
  .realm-vision > img { object-position: 58% center; }
  .vision-content { padding-bottom: 72px; }
  .vision-portal { width: 90vw; right: -26%; opacity: .45; }
  .vision-coordinates { display: none; }
  .stat-one { left: -5px; }.stat-two { right: -5px; }
  .class-list { grid-template-columns: repeat(2, 1fr); }
  .class-showcase { min-height: 560px; padding: 46px 28px; grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .class-orbit { left: 50%; top: 155px; transform: translate(-50%,-50%); }
  .class-content > p:not(:first-child) { min-height: auto; }
  .class-tags { justify-content: center; }
  .media-grid { grid-template-columns: 1fr; grid-template-rows: 360px 240px 240px; }
  .media-main { grid-row: auto; }
  .news-grid { grid-template-columns: 1fr; }
  .news-card { min-height: 330px; }
  .download { padding-block: 110px; }
  .download-grid { gap: 55px; }
  .community-card { grid-template-columns: 1fr; text-align: center; padding: 42px 26px; }
  .community-rune { margin: auto; }
  .community-button { margin: auto; }
  .faq-grid { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-grid .brand { margin: auto; }
  .footer-grid nav { justify-content: center; }
}

@media (max-width: 520px) {
  .brand strong { font-size: 19px; }
  .brand small { letter-spacing: .18em; }
  .hero-actions .btn, .download-actions .btn { width: 100%; }
  .realm-card { width: 100%; }
  .realm-card .copy-ip { width: 100%; }
  .world-frame img { aspect-ratio: .75; }
  .world-badge { left: 20px; right: 20px; display: grid; gap: 6px; }
  .floating-stat { min-width: 137px; padding: 11px; }
  .floating-stat strong { font-size: 25px; }
  .class-list { grid-template-columns: 1fr; }
  .class-card { min-height: 78px; }
  .bento-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; }
  .feature-card, .feature-large, .feature-wide { grid-column: auto; grid-row: auto; min-height: 250px; padding: 30px; }
  .feature-wide { grid-template-columns: 1fr; }
  .dungeon-art { opacity: .25; inset: 0; }
  .media-grid { grid-template-rows: repeat(3, 240px); }
  .install-panel { padding: 26px 20px; }
  .requirements { flex-wrap: wrap; }
  .footer-bottom { display: grid; gap: 10px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .vision-motion { display: none; }
  .vision-still { display: block; }
}