@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cinzel:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --navy:#101831; --navy-2:#172342; --blue:#4d7eb7; --sky:#b9dbef; --gold:#d5aa5b; --gold-light:#ffe0a0; --ivory:#f7f2e7; --paper:#ede7da; --ink:#263047; --muted:#6f7787; --line:rgba(40,57,86,.13); --display:Cinzel,Georgia,serif; --body:Manrope,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--ivory); font-family:var(--body); }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
.container { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.section { position:relative; padding:130px 0; }
.eyebrow { margin:0 0 17px; color:#47749f; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow.light { color:var(--gold-light); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--display); }
h1 em,h2 em { color:#497eae; font-style:normal; text-shadow:0 4px 20px rgba(88,138,182,.22); }
h2 { margin-bottom:0; font-size:clamp(45px,5.2vw,76px); font-weight:600; line-height:1.03; letter-spacing:-.055em; }
.cursor-glow { position:fixed; z-index:50; width:280px; height:280px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(130,198,240,.12),transparent 68%); transform:translate(-50%,-50%); opacity:0; transition:opacity .25s; mix-blend-mode:screen; }

.site-header { position:absolute; z-index:20; top:22px; left:50%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1240px,calc(100% - 44px)); min-height:76px; padding:0 18px 0 26px; border:1px solid rgba(255,255,255,.62); border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(245,246,248,.62)); box-shadow:0 14px 48px rgba(29,47,72,.16),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(16px); transform:translateX(-50%); }
.site-header::after { position:absolute; right:16%; bottom:-1px; left:16%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); content:""; }
.logo { display:flex; align-items:center; gap:11px; width:max-content; }
.logo-wing { display:grid; width:35px; height:35px; place-items:center; border:1px solid rgba(170,123,54,.42); border-radius:50%; color:#b1833f; background:radial-gradient(circle,#fff9e9,#eadfc6); box-shadow:0 4px 13px rgba(126,91,39,.14); }
.site-header nav { display:flex; align-items:center; gap:38px; }
.site-header nav>a { position:relative; padding:28px 0; color:#5e6675; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:color .2s; }
.site-header nav>a::after { position:absolute; bottom:18px; left:50%; width:0; height:2px; border-radius:3px; background:linear-gradient(90deg,#6ca4cf,#d7ac5f); content:""; transform:translateX(-50%); transition:width .25s; }
.site-header nav>a:hover,.site-header nav>a.active { color:#2d4770; }
.site-header nav>a:hover::after,.site-header nav>a.active::after { width:20px; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:17px; }
.menu-toggle { display:none; border:0; background:transparent; }

.language-menu { position:relative; z-index:30; }
.language-menu summary { display:flex; min-width:68px; min-height:38px; align-items:center; justify-content:center; gap:8px; padding:0 11px; border:1px solid rgba(52,83,115,.19); border-radius:8px; color:#385877; background:rgba(255,255,255,.42); box-shadow:inset 0 1px rgba(255,255,255,.82),0 5px 14px rgba(33,56,84,.08); cursor:pointer; list-style:none; transition:border-color .2s,background .2s,box-shadow .2s; }
.language-menu summary::-webkit-details-marker { display:none; }
.language-menu summary:hover,.language-menu[open] summary { border-color:rgba(176,131,58,.45); background:rgba(255,255,255,.78); box-shadow:inset 0 1px #fff,0 8px 20px rgba(33,56,84,.13); }
.language-menu summary:focus-visible { outline:2px solid #5d9fc8; outline-offset:3px; }
.language-menu summary svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.language-menu summary span { font-size:10px; font-weight:800; letter-spacing:.1em; }
.language-menu summary i { width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.language-menu[open] summary i { transform:translateY(2px) rotate(225deg); }
.language-options { position:absolute; top:calc(100% + 11px); right:0; width:210px; overflow:hidden; padding:7px; border:1px solid rgba(179,139,72,.3); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,242,246,.97)); box-shadow:0 20px 50px rgba(18,38,68,.24),inset 0 1px #fff; backdrop-filter:blur(18px); }
.language-options::before { position:absolute; top:0; right:19px; left:19px; height:1px; background:linear-gradient(90deg,transparent,#d0a65e,transparent); content:""; }
.language-options a { display:grid; grid-template-columns:28px 1fr 18px; align-items:center; min-height:42px; padding:0 9px; border-radius:7px; color:#566578; font-size:10px; text-transform:none; transition:color .2s,background .2s,transform .2s; }
.language-options a:hover,.language-options a.selected { color:#17375d; background:linear-gradient(90deg,rgba(94,164,207,.14),rgba(218,177,101,.12)); transform:translateX(2px); }
.language-options a>span { color:#7b8b9d; font-size:8px; font-weight:800; letter-spacing:.1em; }
.language-options a>strong { font-weight:700; }
.language-options a>b { color:#b4863f; text-align:right; }
.mobile-language-menu { display:none; }

.fantasy-button,.glass-button { position:relative; isolation:isolate; display:inline-flex; width:274px; min-width:274px; height:60px; min-height:60px; align-items:center; justify-content:center; gap:17px; overflow:visible; padding:0 44px; border:0; border-radius:2px; color:#fff; background:linear-gradient(180deg,#1268b5,#062a69); filter:drop-shadow(0 10px 13px rgba(18,48,83,.25)); font-size:10px; font-weight:800; line-height:1; letter-spacing:.07em; text-shadow:0 1px 2px #071a38,0 0 8px rgba(106,213,255,.3); text-transform:uppercase; transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease; }
.fantasy-button.canvas-ready,.glass-button.canvas-ready { background:transparent; clip-path:none; }
.button-canvas { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; transition:filter .28s ease; }
.fantasy-button>span,.glass-button>span,.fantasy-button>b,.glass-button>b { position:relative; z-index:2; }
.fantasy-button b,.glass-button b { flex:0 0 auto; font-size:17px; font-weight:600; line-height:1; }
.fantasy-button b { color:#dcf8ff; text-shadow:0 0 10px rgba(71,202,255,.72); }
.glass-button { color:#173f69; background:linear-gradient(180deg,#fff,#b9d8ec); filter:drop-shadow(0 10px 12px rgba(31,68,103,.18)); text-shadow:0 1px rgba(255,255,255,.95); }
.glass-button b { color:#276a9c; text-shadow:0 0 9px rgba(72,166,215,.3); }
.fantasy-button:hover,.glass-button:hover { filter:brightness(1.07) saturate(1.06) drop-shadow(0 15px 17px rgba(19,72,119,.34)); transform:translateY(-4px) scale(1.015); }
.fantasy-button:hover .button-canvas,.glass-button:hover .button-canvas { filter:brightness(1.07); }
.fantasy-button:active,.glass-button:active { filter:brightness(.98) saturate(1.03) drop-shadow(0 7px 8px rgba(18,48,83,.22)); transform:translateY(-1px) scale(.985); }
.fantasy-button:focus-visible { outline:2px solid #bfeeff; outline-offset:4px; }
.glass-button:focus-visible { outline:2px solid #4c92bd; outline-offset:4px; }
.fantasy-button.small { width:150px; min-width:150px; height:44px; min-height:44px; gap:11px; padding:0 24px; border-radius:8px; font-size:10px; }
.fantasy-button.small .button-canvas { border-radius:8px; }

.hero { position:relative; min-height:860px; height:100vh; overflow:hidden; background:#dcebf2; }
.hero-scene,.hero-mist,.hero-bottom,.particles { position:absolute; inset:0; }
.hero-scene { --hero-x:0px; --hero-y:0px; --hero-scroll-y:0px; background:center/cover no-repeat url("../client/hero-journey.png"); transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-scroll-y)),0) scale(1.05); animation:scene-in 1.8s ease-out both; transition:transform .35s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.hero-mist { z-index:1; overflow:hidden; background:linear-gradient(0deg,rgba(239,245,243,.94) 0%,rgba(239,245,243,.58) 10%,transparent 32%); }
.hero-content { position:relative; z-index:5; top:-40px; display:flex; width:min(1200px,calc(100% - 80px)); height:100%; align-items:center; justify-content:center; flex-direction:column; padding:125px 0 90px; text-align:center; }
.hero-content>* { margin-inline:auto; }
.status { display:inline-flex; align-items:center; gap:9px; margin-bottom:31px; padding:9px 14px; border:1px solid rgba(65,100,128,.24); border-radius:30px; color:#4d6377; background:rgba(255,255,255,.64); box-shadow:0 7px 22px rgba(37,75,108,.1),inset 0 1px rgba(255,255,255,.86); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(10px); }
.status i { width:7px; height:7px; border-radius:50%; background:#64a94d; box-shadow:0 0 0 4px rgba(100,169,77,.18),0 0 9px rgba(100,169,77,.5); animation:pulse 3.4s ease-in-out infinite; }
.hero .eyebrow { color:#102a4b; font-size:13px; font-weight:800; letter-spacing:.17em; paint-order:stroke fill; -webkit-text-stroke:.35px rgba(255,255,255,.94); text-shadow:0 1px 0 #fff,0 2px 5px rgba(255,255,255,.92),0 3px 10px rgba(12,35,62,.3); }
.hero h1 { max-width:1000px; margin-bottom:25px; color:#172945; font-size:clamp(62px,6.2vw,94px); font-weight:600; line-height:.94; letter-spacing:-.055em; paint-order:stroke fill; -webkit-text-stroke:.8px rgba(240,249,255,.82); text-shadow:0 2px 1px rgba(255,255,255,.72),0 5px 14px rgba(9,31,58,.3),0 0 34px rgba(237,249,255,.42); }
.hero h1 em { color:#225f91; -webkit-text-stroke:.8px rgba(235,248,255,.88); text-shadow:0 2px 1px rgba(255,255,255,.78),0 5px 15px rgba(7,38,70,.34),0 0 28px rgba(235,249,255,.5); }
.hero-lead { max-width:650px; margin-bottom:33px; color:#102a4b; font-size:18px; font-weight:700; line-height:1.7; paint-order:stroke fill; -webkit-text-stroke:1px rgba(255,255,255,.92); text-shadow:0 1px 0 #fff,0 2px 5px rgba(255,255,255,.95),0 4px 12px rgba(12,35,62,.34); }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:15px; }
.hero-actions .fantasy-button,.hero-actions .glass-button { font-size:11px; }
.scroll { position:absolute; z-index:6; bottom:35px; left:50%; display:flex; align-items:center; gap:10px; color:#647486; font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; transform:translateX(-50%); }
.scroll span { width:32px; height:1px; background:#8194a4; transform-origin:right; animation:scroll-line 2.2s ease-in-out infinite; }
.hero-bottom { z-index:4; top:auto; height:110px; background:linear-gradient(0deg,var(--ivory),transparent); }
.particles { z-index:4; pointer-events:none; }
.particles i { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff8c8; box-shadow:0 0 12px 4px rgba(112,195,238,.5); animation:drift 5s ease-in-out infinite; }
.particles i:nth-child(1){top:30%;left:58%}.particles i:nth-child(2){top:47%;left:72%;animation-delay:-1s}.particles i:nth-child(3){top:25%;left:89%;animation-delay:-2s}.particles i:nth-child(4){top:67%;left:66%;animation-delay:-3s}.particles i:nth-child(5){top:55%;left:93%;animation-delay:-4s}.particles i:nth-child(6){top:73%;left:52%;animation-delay:-.7s}.particles i:nth-child(7){top:36%;left:78%;animation-delay:-2.6s}.particles i:nth-child(8){top:17%;left:69%;animation-delay:-3.4s}.particles i:nth-child(9){top:81%;left:85%;animation-delay:-1.6s}.particles i:nth-child(10){top:45%;left:54%;animation-delay:-4.4s}.particles i:nth-child(11){top:21%;left:96%;animation-delay:-2.2s}.particles i:nth-child(12){top:74%;left:96%;animation-delay:-3.8s}

.news-section { background:var(--ivory); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; margin-bottom:60px; }
.all-news { display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid #bd9853; color:#3f5e80; font-size:11px; font-weight:700; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.news-card { position:relative; min-height:355px; overflow:hidden; padding:34px; border:1px solid rgba(49,72,103,.13); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,239,241,.58)); box-shadow:0 18px 40px rgba(32,51,78,.08),inset 0 1px rgba(255,255,255,.9); transition:transform .35s,box-shadow .35s; }
.news-card::before { position:absolute; top:-90px; right:-80px; width:210px; height:210px; border:1px solid rgba(77,126,183,.12); border-radius:50%; content:""; transition:transform .5s; }
.news-card:hover { transform:translateY(-9px); box-shadow:0 28px 55px rgba(32,51,78,.14); }
.news-card:hover::before { transform:scale(1.18) rotate(10deg); }
.news-card.featured { color:#edf6ff; border-color:rgba(255,255,255,.12); background:linear-gradient(145deg,#203456,#111d39); box-shadow:0 22px 48px rgba(18,31,59,.2); }
.card-tag { display:inline-block; margin-bottom:64px; padding:6px 9px; border-radius:3px; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.card-tag.blue { color:#356792; background:#dcecf4; }
.card-tag.gold { color:#442f15; background:#e4bc72; }
.card-tag.green { color:#4d6742; background:#e0ead8; }
.news-card h3 { max-width:310px; margin-bottom:14px; font-size:27px; font-weight:600; line-height:1.16; letter-spacing:-.035em; }
.news-card p { max-width:330px; margin-bottom:34px; color:#6e7888; font-size:13px; line-height:1.7; }
.featured p { color:rgba(237,246,255,.62); }
.news-card>a,.news-card>button { position:absolute; bottom:33px; left:34px; display:flex; align-items:center; gap:11px; padding:0; border:0; color:#446f99; background:transparent; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.featured>a { color:var(--gold-light); }
.news-card>a span,.news-card>button span { transition:transform .2s; }
.news-card>a:hover span,.news-card>button:hover span { transform:translateX(5px); }
.card-character { position:absolute; top:20px; right:23px; width:94px; height:94px; overflow:hidden; border:1px solid rgba(77,126,183,.2); border-radius:50%; background:radial-gradient(circle at 50% 35%,#f5ead1 0%,#c6dceb 56%,#7fa1bd 100%); box-shadow:0 9px 24px rgba(35,58,88,.13),inset 0 0 0 5px rgba(255,255,255,.35); }
.card-character::after { position:absolute; inset:5px; border:1px solid rgba(255,255,255,.56); border-radius:inherit; content:""; }
.card-character img { width:100%; height:100%; object-fit:contain; transform:scale(.92); transition:transform .4s; }
.news-card:hover .card-character img { transform:scale(1.03) rotate(2deg); }
.featured .card-character { border-color:rgba(255,222,160,.34); background:radial-gradient(circle at 50% 35%,#d7c197 0%,#456485 58%,#1c2d4c 100%); }

.classes-section { min-height:800px; overflow:hidden; color:#eef5ff; background:radial-gradient(circle at 72% 47%,#355d83 0%,#172a49 34%,#0d1830 72%); }
.classes-section::before { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(90deg,#000,transparent); content:""; }
.class-orbit { --orbit-shift:0px; position:absolute; top:50%; right:-120px; width:670px; height:670px; border:1px solid rgba(163,211,239,.15); border-radius:50%; transform:translateY(calc(-50% + var(--orbit-shift))); transition:transform .12s linear; }
.class-orbit::before,.class-orbit::after { position:absolute; border:1px solid rgba(213,170,91,.14); border-radius:50%; content:""; }
.class-orbit::before { inset:58px; }.class-orbit::after { inset:130px; }
.class-layout { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.class-copy h2 { margin-bottom:28px; }
.class-copy h2 em { color:var(--gold-light); }
.class-copy>p:not(.eyebrow) { max-width:510px; margin-bottom:35px; color:rgba(238,245,255,.63); line-height:1.75; }
.class-tabs { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:530px; }
.class-tabs button { display:flex; align-items:center; gap:11px; min-height:73px; padding:6px 16px 6px 8px; border:1px solid rgba(255,255,255,.13); border-radius:11px; color:rgba(238,245,255,.58); background:rgba(255,255,255,.035); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:border-color .2s,color .2s,background .2s,transform .2s; }
.class-tabs button img { width:56px; height:56px; flex:0 0 56px; border-radius:9px; object-fit:contain; background:radial-gradient(circle,#d9e8ef,rgba(65,99,133,.32)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); transition:transform .25s; }
.class-tabs button span { color:inherit; font-size:10px; }
.class-tabs button:hover,.class-tabs button.active { border-color:rgba(255,217,147,.58); color:#fff; background:linear-gradient(90deg,rgba(218,174,94,.15),rgba(90,151,199,.11)); transform:translateX(4px); }
.class-tabs button:hover img,.class-tabs button.active img { transform:scale(1.08) translateY(-2px); }
.class-art { position:relative; min-height:620px; display:grid; place-items:center; }
.class-art>.class-halo { position:absolute; top:50%; left:50%; width:560px; height:560px; border:1px solid rgba(126,190,230,.21); border-radius:50%; background:radial-gradient(circle,rgba(95,174,223,.19),rgba(31,79,119,.08) 42%,transparent 68%); transform:translate(-50%,-50%); }
.class-halo::before { position:absolute; inset:45px; border:1px dashed rgba(255,219,153,.22); border-radius:50%; content:""; animation:rotate 25s linear infinite; }
.class-stage { position:relative; z-index:3; width:570px; height:620px; }
.class-stage::before,.class-stage::after { position:absolute; top:50%; left:50%; width:470px; height:470px; border:1px solid rgba(158,213,241,.17); border-radius:50%; content:""; transform:translate(-50%,-50%); }
.class-stage::before { box-shadow:inset 0 0 80px rgba(92,174,222,.08),0 0 70px rgba(2,10,25,.22); }
.class-stage::after { width:385px; height:385px; border-color:rgba(255,220,153,.17); border-style:dashed; animation:rotate-centered 28s linear infinite; }
.class-art .class-stage>img { position:absolute; z-index:3; right:auto; bottom:0; left:50%; width:100%; height:600px; max-width:none; margin:0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 28px 32px rgba(0,0,0,.43)); transform:translateX(-50%); transition:opacity .18s,transform .36s cubic-bezier(.2,.8,.2,1),filter .32s; }
.class-art:not(.is-switching):hover .class-stage>img { filter:drop-shadow(0 34px 39px rgba(0,0,0,.5)) brightness(1.04); transform:translateX(-50%) translateY(-8px) scale(1.015); }
.stage-rune { position:absolute; z-index:1; top:145px; left:50%; color:rgba(255,225,166,.16); font-size:230px; line-height:1; transform:translateX(-50%); }
.class-art.is-switching .class-stage>img { opacity:.12; transform:translateX(-50%) scale(.92) rotate(-2deg); filter:drop-shadow(0 22px 26px rgba(0,0,0,.34)) brightness(1.35); }
.class-nameplate { position:absolute; z-index:5; bottom:8px; left:50%; display:flex; min-width:245px; min-height:76px; align-items:center; justify-content:center; flex-direction:column; border:1px solid rgba(255,222,159,.45); clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%); background:linear-gradient(135deg,rgba(26,53,82,.96),rgba(10,25,48,.96)); box-shadow:0 18px 38px rgba(2,10,24,.5),inset 0 0 0 3px rgba(255,255,255,.035); transform:translateX(-50%); }
.class-nameplate strong { color:#fff7e5; font:600 23px/1 var(--display); letter-spacing:.04em; text-shadow:0 3px 14px rgba(0,0,0,.4); }
.class-nameplate small { margin-top:9px; color:rgba(220,235,246,.52); font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; }

.download-section { min-height:710px; overflow:hidden; display:grid; place-items:center; color:#fff; background:#1a2a46; text-align:center; }
.download-bg { --download-shift:0px; position:absolute; inset:-6%; background:center/cover no-repeat url("../client/realm-ruins.png"); filter:saturate(.82) brightness(.5); transform:translate3d(0,var(--download-shift),0) scale(1.08); will-change:transform; }
.download-section::after { position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,40,.92),rgba(16,35,61,.52)),radial-gradient(circle at center,transparent,rgba(9,17,34,.46)); content:""; }
.download-stars { position:absolute; z-index:2; top:100px; left:50%; color:var(--gold-light); font-size:20px; letter-spacing:18px; transform:translateX(-50%); }
.download-content { position:relative; z-index:3; }
.download-content h2 { margin-bottom:24px; }
.download-content h2 em { color:var(--gold-light); }
.download-content>p:not(.eyebrow) { max-width:500px; margin:0 auto 34px; color:rgba(255,255,255,.7); line-height:1.75; }
.download-actions { display:flex; align-items:center; justify-content:center; gap:14px; }
.download-section .glass-button { color:#24486c; }
.soon-pill { display:inline-flex; min-height:50px; align-items:center; padding:0 20px; border:1px solid rgba(255,224,160,.43); border-radius:4px; color:var(--gold-light); background:rgba(16,28,50,.38); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }

.footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:34px; padding-bottom:34px; color:#767d89; font-size:10px; }
.logo.dark .logo-wing { background:#f5eddd; }
.footer p { margin:0; }
.footer-links { display:flex; gap:24px; color:#394b62; font-weight:700; }

.account-modal { width:min(630px,calc(100% - 30px)); max-height:calc(100dvh - 30px); overflow:auto; padding:46px; border:1px solid rgba(173,135,72,.58); border-radius:16px; color:#edf5ff; background:linear-gradient(145deg,#1d3154,#0d1730); box-shadow:0 35px 100px rgba(5,11,25,.65),inset 0 0 0 4px rgba(255,255,255,.025); }
.account-modal::backdrop { background:rgba(6,12,26,.72); backdrop-filter:blur(9px); }
.modal-glow { position:absolute; top:-180px; left:50%; width:470px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(91,171,223,.25),transparent 65%); transform:translateX(-50%); pointer-events:none; }
.modal-close { position:absolute; z-index:2; top:18px; right:18px; width:34px; height:34px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; background:rgba(255,255,255,.04); font-size:22px; line-height:1; }
.modal-crest { position:relative; z-index:1; display:grid; width:48px; height:48px; margin-bottom:17px; place-items:center; border:1px solid rgba(255,222,156,.48); border-radius:50%; color:var(--gold-light); background:rgba(255,255,255,.04); box-shadow:0 0 28px rgba(97,176,224,.16); }
.account-modal h2 { position:relative; margin-bottom:16px; font-size:54px; line-height:1; }
.account-modal h2 em { color:var(--gold-light); }
.modal-copy { color:rgba(237,245,255,.62); }
.account-modal form { margin-top:28px; }
.account-modal form>label,.form-row label { display:block; margin-bottom:18px; color:rgba(237,245,255,.58); font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.account-modal form label>span:not(:last-child),.form-row label>span { display:block; margin-top:8px; padding:1px; border-radius:6px; background:linear-gradient(90deg,rgba(122,191,231,.48),rgba(224,180,100,.38)); }
.account-modal input:not([type="checkbox"]) { display:block; width:100%; min-height:45px; padding:0 13px; border:0; border-radius:5px; outline:0; color:#fff; background:#111e38; }
.account-modal input:focus { box-shadow:0 0 0 2px rgba(108,184,228,.31); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.terms { display:flex!important; align-items:flex-start; gap:9px; margin-bottom:22px!important; color:rgba(237,245,255,.6)!important; font-size:10px!important; letter-spacing:0!important; text-transform:none!important; }
.terms input { margin:1px 0 0; accent-color:#6da7d0; }
.modal-submit { display:flex; width:min(290px,100%); margin-inline:auto; }
.form-note { margin:13px 0 0; color:rgba(237,245,255,.41); font-size:9px; line-height:1.5; text-align:center; }
.field-with-action { display:flex!important; gap:8px; align-items:stretch; background:none!important; padding:0!important; }
.field-with-action input { flex:1; min-width:0; }
.field-with-action button { flex:none; }
.username-status,.form-message { min-height:13px; margin:-10px 0 16px; font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:none; }
.username-status:empty,.form-message:empty { margin:0; }
.username-status.status-ok,.form-message.status-ok { color:#8fd9a8; }
.username-status.status-error,.form-message.status-error { color:#f29a9a; }
.google-button { display:flex; width:100%; margin-bottom:16px; }
.or-divider { margin:0 0 22px; color:rgba(237,245,255,.4); font-size:10px; text-align:center; text-transform:uppercase; letter-spacing:.08em; }

.reveal { opacity:1; }
.gsap-motion { --reveal-x:0px; --reveal-y:0px; --parallax-x:0px; --parallax-y:0px; translate:calc(var(--reveal-x) + var(--parallax-x)) calc(var(--reveal-y) + var(--parallax-y)); will-change:translate,opacity,filter,clip-path; }
.ambient-orbs { position:fixed; z-index:8; inset:0; overflow:hidden; pointer-events:none; mix-blend-mode:screen; }
.ambient-orbs i { position:absolute; bottom:-40px; left:var(--orb-x); width:var(--orb-size); height:var(--orb-size); border-radius:50%; opacity:0; background:radial-gradient(circle,#fff 0 14%,rgba(181,235,255,.95) 24%,rgba(87,188,238,.24) 62%,transparent 72%); box-shadow:0 0 9px 2px rgba(130,213,255,.66),0 0 24px 6px rgba(255,224,147,.13); animation:orb-rise var(--orb-speed) linear var(--orb-delay) infinite; }
@keyframes scene-in { from { transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-scroll-y)),0) scale(1.1); opacity:.45; } to { transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-scroll-y)),0) scale(1.05); opacity:1; } }
@keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 4px rgba(100,169,77,.18),0 0 9px rgba(100,169,77,.5); } 50% { opacity:.45; box-shadow:0 0 0 8px rgba(100,169,77,0),0 0 3px rgba(100,169,77,.22); } }
@keyframes drift { 50% { transform:translateY(-28px) scale(1.8); opacity:.3; } }
@keyframes scroll-line { 0%,100% { transform:scaleX(.35); opacity:.4; } 50% { transform:scaleX(1); opacity:1; } }
@keyframes orb-rise { 0% { opacity:0; transform:translate3d(0,8vh,0) scale(.45); } 12% { opacity:var(--orb-opacity); } 72% { opacity:.3; } 100% { opacity:0; transform:translate3d(var(--orb-drift),-115vh,0) scale(1.55); } }
@keyframes rotate { to { transform:rotate(360deg); } }
@keyframes rotate-centered { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Chronicles brand signature */
.logo { gap:12px; }
.logo-type { position:relative; display:flex; min-height:40px; align-items:center; padding:0 5px 0 1px; }
.logo-type::after { position:absolute; right:4px; bottom:4px; left:1px; height:1px; background:linear-gradient(90deg,rgba(194,145,67,.72),rgba(89,132,169,.42),transparent); content:""; transform:scaleX(.72); transform-origin:left; transition:transform .3s ease; }
.logo .brand-word { display:block; color:#172541; font:700 24px/1 "Cinzel Decorative",var(--display); letter-spacing:.035em; white-space:nowrap; text-shadow:0 1px rgba(255,255,255,.95),0 3px 12px rgba(39,58,89,.1); transition:color .25s,text-shadow .25s; }
.logo:hover .brand-word { color:#294264; text-shadow:0 1px #fff,0 4px 13px rgba(54,91,125,.18); }
.logo:hover .logo-type::after { transform:scaleX(1); }
.footer .brand-word { font-size:20px; }

@media (max-width:1100px) {
    .class-layout { gap:35px; }
    .class-stage { width:500px; }
}

@media (max-width:1000px) {
    .site-header { grid-template-columns:1fr auto; }
    .site-header nav { position:absolute; top:84px; right:0; left:0; display:none; flex-direction:column; gap:0; padding:15px; border:1px solid rgba(255,255,255,.65); border-radius:14px; background:rgba(247,249,250,.94); box-shadow:0 22px 40px rgba(27,43,67,.18); backdrop-filter:blur(16px); }
    .site-header nav.open { display:flex; }
    .site-header nav>a { width:100%; padding:14px; text-align:center; }
    .site-header nav>a::after { display:none; }
    .mobile-language-menu { display:block; width:100%; margin-top:7px; padding-top:12px; border-top:1px solid rgba(57,82,112,.1); }
    .mobile-language-menu summary { width:100%; }
    .mobile-language-menu .language-options { position:static; width:100%; margin-top:8px; box-shadow:inset 0 1px #fff,0 8px 20px rgba(18,38,68,.1); }
    .site-header nav .language-options a { width:100%; padding:0 12px; text-align:left; }
    .menu-toggle { display:grid; justify-self:end; gap:6px; padding:10px; }
    .menu-toggle span { display:block; width:24px; height:1px; background:#334762; }
    .header-actions { display:none; }
    .hero-mist { background:linear-gradient(0deg,rgba(239,245,243,.94) 0%,rgba(239,245,243,.58) 10%,transparent 32%); }
    .class-layout { grid-template-columns:1fr; }
    .class-art { min-height:620px; }
    .class-art .class-stage>img { position:absolute; right:auto; bottom:0; width:100%; transform:translateX(-50%); }
    .class-art.is-switching .class-stage>img { transform:translateX(-50%) scale(.92) rotate(-2deg); }
    .news-grid { gap:14px; }
    .news-card { padding:27px; }
    .news-card>a,.news-card>button { left:27px; }
}

@media (max-width:700px) {
    .container { width:min(100% - 40px,1200px); }
    .section { padding:95px 0; }
    .site-header { top:12px; width:calc(100% - 24px); min-height:66px; padding:0 12px 0 17px; }
    .logo { gap:9px; }.logo-type { min-height:35px; padding-right:2px; }.logo .brand-word { font-size:18px; letter-spacing:.025em; }
    .hero { min-height:760px; height:100svh; }
    .hero-scene { background-position:32% center; }
    .hero-mist { background:linear-gradient(0deg,rgba(244,246,240,.97) 0%,rgba(242,248,249,.62) 12%,transparent 36%); }
    .hero-content { top:-22px; width:min(100% - 40px,1200px); height:100%; padding:105px 0 65px; }
    .hero-content>* { margin-inline:auto; }
    .hero h1 { max-width:570px; font-size:clamp(46px,9vw,58px); line-height:.98; }
    .hero .eyebrow { font-size:11px; }
    .hero-lead { max-width:470px; font-size:15px; line-height:1.6; }
    .hero-actions { align-items:center; flex-direction:column; }
    .fantasy-button,.glass-button { width:258px; min-width:258px; height:58px; min-height:58px; }
    .section-heading { align-items:flex-start; flex-direction:column; margin-bottom:40px; }
    .news-grid { grid-template-columns:1fr; }
    .news-card { min-height:315px; }
    .card-character { width:80px; height:80px; }
    .class-tabs { grid-template-columns:1fr; }
    .class-tabs button { min-height:66px; }
    .class-art { min-height:540px; }
    .class-stage { width:min(390px,96vw); height:530px; }
    .class-art .class-stage>img { width:100%; height:510px; }
    .class-art>.class-halo { width:420px; height:420px; }
    .class-stage::before { width:370px; height:370px; }
    .class-stage::after { width:305px; height:305px; }
    .class-nameplate { min-width:220px; min-height:68px; }
    .download-section { min-height:660px; }
    .download-actions { flex-direction:column; }
    .footer { align-items:flex-start; flex-direction:column; gap:15px; }
    .account-modal { padding:34px 22px 28px; }
    .account-modal h2 { font-size:43px; }
    .form-row { grid-template-columns:1fr; gap:0; }
    .cursor-glow { display:none; }
}