:root {
  --ink: #060a08;
  --deep: #07100b;
  --deep-2: #0c1710;
  --panel: rgba(15, 26, 18, 0.82);
  --line: rgba(222, 190, 112, 0.24);
  --gold: #dfbd70;
  --gold-light: #f3dda7;
  --green: #7ddf36;
  --emerald: #31f166;
  --text: #e9e6dc;
  --muted: #a9b1a7;
  --dawn: #db7d35;
  --veil: #a76bea;
  --max: 1240px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 14%, rgba(56, 128, 54, .08), transparent 34rem),
    linear-gradient(180deg, #07100b, #080d0a 55%, #050806);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(97, 221, 57, .3); color: #fff; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

.site-noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
#motes { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .55; }

.topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  min-height: 76px; padding: 0 clamp(20px, 4vw, 64px);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.topbar.scrolled {
  background: rgba(4, 10, 7, .84); border-color: rgba(223, 189, 112, .16);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); letter-spacing: .19em; font-weight: 700; color: var(--gold-light); }
.brand-gem {
  width: 17px; height: 24px; display: inline-block; transform: rotate(45deg);
  border: 1px solid var(--gold); background: linear-gradient(135deg, #c9ff57, #22b943 48%, #0c4f25);
  box-shadow: 0 0 18px rgba(87, 255, 86, .42), inset 0 0 8px rgba(255,255,255,.4);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.3vw, 38px); text-transform: uppercase; letter-spacing: .13em; font-size: .71rem; font-weight: 750; }
.nav-links a { color: #d8d9d2; transition: color .2s ease; }
.nav-links a:hover { color: var(--gold-light); }
.nav-links .nav-cta { padding: 11px 16px; border: 1px solid rgba(223, 189, 112, .55); color: var(--gold-light); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 10px; }
.nav-toggle span { display: block; width: 25px; height: 1px; background: var(--gold-light); margin: 6px 0; }

.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero-image {
  position: absolute; inset: -3%; z-index: -4;
  background-image: url('assets/images/hero-proving-grounds.webp');
  background-size: cover; background-position: center 42%;
  transform: scale(1.06); filter: saturate(.9) contrast(1.04) brightness(.72);
  animation: heroBreath 18s ease-in-out infinite alternate;
}
@keyframes heroBreath { to { transform: scale(1.1) translate3d(-.5%, -.4%, 0); } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(3,7,5,.58) 0%, rgba(3,8,5,.16) 38%, rgba(4,9,6,.72) 100%); }
.hero-vignette { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 44%, transparent 12%, rgba(3,7,5,.23) 58%, rgba(3,7,5,.82) 100%); }
.hero-content { width: min(940px, calc(100% - 36px)); text-align: center; margin-top: 1vh; position: relative; z-index: 2; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: .19em; font-weight: 800; color: var(--gold); font-size: .72rem; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 0 0 22px; transform: translateY(-14px); text-shadow: 0 2px 14px #000; }
.eyebrow span { width: 52px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow span:last-child { transform: scaleX(-1); }
.hero-logo { display:block; width: min(660px, 84vw); margin: -8px auto 20px; mix-blend-mode: normal; filter: drop-shadow(0 14px 32px rgba(0,0,0,.72)); }
.hero-copy { max-width: 720px; margin: 0 auto 28px; font-family: var(--serif); font-size: clamp(1.08rem, 2vw, 1.34rem); color: #ece9db; text-shadow: 0 2px 12px #000; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; }
.button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; text-transform: uppercase; letter-spacing: .13em; font-size: .73rem; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #13200d; background: linear-gradient(180deg, #f0da94, #c9983e); box-shadow: 0 8px 28px rgba(199, 149, 45, .22), inset 0 1px rgba(255,255,255,.65); }
.button-primary:hover { box-shadow: 0 12px 35px rgba(219, 176, 76, .34), inset 0 1px rgba(255,255,255,.65); }
.button-ghost { color: #f5eddb; border: 1px solid rgba(239, 221, 177, .5); background: rgba(5,11,7,.38); backdrop-filter: blur(8px); }
.button-ghost:hover { border-color: var(--gold-light); background: rgba(15,28,18,.62); }
.hero-status { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; color: #c9d0c8; text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(49, 241, 102, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(49,241,102,0); } 100% { box-shadow: 0 0 0 0 rgba(49,241,102,0); } }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; color: #d7d2c5; text-transform: uppercase; letter-spacing: .2em; font-size: .58rem; z-index: 4; }
.scroll-cue i { width: 1px; height: 36px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes scrollLine { 0%,100% { transform: scaleY(.25); opacity:.35; } 50% { transform: scaleY(1); opacity:1; } }

.section { position: relative; padding: clamp(88px, 10vw, 150px) 0; }
.section-shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section-heading h2, .combat-copy h2, .progression-copy h2, .legendary-content h2, .class-copy h2, .join-content h2, .war-header h2 {
  font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.025em; font-size: clamp(2.5rem, 5vw, 5.2rem); margin: 13px 0 22px; color: #f1ead8;
}
.section-heading p:last-child { max-width: 680px; color: var(--muted); font-size: 1.04rem; }
.centered { text-align: center; max-width: 850px; margin: 0 auto 58px; }
.centered p:last-child { margin-left: auto; margin-right: auto; }
.intro { background: linear-gradient(180deg, #07100b, #0a120d); border-top: 1px solid rgba(223, 189, 112, .12); }
.intro::after { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 80% 25%, rgba(53, 157, 49, .08), transparent 28rem); }
.intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 8vw, 110px); align-items: end; position: relative; z-index: 1; }
.intro-copy { border-left: 1px solid var(--line); padding-left: 32px; color: #bdc4bc; font-size: 1.05rem; }
.intro-copy p:first-child { margin-top: 0; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar { padding: 32px 28px 36px; border-right: 1px solid var(--line); min-height: 230px; }
.pillar:last-child { border-right: 0; }
.pillar-number { color: var(--gold); font-family: var(--serif); font-size: .8rem; }
.pillar h3 { font-family: var(--serif); font-size: 1.45rem; margin: 38px 0 12px; font-weight: 500; }
.pillar p { color: var(--muted); font-size: .9rem; margin: 0; }

.combat-showcase { overflow: hidden; isolation: isolate; }
.combat-backdrop { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6,11,8,.99) 0%, rgba(6,11,8,.9) 42%, rgba(6,11,8,.58) 100%), url('assets/images/combat-world.webp') center/cover; filter: saturate(.75); }
.combat-showcase::after { content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, #08100c 0%, transparent 20%, transparent 80%, #08100c 100%); }
.combat-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.combat-copy > p:not(.kicker) { color: #c2c8c0; max-width: 520px; }
.feature-list { list-style: none; padding: 0; margin: 30px 0 0; }
.feature-list li { position: relative; padding: 11px 0 11px 28px; border-bottom: 1px solid rgba(223,189,112,.13); color: #deddd4; }
.feature-list li::before { content:'◆'; position:absolute; left:0; top:12px; color: var(--green); font-size:.68rem; }
.combat-panel { position: relative; border: 1px solid rgba(223, 189, 112, .25); padding: 8px; background: rgba(6,10,7,.58); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.combat-panel img { aspect-ratio: 16/9; object-fit: cover; }
.combat-panel-caption { position: absolute; left: 28px; bottom: 26px; padding: 13px 16px; background: rgba(5,10,7,.78); border-left: 2px solid var(--green); backdrop-filter: blur(8px); }
.combat-panel-caption span { display:block; text-transform:uppercase; letter-spacing:.17em; color:var(--gold); font-size:.58rem; }
.combat-panel-caption strong { display:block; font-family:var(--serif); font-weight:500; margin-top:3px; }

.factions { background: #080e0a; }
.factions::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(176,70,35,.035), transparent 35%, rgba(53,155,49,.045) 60%, rgba(132,75,183,.035)); pointer-events:none; }
.faction-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; }
.faction-card { position:relative; min-height:420px; padding:40px 34px; background: linear-gradient(180deg, rgba(17,25,19,.9), rgba(8,14,10,.96)); border:1px solid rgba(223,189,112,.14); overflow:hidden; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.faction-card::after { content:''; position:absolute; inset:auto -20% -45% -20%; height:70%; background:radial-gradient(circle, var(--faction-glow), transparent 65%); opacity:.18; transition:opacity .3s ease; }
.faction-card:hover,.faction-card:focus { transform:translateY(-6px); border-color:rgba(223,189,112,.36); box-shadow:0 28px 70px rgba(0,0,0,.28); outline:none; }
.faction-card:hover::after,.faction-card:focus::after { opacity:.32; }
.dawnforged { --faction-glow:#e36a31; }
.wildbound { --faction-glow:#56d73e; }
.dreadveil { --faction-glow:#9e5de0; }
.faction-mark { width:86px; height:86px; margin-bottom:40px; position:relative; }
.sun-mark { border:2px solid var(--dawn); border-radius:50%; box-shadow:0 0 30px rgba(219,125,53,.15); }
.sun-mark::before,.sun-mark::after { content:''; position:absolute; inset:15px; border:1px solid var(--gold); transform:rotate(45deg); }
.sun-mark::after { inset:30px; background:var(--dawn); border:0; box-shadow:0 0 18px var(--dawn); }
.leaf-mark::before { content:''; position:absolute; left:26px; top:5px; width:40px; height:70px; border:2px solid var(--green); border-radius:80% 0 80% 0; transform:rotate(38deg); box-shadow:0 0 26px rgba(125,223,54,.16); }
.leaf-mark::after { content:''; position:absolute; left:40px; top:20px; width:2px; height:58px; background:var(--gold); transform:rotate(38deg); }
.veil-mark { border:2px solid var(--veil); border-radius:50%; clip-path:polygon(0 0, 64% 0, 45% 50%, 64% 100%, 0 100%); transform:rotate(-20deg); filter:drop-shadow(0 0 15px rgba(167,107,234,.25)); }
.veil-mark::after { content:''; position:absolute; width:14px; height:14px; border:1px solid var(--gold); background:var(--veil); left:34px; top:34px; transform:rotate(45deg); }
.faction-type { color:var(--gold); text-transform:uppercase; letter-spacing:.15em; font-size:.62rem; }
.faction-card h3 { font-family:var(--serif); font-size:2rem; line-height:1.1; font-weight:500; margin:12px 0 20px; }
.faction-card > p:not(.faction-type) { color:var(--muted); }
.faction-link { position:absolute; bottom:36px; left:34px; z-index:2; text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; color:#e7dfc8; }

.war-system { background: linear-gradient(180deg,#07100b,#0b120e); }
.war-header { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; margin-bottom:56px; }
.war-header > p { color:var(--muted); border-left:1px solid var(--line); padding-left:28px; }
.war-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.war-card { min-height:280px; border:1px solid var(--line); padding:32px; background:linear-gradient(145deg,rgba(17,29,20,.75),rgba(7,13,9,.96)); position:relative; overflow:hidden; }
.war-card::before { content:''; position:absolute; width:170px; height:170px; border:1px solid rgba(125,223,54,.12); border-radius:50%; right:-75px; top:-75px; box-shadow:0 0 0 22px rgba(125,223,54,.025),0 0 0 44px rgba(125,223,54,.018); }
.war-card.wide { grid-column:span 3; min-height:340px; padding-right:38%; background:linear-gradient(90deg,rgba(16,31,20,.96),rgba(9,17,12,.76)),url('assets/images/hero-proving-grounds.webp') right center/55% auto no-repeat; }
.card-label { color:var(--gold); font-size:.6rem; letter-spacing:.19em; font-weight:800; }
.war-card h3 { font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,3vw,2.7rem); margin:42px 0 13px; }
.war-card p { color:var(--muted); max-width:680px; }
.stat-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.stat-row span { border:1px solid rgba(223,189,112,.22); color:#dcd8ca; padding:8px 12px; text-transform:uppercase; letter-spacing:.12em; font-size:.58rem; }

.progression { overflow:hidden; background:radial-gradient(circle at 26% 50%,rgba(40,138,48,.11),transparent 28rem),#070d09; }
.progression-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,9vw,130px); align-items:center; }
.oathweave-orbit { width:min(510px,85vw); aspect-ratio:1; position:relative; margin:auto; }
.orbit { position:absolute; border:1px solid rgba(223,189,112,.24); border-radius:50%; inset:10%; animation:spin 36s linear infinite; }
.orbit::before,.orbit::after { content:''; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 18px var(--green); }
.orbit::before { top:-5px; left:50%; }.orbit::after { bottom:-5px; left:50%; }
.orbit-b { inset:22%; animation-direction:reverse; animation-duration:28s; border-style:dashed; }
.orbit-c { inset:34%; animation-duration:19s; }
@keyframes spin { to { transform:rotate(360deg); } }
.oathweave-core { position:absolute; inset:41%; transform:rotate(45deg); background:linear-gradient(135deg,#baff43,#27bd52 52%,#0a5728); border:2px solid var(--gold); box-shadow:0 0 60px rgba(66,234,75,.34); }
.oathweave-core span { position:absolute; inset:25%; border:1px solid rgba(255,255,255,.7); }
.node { position:absolute; width:13px; height:13px; transform:rotate(45deg); background:#13241a; border:1px solid var(--gold); box-shadow:0 0 10px rgba(223,189,112,.25); }
.n1{left:49%;top:3%}.n2{right:10%;top:25%}.n3{right:2%;top:52%}.n4{right:24%;bottom:8%}.n5{left:48%;bottom:0}.n6{left:10%;bottom:22%}.n7{left:2%;top:40%}.n8{left:24%;top:10%}
.progression-copy > p:not(.kicker) { color:var(--muted); max-width:570px; }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px; }
.mini-grid div { background:#0a120d; padding:19px; }
.mini-grid strong { display:block; font-family:var(--serif); color:var(--gold-light); }
.mini-grid span { display:block; color:var(--muted); font-size:.78rem; margin-top:4px; }

.legendary { min-height:700px; display:grid; align-items:center; overflow:hidden; isolation:isolate; }
.legendary-bg { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(5,9,6,.96) 0%,rgba(5,9,6,.72) 55%,rgba(5,9,6,.3)),url('assets/images/oathstone-kit.webp') center/cover; filter:saturate(.85) contrast(1.07); }
.legendary::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#070d09,transparent 24%,transparent 80%,#070d09); }
.legendary-content { margin-left:max(20px,calc((100% - var(--max))/2)); width:min(680px,calc(100% - 40px)); }
.legendary-content p:not(.kicker) { color:#c4c8bf; font-size:1.05rem; }
.legendary blockquote { margin:35px 0 0; border-left:2px solid var(--gold); padding:8px 0 8px 24px; font-family:var(--serif); font-size:1.35rem; color:var(--gold-light); }

.class-spotlight { background:linear-gradient(180deg,#08100b,#0d1710); overflow:hidden; }
.class-spotlight::before { content:''; position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(62,190,54,.14),transparent 66%); left:-220px; top:50%; transform:translateY(-50%); }
.class-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(50px,8vw,120px); align-items:center; }
.class-art { min-height:660px; display:grid; place-items:end center; position:relative; }
.class-art-halo { position:absolute; width:410px; height:410px; border-radius:50%; border:1px solid rgba(223,189,112,.2); box-shadow:0 0 0 34px rgba(223,189,112,.025),0 0 0 68px rgba(223,189,112,.018),0 0 110px rgba(67,190,53,.12); bottom:80px; }
.class-art img { width:min(470px,100%); position:relative; z-index:2; filter:drop-shadow(0 30px 32px rgba(0,0,0,.55)); }
.class-copy > p:not(.kicker) { color:var(--muted); max-width:650px; font-size:1.04rem; }
.ability-strip { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0; }
.ability-strip span { border:1px solid rgba(223,189,112,.2); background:rgba(7,14,9,.72); padding:9px 11px; font-size:.75rem; color:#d6dbd3; }
kbd { font-family:var(--sans); color:var(--green); font-weight:850; margin-right:5px; }
.text-button { border:0; border-bottom:1px solid rgba(223,189,112,.42); background:transparent; padding:8px 0; cursor:pointer; color:var(--gold-light); font-family:var(--serif); font-size:1rem; }
.text-button span { margin-left:6px; }

.development { background:#070c09; }
.development-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:55px; }
.dev-card { border:1px solid rgba(223,189,112,.15); background:#0b130e; overflow:hidden; }
.dev-card img { width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.82) brightness(.78); transition:filter .35s ease,transform .5s ease; }
.dev-card:hover img { filter:saturate(1) brightness(.95); transform:scale(1.025); }
.dev-card div { padding:24px 25px 28px; position:relative; }
.dev-card span { position:absolute; right:24px; top:22px; color:rgba(223,189,112,.45); font-family:var(--serif); }
.dev-card h3 { font-family:var(--serif); font-size:1.4rem; font-weight:500; margin:0 0 8px; }
.dev-card p { color:var(--muted); margin:0; font-size:.86rem; }
.dev-note { margin-top:28px; border:1px solid var(--line); padding:22px 26px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; }
.dev-note span { color:var(--gold); text-transform:uppercase; letter-spacing:.16em; font-size:.6rem; }
.dev-note strong { font-family:var(--serif); font-weight:500; }
.dev-note p { margin:0; color:var(--muted); font-size:.78rem; }

.join { min-height:660px; display:grid; align-items:center; text-align:center; isolation:isolate; overflow:hidden; }
.join-bg { position:absolute; inset:0; z-index:-2; background:linear-gradient(rgba(4,9,6,.68),rgba(4,9,6,.96)),url('assets/images/hero-proving-grounds.webp') center 58%/cover; filter:saturate(.8); }
.join::after { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at center,transparent,rgba(4,8,5,.62)); }
.join-content { max-width:820px; }
.join-content > p:not(.kicker):not(.form-message) { color:#c9cec6; max-width:660px; margin:0 auto 30px; }
.signup-form { display:flex; max-width:690px; margin:0 auto; background:rgba(6,12,8,.78); border:1px solid rgba(223,189,112,.4); padding:5px; backdrop-filter:blur(12px); }
.signup-form input { flex:1; min-width:0; border:0; outline:0; color:white; background:transparent; padding:0 19px; }
.signup-form input::placeholder { color:#89948c; }
.form-message { min-height:24px; color:var(--green); margin:13px 0 0; }
.join small { display:block; color:#879189; font-size:.68rem; }

.footer { border-top:1px solid var(--line); background:#050806; padding:45px 0; }
.footer-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; }
.footer-brand { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 12px; }
.footer-brand .brand-gem { grid-row:span 2; }
.footer-brand strong { font-family:var(--serif); letter-spacing:.18em; color:var(--gold-light); }
.footer-brand p { margin:0; color:var(--muted); font-size:.72rem; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; color:#aeb5ae; text-transform:uppercase; letter-spacing:.13em; font-size:.6rem; }
.copyright { text-align:right; margin:0; color:#7f8981; font-size:.68rem; }

.reveal-dialog { width:min(1000px,calc(100% - 30px)); max-height:92vh; padding:0; color:var(--text); background:#07100b; border:1px solid rgba(223,189,112,.45); box-shadow:0 40px 100px rgba(0,0,0,.75); overflow:auto; }
.reveal-dialog::backdrop { background:rgba(2,5,3,.86); backdrop-filter:blur(8px); }
.reveal-dialog img { width:100%; max-height:76vh; object-fit:contain; background:#040806; }
.dialog-copy { padding:24px 28px 30px; }
.dialog-copy h2 { font-family:var(--serif); font-weight:500; margin:6px 0 2px; }
.dialog-copy p:last-child { color:var(--muted); margin:0; }
.dialog-close { position:sticky; float:right; top:12px; right:12px; z-index:3; width:44px; height:44px; border:1px solid rgba(223,189,112,.4); background:rgba(5,10,7,.82); cursor:pointer; font-size:1.6rem; line-height:1; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav-toggle { display:block; z-index:2; }
  .nav-links { position:fixed; inset:0 0 auto auto; width:min(360px,100%); min-height:100vh; padding:110px 40px; flex-direction:column; align-items:flex-start; background:rgba(5,11,7,.97); transform:translateX(105%); transition:transform .3s ease; border-left:1px solid var(--line); }
  .nav-links.open { transform:none; }
  .nav-links a { font-size:.9rem; }
  .intro-grid,.combat-grid,.war-header,.progression-grid,.class-grid { grid-template-columns:1fr; }
  .pillar-grid { grid-template-columns:1fr 1fr; }
  .pillar:nth-child(2) { border-right:0; }
  .pillar:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .faction-grid { grid-template-columns:1fr; }
  .faction-card { min-height:350px; }
  .war-grid { grid-template-columns:1fr 1fr; }
  .war-card.wide { grid-column:span 2; padding-right:32px; background:linear-gradient(90deg,rgba(16,31,20,.96),rgba(9,17,12,.78)),url('assets/images/hero-proving-grounds.webp') center/cover; }
  .class-art { min-height:530px; order:2; }
  .class-copy { order:1; }
  .footer-grid { grid-template-columns:1fr; text-align:center; }
  .footer-brand { justify-content:center; }
  .copyright { text-align:center; }
  .dev-note { grid-template-columns:1fr; text-align:center; }
}

@media (max-width: 680px) {
  .topbar { min-height:66px; padding:0 18px; }
  .brand { font-size:.83rem; }
  .hero-content { margin-top:2vh; }
  .eyebrow { font-size:.58rem; }
  .eyebrow span { width:22px; }
  .eyebrow { margin-bottom: 14px; transform: translateY(-8px); }
  .hero-logo { margin:0 auto 14px; width:min(550px,96vw); }
  .hero-copy { font-size:1rem; }
  .hero-actions { flex-direction:column; align-items:stretch; max-width:340px; margin:auto; }
  .section { padding:78px 0; }
  .section-shell { width:min(var(--max),calc(100% - 28px)); }
  .section-heading h2,.combat-copy h2,.progression-copy h2,.legendary-content h2,.class-copy h2,.join-content h2,.war-header h2 { font-size:clamp(2.35rem,12vw,3.8rem); }
  .intro-copy { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; }
  .pillar-grid { grid-template-columns:1fr; }
  .pillar { border-right:0; border-bottom:1px solid var(--line); min-height:0; }
  .pillar:last-child { border-bottom:0; }
  .war-grid,.development-grid { grid-template-columns:1fr; }
  .war-card.wide { grid-column:auto; }
  .mini-grid { grid-template-columns:1fr; }
  .class-art { min-height:480px; }
  .class-art-halo { width:320px; height:320px; }
  .signup-form { flex-direction:column; background:transparent; border:0; gap:10px; }
  .signup-form input { min-height:54px; border:1px solid rgba(223,189,112,.4); background:rgba(6,12,8,.78); }
  .signup-form .button { width:100%; }
  .combat-panel-caption { position:static; }
  .legendary { min-height:620px; }
}

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