:root {
  --bg: #07070b;
  --bg-soft: #0b0c12;
  --panel: #101119;
  --panel-2: #15151d;
  --ink: #f1eee8;
  --muted: #a3a0aa;
  --line: rgba(255,255,255,.11);
  --gold: #c7a45d;
  --gold-bright: #e4c77d;
  --violet: #8164cf;
  --crimson: #a24747;
  --container: 1240px;
  --pad: clamp(20px, 4vw, 52px);
  --section: clamp(76px, 9vw, 132px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body.lightbox-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; }

::selection { background: rgba(199,164,93,.3); color: #fff; }

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .055;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 .5px, transparent .75px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.25) 0 .45px, transparent .7px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: soft-light;
}

.container {
  width: min(calc(100% - (var(--pad) * 2)), var(--container));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 18px 0 auto;
  z-index: 100;
  pointer-events: none;
}
.nav-shell {
  width: min(calc(100% - 32px), 1320px);
  min-height: 68px;
  margin: auto;
  padding: 8px 10px 8px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,8,12,.76);
  backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
  pointer-events: auto;
}
.site-header.scrolled .nav-shell { background: rgba(8,8,12,.93); }

.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(199,164,93,.42);
  background: linear-gradient(145deg, rgba(199,164,93,.16), rgba(129,100,207,.06));
  transform: rotate(45deg);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  color: var(--gold-bright);
  box-shadow: inset 0 0 18px rgba(199,164,93,.06);
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-mark { text-indent: 0; }
.brand-mark { line-height: 1; }
.brand-name {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .16em;
}
.main-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 38px); }
.main-nav a {
  color: #c7c4cd;
  font-size: .81rem;
  letter-spacing: .045em;
  transition: color .25s ease;
}
.main-nav a:hover { color: #fff; }
.nav-discord {
  justify-self: end;
  min-height: 48px;
  padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 9px;
  border: 1px solid rgba(199,164,93,.3);
  background: rgba(199,164,93,.11);
  color: var(--gold-bright);
  font-weight: 700;
  font-size: .79rem;
  letter-spacing: .05em;
}
.nav-toggle { display: none; border: 0; background: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 54%;
  z-index: -5;
  filter: saturate(.82) contrast(1.08) brightness(.68);
  transform: scale(1.025);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: -4;
  background:
    linear-gradient(90deg, rgba(5,5,8,.97) 0%, rgba(5,5,8,.83) 37%, rgba(5,5,8,.38) 66%, rgba(5,5,8,.54) 100%),
    linear-gradient(180deg, rgba(6,6,9,.34), transparent 40%, rgba(6,6,9,.92) 100%);
}
.hero-runes {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(circle at 73% 45%, rgba(129,100,207,.22), transparent 24%),
    radial-gradient(circle at 19% 62%, rgba(199,164,93,.09), transparent 21%);
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,164,93,.5), rgba(129,100,207,.35), transparent);
}
.hero-inner { padding-top: 130px; padding-bottom: 90px; }
.hero-copy { width: min(760px, 100%); }
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 13px;
  color: var(--gold-bright);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow span { width: 34px; height: 1px; background: currentColor; opacity: .5; }
.hero h1 {
  margin: 22px 0 14px;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(3.85rem, 8.5vw, 8.4rem);
  line-height: .83;
  letter-spacing: -.055em;
  font-weight: 800;
  text-shadow: 0 10px 42px rgba(0,0,0,.4);
}
.hero h1 span { color: #c7b18a; }
.hero-lead {
  max-width: 650px;
  margin: 0 0 11px;
  color: #f0edf1;
  font-size: clamp(1.1rem, 1.55vw, 1.38rem);
}
.hero-sub {
  max-width: 640px;
  margin: 0;
  color: #b8b4bf;
  font-size: .98rem;
}
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.ip-button {
  min-width: min(100%, 320px);
  border: 1px solid rgba(228,199,125,.4);
  border-radius: 11px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  gap: 10px;
  align-items: center;
  background: linear-gradient(135deg, rgba(199,164,93,.18), rgba(199,164,93,.08));
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 36px rgba(0,0,0,.22);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.ip-button:hover { transform: translateY(-2px); background: rgba(199,164,93,.2); border-color: rgba(228,199,125,.72); }
.ip-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid rgba(199,164,93,.25); border-radius: 8px; }
.ip-text { display: flex; flex-direction: column; align-items: flex-start; }
.ip-text small { color: #9e998f; font-size: .58rem; letter-spacing: .16em; font-weight: 700; }
.ip-text strong { margin-top: 1px; font-size: .91rem; letter-spacing: .02em; }
.copy-glyph { color: #99949d; font-size: 1.1rem; }
.ghost-button {
  min-height: 62px;
  padding: 0 20px;
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #d8d5dc;
  font-size: .82rem;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.ghost-button:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.hero-meta { margin-top: 42px; display: flex; gap: 13px; flex-wrap: wrap; }
.hero-meta > div {
  min-width: 155px;
  padding: 11px 15px;
  display: grid;
  grid-template-columns: 8px 1fr;
  column-gap: 9px;
  border-left: 1px solid rgba(255,255,255,.14);
}
.meta-dot { width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.hero-meta strong { font-size: .79rem; }
.hero-meta small { grid-column: 2; color: #8f8b96; font-size: .67rem; }
.scroll-cue {
  position: absolute; right: 28px; bottom: 38px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(255,255,255,.4);
  font-size: .57rem; letter-spacing: .23em;
}
.scroll-cue i { width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.25; transform:scaleY(.7); transform-origin:top} 50%{opacity:1; transform:scaleY(1)} }

.intro-section { padding: var(--section) 0; background: #090a0f; position: relative; }
.intro-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(129,100,207,.08), transparent 31%);
  pointer-events: none;
}
.section-heading { position: relative; z-index: 1; }
.section-heading.centered { max-width: 830px; margin: 0 auto 52px; text-align: center; }
.section-heading h2, .story-copy h2, .community-inner h2 {
  margin: 12px 0 15px;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2.3rem, 4.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 650;
}
em { color: #c8b284; font-style: normal; }
.section-heading p { margin: 0 auto; max-width: 670px; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.feature-card {
  position: relative;
  min-height: 390px;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #101118;
  box-shadow: 0 30px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
}
.feature-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, rgba(7,7,11,.75) 78%, rgba(7,7,11,.95));
}
.feature-media { position: absolute; inset: 0; }
.feature-media img { width:100%; height:100%; object-fit:cover; filter: brightness(.88) saturate(.82); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.feature-card:hover .feature-media img { transform: scale(1.035); filter: brightness(1) saturate(.95); }
.feature-content { position: relative; z-index: 2; align-self: end; padding: 28px; display: grid; grid-template-columns: 46px 1fr; gap: 15px; }
.feature-number { color: var(--gold); font-family:"Cinzel",serif; font-size:.72rem; letter-spacing:.12em; padding-top:7px; }
.feature-content h3 { margin:0 0 8px; font-family:"Cinzel",serif; font-size:1.35rem; }
.feature-content p { margin:0; color:#aaa6b0; font-size:.88rem; line-height:1.7; }

.story-section {
  position: relative;
  overflow: hidden;
  padding: var(--section) 0;
  background: linear-gradient(180deg, #08090d, #0a0a0f 58%, #08090d);
  border-top: 1px solid rgba(255,255,255,.055);
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.story-glow { position:absolute; inset:0; background: radial-gradient(circle at 14% 24%, rgba(41,125,112,.09), transparent 23%), radial-gradient(circle at 86% 73%, rgba(150,45,62,.09), transparent 22%); pointer-events:none; }
.story-row { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:clamp(44px,7vw,100px); align-items:center; }
.story-row + .story-row { margin-top: clamp(90px, 12vw, 160px); }
.story-row-reverse { grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); }
.story-row-reverse .story-image-wrap { grid-column:2; grid-row:1; }
.story-row-reverse .story-copy { grid-column:1; grid-row:1; }
.story-image-wrap { position:relative; }
.image-frame {
  position:relative; padding:10px; border:1px solid rgba(116,188,173,.18); border-radius:18px;
  background:linear-gradient(145deg,rgba(116,188,173,.07),rgba(255,255,255,.015));
  box-shadow:0 28px 80px rgba(0,0,0,.36);
}
.image-frame::before, .image-frame::after {
  content:""; position:absolute; width:44px; height:44px; pointer-events:none;
}
.image-frame::before { top:-1px; left:-1px; border-top:1px solid rgba(199,164,93,.62); border-left:1px solid rgba(199,164,93,.62); border-radius:18px 0 0 0; }
.image-frame::after { right:-1px; bottom:-1px; border-right:1px solid rgba(199,164,93,.62); border-bottom:1px solid rgba(199,164,93,.62); border-radius:0 0 18px 0; }
.image-frame img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:11px; filter:saturate(.83) contrast(1.04); }
.red-frame { border-color:rgba(162,71,71,.22); }
.frame-label { display:block; margin-top:12px; color:#77737e; font-size:.61rem; letter-spacing:.2em; text-align:right; }
.story-copy h2 { font-size:clamp(2.2rem,3.7vw,3.8rem); }
.story-copy p { color:#a9a5af; max-width:570px; font-size:.96rem; }
.story-line { width:100%; height:1px; margin:26px 0 21px; background:linear-gradient(90deg,rgba(199,164,93,.55),transparent); }
.crimson { color:#d07272; }
.crimson-line { background:linear-gradient(90deg,rgba(162,71,71,.7),transparent); }
.micro-list { display:flex; flex-wrap:wrap; gap:9px; }
.micro-list span { padding:7px 10px; border:1px solid rgba(255,255,255,.08); border-radius:7px; background:rgba(255,255,255,.025); color:#8f8b96; font-size:.69rem; }

.gallery-section { padding:var(--section) 0; background:#090a0e; }
.gallery-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:end; margin-bottom:44px; }
.gallery-heading h2 { margin-bottom:0; }
.gallery-heading p { margin:0 0 8px auto; max-width:450px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:230px; gap:14px; }
.gallery-item {
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:0; background:#111219; cursor:pointer;
}
.gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(4,4,7,.82)); opacity:.75; transition:opacity .3s ease; }
.gallery-item img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) brightness(.88); transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease; }
.gallery-item span { position:absolute; z-index:2; left:18px; bottom:14px; font-family:"Cinzel",serif; font-size:.75rem; letter-spacing:.08em; color:#ddd8d1; opacity:.78; transform:translateY(3px); transition:opacity .3s ease,transform .3s ease; }
.gallery-item:hover img { transform:scale(1.045); filter:saturate(1) brightness(1); }
.gallery-item:hover::after { opacity:1; }
.gallery-item:hover span { opacity:1; transform:translateY(0); }
.gallery-wide { grid-column:span 2; }
.gallery-tall { grid-row:span 2; }

.community-section {
  position:relative; min-height:620px; display:grid; align-items:center; overflow:hidden; isolation:isolate;
  border-top:1px solid rgba(255,255,255,.08);
}
.community-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-4; filter:saturate(.72) brightness(.5); }
.community-overlay { position:absolute; inset:0; z-index:-3; background:linear-gradient(90deg,rgba(7,7,11,.96),rgba(7,7,11,.79) 48%,rgba(7,7,11,.5)), linear-gradient(180deg,rgba(7,7,11,.28),rgba(7,7,11,.88)); }
.community-inner { padding:110px 0; max-width:780px; margin-left:max(var(--pad), calc((100vw - var(--container))/2)); margin-right:auto; width:min(780px, calc(100% - var(--pad)*2)); }
.community-inner h2 { font-size:clamp(2.6rem,5vw,5rem); }
.community-inner p { color:#aaa6b0; max-width:650px; margin:8px 0; }
.community-actions { margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.primary-button, .secondary-ip {
  min-height:54px; padding:0 19px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; gap:13px; font-size:.75rem; font-weight:800; letter-spacing:.07em;
}
.primary-button { background:linear-gradient(135deg,#c8a65e,#a78749); color:#0a0908; box-shadow:0 15px 40px rgba(199,164,93,.16); }
.secondary-ip { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); cursor:pointer; }

.site-footer { background:#050508; border-top:1px solid rgba(255,255,255,.07); padding:42px 0; }
.footer-grid { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; }
.footer-brand { align-self:center; }
.footer-grid > p { color:#6f6c75; font-size:.73rem; margin:0; }
.footer-links { display:flex; gap:22px; color:#87838c; font-size:.72rem; }
.footer-links a:hover { color:#fff; }
.copyright { grid-column:1/-1; padding-top:22px; border-top:1px solid rgba(255,255,255,.06); }

.particle-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.particle {
  position:absolute; bottom:-20px; border-radius:50%; background:var(--particle-color,#d7c89b);
  opacity:var(--particle-opacity,.35); box-shadow:0 0 9px color-mix(in srgb,var(--particle-color,#d7c89b) 65%,transparent);
  animation:floatParticle var(--particle-duration,18s) linear infinite;
}
@keyframes floatParticle {
  from { transform:translate3d(0,0,0) scale(.85); opacity:0; }
  12% { opacity:var(--particle-opacity,.35); }
  86% { opacity:calc(var(--particle-opacity,.35) * .7); }
  to { transform:translate3d(var(--particle-drift,30px),-115vh,0) scale(1.15); opacity:0; }
}

.toast {
  position:fixed; left:50%; bottom:28px; z-index:300; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  padding:11px 16px; border:1px solid rgba(199,164,93,.35); border-radius:9px; background:rgba(10,10,14,.94); color:#e6decf; font-size:.78rem; box-shadow:0 20px 50px rgba(0,0,0,.35); transition:.25s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.lightbox {
  width:min(1100px,calc(100% - 34px)); max-width:none; padding:9px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:#090a0e; box-shadow:0 30px 100px rgba(0,0,0,.7);
}
.lightbox::backdrop { background:rgba(1,1,3,.88); backdrop-filter:blur(9px); }
.lightbox img { width:100%; max-height:82vh; object-fit:contain; border-radius:10px; }
.lightbox-close { position:absolute; right:15px; top:15px; width:40px; height:40px; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(5,5,8,.75); font-size:1.5rem; cursor:pointer; }

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

@media (max-width: 980px) {
  .nav-shell { grid-template-columns:1fr auto auto; }
  .main-nav { position:absolute; top:76px; left:16px; right:16px; padding:18px; flex-direction:column; align-items:stretch; gap:4px; border:1px solid rgba(255,255,255,.12); background:rgba(8,8,12,.97); border-radius:12px; opacity:0; transform:translateY(-8px); pointer-events:none; transition:.2s ease; }
  .main-nav.open { opacity:1; transform:none; pointer-events:auto; }
  .main-nav a { padding:11px 8px; }
  .nav-toggle { display:grid; width:42px; height:42px; place-content:center; gap:6px; cursor:pointer; }
  .nav-toggle span { width:20px; height:1px; background:#ddd; display:block; }
  .nav-discord { font-size:0; width:42px; min-height:42px; padding:0; justify-content:center; }
  .nav-discord span { font-size:1rem; }
  .feature-grid { grid-template-columns:1fr; }
  .story-row, .story-row-reverse { grid-template-columns:1fr; gap:38px; }
  .story-row-reverse .story-image-wrap, .story-row-reverse .story-copy { grid-column:auto; grid-row:auto; }
  .story-row-reverse .story-image-wrap { order:0; }
  .story-row-reverse .story-copy { order:1; }
  .gallery-heading { grid-template-columns:1fr; gap:18px; }
  .gallery-heading p { margin:0; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
}

@media (max-width: 640px) {
  :root { --pad:18px; --section:72px; }
  .site-header { inset:10px 0 auto; }
  .nav-shell { width:calc(100% - 20px); min-height:60px; padding-left:12px; gap:8px; }
  .brand-name { font-size:.72rem; }
  .brand-mark { width:34px; height:34px; }
  .hero { min-height:760px; }
  .hero-inner { padding-top:125px; padding-bottom:72px; }
  .hero-vignette { background:linear-gradient(180deg,rgba(5,5,8,.67),rgba(5,5,8,.91) 62%,rgba(5,5,8,.97)); }
  .hero h1 { font-size:clamp(3.4rem,18vw,5.4rem); }
  .eyebrow { font-size:.61rem; gap:8px; }
  .eyebrow span { width:18px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .ip-button { width:100%; }
  .ghost-button { justify-content:center; }
  .hero-meta { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; }
  .hero-meta > div { min-width:0; padding-left:10px; }
  .scroll-cue { display:none; }
  .section-heading.centered { text-align:left; }
  .section-heading h2, .story-copy h2, .community-inner h2 { font-size:clamp(2.05rem,10vw,3rem); }
  .feature-card { min-height:360px; }
  .feature-content { padding:22px; grid-template-columns:35px 1fr; }
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:230px; }
  .gallery-wide, .gallery-tall { grid-column:auto; grid-row:auto; }
  .community-section { min-height:auto; }
  .community-inner { padding:86px 0; margin-inline:auto; width:min(calc(100% - 36px),780px); }
  .community-actions { flex-direction:column; align-items:stretch; }
  .primary-button, .secondary-ip { width:100%; }
}

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


/* --- Gothic / mystical refresh --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  background:
    radial-gradient(circle at 14% 0%, rgba(95,69,157,.18), transparent 28%),
    radial-gradient(circle at 84% 100%, rgba(136,66,38,.10), transparent 22%),
    var(--bg);
}
.nav-shell {
  min-height: 74px;
  border-color: rgba(183,148,77,.18);
  background: linear-gradient(180deg, rgba(8,8,12,.82), rgba(12,10,18,.9));
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04), 0 0 22px rgba(122,93,226,.06);
}
.site-header.scrolled .nav-shell {
  background: linear-gradient(180deg, rgba(8,8,12,.94), rgba(12,10,18,.97));
}
.brand {
  position: relative;
}
.brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,148,77,.45), transparent);
  opacity: .55;
}
.brand-logo {
  width: clamp(170px, 18vw, 250px);
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(122,93,226,.14));
}
.nav-discord {
  border-color: rgba(183,148,77,.34);
  background: linear-gradient(135deg, rgba(183,148,77,.18), rgba(122,93,226,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.22);
}
.hero-image {
  z-index: -6;
  filter: saturate(.82) contrast(1.08) brightness(.60) hue-rotate(-6deg);
  transform: scale(1.03) translate3d(calc(var(--mouse-x, 0) * -8px), calc(var(--mouse-y, 0) * -8px), 0);
  transition: transform .25s linear;
}
.hero-vignette { z-index: -5; }
.hero-runes {
  z-index: -4;
  background:
    radial-gradient(circle at 73% 45%, rgba(122,93,226,.22), transparent 24%),
    radial-gradient(circle at 19% 62%, rgba(183,148,77,.10), transparent 21%),
    radial-gradient(circle at 82% 20%, rgba(75,54,117,.16), transparent 18%);
}
.hero-sigil {
  position: absolute;
  right: clamp(4%, 9vw, 12%);
  top: 50%;
  width: min(42vw, 620px);
  aspect-ratio: 1;
  transform: translateY(-46%);
  border-radius: 50%;
  z-index: -3;
  opacity: .42;
  background:
    radial-gradient(circle, transparent 44%, rgba(183,148,77,.16) 44.5%, transparent 46%),
    radial-gradient(circle, transparent 61%, rgba(122,93,226,.20) 61.7%, transparent 63%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0 12deg, rgba(183,148,77,.12) 12deg 13deg, rgba(255,255,255,0) 13deg 24deg),
    radial-gradient(circle at center, rgba(122,93,226,.14), transparent 54%);
  filter: drop-shadow(0 0 26px rgba(122,93,226,.24));
  animation: sigilRotate 36s linear infinite;
}
.hero-sigil::before,
.hero-sigil::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(224,192,119,.16);
}
.hero-sigil::after {
  inset: 24%;
  border-color: rgba(122,93,226,.2);
}
.hero-mist {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .52;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 68%, rgba(255,255,255,.07), transparent 33%),
    radial-gradient(ellipse at 83% 38%, rgba(173,154,223,.10), transparent 28%),
    radial-gradient(ellipse at 65% 78%, rgba(183,148,77,.08), transparent 30%);
  filter: blur(28px);
  animation: mistDrift 18s ease-in-out infinite alternate;
}
.hero-copy {
  position: relative;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -24px auto auto -28px;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(183,148,77,.12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(183,148,77,.08), rgba(122,93,226,.05));
  transform: rotate(45deg);
  box-shadow: 0 0 30px rgba(122,93,226,.08);
  z-index: -1;
}
.hero-logo {
  width: min(680px, 100%);
  margin: 0 0 14px;
  filter: drop-shadow(0 12px 38px rgba(0,0,0,.52)) drop-shadow(0 0 14px rgba(122,93,226,.12));
  transform: translate3d(calc(var(--mouse-x, 0) * 8px), calc(var(--mouse-y, 0) * 8px), 0);
  transition: transform .25s linear;
}
.hero h1 {
  margin-top: 10px;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  line-height: .95;
}
.hero h1 span {
  color: #c7b18a;
  display: block;
  font-size: .62em;
  letter-spacing: .02em;
  margin-top: .24em;
  font-family: "Uncial Antiqua", serif;
  text-transform: none;
}
.ip-button {
  background: linear-gradient(135deg, rgba(183,148,77,.18), rgba(122,93,226,.09));
}
.ghost-button {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(122,93,226,.04));
}
.intro-section {
  background: linear-gradient(180deg, #090a0f, #0b0911);
}
.feature-card {
  border-color: rgba(183,148,77,.13);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,16,23,.92), rgba(14,12,19,.96));
  box-shadow: 0 30px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(122,93,226,.04);
}
.feature-card::before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:14px;
  z-index:1;
  pointer-events:none;
}
.feature-content, .gallery-item span, .section-heading h2, .story-copy h2, .community-inner h2 {
  position: relative;
  z-index: 2;
}
.story-section {
  background: linear-gradient(180deg, #08090d, #09070e 34%, #0a0a0f 58%, #07080c);
}
.gallery-section {
  background: linear-gradient(180deg,#090a0e,#0a0910);
}
.gallery-item {
  border-color: rgba(183,148,77,.12);
  border-radius: 15px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.community-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 32%, rgba(122,93,226,.18), transparent 24%),
    radial-gradient(circle at 28% 70%, rgba(183,148,77,.12), transparent 28%);
  pointer-events:none;
}
.primary-button {
  background: linear-gradient(135deg,#d3b26e,#9a6f39);
  box-shadow: 0 15px 40px rgba(199,164,93,.16), 0 0 28px rgba(122,93,226,.08);
}
.primary-button:hover { transform: translateY(-2px); }
.site-footer {
  background: linear-gradient(180deg,#06060a,#040407);
}
.particle {
  box-shadow: 0 0 10px color-mix(in srgb,var(--particle-color,#d7c89b) 70%,transparent);
}
@keyframes sigilRotate {
  from { transform: translateY(-46%) rotate(0deg); }
  to { transform: translateY(-46%) rotate(360deg); }
}
@keyframes mistDrift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to { transform: translate3d(2%, -1%, 0) scale(1.04); }
}
@media (max-width: 980px) {
  .brand-logo { width: clamp(150px, 26vw, 220px); }
  .hero-sigil { width: min(58vw, 500px); right: -6%; opacity: .34; }
}
@media (max-width: 640px) {
  .brand-logo { width: 146px; }
  .hero-logo { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); line-height: 1.02; }
  .hero h1 span { font-size: .72em; }
  .hero-sigil { width: 88vw; right: -34%; top: 46%; opacity: .22; }
}

/* Extra arcane depth */
.hero-sigil-two {
  width: min(24vw, 350px);
  right: 3%;
  top: 22%;
  opacity: .25;
  animation-duration: 24s;
  animation-direction: reverse;
  filter: drop-shadow(0 0 22px rgba(122,93,226,.20));
}
.hero-sigil-three {
  width: min(18vw, 260px);
  right: 29%;
  top: 72%;
  opacity: .19;
  animation-duration: 42s;
  filter: drop-shadow(0 0 18px rgba(224,192,119,.16));
}
.hero-sigil-two::before { inset: 17%; }
.hero-sigil-two::after { inset: 31%; }
.hero-sigil-three::before { inset: 13%; }
.hero-sigil-three::after { inset: 28%; }
.hero .particle:nth-child(4n) {
  box-shadow: 0 0 14px var(--particle-color, #d7c89b), 0 0 28px color-mix(in srgb, var(--particle-color,#d7c89b) 35%, transparent);
}
.hero .particle:nth-child(7n) {
  animation-timing-function: ease-in-out;
}
@media (max-width:980px) {
  .hero-sigil-two { width:min(34vw,300px); right:-3%; top:24%; }
  .hero-sigil-three { width:min(28vw,230px); right:35%; top:76%; }
}
@media (max-width:640px) {
  .hero-sigil-two { width:58vw; right:-18%; top:20%; opacity:.16; }
  .hero-sigil-three { width:46vw; right:42%; top:78%; opacity:.12; }
}

/* --- V4 hero balance + recurring arcane circles --- */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
  gap: clamp(56px, 8vw, 132px);
  align-items: end;
  width: 100%;
}
.hero-copy {
  width: min(700px, 100%);
  align-self: center;
}
.hero-copy::before { opacity: .55; }
.hero h1 {
  max-width: 700px;
  font-size: clamp(3rem, 5.8vw, 6.1rem);
}
.hero-sub {
  max-width: 590px;
  font-size: 1rem;
}
.hero-explore {
  margin-top: 28px;
}
.hero-access {
  position: relative;
  width: min(100%, 455px);
  justify-self: end;
  margin-bottom: 10px;
  padding: 28px;
  border: 1px solid rgba(204, 171, 105, .22);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(14, 12, 20, .78), rgba(8, 9, 14, .58)),
    radial-gradient(circle at 100% 0%, rgba(122, 93, 226, .12), transparent 46%);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow:
    0 28px 80px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 42px rgba(122,93,226,.07);
}
.hero-access::before,
.hero-access::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none;
}
.hero-access::before {
  left: -1px;
  top: -1px;
  border-top: 1px solid rgba(224,192,119,.55);
  border-left: 1px solid rgba(224,192,119,.55);
  border-radius: 18px 0 0 0;
}
.hero-access::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid rgba(122,93,226,.48);
  border-bottom: 1px solid rgba(122,93,226,.48);
  border-radius: 0 0 18px 0;
}
.hero-access-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-bright);
  font-family: "Cinzel", serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
}
.hero-access .hero-lead {
  margin-bottom: 22px;
  font-size: 1rem;
  color: #ded9e2;
}
.hero-access .ip-button {
  width: 100%;
  min-width: 0;
}
.hero-access .hero-meta {
  margin-top: 21px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}
.hero-access .hero-meta > div {
  min-width: 0;
  padding: 10px 8px 9px;
  grid-template-columns: 7px minmax(0,1fr);
  border-left-color: rgba(255,255,255,.1);
}
.hero-access .hero-meta strong {
  white-space: nowrap;
  font-size: .68rem;
}
.hero-access .hero-meta small {
  font-size: .57rem;
  line-height: 1.3;
}

/* Let the hero's magical circles frame both halves, rather than only the right edge. */
.hero-sigil {
  right: 5%;
  top: 48%;
  width: min(39vw, 600px);
  opacity: .35;
}
.hero-sigil-two {
  width: min(20vw, 310px);
  right: 32%;
  top: 24%;
  opacity: .18;
}
.hero-sigil-three {
  width: min(16vw, 235px);
  right: 4%;
  top: 79%;
  opacity: .15;
}

.arcane-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.arcane-section > .container,
.arcane-section > .story-row,
.arcane-section > .community-inner {
  position: relative;
  z-index: 2;
}
.section-sigil {
  position: absolute;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .12;
  background:
    radial-gradient(circle, transparent 42%, rgba(224,192,119,.25) 42.4%, transparent 44%),
    radial-gradient(circle, transparent 59%, rgba(122,93,226,.24) 59.5%, transparent 61.2%),
    repeating-conic-gradient(from 0deg, transparent 0 15deg, rgba(210,185,130,.15) 15deg 16deg, transparent 16deg 30deg),
    radial-gradient(circle at center, rgba(122,93,226,.14), transparent 55%);
  filter: drop-shadow(0 0 30px rgba(122,93,226,.18));
  animation: sectionSigilRotate 48s linear infinite;
}
.section-sigil::before,
.section-sigil::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(224,192,119,.18);
  inset: 11%;
}
.section-sigil::after {
  inset: 27%;
  border-color: rgba(122,93,226,.24);
}
.intro-sigil {
  width: min(36vw, 500px);
  left: -8%;
  top: 11%;
  opacity: .105;
  animation-direction: reverse;
  animation-duration: 56s;
}
.story-sigil-one {
  width: min(38vw, 540px);
  right: -10%;
  top: 5%;
  opacity: .095;
}
.story-sigil-two {
  width: min(28vw, 390px);
  left: -7%;
  bottom: 4%;
  opacity: .075;
  animation-direction: reverse;
  animation-duration: 62s;
}
.gallery-sigil {
  width: min(32vw, 450px);
  right: -5%;
  top: 8%;
  opacity: .075;
  animation-duration: 58s;
}
.community-sigil {
  width: min(44vw, 640px);
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .14;
  animation: communitySigilRotate 52s linear infinite reverse;
  z-index: -1;
}
.section-particles {
  z-index: 1;
  opacity: .58;
}
.intro-section .particle,
.story-section .particle {
  opacity: calc(var(--particle-opacity,.35) * .62);
}

@keyframes sectionSigilRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes communitySigilRotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 1080px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
    gap: 38px;
  }
  .hero h1 { font-size: clamp(2.8rem, 5.3vw, 5rem); }
  .hero-access { padding: 22px; }
  .hero-access .hero-meta { grid-template-columns: 1fr; }
  .hero-access .hero-meta > div { grid-template-columns: 7px 1fr; }
  .hero-access .hero-meta small { grid-column: 2; }
}
@media (max-width: 820px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }
  .hero-copy,
  .hero-access {
    width: min(100%, 650px);
    justify-self: start;
  }
  .hero-access {
    padding: 20px;
    background: rgba(10,9,15,.72);
  }
  .hero-access .hero-meta {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .hero-sigil { right:-18%; top:44%; width:70vw; opacity:.22; }
  .hero-sigil-two { right:50%; top:18%; width:35vw; opacity:.11; }
  .hero-sigil-three { right:8%; top:82%; width:31vw; opacity:.09; }
  .section-sigil { opacity: .07; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.6rem); }
  .hero-access .hero-meta { grid-template-columns: 1fr; }
  .hero-access .hero-meta strong { font-size: .72rem; }
  .hero-explore { width:100%; justify-content:center; }
  .intro-sigil { width:82vw; left:-42%; top:4%; }
  .story-sigil-one { width:92vw; right:-55%; top:2%; }
  .story-sigil-two { width:72vw; left:-44%; bottom:2%; }
  .gallery-sigil { width:80vw; right:-48%; top:4%; }
  .community-sigil { width:100vw; right:-52%; opacity:.09; }
}