/*
  LANDING PAGE PREMIUM DARK FANTASY
  Estrutura pronta para colocar online.

  Organização:
  1. Variáveis globais
  2. Fundo cinematográfico
  3. Header
  4. Hero
  5. Elementos decorativos
  6. Seções/cards/FAQ/footer
  7. Responsivo
*/

:root {
  --bg-0: #020509;
  --bg-1: #06101a;
  --bg-2: #0a1824;
  --panel: rgba(6, 14, 22, 0.90);
  --panel-soft: rgba(11, 24, 36, 0.72);
  --steel: #7f8b95;
  --steel-light: #d8e4ec;
  --white: #f4f8fb;
  --muted: rgba(220, 232, 240, 0.72);
  --border: rgba(221, 235, 244, 0.22);
  --border-strong: rgba(240, 248, 252, 0.44);
  --glow: rgba(158, 204, 238, 0.22);
  --shadow: rgba(0, 0, 0, 0.72);
  --max: 1180px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: #020509;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% -8%, rgba(166, 207, 238, 0.18), transparent 34%),
    radial-gradient(circle at 12% 20%, rgba(118, 157, 188, 0.12), transparent 27%),
    radial-gradient(circle at 90% 40%, rgba(112, 150, 180, 0.13), transparent 29%),
    linear-gradient(180deg, #03070c 0%, #08131d 40%, #020509 100%);
  font-family: 'Inter', Arial, sans-serif;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

body::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92), transparent 18%, transparent 82%, rgba(0,0,0,0.92)),
    radial-gradient(circle at center, transparent 0%, transparent 46%, rgba(0,0,0,0.80) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.page-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 20% 10%, rgba(255,255,255,0.035) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% 28%, rgba(217, 236, 249, 0.08), transparent 22%),
    radial-gradient(circle at 52% 80%, rgba(112, 160, 195, 0.10), transparent 26%);
  mix-blend-mode: screen;
}

.mist {
  position: fixed;
  inset: -22%;
  z-index: 1;
  pointer-events: none;
  filter: blur(28px);
  opacity: 0.72;
}

.mist-one {
  background:
    radial-gradient(ellipse at 12% 28%, rgba(205, 229, 244, 0.12), transparent 32%),
    radial-gradient(ellipse at 76% 18%, rgba(167, 198, 219, 0.12), transparent 28%),
    radial-gradient(ellipse at 50% 64%, rgba(126, 165, 193, 0.12), transparent 30%);
  animation: fogDrift 18s ease-in-out infinite alternate;
}

.mist-two {
  background:
    radial-gradient(ellipse at 15% 76%, rgba(226, 239, 246, 0.08), transparent 30%),
    radial-gradient(ellipse at 86% 78%, rgba(170, 204, 229, 0.11), transparent 28%);
  animation: fogDriftTwo 24s ease-in-out infinite alternate;
}

@keyframes fogDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.4%, 0) scale(1.05); }
}

@keyframes fogDriftTwo {
  from { transform: translate3d(2%, 1%, 0) scale(1.02); }
  to { transform: translate3d(-2%, -1.4%, 0) scale(1.07); }
}

.particle-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(235, 246, 252, 0.78);
  box-shadow: 0 0 10px rgba(235, 246, 252, 0.56);
  animation: floatParticle linear infinite;
}

@keyframes floatParticle {
  from { transform: translate3d(0, 110vh, 0); opacity: 0; }
  12% { opacity: 0.78; }
  82% { opacity: 0.32; }
  to { transform: translate3d(var(--x), -10vh, 0); opacity: 0; }
}

.site-shell {
  position: relative;
  z-index: 5;
  width: min(var(--max), calc(100% - 34px));
  margin: 0 auto;
  padding: 28px 0 74px;
}

.topbar {
  position: sticky;
  top: 16px;
  z-index: 80;
  width: min(1080px, 100%);
  margin: 0 auto 44px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(214, 230, 242, 0.16);
  background: rgba(3, 8, 13, 0.68);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 70px rgba(0,0,0,0.45), inset 0 0 28px rgba(167, 201, 225, 0.035);
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 22%, 99% 100%, 2% 100%, 0 72%, 0 18%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-seal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 242, 248, 0.38);
  border-radius: 50%;
  color: #eff7fb;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.42), transparent 10%),
    radial-gradient(circle at center, rgba(167, 200, 226, 0.16), rgba(2, 6, 10, 0.96) 72%);
  box-shadow: 0 0 24px rgba(154, 190, 214, 0.22), inset 0 0 18px rgba(255,255,255,0.08);
}

.brand-text {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.brand-text small {
  display: block;
  margin-top: 2px;
  color: rgba(203, 218, 229, 0.58);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 23px;
  color: rgba(229, 240, 246, 0.72);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.main-nav a {
  transition: color .25s ease, text-shadow .25s ease;
}

.main-nav a:hover {
  color: white;
  text-shadow: 0 0 14px rgba(215, 235, 248, 0.45);
}

.btn {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.70);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  clip-path: polygon(8% 0, 92% 0, 100% 30%, 100% 70%, 92% 100%, 8% 100%, 0 70%, 0 30%);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.btn::before {
  content: '';
  position: absolute;
  top: -80%;
  left: -35%;
  width: 32%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  transform: rotate(22deg);
  transition: left .65s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:hover::before {
  left: 124%;
}

.btn-light {
  color: #071018;
  background: linear-gradient(180deg, #ffffff, #c9d3db 60%, #f7fbff);
  box-shadow: 0 16px 38px rgba(0,0,0,0.45), 0 0 32px rgba(218, 237, 249, 0.24);
}

.btn-dark,
.btn-ghost {
  color: #edf7ff;
  background: linear-gradient(180deg, rgba(15, 28, 40, 0.94), rgba(4, 9, 14, 0.96));
  border-color: rgba(213, 232, 246, 0.32);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 0 30px rgba(159, 200, 229, 0.06);
}

/*
  PAINEL RECORTADO SEM CORTAR OS ORNAMENTOS
  --------------------------------------------------
  SUBSTITUIÇÃO IMPORTANTE:
  Antes o próprio .panel-broken recebia clip-path. Isso cortava penas, espadas
  e corvos quando eles tentavam sair para fora do layout.

  Agora o recorte irregular fica somente no ::before, que é apenas o fundo do
  painel. O elemento pai fica sem clip-path, permitindo que os PNGs reais
  ultrapassem as bordas como na referência.
*/
.panel-broken {
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none !important;
  overflow: visible !important;
}

.panel-broken::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(214, 230, 242, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 197, 228, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(8, 17, 26, 0.91), rgba(2, 6, 10, 0.96));
  box-shadow:
    0 38px 100px rgba(0,0,0,0.70),
    inset 0 0 90px rgba(140, 178, 207, 0.075),
    inset 0 0 0 1px rgba(255,255,255,0.035);
  clip-path: polygon(4% 0, 96% 0, 100% 5%, 99.2% 35%, 100% 40%, 98.5% 72%, 100% 80%, 96% 100%, 5% 99%, 0 94%, 1% 66%, 0 60%, 1.3% 21%, 0 15%);
}

.panel-broken::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: 48px;
  z-index: 1;
  width: 26%;
  height: 96px;
  pointer-events: none;
  border: 1px solid rgba(217, 232, 241, 0.13);
  background: linear-gradient(145deg, rgba(26, 42, 55, 0.38), rgba(0,0,0,0));
  filter: drop-shadow(0 0 24px rgba(197, 225, 241, 0.08));
  clip-path: polygon(8% 18%, 34% 0, 100% 10%, 88% 78%, 56% 100%, 0 76%);
}

.panel-broken > :not(.real-deco):not(.deco):not(.s-bg):not(.s-ov) {
  position: relative;
  z-index: 3;
}

/* Conteúdo interno centralizado igual ao .section-inner das seções de baixo */
.panel-broken:not(.hero-panel) > :not(.real-deco):not(.deco):not(.s-bg):not(.s-ov) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/*
  ALTERAÇÃO:
  O hero agora fica dentro de um palco externo (.hero-stage).
  Os ornamentos reais ficam nesse palco, fora do painel recortado, para poderem
  ultrapassar as laterais e o topo sem serem cortados pelo clip-path do layout.
*/
.hero-stage {
  position: relative;
  isolation: isolate;
  margin-bottom: 34px;
  overflow: visible;
}

.hero-panel {
  min-height: 830px;
  display: grid;
  align-items: center;
  isolation: isolate;
  padding: 76px 64px 72px;
  margin-bottom: 0;
  overflow: visible;
}

.ornament-atlas {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: contrast(1.18) brightness(1.08) drop-shadow(0 0 40px rgba(180,215,240,0.10));
  mask-image: radial-gradient(circle at center, black 10%, transparent 76%);
}

.ornament-atlas-top {
  width: 760px;
  max-width: 76vw;
  top: -90px;
  right: -140px;
  transform: rotate(-2deg);
}

.ornament-atlas-bottom {
  width: 680px;
  max-width: 82vw;
  bottom: -140px;
  left: -135px;
  transform: rotate(180deg) scaleX(-1);
  opacity: 0.22;
}

/*
  ORNAMENTOS REAIS RECORTADOS
  Alteração feita para usar diretamente a imagem enviada pelo usuário.
  Cada elemento abaixo é um PNG individual recortado: corvo, penas, espada lateral,
  espada com corrente e corvo do rodapé. Assim os objetos ficam nos seus devidos locais
  dentro do template, sem depender dos desenhos antigos em CSS.
*/
.real-deco {
  /*
    ALTERAÇÃO:
    Variáveis usadas pelo JS para devolver o movimento solto no mouse.
    O elemento mantém sua rotação original e ainda ganha deslocamento suave.
  */
  --mouse-x: 0px;
  --mouse-y: 0px;
  --rot: 0deg;
  --scale: 1;

  position: absolute;
  z-index: 12;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  transform: translate3d(var(--mouse-x), var(--mouse-y), 0) rotate(var(--rot)) scale(var(--scale));
  transform-origin: center center;
  translate: 0 0;
  will-change: transform, filter, translate;
  backface-visibility: hidden;
  filter:
    contrast(1.12)
    brightness(1.05)
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 20px rgba(185, 217, 239, 0.10));
  animation:
    realOrnamentBreath 7.5s ease-in-out infinite alternate,
    realOrnamentFloat 6.8s ease-in-out infinite alternate;
}

@keyframes realOrnamentBreath {
  from { filter: contrast(1.08) brightness(1.00) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.76)) drop-shadow(0 0 14px rgba(185, 217, 239, 0.08)); }
  to { filter: contrast(1.18) brightness(1.08) drop-shadow(0 28px 34px rgba(0, 0, 0, 0.82)) drop-shadow(0 0 26px rgba(210, 233, 248, 0.14)); }
}

@keyframes realOrnamentFloat {
  from { translate: 0 -6px; }
  to { translate: 0 8px; }
}

.real-raven-top-left {
  top: -118px;
  left: 34px;
  width: 198px;
  --rot: -5deg;
  --scale: 1;
  z-index: 18;
  animation-duration: 7.5s, 7.2s;
}

.real-feather-left-top {
  top: 168px;
  left: -142px;
  width: 244px;
  --rot: -6deg;
  --scale: 1;
  opacity: 0.96;
  z-index: 16;
  animation-duration: 7.5s, 6.4s;
}

.real-sword-left-main {
  top: 398px;
  left: -188px;
  width: 272px;
  --rot: -2deg;
  --scale: 1;
  z-index: 17;
  animation-duration: 7.5s, 7.8s;
}

.real-sword-chain-right {
  top: -78px;
  right: -152px;
  width: 318px;
  --rot: 0deg;
  --scale: 1;
  z-index: 19;
  animation-duration: 7.5s, 8.1s;
}

.real-feather-right-main {
  top: 560px;
  right: -168px;
  width: 260px;
  --rot: 1deg;
  --scale: 1;
  opacity: 0.94;
  z-index: 15;
  animation-duration: 7.5s, 6.9s;
}

.real-feather-quote {
  left: -165px;
  bottom: -62px;
  width: 252px;
  --rot: 8deg;
  --scale: 1;
  opacity: 0.76;
  z-index: 3;
}

.real-chain-profile {
  top: -128px;
  right: -190px;
  width: 245px;
  --rot: -14deg;
  --scale: 0.76;
  opacity: 0.44;
  z-index: 2;
}

.real-feather-profile {
  top: 42px;
  right: -188px;
  width: 238px;
  --rot: -14deg;
  --scale: 0.82;
  opacity: 0.58;
  z-index: 2;
}

.real-feather-statement-left {
  left: -218px;
  bottom: -78px;
  width: 292px;
  --rot: 8deg;
  --scale: 1;
  opacity: 0.78;
  z-index: 3;
}

.real-feather-statement-right {
  top: -92px;
  right: -210px;
  width: 292px;
  --rot: -4deg;
  --scale: 1;
  opacity: 0.74;
  z-index: 3;
}

.real-raven-faq {
  right: -184px;
  bottom: -124px;
  width: 284px;
  --rot: -2deg;
  --scale: 1;
  opacity: 0.95;
  z-index: 10;
}

.real-feather-footer-left {
  left: -228px;
  bottom: 52px;
  width: 288px;
  --rot: 10deg;
  --scale: 1;
  opacity: 0.76;
  z-index: 3;
}

.real-feather-footer-right {
  top: -34px;
  right: -220px;
  width: 292px;
  --rot: -7deg;
  --scale: 1;
  opacity: 0.76;
  z-index: 3;
}

.hero-content {
  position: relative;
  z-index: 8;
  max-width: 720px;
  padding-top: 145px;
}

.micro-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.micro-cards span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(221, 235, 244, 0.22);
  color: rgba(235, 244, 250, 0.82);
  background: rgba(8, 18, 28, 0.56);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 20px rgba(190,219,238,0.04), 0 16px 34px rgba(0,0,0,0.34);
  clip-path: polygon(8% 0, 92% 0, 100% 24%, 100% 76%, 92% 100%, 8% 100%, 0 76%, 0 24%);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.micro-cards i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #eaf5fb;
  box-shadow: 0 0 18px rgba(230,243,251,0.9);
}

.kicker {
  margin-bottom: 15px;
  color: #4ade80;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.025em;
}

h1 {
  max-width: 790px;
  font-size: clamp(46px, 8vw, 104px);
  text-shadow: 0 0 35px rgba(222, 238, 249, 0.20), 0 12px 52px rgba(0,0,0,0.8);
}

.hero-lead {
  max-width: 555px;
  margin: 25px 0 34px;
  color: rgba(224, 235, 243, 0.78);
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  text-shadow: 0 14px 32px rgba(0,0,0,0.8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-stats {
  position: absolute;
  right: 42px;
  bottom: 42px;
  z-index: 8;
  width: min(490px, calc(100% - 84px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hero-stats article {
  min-height: 94px;
  padding: 16px 14px;
  border: 1px solid rgba(217, 232, 242, 0.18);
  background: rgba(3, 9, 14, 0.58);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 25px rgba(175, 210, 233, 0.04), 0 18px 36px rgba(0,0,0,0.42);
  clip-path: polygon(7% 0, 100% 0, 94% 100%, 0 100%, 0 12%);
}

.hero-stats strong {
  display: block;
  margin-bottom: 6px;
  color: white;
  font-family: 'Cinzel', serif;
  font-size: 22px;
}

.hero-stats span {
  display: block;
  color: rgba(208, 222, 232, 0.68);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Personagem feminina dark fantasy feita em CSS para não depender de banco externo de imagem. */
.hero-figure {
  position: absolute;
  left: 54%;
  bottom: -24px;
  z-index: 5;
  width: min(470px, 48vw);
  height: 760px;
  transform: translateX(-50%);
  opacity: 0.95;
  pointer-events: none;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,0.85));
}

.queen-aura {
  position: absolute;
  left: 50%;
  top: 190px;
  width: 560px;
  height: 420px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(222,235,244,0.20), transparent 24%),
    radial-gradient(ellipse at 20% 46%, rgba(148,188,216,0.13), transparent 32%),
    radial-gradient(ellipse at 80% 56%, rgba(195,219,235,0.11), transparent 30%);
  filter: blur(28px);
  opacity: 0.9;
  animation: pulseSmoke 5.8s ease-in-out infinite alternate;
}

@keyframes pulseSmoke {
  from { opacity: .55; transform: translateX(-50%) scale(.96); }
  to { opacity: .94; transform: translateX(-50%) scale(1.04); }
}

.queen-hair {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 190px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 52% 20%, rgba(255,255,255,0.95), transparent 9%),
    linear-gradient(105deg, #f4f5f2 0%, #9ea8ae 22%, #edf0ec 42%, #727b82 70%, #e8ede9 100%);
  clip-path: polygon(50% 0, 68% 5%, 83% 24%, 88% 53%, 80% 100%, 62% 78%, 50% 100%, 36% 78%, 18% 100%, 11% 52%, 17% 22%, 32% 5%);
  box-shadow: inset 0 -60px 80px rgba(0,0,0,0.58), 0 0 60px rgba(232,241,246,0.20);
}

.queen-face {
  position: absolute;
  left: 50%;
  top: 78px;
  width: 82px;
  height: 112px;
  transform: translateX(-50%);
  border-radius: 44% 44% 48% 48%;
  background: linear-gradient(180deg, #d5d2cc, #8b8f91 72%, #2a3037);
  box-shadow: inset 0 -18px 26px rgba(0,0,0,0.42), 0 0 30px rgba(227,237,244,0.16);
}

.queen-crown {
  position: absolute;
  left: 50%;
  top: 54px;
  width: 134px;
  height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #d8e0e5, #58646d 70%, #111820);
  clip-path: polygon(0 100%, 10% 30%, 22% 100%, 36% 0, 50% 100%, 64% 0, 78% 100%, 90% 30%, 100% 100%);
  filter: drop-shadow(0 0 18px rgba(220,235,244,0.22));
}

.queen-shoulders {
  position: absolute;
  left: 50%;
  top: 180px;
  width: 340px;
  height: 120px;
  transform: translateX(-50%);
  border: 1px solid rgba(215,229,238,0.14);
  background: linear-gradient(180deg, #1b232b, #03070b 76%);
  clip-path: polygon(0 72%, 24% 18%, 50% 0, 76% 18%, 100% 72%, 78% 100%, 22% 100%);
  box-shadow: inset 0 0 42px rgba(190,221,241,0.08), 0 24px 70px rgba(0,0,0,0.76);
}

.queen-body {
  position: absolute;
  left: 50%;
  top: 190px;
  width: 220px;
  height: 515px;
  transform: translateX(-50%);
  border: 1px solid rgba(218,232,242,0.18);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.11), transparent 20%, transparent 78%, rgba(255,255,255,0.12)),
    linear-gradient(180deg, #0f151c 0%, #070b10 44%, #030507 100%);
  clip-path: polygon(50% 0, 71% 7%, 86% 33%, 78% 100%, 22% 100%, 14% 33%, 29% 7%);
  box-shadow: inset 0 0 55px rgba(138, 177, 204, 0.12), 0 0 80px rgba(0,0,0,0.92);
}

.queen-body::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 18%, rgba(255,255,255,0.22), transparent 80%);
  box-shadow: -34px 34px 0 rgba(255,255,255,0.08), 34px 34px 0 rgba(255,255,255,0.08);
}

.queen-arm {
  position: absolute;
  top: 238px;
  width: 96px;
  height: 360px;
  border: 1px solid rgba(220,235,244,0.12);
  background: linear-gradient(180deg, #0b1118, #020406);
  box-shadow: inset 0 0 34px rgba(176,204,223,0.06);
}

.queen-arm-left {
  left: 76px;
  transform: rotate(12deg);
  clip-path: polygon(26% 0, 100% 10%, 74% 100%, 0 90%);
}

.queen-arm-right {
  right: 76px;
  transform: rotate(-12deg);
  clip-path: polygon(0 10%, 74% 0, 100% 90%, 26% 100%);
}

.deco {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}

/* Corvo estilizado */
.raven {
  width: 148px;
  height: 110px;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,0.75)) drop-shadow(0 0 18px rgba(140,170,190,0.16));
}

.raven::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 72px;
  left: 30px;
  top: 24px;
  border-radius: 54% 46% 45% 55%;
  background:
    radial-gradient(circle at 62% 22%, #c9d9e1 0 2px, transparent 3px),
    linear-gradient(135deg, #26313c, #05080c 48%, #111923 100%);
  box-shadow: inset 12px -10px 24px rgba(255,255,255,0.08), inset -18px -18px 30px rgba(0,0,0,0.72);
  transform: rotate(-8deg);
}

.raven::after {
  content: '';
  position: absolute;
  left: 103px;
  top: 40px;
  width: 35px;
  height: 14px;
  background: linear-gradient(90deg, #111820, #05070a);
  clip-path: polygon(0 16%, 100% 50%, 0 100%);
  transform: rotate(-8deg);
}

.raven i {
  position: absolute;
  left: 24px;
  top: 50px;
  width: 86px;
  height: 74px;
  border-radius: 18% 60% 60% 42%;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 8px),
    linear-gradient(145deg, #19232d, #020305 78%);
  clip-path: polygon(14% 0, 100% 10%, 82% 36%, 100% 58%, 68% 58%, 82% 80%, 48% 72%, 56% 100%, 18% 72%, 0 40%);
  transform: rotate(10deg);
}

.raven-left { top: -31px; left: 72px; }
.raven-right { top: -30px; right: 92px; transform: scaleX(-1); }
.raven-footer { right: 115px; bottom: 12px; transform: scale(1.14); }

/* Pena estilizada */
.feather {
  width: 175px;
  height: 54px;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.72));
}

.feather::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(153deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #05080c, #1d2833 44%, #020305 100%);
  clip-path: polygon(0 50%, 12% 22%, 35% 4%, 72% 0, 100% 50%, 72% 100%, 35% 96%, 12% 78%);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.10);
}

.feather::after {
  content: '';
  position: absolute;
  left: 3%;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(235,245,251,0.42), rgba(255,255,255,0.04));
}

.feather-hero-left { top: 270px; left: -42px; transform: rotate(-68deg); }
.feather-hero-right { top: 610px; right: -50px; transform: rotate(-24deg) scale(1.08); }
.feather-quote { bottom: 32px; left: 40px; transform: rotate(30deg) scale(1.12); }
.feather-statement-left { left: 55px; bottom: 40px; transform: rotate(22deg) scale(1.18); }
.feather-statement-right { right: 40px; top: 44px; transform: rotate(-36deg) scale(1.04); }
.feather-footer-left { left: 48px; bottom: 70px; transform: rotate(25deg) scale(1.05); }
.feather-footer-right { right: 58px; top: 54px; transform: rotate(-28deg) scale(1.08); }

/* Espada estilizada */
.sword {
  width: 70px;
  height: 380px;
  filter: drop-shadow(0 26px 28px rgba(0,0,0,0.8)) drop-shadow(0 0 18px rgba(224,235,242,0.20));
}

.sword::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 76px;
  width: 24px;
  height: 276px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(90deg, #505962, #f4f7f7 48%, #4b535c 52%, #d8e0e5 72%, #222933);
  clip-path: polygon(50% 100%, 0 8%, 50% 0, 100% 8%);
}

.sword::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 54px;
  width: 92px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: linear-gradient(90deg, #d6dce0, #303841 28%, #f0f3f4 50%, #303841 72%, #d6dce0);
  box-shadow: 0 0 18px rgba(240,248,252,0.18);
}

.sword i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 72px;
  transform: translateX(-50%);
  border: 1px solid rgba(230,232,229,0.16);
  border-radius: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0 4px, transparent 4px 9px),
    linear-gradient(90deg, #15100e, #706153, #17110e);
}

.sword-left { left: -30px; top: 430px; transform: rotate(25deg); }
.sword-right { right: 50px; top: 118px; transform: rotate(-28deg) scale(.86); }
.sword-profile { right: -32px; top: 120px; transform: rotate(-35deg) scale(.72); opacity: .78; }

/* Corrente estilizada */
.chain {
  width: 66px;
  height: 310px;
  opacity: .88;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,0.75));
}

.chain::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 7%, transparent 0 10px, rgba(182, 190, 196, .78) 11px 15px, transparent 16px),
    radial-gradient(ellipse at 50% 21%, transparent 0 10px, rgba(120, 130, 138, .82) 11px 15px, transparent 16px),
    radial-gradient(ellipse at 50% 35%, transparent 0 10px, rgba(182, 190, 196, .78) 11px 15px, transparent 16px),
    radial-gradient(ellipse at 50% 49%, transparent 0 10px, rgba(120, 130, 138, .82) 11px 15px, transparent 16px),
    radial-gradient(ellipse at 50% 63%, transparent 0 10px, rgba(182, 190, 196, .78) 11px 15px, transparent 16px),
    radial-gradient(ellipse at 50% 77%, transparent 0 10px, rgba(120, 130, 138, .82) 11px 15px, transparent 16px),
    radial-gradient(ellipse at 50% 91%, transparent 0 10px, rgba(182, 190, 196, .78) 11px 15px, transparent 16px);
}

.chain-right { right: -18px; top: -48px; transform: rotate(18deg); }
.chain-profile { left: 78px; top: -58px; transform: rotate(-16deg) scale(.64); opacity: .52; }

.medallion {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(220,232,239,0.32);
  border-radius: 50%;
  color: rgba(234,244,250,0.78);
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.45), transparent 9%),
    radial-gradient(circle at center, #101820, #030507 70%);
  box-shadow: inset 0 0 18px rgba(236,245,250,0.11), 0 22px 28px rgba(0,0,0,0.58), 0 0 18px rgba(220,235,244,0.12);
  font-size: 18px;
  text-shadow: 0 0 12px rgba(235,245,251,0.48);
}

.medallion::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(235,245,251,0.34);
  border-radius: 50%;
}

.medallion-hero { right: 94px; top: 330px; }
.medallion-quote { right: 86px; bottom: 55px; transform: scale(.82); }
.medallion-footer { left: 50%; bottom: 30px; transform: translateX(-50%) scale(.72); }

.ornate-divider {
  position: relative;
  width: min(760px, 82%);
  height: 1px;
  margin: 54px auto;
  background: linear-gradient(90deg, transparent, rgba(231, 241, 247, 0.42), transparent);
  box-shadow: 0 0 18px rgba(231, 241, 247, 0.18);
}

.ornate-divider::before {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 28px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232,242,248,0.28);
  color: rgba(232,242,248,0.82);
  background: linear-gradient(180deg, #15202a, #04070b);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-size: 13px;
}

.quote-panel {
  min-height: 350px;
  display: grid;
  place-items: center;
  padding: 74px 52px;
  text-align: center;
  overflow: visible;
}

.quote-panel h2 {
  max-width: 920px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.12;
}

.quote-panel > p:last-child {
  max-width: 660px;
  margin: 22px auto 0;
  color: rgba(220, 232, 240, 0.70);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  line-height: 1.35;
}

.section-panel {
  margin: 0 auto 34px;
  padding: 58px;
  overflow: visible;
}

.section-heading {
  max-width: 860px;
}

.center-heading {
  margin: 0 auto;
  text-align: center;
}

.section-heading h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  text-shadow: 0 0 24px rgba(223, 239, 250, 0.14), 0 20px 46px rgba(0,0,0,0.66);
}

.section-heading p:not(.kicker) {
  max-width: 760px;
  margin-top: 22px;
  color: rgba(220, 232, 240, 0.74);
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
}

.center-heading p:not(.kicker) {
  margin-left: auto;
  margin-right: auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.dark-card {
  position: relative;
  min-height: 270px;
  padding: 28px 25px;
  overflow: hidden;
  border: 1px solid rgba(219, 234, 244, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(218, 236, 248, 0.11), transparent 28%),
    linear-gradient(180deg, rgba(15, 29, 41, 0.74), rgba(2, 6, 10, 0.82));
  box-shadow: inset 0 0 42px rgba(185, 216, 238, 0.045), 0 22px 44px rgba(0,0,0,0.42);
  clip-path: polygon(8% 0, 100% 0, 100% 88%, 92% 100%, 0 100%, 0 12%);
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.dark-card:hover {
  transform: translateY(-8px);
  border-color: rgba(237, 247, 252, 0.38);
  box-shadow: inset 0 0 54px rgba(202, 229, 246, 0.07), 0 34px 70px rgba(0,0,0,0.58), 0 0 34px rgba(162, 204, 235, 0.12);
}

.dark-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent 18%, transparent 68%, rgba(255,255,255,0.06));
  opacity: .5;
}

.card-index {
  color: rgba(221, 236, 245, 0.52);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: .22em;
}

.card-icon {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 242, 250, 0.18);
  border-radius: 50%;
  color: rgba(239, 247, 252, 0.74);
  background: radial-gradient(circle, rgba(210, 231, 245, 0.12), rgba(0,0,0,0.38));
  box-shadow: inset 0 0 16px rgba(255,255,255,0.06), 0 0 22px rgba(176,211,235,0.11);
}

.dark-card h3 {
  margin-top: 46px;
  font-size: 17px;
  line-height: 1.1;
}

.dark-card p {
  margin-top: 16px;
  color: rgba(218, 231, 240, 0.68);
  font-size: 14px;
  line-height: 1.75;
}

.statement-panel {
  min-height: 480px;
  display: grid;
  place-items: center;
  margin: 54px 0;
  overflow: visible;
  text-align: center;
}

.statement-panel::before {
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(221, 238, 250, 0.18), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,0.82), transparent 45%, rgba(0,0,0,0.82));
  clip-path: none;
}

.statement-panel h2 {
  position: relative;
  z-index: 4;
  max-width: 980px;
  font-size: clamp(20px, 2.2vw, 28px);
}

.method-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 34px;
  align-items: center;
  margin-top: 42px;
}

.ritual-panel {
  min-height: 442px;
  padding: 38px;
  border: 1px solid rgba(221, 236, 245, 0.18);
  background:
    radial-gradient(circle at 50% 20%, rgba(218,235,247,0.13), transparent 26%),
    linear-gradient(180deg, rgba(9, 19, 29, 0.82), rgba(2, 5, 9, 0.92));
  box-shadow: inset 0 0 60px rgba(184, 216, 239, 0.07), 0 28px 65px rgba(0,0,0,0.52);
  clip-path: polygon(8% 0, 92% 0, 100% 10%, 98% 100%, 2% 100%, 0 10%);
}

.ritual-panel h3 {
  font-size: 18px;
  line-height: 1.05;
}

.ritual-panel p:not(.kicker) {
  margin-top: 20px;
  color: rgba(219, 231, 240, 0.72);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  line-height: 1.35;
}

.ritual-panel ul {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  list-style: none;
}

.ritual-panel li {
  display: flex;
  gap: 12px;
  color: rgba(226, 238, 246, 0.76);
  line-height: 1.6;
  font-size: 14px;
}

.ritual-panel li::before {
  content: '✦';
  color: rgba(238, 247, 252, 0.84);
  text-shadow: 0 0 14px rgba(238, 247, 252, 0.45);
}

.light-card-stack {
  display: grid;
  gap: 14px;
}

.light-card {
  position: relative;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(214, 230, 242, 0.18);
  color: rgba(220, 234, 244, 0.88);
  background:
    linear-gradient(180deg, rgba(8, 17, 26, 0.82), rgba(4, 11, 18, 0.90)),
    radial-gradient(circle at 50% 0%, rgba(154, 197, 228, 0.08), transparent 28%);
  box-shadow: 0 18px 45px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.04);
  clip-path: polygon(5% 0, 100% 0, 96% 100%, 0 100%, 0 16%);
  transition: transform .25s ease, box-shadow .25s ease;
}

.light-card:hover {
  transform: translateX(8px);
  box-shadow: 0 24px 55px rgba(0,0,0,0.55), 0 0 48px rgba(235, 247, 255, 0.26);
}

.light-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  transform: skewX(-18deg);
  opacity: .55;
}

.light-card:hover::before {
  animation: shine .9s ease;
}

@keyframes shine {
  to { left: 120%; }
}

.light-card strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.light-card span {
  display: block;
  margin-top: 8px;
  color: rgba(190, 214, 232, 0.68);
  line-height: 1.58;
  font-size: 14px;
}

.center-action {
  display: grid;
  place-items: center;
  padding: 34px 0 4px;
}

.faq-list {
  display: grid;
  gap: 13px;
  margin-top: 40px;
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq-item {
  border: 1px solid rgba(220, 235, 245, 0.18);
  background: rgba(5, 12, 18, 0.62);
  backdrop-filter: blur(12px);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%, 0 18%);
  box-shadow: inset 0 0 32px rgba(182, 216, 238, 0.035), 0 16px 32px rgba(0,0,0,0.35);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 25px;
  border: 0;
  cursor: pointer;
  color: rgba(239, 247, 252, 0.92);
  background: transparent;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.faq-question i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(232,242,248,0.28);
  border-radius: 50%;
  color: white;
  font-style: normal;
  transition: transform .25s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.faq-answer p {
  padding: 0 25px 24px;
  color: rgba(216, 229, 239, 0.70);
  line-height: 1.75;
  font-size: 15px;
}

.faq-item.active .faq-answer {
  max-height: 190px;
}

.faq-item.active .faq-question i {
  transform: rotate(45deg);
}

.footer-panel {
  min-height: 385px;
  display: grid;
  place-items: center;
  padding: 74px 30px;
  overflow: visible;
  text-align: center;
}

.footer-panel::before {
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(205, 229, 244, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(7, 15, 23, 0.82), rgba(0,0,0,0.94));
  clip-path: none;
}

.footer-panel h2,
.footer-panel p,
.footer-panel a,
.footer-panel small {
  position: relative;
  z-index: 3;
}

.footer-panel h2 {
  max-width: 880px;
  font-size: clamp(20px, 2.2vw, 26px);
}

.footer-panel p {
  max-width: 590px;
  margin: 20px auto 28px;
  color: rgba(220,232,240,0.72);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.footer-panel small {
  display: block;
  margin-top: 28px;
  color: rgba(214, 228, 238, 0.42);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 980px) {

  .real-raven-top-left { left: 20px; top: -52px; width: 140px; }
  .real-feather-left-top { left: -78px; width: 180px; }
  .real-sword-left-main { left: -126px; width: 190px; }
  .real-sword-chain-right { right: -92px; top: -105px; width: 230px; }
  .real-feather-right-main { right: -108px; width: 200px; }
  .real-chain-profile,
  .real-feather-profile { display: none; }
  .main-nav { display: none; }

  .hero-panel {
    min-height: 800px;
    padding: 58px 34px 180px;
  }

  .hero-content { padding-top: 130px; }

  .hero-figure {
    width: 420px;
    opacity: .56;
  }

  .hero-stats {
    left: 28px;
    right: 28px;
    bottom: 32px;
    width: auto;
  }

  .cards-grid,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .section-panel { padding: 42px 28px; }
  .sword-left { left: -54px; }
  .sword-right, .raven-right { right: -30px; }
}

@media (max-width: 680px) {

  .real-raven-top-left { width: 104px; left: 8px; top: -36px; }
  .real-sword-chain-right { width: 178px; right: -112px; top: -82px; opacity: .78; }
  .real-feather-left-top { width: 135px; left: -92px; top: 210px; opacity: .64; }
  .real-sword-left-main { width: 150px; left: -118px; top: 430px; opacity: .76; }
  .real-feather-right-main { width: 155px; right: -108px; top: 610px; opacity: .62; }
  .real-feather-quote,
  .real-feather-statement-left,
  .real-feather-statement-right,
  .real-feather-footer-left,
  .real-feather-footer-right { opacity: .52; }
  .real-raven-faq { width: 175px; right: -128px; bottom: -72px; opacity: .78; }
  .site-shell {
    width: min(100% - 22px, var(--max));
    padding-top: 14px;
  }

  .topbar { top: 8px; }
  .topbar .btn-ghost { display: none; }

  .brand-text { font-size: 12px; }

  .hero-panel {
    min-height: 840px;
    padding: 46px 22px 255px;
    clip-path: none !important;
  }

  .hero-content { padding-top: 120px; }

  h1 { font-size: clamp(42px, 14vw, 70px); }
  .hero-lead { font-size: 16px; }

  .hero-actions { align-items: stretch; }
  .btn { width: 100%; }

  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats article { min-height: 76px; }

  .hero-figure {
    left: auto;
    right: -90px;
    width: 360px;
    transform: none;
    opacity: .34;
  }

  .raven-left { left: 8px; transform: scale(.72); }
  .raven-right { display: none; }
  .raven-footer { right: -18px; transform: scale(.8); }

  .feather,
  .chain-profile,
  .medallion-quote,
  .sword-profile {
    opacity: .44;
  }

  .section-panel,
  .quote-panel { padding: 38px 20px; }

  .quote-panel h2 { font-size: clamp(28px, 10vw, 44px); }
  .dark-card { min-height: 230px; }
  .method-grid { gap: 22px; }
}


/* =========================================================
   CORREÇÃO FINAL — HERO BUGADO + ORNAMENTOS FORA DO LAYOUT
   ---------------------------------------------------------
   - Mantém penas, espadas e corvos fora da moldura, sem fundo escuro atrás.
   - Remove o pseudo-bloco ::after que estava parecendo uma caixa bugada atrás das penas.
   - Reorganiza o hero para os cards inferiores não cobrirem os botões.
   - Mantém o parallax/movimento dos ornamentos no mouse.
   ========================================================= */
.panel-broken::after {
  display: none !important;
}

@media (min-width: 981px) {
  .hero-panel {
    min-height: 900px;
    padding: 70px 64px 132px;
  }

  .hero-content {
    max-width: 660px;
    padding-top: 70px;
    padding-bottom: 118px;
  }

  h1 {
    max-width: 720px;
    font-size: clamp(46px, 6.4vw, 86px);
    line-height: 1.03;
  }

  .hero-lead {
    max-width: 560px;
    margin: 22px 0 28px;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.7;
  }

  .hero-actions {
    position: relative;
    z-index: 30;
    margin-top: 18px;
  }

  .hero-stats {
    right: 50px;
    bottom: 54px;
    width: min(460px, calc(100% - 100px));
    z-index: 12;
  }

  .hero-figure {
    left: 60%;
    width: min(420px, 42vw);
    opacity: 0.70;
  }

  .real-raven-top-left {
    top: -118px;
    left: 22px;
    width: 188px;
  }

  .real-feather-left-top {
    top: 165px;
    left: -158px;
    width: 250px;
  }

  .real-sword-left-main {
    top: 385px;
    left: -205px;
    width: 280px;
  }

  .real-sword-chain-right {
    top: -82px;
    right: -170px;
    width: 326px;
  }

  .real-feather-right-main {
    top: 555px;
    right: -190px;
    width: 268px;
  }

  .real-feather-statement-left {
    left: -250px;
    bottom: -118px;
    width: 304px;
    z-index: 7;
  }

  .real-feather-statement-right {
    top: -118px;
    right: -250px;
    width: 304px;
    z-index: 7;
  }

  .real-feather-footer-left {
    left: -260px;
    bottom: 42px;
    width: 302px;
    z-index: 7;
  }

  .real-feather-footer-right {
    top: -86px;
    right: -260px;
    width: 302px;
    z-index: 7;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .hero-panel {
    min-height: 880px;
    padding: 52px 34px 260px;
  }

  .hero-content {
    padding-top: 96px;
    padding-bottom: 0;
  }

  .hero-stats {
    left: 34px;
    right: 34px;
    bottom: 34px;
    width: auto;
  }

  .hero-actions {
    position: relative;
    z-index: 30;
  }
}

@media (max-width: 680px) {
  .hero-panel {
    min-height: 920px;
    padding: 42px 22px 300px;
  }

  .hero-content {
    padding-top: 108px;
  }

  .hero-actions {
    position: relative;
    z-index: 30;
  }
}

/* =========================================================
   CORREÇÃO BRUNOBR — HERO SEM VAZIO E SEM USAR METADE DO LAYOUT
   ---------------------------------------------------------
   ALTERAÇÃO 1:
   O .hero-panel deixou de centralizar o conteúdo verticalmente.
   Antes o align-items:center empurrava o texto para o meio/baixo do painel,
   criando um espaço vazio muito grande no topo.

   ALTERAÇÃO 2:
   O conteúdo do hero agora fica alinhado no topo útil do painel e ocupa a
   coluna esquerda com largura controlada, igual ao modelo premium enviado.

   ALTERAÇÃO 3:
   O bloco de estatísticas deixou de ficar pequeno em apenas metade do layout.
   Agora ele ocupa a largura inferior do hero, usando melhor o espaço.

   ALTERAÇÃO 4:
   A personagem/figura foi reposicionada para a direita, sem criar um grande
   buraco acima do texto. Ela continua atmosférica, mas não manda no fluxo.
   ========================================================= */
@media (min-width: 981px) {
  .hero-panel {
    min-height: 820px !important;
    align-items: start !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.8fr) !important;
    padding: 96px 64px 190px !important;
  }

  .hero-content {
    align-self: start !important;
    grid-column: 1 / 2 !important;
    max-width: 650px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .micro-cards {
    margin-bottom: 24px !important;
  }

  h1 {
    max-width: 650px !important;
    font-size: clamp(54px, 6vw, 82px) !important;
    line-height: 1.02 !important;
  }

  .hero-lead {
    max-width: 560px !important;
    margin: 24px 0 30px !important;
  }

  .hero-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-figure {
    left: auto !important;
    right: 72px !important;
    bottom: 150px !important;
    width: min(430px, 38vw) !important;
    height: 660px !important;
    transform: none !important;
    opacity: 0.68 !important;
  }

  .queen-aura {
    top: 128px !important;
    width: 520px !important;
    height: 430px !important;
  }

  .hero-stats {
    left: 64px !important;
    right: 64px !important;
    bottom: 54px !important;
    width: auto !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    border: 1px solid rgba(217, 232, 242, 0.18);
    background: rgba(3, 9, 14, 0.48);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 0 48px rgba(175, 210, 233, 0.045), 0 24px 58px rgba(0,0,0,0.50);
    clip-path: polygon(2.5% 0, 97.5% 0, 100% 16%, 100% 84%, 97.5% 100%, 2.5% 100%, 0 84%, 0 16%);
    overflow: hidden;
  }

  .hero-stats article {
    min-height: 138px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 0 !important;
    border-right: 1px solid rgba(217, 232, 242, 0.14) !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  .hero-stats article:last-child {
    border-right: 0 !important;
  }

  .hero-stats strong {
    font-size: 44px !important;
    margin-bottom: 12px !important;
  }

  .hero-stats span {
    max-width: 210px;
    font-size: 12px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.12em !important;
  }
}

/* Tablet: evita que o hero crie vazio no topo e mantém os cards no final. */
@media (min-width: 681px) and (max-width: 980px) {
  .hero-panel {
    min-height: 820px !important;
    align-items: start !important;
    padding: 96px 34px 245px !important;
  }

  .hero-content {
    padding-top: 0 !important;
    max-width: 620px !important;
  }

  .hero-figure {
    left: auto !important;
    right: -20px !important;
    bottom: 150px !important;
    width: 380px !important;
    height: 620px !important;
    transform: none !important;
    opacity: 0.42 !important;
  }

  .hero-stats {
    left: 34px !important;
    right: 34px !important;
    bottom: 34px !important;
    width: auto !important;
  }
}

/* Celular: mantém leitura limpa, sem buraco no topo e sem cards cobrindo botão. */
@media (max-width: 680px) {
  .hero-panel {
    min-height: auto !important;
    align-items: start !important;
    padding: 86px 22px 34px !important;
  }

  .hero-content {
    padding-top: 0 !important;
    max-width: 100% !important;
  }

  .hero-figure {
    right: -120px !important;
    bottom: 150px !important;
    width: 330px !important;
    height: 560px !important;
    opacity: 0.22 !important;
  }

  .hero-stats {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 34px !important;
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   CORREÇÃO BRUNOBR — SITE MAIS LARGO / HERO CINEMATOGRÁFICO
   ---------------------------------------------------------
   ALTERAÇÃO 1:
   A largura máxima global foi aumentada para o template ocupar mais tela
   no desktop, parecido com a prévia premium enviada anteriormente.

   ALTERAÇÃO 2:
   O menu/topbar também ficou mais largo para acompanhar o hero e não parecer
   pequeno no centro da página.

   ALTERAÇÃO 3:
   O hero ganhou duas colunas mais equilibradas: texto à esquerda e personagem
   à direita, usando melhor a largura sem criar aquele vazio gigante.

   ALTERAÇÃO 4:
   Os cards 07 / 21 / AAA continuam ocupando a base inteira do hero, mas com
   mais largura e presença visual.
   ========================================================= */
:root {
  --max: 1480px;
}

.site-shell {
  width: min(var(--max), calc(100% - 48px));
}

.topbar {
  width: min(1420px, 100%);
}

@media (min-width: 1200px) {
  .hero-panel {
    min-height: 940px !important;
    grid-template-columns: minmax(560px, 0.9fr) minmax(520px, 1fr) !important;
    padding: 112px 78px 220px !important;
  }

  .hero-content {
    max-width: 705px !important;
  }

  h1 {
    max-width: 720px !important;
    font-size: clamp(68px, 5.5vw, 98px) !important;
    line-height: 1.01 !important;
  }

  .hero-lead {
    max-width: 650px !important;
    font-size: clamp(15px, 1.5vw, 17px) !important;
  }

  .hero-figure {
    right: 120px !important;
    bottom: 175px !important;
    width: min(500px, 34vw) !important;
    height: 700px !important;
    opacity: 0.72 !important;
  }

  .queen-aura {
    top: 120px !important;
    width: 620px !important;
    height: 500px !important;
  }

  .hero-stats {
    left: 78px !important;
    right: 78px !important;
    bottom: 58px !important;
  }

  .hero-stats article {
    min-height: 152px !important;
  }

  .hero-stats strong {
    font-size: 48px !important;
  }

  .hero-stats span {
    max-width: 280px !important;
    font-size: 13px !important;
  }

  .real-raven-top-left {
    left: 32px !important;
  }

  .real-sword-chain-right {
    right: -150px !important;
  }

  .real-feather-right-main {
    right: -176px !important;
  }

  .real-sword-left-main {
    left: -198px !important;
  }
}

@media (min-width: 1500px) {
  .site-shell {
    width: min(1540px, calc(100% - 64px));
  }

  .topbar {
    width: min(1480px, 100%);
  }

  .hero-panel {
    min-height: 970px !important;
    padding-left: 92px !important;
    padding-right: 92px !important;
  }

  .hero-figure {
    right: 150px !important;
    width: min(530px, 32vw) !important;
  }

  .hero-stats {
    left: 92px !important;
    right: 92px !important;
  }
}

@media (max-width: 680px) {
  .site-shell {
    width: min(100% - 22px, var(--max));
  }
}

/* =========================================================
   AJUSTE BRUNOBR — MENU FULL SIZE + SITE UM POUCO MAIS LARGO
   ---------------------------------------------------------
   ALTERAÇÃO 1:
   O menu superior agora pega a largura total da tela (100vw), de ponta a ponta.
   Mantive o conteúdo interno com espaçamento lateral para não colar nas bordas.

   ALTERAÇÃO 2:
   O site ficou um pouco mais largo no desktop, mas sem virar totalmente full width.
   Assim o painel principal ganha presença cinematográfica sem perder leitura.

   ALTERAÇÃO 3:
   A imagem enviada foi colocada como BG separado do HERO, por baixo das camadas
   de sombra/fumaça. Ela aparece de forma escura e atmosférica, sem atrapalhar o texto.
   Arquivo usado: assets/img/bg-about.jpg
   ========================================================= */
:root {
  --max: 1640px;
}

.site-shell {
  width: min(var(--max), calc(100% - 28px)) !important;
  padding-top: 0 !important;
}

.topbar {
  width: 100vw !important;
  max-width: none !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  margin-bottom: 42px !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
  padding: 16px clamp(22px, 4vw, 82px) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-color: rgba(214, 230, 242, 0.18) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background:
    linear-gradient(90deg, rgba(2, 6, 10, 0.96), rgba(4, 11, 17, 0.88) 22%, rgba(4, 11, 17, 0.88) 78%, rgba(2, 6, 10, 0.96)),
    rgba(3, 8, 13, 0.84) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,0.48),
    inset 0 -1px 0 rgba(220, 236, 246, 0.13),
    inset 0 0 32px rgba(167, 201, 225, 0.04) !important;
}

.main-nav {
  flex: 1 !important;
  justify-content: center !important;
}

.hero-stage {
  margin-top: 0 !important;
}

.hero-panel::before {
  display: none !important;
}

@media (min-width: 1200px) {
  .hero-panel {
    min-height: 960px !important;
    padding-left: 92px !important;
    padding-right: 92px !important;
  }

  .hero-content {
    max-width: 730px !important;
  }

  .hero-stats {
    left: 92px !important;
    right: 92px !important;
  }
}

@media (min-width: 1600px) {
  .site-shell {
    width: min(1660px, calc(100% - 36px)) !important;
  }

  .hero-panel {
    padding-left: 104px !important;
    padding-right: 104px !important;
  }

  .hero-stats {
    left: 104px !important;
    right: 104px !important;
  }
}

@media (max-width: 980px) {
  .topbar {
    padding: 13px 18px !important;
    margin-bottom: 28px !important;
  }

  .site-shell {
    width: min(100% - 20px, var(--max)) !important;
  }
}

/* =========================================================
   CORREÇÃO BRUNOBR — BG DO TOPO VISÍVEL E CENTRALIZADO
   ---------------------------------------------------------
   ALTERAÇÃO 1:
   A imagem de fundo do topo usa o asset real assets/images/l2jnbr.webp.
   A referencia antiga apontava para um arquivo que nao existe mais
   e ainda ficava escondida pelas camadas de sombra do hero.

   ALTERAÇÃO 2:
   O background foi aplicado também no palco externo do hero
   (.hero-stage::before), ocupando 100vw. Assim a parte de cima fica
   parecida com a referência: imagem ampla, centralizada e preenchendo
   a largura da tela atrás do bloco principal.

   ALTERAÇÃO 3:
   O painel do hero continua largo, mas sem virar totalmente full width.
   Ele ficou um pouco maior para aproveitar melhor o desktop.
   ========================================================= */
:root {
  --max: 1720px;
}

.site-shell {
  width: min(var(--max), calc(100% - 22px)) !important;
}

.hero-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  padding-top: 18px !important;
}

.hero-stage::before {
  content: '';
  position: absolute;
  top: -42px;
  left: 50%;
  width: 100vw;
  height: 760px;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(2, 5, 9, 0.10) 0%, rgba(2, 5, 9, 0.28) 38%, rgba(2, 5, 9, 0.86) 82%, rgba(2, 5, 9, 1) 100%),
    radial-gradient(circle at 50% 9%, rgba(220, 238, 250, 0.22), transparent 25%),
    url('../images/l2jnbr.webp') center top / cover no-repeat;
  filter: saturate(1.06) contrast(1.06);
  opacity: 1;
}

.hero-stage::after {
  content: '';
  position: absolute;
  top: -42px;
  left: 50%;
  width: 100vw;
  height: 760px;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(0,0,0,0.90) 0%, transparent 13%, transparent 87%, rgba(0,0,0,0.90) 100%),
    radial-gradient(circle at 50% 25%, transparent 0%, transparent 52%, rgba(0,0,0,0.44) 100%);
}

.hero-stage > * {
  position: relative;
}

.hero-panel {
  z-index: 3 !important;
}

.hero-panel::before {
  display: none !important;
}

@media (min-width: 1200px) {
  .hero-panel {
    min-height: 930px !important;
    padding-left: clamp(88px, 5vw, 116px) !important;
    padding-right: clamp(88px, 5vw, 116px) !important;
  }

  .hero-content {
    max-width: 760px !important;
  }

  .hero-figure {
    right: clamp(90px, 10vw, 210px) !important;
    opacity: 0.64 !important;
  }

  .hero-stats {
    left: clamp(88px, 5vw, 116px) !important;
    right: clamp(88px, 5vw, 116px) !important;
  }
}

@media (min-width: 1700px) {
  .site-shell {
    width: min(1760px, calc(100% - 26px)) !important;
  }

  .hero-stage::before,
  .hero-stage::after {
    height: 790px;
  }
}

@media (max-width: 980px) {
  .hero-stage::before,
  .hero-stage::after {
    height: 620px;
  }
}

/* =========================================================
   HOTFIX BRUNOBR — MENU FULL + HERO COM BG SEM BUG
   ---------------------------------------------------------
   SUBSTITUIR/ALTERAÇÃO:
   Esta correção remove o fundo separado que criou o vazio gigante no topo.
   Agora a imagem de BG fica dentro do próprio hero, com o texto, personagem
   e cards usando a mesma área visual, sem quebrar o layout.
   ========================================================= */
:root {
  --max: 1680px;
}

.site-shell {
  width: min(var(--max), calc(100% - 28px)) !important;
  margin: 0 auto !important;
  padding: 0 0 74px !important;
}

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 28px 50% !important;
  transform: translateX(-50%) !important;
  padding: 14px clamp(24px, 4vw, 86px) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(214, 230, 242, 0.18) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background:
    linear-gradient(90deg, rgba(1, 5, 9, 0.98), rgba(4, 11, 17, 0.92) 22%, rgba(4, 11, 17, 0.92) 78%, rgba(1, 5, 9, 0.98)),
    rgba(3, 8, 13, 0.92) !important;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.48),
    inset 0 -1px 0 rgba(220, 236, 246, 0.10) !important;
}

.hero-stage {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 34px !important;
  min-height: auto !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/*
  ALTERAÇÃO IMPORTANTE:
  Desativa a camada externa de background que estava abrindo um espaço visual
  enorme acima do conteúdo. O BG agora pertence ao .hero-panel::before.
*/
.hero-stage::before,
.hero-stage::after {
  display: none !important;
  content: none !important;
}

.hero-stage > * {
  position: absolute;
}

.hero-stage > .hero-panel {
  position: relative !important;
}

.hero-panel {
  z-index: 3 !important;
  min-height: 900px !important;
  display: grid !important;
  grid-template-columns: minmax(560px, 0.92fr) minmax(520px, 1fr) !important;
  align-items: start !important;
  padding: 104px clamp(74px, 5vw, 112px) 210px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.hero-panel::before {
  display: none !important;
}

/* Hero — clip-path nas camadas de fundo via main.css */

/* Wrappers de seção — permitem ornamentos externos ao clip-path da seção */
.faq-stage,
.section-stage {
  position: relative;
  overflow: visible;
}

/* Ornamentos — Login/Cadastro */
.real-crown-conta-left {
  top: -50px; left: -120px; width: 210px;
  --rot: -10deg; --scale: 1; opacity: 0.68; z-index: 3;
}
.real-chalice-conta-right {
  bottom: 10px; right: -125px; width: 200px;
  --rot: 8deg; --scale: 1; opacity: 0.65; z-index: 3;
}

/* Ornamentos — Mídia */
.real-raven-media-left {
  bottom: -60px; left: -148px; width: 225px;
  --rot: 5deg; --scale: 1; opacity: 0.72; z-index: 3;
}
.real-skull-media-right {
  top: 30px; right: -128px; width: 205px;
  --rot: -8deg; --scale: 1; opacity: 0.62; z-index: 3;
}

/* Ornamentos — Rankings */
.real-chest-rankings-left {
  bottom: -20px; left: -138px; width: 230px;
  --rot: 6deg; --scale: 1; opacity: 0.68; z-index: 3;
}
.real-axe-rankings-right {
  top: -30px; right: -142px; width: 220px;
  --rot: -7deg; --scale: 1; opacity: 0.72; z-index: 3;
}


/* Ornamentos — Quickstart */
.real-spear-quickstart-left {
  top: -60px; left: -110px; width: 85px;
  --rot: -15deg; --scale: 1; opacity: 0.68; z-index: 3;
}
.real-grimoire-quickstart-right {
  bottom: -30px; right: -138px; width: 215px;
  --rot: 8deg; --scale: 1; opacity: 0.65; z-index: 3;
}

/* Ornamentos — FAQ */

/* Ornamentos — Notícias */
.real-banner-noticias-left {
  bottom: 20px; left: -70px; width: 88px;
  --rot: 5deg; --scale: 1; opacity: 0.62; z-index: 3;
}
.real-pendant-noticias-right {
  top: -40px; right: -65px; width: 80px;
  --rot: -8deg; --scale: 1; opacity: 0.62; z-index: 3;
}


/* Seções panel-broken que precisam do corte no próprio container (ID > !important de classe) */
#features,
#quickstart,
#faq {
  clip-path: polygon(4% 0, 96% 0, 100% 5%, 99.2% 35%, 100% 40%, 98.5% 72%, 100% 80%, 96% 100%, 5% 99%, 0 94%, 1% 66%, 0 60%, 1.3% 21%, 0 15%) !important;
  overflow: hidden !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.hero-content {
  grid-column: 1 / 2 !important;
  align-self: start !important;
  max-width: 760px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 20 !important;
}

.micro-cards {
  margin-bottom: 24px !important;
}

/* ── SCROLLBAR CUSTOMIZADA ── */
::-webkit-scrollbar {
  width: 4px;
  background: #020509;
}
::-webkit-scrollbar-track {
  background: #020509;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(74,222,128,0.7), rgba(74,222,128,0.25));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(74,222,128,0.95), rgba(74,222,128,0.6));
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(74,222,128,0.55) #020509;
}

/* ── AUTH SECTION — customizações v3 ── */

/* Link "Esqueceu seu acesso?" discreto */
.auth-recover-link {
  margin-top: 14px;
  text-align: center;
}
.auth-recover-link button {
  background: none;
  border: none;
  font-size: 12px;
  color: rgba(200, 180, 120, 0.45);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.auth-recover-link button:hover {
  color: var(--gold-light, #e8b84b);
}

/* Card de batalha */
.auth-card-battle {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 28px 28px !important;
}

.auth-battle-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.auth-battle-rune {
  font-size: 22px;
  color: #4ade80;
  line-height: 1;
  margin-top: 3px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(74,222,128,0.5));
}
.auth-battle-sub {
  font-size: 12px;
  color: rgba(220,232,240,0.55);
  margin: 0;
  line-height: 1.5;
}

.auth-battle-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,0.3), transparent);
  margin: 10px 0;
}

/* Perks */
.auth-perks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.auth-perk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.auth-perk-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(74,222,128,0.10);
  border: 1px solid rgba(74,222,128,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.auth-perk strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.auth-perk span {
  font-size: 11px;
  color: rgba(220,232,240,0.55);
  line-height: 1.45;
}

/* Stats row */
.auth-battle-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
}
.auth-bstat {
  flex: 1;
  text-align: center;
}
.auth-bstat span {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: #4ade80;
  line-height: 1;
  margin-bottom: 3px;
}
.auth-bstat em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(220,232,240,0.4);
}
.auth-bstat-sep {
  width: 1px;
  height: 28px;
  background: rgba(74,222,128,0.2);
  flex-shrink: 0;
}

.auth-battle-btn {
  width: 100%;
  justify-content: center;
  font-size: 13px;
  padding: 13px;
  letter-spacing: 0.08em;
  margin-top: auto;
  margin-bottom: 48px;
}

/* Tamanho dos botões auth — igual à v3 */
#auth-login-btn,
.auth-battle-btn {
  width: 100% !important;
  min-height: 82px !important;
  align-self: center;
  padding: 15px 40px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap;
}

h1 {
  max-width: 760px !important;
  font-size: clamp(62px, 5.7vw, 98px) !important;
  line-height: 1.02 !important;
}

.hero-lead {
  max-width: 650px !important;
  margin: 26px 0 32px !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.7 !important;
}

.hero-actions {
  position: relative !important;
  z-index: 35 !important;
  margin: 0 !important;
}

.hero-figure {
  left: auto !important;
  right: clamp(72px, 8vw, 180px) !important;
  top: 96px !important;
  bottom: auto !important;
  width: min(500px, 32vw) !important;
  height: 670px !important;
  transform: none !important;
  opacity: 0.70 !important;
  z-index: 8 !important;
}

.queen-aura {
  top: 118px !important;
  width: 620px !important;
  height: 500px !important;
}

.hero-stats {
  left: clamp(74px, 5vw, 112px) !important;
  right: clamp(74px, 5vw, 112px) !important;
  bottom: 52px !important;
  top: auto !important;
  width: auto !important;
  z-index: 24 !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border: 1px solid rgba(217, 232, 242, 0.18) !important;
  background: rgba(3, 9, 14, 0.50) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 0 48px rgba(175, 210, 233, 0.045), 0 24px 58px rgba(0,0,0,0.50) !important;
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 16%, 100% 84%, 97.5% 100%, 2.5% 100%, 0 84%, 0 16%) !important;
  overflow: hidden !important;
}

.hero-stats article {
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  border: 0 !important;
  border-right: 1px solid rgba(217, 232, 242, 0.14) !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.hero-stats article:last-child {
  border-right: 0 !important;
}

.hero-stats strong {
  font-size: 46px !important;
  margin-bottom: 12px !important;
}

.hero-stats span {
  max-width: 260px !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.12em !important;
}

@media (min-width: 1700px) {
  .site-shell {
    width: min(1740px, calc(100% - 34px)) !important;
  }

  .hero-panel {
    min-height: 940px !important;
    padding-left: 118px !important;
    padding-right: 118px !important;
  }

  .hero-stats {
    left: 118px !important;
    right: 118px !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .hero-panel {
    min-height: 860px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 78px 56px 220px !important;
  }

  .hero-content {
    max-width: 660px !important;
  }

  .hero-figure {
    right: -34px !important;
    top: 80px !important;
    width: 400px !important;
    opacity: 0.38 !important;
  }

  .hero-stats {
    left: 56px !important;
    right: 56px !important;
  }
}

@media (max-width: 980px) {
  .site-shell {
    width: min(100% - 20px, var(--max)) !important;
  }

  .topbar {
    margin-bottom: 22px !important;
    padding: 13px 18px !important;
  }

  .hero-panel {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 70px 28px 34px !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .hero-figure {
    right: -92px !important;
    top: 40px !important;
    bottom: auto !important;
    width: 360px !important;
    height: 570px !important;
    opacity: 0.24 !important;
  }

  .hero-stats {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 38px !important;
    grid-template-columns: 1fr !important;
  }

  .hero-stats article {
    min-height: 92px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(217, 232, 242, 0.14) !important;
  }

  .hero-stats article:last-child {
    border-bottom: 0 !important;
  }
}

/* =========================================================
   HOTFIX BRUNOBR — HERO CENTRALIZADO + REMOÇÃO DOS CARDS 07/21/AAA
   ---------------------------------------------------------
   SUBSTITUIR/ALTERAÇÃO:
   - Centraliza o bloco principal do hero que estava preso à esquerda.
   - Centraliza micro-cards, título, descrição e botões.
   - Remove o bloco de estatísticas 07 / 21 / AAA marcado em vermelho.
   - Reduz o espaço inferior que existia para acomodar esses cards.
   ========================================================= */
.hero-panel {
  grid-template-columns: 1fr !important;
  place-items: center !important;
  align-items: center !important;
  min-height: 880px !important;
  padding: 110px clamp(56px, 7vw, 132px) 96px !important;
}

.hero-content {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.micro-cards {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.kicker,
.hero-content h1,
.hero-lead {
  text-align: center !important;
}

.hero-content h1,
h1 {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-lead {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-actions {
  justify-content: center !important;
  align-items: center !important;
}

.hero-stats {
  display: none !important;
}

.hero-figure {
  left: clamp(24px, 6vw, 112px) !important;
  right: auto !important;
  top: 82px !important;
  opacity: 0.42 !important;
  z-index: 7 !important;
}

@media (min-width: 1500px) {
  .hero-panel {
    min-height: 900px !important;
  }

  .hero-content {
    width: min(980px, 100%) !important;
    max-width: 980px !important;
  }

  .hero-content h1,
  h1 {
    max-width: 980px !important;
    font-size: clamp(68px, 5.4vw, 108px) !important;
  }
}

@media (max-width: 980px) {
  .hero-panel {
    min-height: auto !important;
    padding: 76px 26px 50px !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .micro-cards,
  .hero-actions {
    justify-content: center !important;
  }

  .hero-figure {
    left: 50% !important;
    right: auto !important;
    top: 32px !important;
    transform: translateX(-50%) !important;
    opacity: 0.18 !important;
  }
}


/* =========================================================
   ALTERAÇÃO BRUNOBR — REMOVER PERSONAGEM + DIVISORES ENTRE SEÇÕES
   ---------------------------------------------------------
   SUBSTITUIR/ALTERAÇÃO:
   1) Remove definitivamente a figura/personagem do primeiro print.
      Ela também foi removida do HTML, mas esta regra protege caso algum
      navegador mantenha cache antigo do elemento.

   2) Padroniza um divisor premium para aparecer entre CADA bloco do site.
      O divisor fica centralizado, com brilho frio, linha metálica e centro
      iluminado, seguindo o estilo dark fantasy do template.
   ========================================================= */
.hero-figure {
  display: none !important;
}

.hero-panel {
  min-height: 820px !important;
  padding-top: clamp(92px, 7vw, 128px) !important;
  padding-bottom: clamp(86px, 7vw, 118px) !important;
}

.hero-content {
  z-index: 12 !important;
}

.ornate-divider.section-separator {
  position: relative !important;
  width: min(430px, 62vw) !important;
  height: 28px !important;
  margin: clamp(34px, 4.6vw, 62px) auto !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

.ornate-divider.section-separator::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(360px, 72vw) !important;
  height: 5px !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(225, 240, 248, 0.46) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(207, 229, 241, 0.28) 16%, rgba(248, 252, 255, 0.92) 50%, rgba(207, 229, 241, 0.28) 84%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(91, 120, 139, 0.16)) !important;
  box-shadow:
    0 0 18px rgba(212, 235, 248, 0.34),
    0 0 42px rgba(117, 166, 198, 0.20),
    inset 0 0 9px rgba(255,255,255,0.35) !important;
  z-index: 1 !important;
}

.ornate-divider.section-separator::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 74px !important;
  height: 12px !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(235, 247, 252, 0.56) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.90), rgba(193, 218, 232, 0.32) 45%, rgba(8, 16, 24, 0.92) 78%),
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(0,0,0,0.52)) !important;
  clip-path: none !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow:
    0 0 20px rgba(226, 242, 250, 0.48),
    0 0 50px rgba(108, 158, 190, 0.20),
    inset 0 0 12px rgba(255,255,255,0.36) !important;
  z-index: 2 !important;
}

@media (max-width: 980px) {
  .hero-panel {
    min-height: auto !important;
    padding-top: 78px !important;
    padding-bottom: 58px !important;
  }

  .ornate-divider.section-separator {
    width: min(330px, 72vw) !important;
    margin: 34px auto !important;
  }
}


/* =========================================================
   ALTERAÇÕES BRUNOBR — LOGO + DIVISOR PREMIUM
   =========================================================
   1) A logo L2jNBR substitui o texto grande do hero.
   2) A mesma logo entra na barra superior.
   3) O divisor antigo foi refinado para um separador metálico premium,
      com brilho suave, ornamento central e aparência cinematográfica.
*/

.brand {
  min-width: 210px;
}

.brand-logo {
  display: block;
  width: clamp(110px, 10vw, 162px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.10));
}

.hero-logo-title {
  width: min(760px, 88vw);
  max-width: 100%;
  margin: 0 auto;
  line-height: 1;
  text-align: center;
  filter:
    drop-shadow(0 22px 44px rgba(0, 0, 0, 0.86))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.16));
}

.hero-logo-title img {
  display: block;
  width: min(390px, 60vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.hero-content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-content .kicker,
.hero-lead {
  margin-left: auto;
  margin-right: auto;
}

.hero-actions,
.micro-cards {
  justify-content: center;
}

.ornate-divider.section-separator {
  width: min(820px, 72%);
  height: 44px;
  margin: 52px auto 58px;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.ornate-divider.section-separator::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 20px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(236, 245, 250, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.86) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(235, 244, 250, 0.08), rgba(235, 244, 250, 0.38), rgba(235, 244, 250, 0.08)),
    linear-gradient(180deg, rgba(18, 32, 45, 0.96), rgba(3, 7, 11, 0.98));
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  box-shadow:
    0 0 22px rgba(214, 234, 248, 0.24),
    inset 0 0 18px rgba(255,255,255,0.08);
}

.ornate-divider.section-separator::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(180, 207, 224, 0.10) 10%,
      rgba(235, 245, 250, 0.40) 38%,
      transparent 45%,
      transparent 55%,
      rgba(235, 245, 250, 0.40) 62%,
      rgba(180, 207, 224, 0.10) 90%,
      transparent 100%);
  box-shadow:
    0 0 18px rgba(211, 233, 247, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.64);
}

.ornate-divider.section-separator span,
.ornate-divider.section-separator i {
  display: none;
}

@media (max-width: 740px) {
  .brand {
    min-width: auto;
  }

  .brand-logo {
    width: 138px;
  }

  .hero-logo-title img {
    width: min(420px, 88vw);
  }

  .ornate-divider.section-separator {
    width: 86%;
    margin: 40px auto 44px;
  }
}

/* =========================================================
   ALTERAÇÃO BRUNOBR — DIVISOR REFINADO + FONTES MENORES
   ---------------------------------------------------------
   SUBSTITUIR/ALTERAÇÃO:
   1) O separador anterior foi substituído por um divisor mais premium,
      com linhas metálicas finas, brilho frio e medalhão central em losango.
   2) Os títulos das seções foram reduzidos para não ficarem grandes demais.
   3) Os blocos de título/descrição das seções foram centralizados.
   4) Os cards também receberam textos um pouco menores para o visual ficar
      mais elegante, limpo e menos “garranchudo”.
   ========================================================= */

.ornate-divider.section-separator {
  position: relative !important;
  width: min(720px, 72vw) !important;
  height: 58px !important;
  margin: clamp(34px, 4vw, 54px) auto !important;
  border: 0 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(130, 154, 170, 0.00) 7%,
      rgba(174, 199, 214, 0.30) 20%,
      rgba(235, 245, 250, 0.76) 43%,
      transparent 49%,
      transparent 51%,
      rgba(235, 245, 250, 0.76) 57%,
      rgba(174, 199, 214, 0.30) 80%,
      rgba(130, 154, 170, 0.00) 93%,
      transparent 100%) center / 100% 1px no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ornate-divider.section-separator::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  border: 1px solid rgba(237, 246, 250, 0.58) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(223, 239, 248, 0.30), rgba(83, 112, 132, 0.18) 42%, rgba(4, 9, 14, 0.96) 74%),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.55)) !important;
  clip-path: none !important;
  box-shadow:
    0 0 0 5px rgba(5, 12, 18, 0.72),
    0 0 22px rgba(218, 238, 249, 0.36),
    0 0 52px rgba(93, 141, 176, 0.22),
    inset 0 0 14px rgba(255, 255, 255, 0.14) !important;
  z-index: 3 !important;
}

.ornate-divider.section-separator::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 128px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  border-top: 1px solid rgba(230, 242, 249, 0.34) !important;
  border-bottom: 1px solid rgba(230, 242, 249, 0.16) !important;
  border-left: 1px solid rgba(230, 242, 249, 0.08) !important;
  border-right: 1px solid rgba(230, 242, 249, 0.08) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent, rgba(215, 235, 247, 0.18), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.42)) !important;
  box-shadow:
    0 0 22px rgba(209, 232, 246, 0.22),
    inset 0 0 12px rgba(255, 255, 255, 0.05) !important;
  z-index: 2 !important;
}

/* Centralização e redução dos títulos principais das seções. */
.section-heading {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.section-heading .kicker,
.section-heading h2,
.section-heading p:not(.kicker) {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-heading h2 {
  max-width: 820px !important;
  font-size: clamp(22px, 2.5vw, 30px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.018em !important;
  color: var(--green) !important;
  text-shadow: 0 0 28px rgba(74,222,128,0.2) !important;
}

.section-heading p:not(.kicker) {
  max-width: 720px !important;
  margin-top: 18px !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  line-height: 1.7 !important;
}

.kicker {
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
}

.quote-panel h2,
.statement-panel h2,
.footer-panel h2 {
  font-size: clamp(22px, 2.5vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.018em !important;
  color: var(--green) !important;
  text-shadow: 0 0 28px rgba(74,222,128,0.2) !important;
}

.quote-panel > p:last-child {
  font-size: clamp(14px, 1.2vw, 16px) !important;
}

.cards-grid {
  margin-top: 36px !important;
}

.dark-card {
  min-height: 230px !important;
  padding: 34px 30px !important;
}

.dark-card h3 {
  font-size: clamp(16px, 1.2vw, 18px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.012em !important;
  color: var(--green) !important;
}

.dark-card p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.ritual-panel h3 {
  font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.2 !important;
  color: var(--green) !important;
}

.light-card strong {
  font-size: 13px !important;
  letter-spacing: 0.075em !important;
}

.light-card span,
.ritual-panel p,
.ritual-panel li {
  font-size: 14px !important;
  line-height: 1.62 !important;
}

@media (max-width: 980px) {
  .section-heading h2 {
    font-size: clamp(20px, 5vw, 26px) !important;
  }

  .quote-panel h2,
  .statement-panel h2,
  .footer-panel h2 {
    font-size: clamp(20px, 5vw, 26px) !important;
  }

  .ornate-divider.section-separator {
    width: min(420px, 78vw) !important;
    height: 50px !important;
    margin: 30px auto !important;
  }

  .ornate-divider.section-separator::before {
    width: 36px !important;
    height: 36px !important;
  }

  .ornate-divider.section-separator::after {
    width: 104px !important;
  }
}

/* =========================================================
   ALTERAÇÃO BRUNOBR — DIVISOR FINO PREMIUM
   ---------------------------------------------------------
   SUBSTITUIR:
   - Troca o divisor anterior, que estava pesado/grosso, por um divisor
     fino inspirado na referência enviada: linha metálica estreita com
     ornamento central discreto.
   - Mantém o separador aplicado em todos os pontos onde já existe
     .ornate-divider.section-separator no HTML.
   ========================================================= */
.ornate-divider.section-separator {
  position: relative !important;
  width: min(700px, 64vw) !important;
  height: 32px !important;
  margin: clamp(28px, 3.6vw, 48px) auto !important;
  border: 0 !important;
  background: url('../img/divider-thin-premium.svg') center center / contain no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ornate-divider.section-separator::before,
.ornate-divider.section-separator::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 740px) {
  .ornate-divider.section-separator {
    width: min(430px, 82vw) !important;
    height: 28px !important;
    margin: 28px auto !important;
  }
}

/* =========================================================
   BOSS STATUS — Raid Boss & Grand Boss tabs no Rankings
   ========================================================= */

/* Chips de status */
.boss-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.boss-chip-alive {
  background: rgba(62, 207, 142, 0.14);
  color: #3ecf8e;
  border: 1px solid rgba(62, 207, 142, 0.28);
}

.boss-chip-dead {
  background: rgba(220, 60, 60, 0.14);
  color: #ef5555;
  border: 1px solid rgba(220, 60, 60, 0.28);
}

.boss-chip-ready {
  background: rgba(200, 148, 26, 0.18);
  color: var(--gold, #c8941a);
  border: 1px solid rgba(200, 148, 26, 0.38);
  animation: boss-ready-pulse 2s ease-in-out infinite;
}

@keyframes boss-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 148, 26, 0); }
  50%       { box-shadow: 0 0 8px 2px rgba(200, 148, 26, 0.25); }
}

.boss-chip-combat {
  background: rgba(250, 160, 40, 0.14);
  color: #f0a030;
  border: 1px solid rgba(250, 160, 40, 0.28);
}

.boss-chip-unknown {
  background: rgba(150, 150, 150, 0.08);
  color: rgba(200, 200, 200, 0.45);
  border: 1px solid rgba(150, 150, 150, 0.18);
}

/* Células das tabelas de boss */
.boss-td-name {
  font-weight: 600;
  color: var(--white, #f4f8fb);
}

.boss-td-grand {
  color: var(--gold-light, #e8b84b) !important;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.boss-td-level {
  text-align: center;
  color: rgba(220, 232, 240, 0.55);
  font-size: 13px;
}

.boss-td-respawn {
  color: rgba(220, 232, 240, 0.55);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Tabelas de boss sem coluna de ranking (#) */
.boss-table th:first-child,
.boss-table td:first-child {
  padding-left: 20px;
}

/* Tabs-bar com muitos botões — permite scroll horizontal em mobile */
@media (max-width: 760px) {
  .tabs-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; }
}

/* Three.js arcane background */
.arcane-three-bg {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s ease;
  mix-blend-mode: screen;
}

.arcane-three-bg.is-ready {
  opacity: 0.92;
}

.arcane-three-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-stage,
.topbar,
.panel-broken,
.footer {
  position: relative;
}

.hero-stage,
.topbar,
.panel-broken,
.footer {
  z-index: 6;
}

@media (max-width: 680px) {
  .arcane-three-bg {
    opacity: 0;
  }

  .arcane-three-bg.is-ready {
    opacity: 0.58;
  }
}

.hero-stage > .arcane-three-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  height: 100% !important;
  min-height: inherit;
  clip-path: polygon(4% 0, 96% 0, 100% 5%, 99.2% 35%, 100% 40%, 98.5% 72%, 100% 80%, 96% 100%, 5% 99%, 0 94%, 1% 66%, 0 60%, 1.3% 21%, 0 15%);
  opacity: 0;
}

.hero-stage > .arcane-three-bg.is-ready {
  opacity: 0.86;
}

.hero-stage > .arcane-three-bg canvas {
  width: 100% !important;
  height: 100% !important;
}

.hero-crow-video {
  position: absolute !important;
  top: clamp(70px, 8vw, 126px);
  left: clamp(34px, 8vw, 150px);
  z-index: 3 !important;
  width: min(320px, 25vw);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.62;
  filter: brightness(0.86) contrast(1.14) saturate(0.86) drop-shadow(0 26px 34px rgba(0, 0, 0, 0.64));
  mix-blend-mode: lighten;
  transform: scaleX(-1);
  transform-origin: center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 56%, #000 0 52%, rgba(0, 0, 0, 0.78) 62%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 56%, #000 0 52%, rgba(0, 0, 0, 0.78) 62%, transparent 78%);
}

.hero-lightning {
  --lightning-x: 57%;
  --lightning-y: 11%;
  --lightning-x2: 63%;
  --lightning-y2: 19%;
  --lightning-rot: 13deg;
  --lightning-rot2: -18deg;
  --lightning-scale: 1;
  --lightning-brightness: 1;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  clip-path: polygon(4% 0, 96% 0, 100% 5%, 99.2% 35%, 100% 40%, 98.5% 72%, 100% 80%, 96% 100%, 5% 99%, 0 94%, 1% 66%, 0 60%, 1.3% 21%, 0 15%);
  background:
    radial-gradient(circle at var(--lightning-x) 23%, rgba(196, 225, 255, calc(0.40 * var(--lightning-brightness))), transparent 20%),
    radial-gradient(circle at var(--lightning-x2) 31%, rgba(126, 181, 255, calc(0.18 * var(--lightning-brightness))), transparent 24%),
    linear-gradient(180deg, rgba(178, 217, 255, 0.16), transparent 48%);
  mix-blend-mode: screen;
  transition: opacity 52ms linear;
}

.hero-lightning::before,
.hero-lightning::after {
  content: '';
  position: absolute;
  top: var(--lightning-y);
  left: var(--lightning-x);
  width: 4px;
  height: 260px;
  pointer-events: none;
  opacity: 0;
  transform: rotate(var(--lightning-rot)) scaleY(var(--lightning-scale));
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(236, 248, 255, 0), rgba(236, 248, 255, 0.98) 13%, rgba(152, 202, 255, 0.76) 42%, rgba(236, 248, 255, 0.18) 74%, transparent 100%);
  filter: drop-shadow(0 0 8px rgba(176, 215, 255, calc(0.72 * var(--lightning-brightness)))) drop-shadow(0 0 22px rgba(84, 154, 255, calc(0.34 * var(--lightning-brightness))));
  clip-path: polygon(43% 0, 100% 0, 64% 30%, 89% 30%, 37% 63%, 58% 63%, 0 100%, 25% 56%, 6% 56%, 42% 25%, 20% 25%);
}

.hero-lightning::after {
  top: var(--lightning-y2);
  left: var(--lightning-x2);
  width: 3px;
  height: 170px;
  opacity: 0;
  transform: rotate(var(--lightning-rot2)) scaleX(0.72) scaleY(var(--lightning-scale));
  filter: drop-shadow(0 0 7px rgba(212, 235, 255, 0.76)) drop-shadow(0 0 18px rgba(84, 154, 255, 0.30));
}

.hero-lightning.is-flashing {
  opacity: var(--lightning-brightness);
}

.hero-lightning.is-flashing::before {
  opacity: 0.92;
  animation: lightningFork 520ms steps(1, end);
}

.hero-lightning.is-flashing::after {
  opacity: 0.62;
  animation: lightningFork 520ms steps(1, end) 40ms;
}

@keyframes lightningFork {
  0%, 16%, 38% { opacity: 0; }
  7%, 25%, 48% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

.hero-stage > .hero-bg {
  z-index: 0;
}

.hero-stage > .hero-overlay {
  z-index: 1;
}

.hero-stage > .hero-vignette {
  z-index: 4;
}

.hero-stage > .hero-panel {
  z-index: 5 !important;
}

@media (max-width: 680px) {
  .hero-stage > .arcane-three-bg.is-ready {
    opacity: 0.48;
  }

  .hero-crow-video {
    top: 106px;
    left: -18px;
    width: min(168px, 46vw);
    opacity: 0.42;
  }

  .hero-lightning::before {
    top: 10%;
    left: 54%;
    height: 190px;
  }

  .hero-lightning::after {
    top: 19%;
    left: 63%;
    height: 128px;
  }
}

@media (max-width: 900px) {
  .real-deco { display: none !important; }
}

/* cp-floating-fix: community popup must float above the viewport, not inside page flow */
.cp-trigger {
  position: fixed !important; position: fixed !important; }
.cp-overlay {
  position: fixed !important; position: fixed !important; }

/* cp-floating-hardfix */
.cp-trigger { position: fixed !important; right: 24px; bottom: 24px; }
.cp-overlay { position: fixed !important; inset: 0; }