/* ============================================================
   Binaryzando — Page-Specific Styles
   ============================================================ */

/* ==================== HOME / LANDING ==================== */

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,138,223,.16) 0%, transparent 62%);
  filter: blur(80px);
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -22%;
  right: -10%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,10,230,.13) 0%, transparent 62%);
  filter: blur(70px);
}

/* Floor grid synthwave — chão em perspectiva, correndo (estilo TRON) */
.hero-grid {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 55%;
  background-image:
    linear-gradient(rgba(64,178,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,178,255,.34) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(380px) rotateX(64deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(transparent, #000 78%);
  -webkit-mask-image: linear-gradient(transparent, #000 78%);
  opacity: .85;
  z-index: 1;
  animation: hero-floor 2s linear infinite;
}
@keyframes hero-floor { to { background-position: 0 50px, 0 50px; } }

/* --- Linha do horizonte (encontro do céu com a grade) --- */
.hero-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 55%;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg,
    transparent, rgba(25,138,223,.85) 28%,
    rgba(240,10,230,.7) 52%,
    rgba(25,138,223,.85) 74%, transparent);
  box-shadow: 0 0 18px rgba(25,138,223,.55), 0 0 44px rgba(240,10,230,.25);
  opacity: .55;
}

/* --- Fumaça neon tomando a tela toda, sempre subindo --- */
.hero-fog {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-fog span {
  position: absolute;
  bottom: -260px;
  width: 460px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25,138,223,.17), transparent 72%);
  filter: blur(22px);
  opacity: 0;
  animation: fog-rise 18s linear infinite;
}
.hero-fog span:nth-child(1) { left: -4%; }
.hero-fog span:nth-child(2) {
  left: 14%;
  width: 560px;
  background: radial-gradient(closest-side, rgba(240,10,230,.11), transparent 72%);
  animation-duration: 24s;
  animation-delay: 5s;
}
.hero-fog span:nth-child(3) {
  left: 34%;
  width: 400px;
  background: radial-gradient(closest-side, rgba(173,5,238,.13), transparent 72%);
  animation-duration: 21s;
  animation-delay: 10s;
}
.hero-fog span:nth-child(4) { left: 52%; animation-duration: 16s; animation-delay: 2s; }
.hero-fog span:nth-child(5) {
  left: 70%;
  width: 540px;
  background: radial-gradient(closest-side, rgba(173,5,238,.10), transparent 72%);
  animation-duration: 26s;
  animation-delay: 13s;
}
.hero-fog span:nth-child(6) {
  right: -6%;
  width: 500px;
  background: radial-gradient(closest-side, rgba(240,10,230,.09), transparent 72%);
  animation-duration: 20s;
  animation-delay: 7s;
}
@keyframes fog-rise {
  0%   { transform: translateY(0) scale(.85); opacity: 0; }
  15%  { opacity: .55; }
  75%  { opacity: .25; }
  100% { transform: translateY(calc(-100vh - 280px)) scale(1.35); opacity: 0; }
}

/* --- Luzes subindo (carros voadores verticais — convite pro scroll) --- */
.hero-rise {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-rise span {
  position: absolute;
  bottom: -70px;
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(0deg, transparent, var(--neon-cyan));
  box-shadow: 0 0 8px rgba(25,138,223,.8);
  opacity: 0;
  animation: rise-up linear infinite;
}
.hero-rise span::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #BFE9FF;
  box-shadow: 0 0 12px #7FD4FF;
}
/* dois em magenta pra variar */
.hero-rise span:nth-child(3),
.hero-rise span:nth-child(6) {
  background: linear-gradient(0deg, transparent, var(--neon-magenta));
  box-shadow: 0 0 8px rgba(240,10,230,.7);
}
.hero-rise span:nth-child(3)::after,
.hero-rise span:nth-child(6)::after { background: #FFC2F8; box-shadow: 0 0 12px #F00AE6; }
.hero-rise span:nth-child(1) { left: 8%;  animation-duration: 8s; }
.hero-rise span:nth-child(2) { left: 24%; animation-duration: 13s; animation-delay: 3s; height: 32px; }
.hero-rise span:nth-child(3) { left: 39%; animation-duration: 10s; animation-delay: 6s; }
.hero-rise span:nth-child(4) { left: 58%; animation-duration: 7s;  animation-delay: 1.5s; }
.hero-rise span:nth-child(5) { left: 76%; animation-duration: 12s; animation-delay: 8s; height: 34px; }
.hero-rise span:nth-child(6) { left: 91%; animation-duration: 9s;  animation-delay: 4.5s; }
@keyframes rise-up {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: .95; }
  80%  { opacity: .9; }
  100% { transform: translateY(calc(-100vh - 150px)); opacity: 0; }
}

/* ============================================================
   Fundos de seção alternados — identidade cyberpunk contínua
   .bg-circuito = trilhas de circuito | .bg-cidade = brilho urbano + fumaça
   ============================================================ */
.bg-circuito,
.bg-cidade { position: relative; overflow: hidden; }
.bg-circuito > *,
.bg-cidade > * { position: relative; z-index: 1; }
/* camadas de efeito continuam absolute (a regra acima não pode achatá-las) */
.bg-circuito > .hero-rise, .bg-cidade > .hero-rise,
.bg-circuito > .bolhas,    .bg-cidade > .bolhas,
.bg-circuito > .fumaca,    .bg-cidade > .fumaca { position: absolute; }

/* Circuito eletrônico (trilhas + pontos de solda) */
.bg-circuito::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23198ADF' stroke-opacity='.16'%3E%3Cpath d='M10 10h60v40h50'/%3E%3Cpath d='M10 90v50h70'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F71231' stroke-opacity='.14'%3E%3Cpath d='M150 20v60h-30'/%3E%3Cpath d='M40 150v-30h40'/%3E%3C/g%3E%3Cg fill='%23198ADF' fill-opacity='.3'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='120' cy='50' r='3'/%3E%3Ccircle cx='10' cy='90' r='3'/%3E%3Ccircle cx='80' cy='120' r='3'/%3E%3C/g%3E%3Cg fill='%23F71231' fill-opacity='.28'%3E%3Ccircle cx='150' cy='20' r='3'/%3E%3Ccircle cx='120' cy='80' r='3'/%3E%3Ccircle cx='40' cy='150' r='3'/%3E%3Ccircle cx='80' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .6;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}
/* pulso de energia percorrendo o circuito */
.bg-circuito::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 300px at 20% 110%, rgba(25,138,223,.10), transparent 70%);
  animation: circ-energia 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes circ-energia {
  from { transform: translateX(0); }
  to   { transform: translateX(55vw); }
}

/* ============================================================
   CIRCUIT-FLOW — MESMA arte do circuito do rodapé da sidebar:
   trilha de cobre sobe do fundo, faz um cotovelo e TERMINA numa
   pastilha de solda. A energia (trecho aceso) percorre a trilha de
   baixo pra cima; ao chegar na pastilha, o cobre acaba mas a energia
   CONTINUA, soltando-se numa bolinha que sobe. Injetado por app.js.
   Coordenadas 1:1 (viewBox px = px na tela) pra alinhar a bolinha.
   ============================================================ */
.circuit-flow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 360px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* vence o `.bg-circuito > * { z-index:1 }` pra ficar ATRÁS do conteúdo */
.bg-circuito > .circuit-flow { z-index: 0; }
.cf-col {
  position: absolute;
  bottom: 0;
  width: 96px;
  height: 100%;
}
.cf-svg {
  position: absolute;
  left: 0; bottom: 0;
  width: 96px; height: 190px;
  overflow: visible;
}
/* fio de cobre apagado (a trilha) */
.cf-track {
  fill: none;
  stroke: var(--cf-color, #198ADF);
  stroke-width: 1.8;
  stroke-opacity: .4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* pastilha de solda onde o cobre termina */
.cf-pad { fill: var(--cf-color, #198ADF); fill-opacity: .85; }
/* pulso de energia (trecho aceso) que percorre a trilha */
.cf-pulse {
  fill: none;
  stroke: var(--cf-glow, #CFEBFF);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--cf-color, #198ADF)) drop-shadow(0 0 10px var(--cf-color, #198ADF));
  opacity: 0;
  animation: cf-run var(--cf-dur, 5s) linear var(--cf-delay, 0s) infinite;
}
@keyframes cf-run {
  0%   { stroke-dashoffset: 0;             opacity: 0; }
  6%   { opacity: 1; }
  44%  { stroke-dashoffset: var(--cf-top); opacity: 1; }
  52%  { stroke-dashoffset: var(--cf-top); opacity: 0; }
  100% { stroke-dashoffset: var(--cf-top); opacity: 0; }
}
/* a energia que se solta da pastilha e sobe (posição via top/left inline) */
.cf-ball {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--cf-glow, #CFEBFF);
  box-shadow: 0 0 12px 3px var(--cf-color, #198ADF);
  opacity: 0;
  animation: cf-ball-rise var(--cf-dur, 5s) linear var(--cf-delay, 0s) infinite;
}
@keyframes cf-ball-rise {
  0%,42%  { transform: translateY(0) scale(.4);      opacity: 0; }
  48%     { transform: translateY(-4px) scale(1);    opacity: 1; }
  80%     { opacity: .75; }
  100%    { transform: translateY(-190px) scale(.4); opacity: 0; }
}

/* Cidade neon (brilhos urbanos + fumaça subindo) */
.bg-cidade::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 280px at 10% 108%, rgba(240,10,230,.09), transparent 70%),
    radial-gradient(640px 320px at 90% -8%, rgba(25,138,223,.11), transparent 70%),
    radial-gradient(420px 240px at 62% 112%, rgba(173,5,238,.09), transparent 70%);
  pointer-events: none;
}
.bg-cidade::after {
  content: '';
  position: absolute;
  left: 12%;
  bottom: -250px;
  width: 500px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25,138,223,.13), transparent 72%);
  filter: blur(20px);
  opacity: 0;
  animation: fog-rise-secao 17s linear infinite;
  pointer-events: none;
}
@keyframes fog-rise-secao {
  0%   { transform: translateY(0) scale(.9); opacity: 0; }
  18%  { opacity: .55; }
  80%  { opacity: .2; }
  100% { transform: translateY(-900px) scale(1.3); opacity: 0; }
}

/* ============================================================
   FUMAÇA DIAGONAL — canto inferior DIREITO → superior ESQUERDO.
   [2026-07-06] Era laranja/vermelho/roxo neon — o Diego achou que não
   combinava (nem a 1ª tentativa em cinza-gelo ficou boa, "parecia
   fumaça branca"). Agora é 100% tons ESCUROS da própria paleta (azul
   marinho profundo + preto quase puro, --bg-elevated/--bg-hover/
   --bg-surface/--bg-base) — sem nenhuma cor viva, fumaça de verdade,
   igual em TODAS as abas (única receita pra .fumaca/.fumaca--inv/
   .fumaca--vermelha, só variando um pouco a ordem/opacidade).
   Continua variando: cresce, quase apaga, volta a crescer.
   ============================================================ */
.fumaca {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  /* Base ESTÁTICA sempre visível (aparece mesmo com "reduzir movimento"). */
  background:
    radial-gradient(62% 58% at 90% 102%, rgba(1,39,115,.5), rgba(2,11,28,.32) 42%, transparent 70%),
    radial-gradient(52% 50% at 72% 92%,  rgba(1,59,134,.4), rgba(1,1,9,.28) 48%, transparent 68%);
}
.fumaca--inv {
  background:
    radial-gradient(60% 56% at 90% 102%, rgba(1,59,134,.46), rgba(1,1,9,.3) 44%, transparent 70%),
    radial-gradient(52% 50% at 70% 92%,  rgba(1,39,115,.36), rgba(2,11,28,.24) 48%, transparent 68%);
}
.fumaca span {
  position: absolute;
  right: -18%;
  bottom: -22%;
  width: 68vw;
  height: 68vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: fumaca-diag 30s ease-in-out infinite;
}
.fumaca span:nth-child(1) {
  background: radial-gradient(closest-side,
    rgba(1,59,134,.55), rgba(1,39,115,.32) 46%, transparent 72%);
}
.fumaca span:nth-child(2) {
  right: -8%;
  width: 56vw;
  height: 56vw;
  background: radial-gradient(closest-side,
    rgba(2,11,28,.5), rgba(1,1,9,.3) 50%, transparent 72%);
  animation-duration: 38s;
  animation-delay: -12s;
}
.fumaca span:nth-child(3) {
  right: 4%;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(closest-side,
    rgba(1,39,115,.42), rgba(2,11,28,.26) 55%, transparent 74%);
  animation-duration: 34s;
  animation-delay: -22s;
}
/* Trajeto: inf. DIREITO → sup. ESQUERDO, com PULSAÇÃO de vida:
   cresce (18%) → míngua (36%) → cresce mais (54%) → QUASE APAGA (72%)
   → último suspiro (86%) → some no canto. O scale acompanha, inchando
   e murchando junto com a opacidade. */
@keyframes fumaca-diag {
  0%   { transform: translate(0, 0) scale(1);            opacity: 0; }
  18%  { transform: translate(-21vw, -21vh) scale(1.3);  opacity: .6; }
  36%  { transform: translate(-42vw, -41vh) scale(1.05); opacity: .22; }
  54%  { transform: translate(-64vw, -62vh) scale(1.5);  opacity: .56; }
  72%  { transform: translate(-85vw, -83vh) scale(1.15); opacity: .09; }
  86%  { transform: translate(-101vw, -98vh) scale(1.55); opacity: .4; }
  100% { transform: translate(-118vw, -115vh) scale(1.7); opacity: 0; }
}

/* Variante "ao contrário" (seção Cartas em destaque): mesma receita
   escura, só invertendo qual blob lidera — visual espelhado, o trajeto
   continua canto inf. esq → sup. dir. */
.fumaca--inv span:nth-child(1) {
  background: radial-gradient(closest-side,
    rgba(1,39,115,.5), rgba(2,11,28,.3) 48%, transparent 72%);
}
.fumaca--inv span:nth-child(2) {
  background: radial-gradient(closest-side,
    rgba(1,1,9,.45), rgba(1,59,134,.24) 50%, transparent 72%);
}
.fumaca--inv span:nth-child(3) {
  background: radial-gradient(closest-side,
    rgba(1,59,134,.36), rgba(1,39,115,.22) 55%, transparent 74%);
}

/* ============================================================
   FUMAÇA DAS ABAS DO APP (.shell-bg-fx, injetada por shell.js em toda
   página sem circuito — Início, Cartas, Perfil etc.). Mesma classe
   --vermelha de sempre, mesma receita escura acima (repetida aqui só
   pra manter a nomenclatura que o shell.js já injeta).
   ============================================================ */
.fumaca--vermelha {
  background:
    radial-gradient(62% 58% at 90% 102%, rgba(1,39,115,.5), rgba(2,11,28,.32) 42%, transparent 70%),
    radial-gradient(52% 50% at 72% 92%,  rgba(1,59,134,.4), rgba(1,1,9,.28) 48%, transparent 68%);
}
.fumaca--vermelha span:nth-child(1) {
  background: radial-gradient(closest-side,
    rgba(1,59,134,.55), rgba(1,39,115,.32) 46%, transparent 72%);
}
.fumaca--vermelha span:nth-child(2) {
  background: radial-gradient(closest-side,
    rgba(2,11,28,.5), rgba(1,1,9,.3) 50%, transparent 72%);
}
.fumaca--vermelha span:nth-child(3) {
  background: radial-gradient(closest-side,
    rgba(1,39,115,.42), rgba(2,11,28,.26) 55%, transparent 74%);
}

/* ============================================================
   CAMADA DE FUNDO DAS ABAS — fumaça vermelha + luzinhas subindo,
   FIXA atrás de todo o conteúdo. Injetada por shell.js só nas
   páginas que NÃO têm circuito (.bg-circuito). z-index:-1 pra
   pintar acima do preto do body e abaixo do conteúdo.
   ============================================================ */
.shell-bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.shell-bg-fx .fumaca,
.shell-bg-fx .bolhas { z-index: auto; }

/* Fundo mesclado por FAIXA (Diego, 2026-07-19): circuito embaixo, cometas
   em cima, com transição suave no meio — em vez dos dois cobrindo a tela
   inteira e se sobrepondo o tempo todo. */
.shell-bg-fx.bg-circuito::before,
.shell-bg-fx.bg-circuito::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, #000 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, #000 62%, #000 100%);
}
.shell-bg-fx .hero-rise,
.shell-bg-fx .bolhas {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 62%, transparent 100%);
}

/* ============================================================
   BOLHAS NEON SUBINDO — só pequenas, em todas as seções.
   ============================================================ */
.bolhas {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.bolhas span {
  position: absolute;
  bottom: -40px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    rgba(255,255,255,.95), var(--accent) 55%, transparent 74%);
  box-shadow: 0 0 8px rgba(64,178,255,.7);
  filter: blur(1.5px);   /* desfocada — parece partícula solta, não bolinha nítida */
  opacity: 0;
  animation: bolha-sobe linear infinite;
}
/* magenta pra variar */
.bolhas span:nth-child(3n) {
  background: radial-gradient(circle at 34% 30%,
    rgba(255,255,255,.95), var(--rarity-epic) 55%, transparent 74%);
  box-shadow: 0 0 8px rgba(240,10,230,.6);
}
/* laranja pra amarrar com a fumaça */
.bolhas span:nth-child(5n) {
  background: radial-gradient(circle at 34% 30%,
    rgba(255,240,220,.95), var(--rarity-legendary) 55%, transparent 74%);
  box-shadow: 0 0 8px rgba(251,79,5,.6);
}
/* posição / tamanho / ritmo — mistura de pequenas e maiorzinhas */
.bolhas span:nth-child(1)  { left: 6%;  width: 6px; height: 6px; animation-duration: 15s; animation-delay: 0s;   }
.bolhas span:nth-child(2)  { left: 14%; width: 5px; height: 5px; animation-duration: 24s; animation-delay: 5s;   }
.bolhas span:nth-child(3)  { left: 22%; width: 5px; height: 5px; animation-duration: 13s; animation-delay: 8s;   }
.bolhas span:nth-child(4)  { left: 31%; width: 6px; height: 6px; animation-duration: 20s; animation-delay: 2s;   }
.bolhas span:nth-child(5)  { left: 40%; width: 7px; height: 7px; animation-duration: 17s; animation-delay: 11s;  }
.bolhas span:nth-child(6)  { left: 49%; width: 6px; height: 6px; animation-duration: 27s; animation-delay: 3s;   }
.bolhas span:nth-child(7)  { left: 58%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: 6s;   }
.bolhas span:nth-child(8)  { left: 67%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: 9s;   }
.bolhas span:nth-child(9)  { left: 76%; width: 6px; height: 6px; animation-duration: 16s; animation-delay: 1s;   }
.bolhas span:nth-child(10) { left: 85%; width: 7px; height: 7px; animation-duration: 25s; animation-delay: 7s;   }
.bolhas span:nth-child(11) { left: 93%; width: 5px; height: 5px; animation-duration: 14s; animation-delay: 4s;   }
@keyframes bolha-sobe {
  0%   { transform: translateY(0) translateX(0);    opacity: 0; }
  12%  { opacity: .9; }
  85%  { opacity: .6; }
  100% { transform: translateY(calc(-100vh - 60px)) translateX(24px); opacity: 0; }
}

/* NÃO desligar bolhas/fumaça no prefers-reduced-motion: o Windows do
   Diego tem "animações reduzidas" ligado e esse bloco APAGAVA as
   bolinhas pra ele em todas as páginas (o hero-rise não era afetado,
   por isso só as luzinhas do topo apareciam). Efeito é identidade
   visual do site — fica ligado sempre. */

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  border-radius: 0;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background: rgba(25,138,223,.06);
  border: 1px solid rgba(25,138,223,.4);
  font-family: var(--font-hud);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(25,138,223,.2), inset 0 0 10px rgba(25,138,223,.05);
  margin-bottom: 24px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 20px;
  letter-spacing: 0;
  color: #F9FAFB;
  text-shadow: 0 0 30px rgba(25,138,223,.4), -2px 0 rgba(240,10,230,.45), 2px 0 rgba(25,138,223,.45);
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-contador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 28px;
  font-size: .85rem;
  color: var(--text-muted);
}
.hero-contador::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: hero-contador-pulse 1.6s ease-in-out infinite;
}
.hero-contador-numero {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-hover);
  font-size: 1rem;
  transition: color .2s;
}
@keyframes hero-contador-pulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Floating cards in hero */
.hero-cards {
  display: flex;
  align-items: flex-start; /* topo alinhado — o pódio empurra pra BAIXO com margin-top, não pra cima (negativo com flex-end não empilhava certo) */
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  perspective: 1000px;
}
.hero-card-float {
  animation: float 4s ease-in-out infinite;
}
.hero-card-float:nth-child(2) {
  animation-delay: .5s;
  animation-duration: 3.5s;
}
.hero-card-float:nth-child(3) {
  animation-delay: 1s;
  animation-duration: 4.5s;
}

/* Pódio (pedido do Diego, 2026-07-06): Lendária no meio (1º, mais alta),
   Épica na direita (2º, meio-termo), Comum na esquerda (3º, na base) —
   margin-top empurra pra baixo (menos elevado), sem mexer no transform
   (que já é usado pela animação "float"). Com align-items:flex-start, cada
   card desce a partir do mesmo topo, então dá pra empilhar de forma
   previsível (flex-end com margin negativo não empilhava certo). */
.hero-card-float--centro   { margin-top: 0; }
.hero-card-float--direita  { margin-top: 20px; }
.hero-card-float--esquerda { margin-top: 40px; }
@media (max-width: 768px) {
  .hero-card-float--esquerda,
  .hero-card-float--direita,
  .hero-card-float--centro { margin-top: 0; }
}

/* Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: float-particle linear infinite;
}
@keyframes float-particle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: .4; }
  90%  { opacity: .4; }
  100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

/* --- How it works --- */
.how-it-works {
  background: var(--bg-base);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 2.4rem; }
}
@media (max-width: 480px) {
  .steps-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2rem; }
  .hero-eyebrow { font-size: .7rem; letter-spacing: 1.5px; padding: 6px 13px; }
}

.step-card {
  text-align: left;
  padding: 32px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all .3s var(--ease-out);
  position: relative;
}
.step-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(25,138,223,.12);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(25,138,223,.15), rgba(173,5,238,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--neon-cyan);
  margin: 0 auto 16px;
}

.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--neon-cyan);
}

.step-desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Step connector arrow */
.step-card:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--text-muted);
  z-index: 2;
}
@media (max-width: 768px) {
  .step-card::after { display: none; }
}

/* --- Featured cards section --- */
.featured-section {
  background: var(--bg-deepest);
  position: relative;
}

/* --- Battle preview --- */
.battle-preview {
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}
.battle-preview::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(247,18,49,.06) 0%, transparent 60%);
  filter: blur(60px);
}

/* --- Pricing section --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 968px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  transition: all .3s var(--ease-out);
  position: relative;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}
.pricing-card.featured {
  border-color: var(--accent);
  background: linear-gradient(170deg, var(--bg-card), rgba(25,138,223,.04));
  box-shadow: 0 8px 40px rgba(25,138,223,.12);
}
.pricing-card.featured::before {
  content: 'MAIS POPULAR';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  background: linear-gradient(135deg, #1C48D5, #AD05EE);
  border-radius: var(--radius-full);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.pricing-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--neon-cyan);
}

.pricing-price {
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 20px;
}
.pricing-price .amount {
  font-size: 2.5rem;
}
.pricing-price .period {
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 400;
}

.pricing-features {
  margin-bottom: 24px;
}
.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: .85rem;
  color: var(--text-secondary);
}
.pricing-feature .check {
  color: var(--success);
  font-size: .9rem;
  flex-shrink: 0;
}
.pricing-feature.disabled {
  opacity: .4;
  text-decoration: line-through;
}

/* --- CTA banner --- */
.cta-banner {
  background: linear-gradient(135deg, rgba(25,138,223,.08), rgba(173,5,238,.06));
  border: 1px solid rgba(25,138,223,.12);
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,138,223,.1) 0%, transparent 60%);
  filter: blur(50px);
}

/* ==================== DASHBOARD ==================== */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 968px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all .3s;
}
.dashboard-stat-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}

.dashboard-stat-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.dashboard-stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
}
.dashboard-stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 600;
  margin-top: 4px;
}
.dashboard-stat-change.up { color: var(--success); }
.dashboard-stat-change.down { color: var(--danger); }

/* ==================== LABORATORY ==================== */

.lab-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
}
@media (max-width: 968px) {
  .lab-layout { grid-template-columns: 1fr; }
}

.lab-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
}
@media (max-width: 968px) {
  .lab-panel { position: static; max-height: none; }
}

.lab-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lab-result {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lab-result-header {
  padding: 24px;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.lab-result-body {
  padding: 24px;
}

.lab-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .lab-result-stats { grid-template-columns: repeat(2, 1fr); }
}

.lab-stat-item {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: left;
}
.lab-stat-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.lab-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
}

/* Anti-broxa section */
.anti-broxa {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(251,79,5,.04), rgba(250,44,11,.02));
  border: 1px solid rgba(251,79,5,.12);
  border-radius: var(--radius-lg);
}
.anti-broxa-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--rarity-legendary);
  margin-bottom: 12px;
}
.anti-broxa-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.anti-broxa-item .icon {
  color: var(--rarity-legendary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==================== RANKINGS ==================== */

.ranking-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.ranking-table th {
  text-align: left;
  padding: 8px 16px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.ranking-table td {
  padding: 14px 16px;
  background: var(--bg-card);
  font-size: .875rem;
  transition: background .2s;
}
.ranking-table tr:hover td {
  background: var(--bg-elevated);
}
.ranking-table td:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ranking-table td:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.ranking-pos {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-align: left;
  min-width: 40px;
}
.ranking-pos.gold { color: #FB4F05; }
.ranking-pos.silver { color: #DBDEF1; }
.ranking-pos.bronze { color: #FA2C0B; }

/* ==================== LANDING FOOTER ==================== */

.landing-footer {
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  padding: 48px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.footer-desc {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 300px;
}

.footer-title {
  font-family: var(--font-display);   /* cabeçalho de coluna = Oxanium (negrito de jogo) */
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 16px;
  color: var(--neon-cyan);
}

.footer-link {
  display: block;
  padding: 4px 0;
  font-size: .95rem;                  /* Exo 2 legível, sem ficar miúdo */
  color: var(--text-muted);
  transition: color .2s;
}
.footer-link:hover {
  color: var(--accent-hover);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ==================== BUILDDEX ==================== */

.dex-progress {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.dex-progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

.dex-progress-label {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: left;
}

.dex-progress-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}

/* ==================== MARKETPLACE ==================== */

.marketplace-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.marketplace-card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--border);
}

.marketplace-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--success);
}

.marketplace-price-label {
  font-size: .7rem;
  color: var(--text-muted);
}

/* ==================== PROFILE ==================== */

.profile-banner {
  position: relative;
  padding: 48px 32px 32px;
  background: linear-gradient(135deg, var(--bg-elevated), rgba(25,138,223,.06));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: 32px;
  overflow: hidden;
}
.profile-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,138,223,.1) 0%, transparent 60%);
  filter: blur(50px);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1C48D5, #198ADF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 16px;
  border: 3px solid var(--bg-card);
  position: relative;
  z-index: 2;
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}
.profile-title {
  font-size: .9rem;
  color: var(--accent-hover);
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.profile-stats {
  display: flex;
  gap: 32px;
  position: relative;
  z-index: 2;
}
.profile-stat {
  text-align: left;
}
.profile-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
}
.profile-stat-label {
  font-size: .75rem;
  color: var(--text-muted);
}

/* ---------- Títulos (emergem do comportamento real — IDEIAS item 10) ---------- */
.titulo-preview-linha {
  font-size: .85rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.titulo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.titulo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  padding: 16px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.02);
}

.titulo-bloqueado {
  opacity: .55;
}

.titulo-desbloqueado {
  cursor: pointer;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
  border-color: color-mix(in srgb, var(--titulo-cor) 45%, var(--border));
}
.titulo-desbloqueado:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--titulo-cor) 30%, transparent);
}

.titulo-ativo {
  border-color: var(--titulo-cor);
  box-shadow: 0 0 0 1px var(--titulo-cor), 0 6px 24px color-mix(in srgb, var(--titulo-cor) 35%, transparent);
}

.titulo-emblema-wrap {
  margin-bottom: 8px;
}

.titulo-card-nome {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  margin-bottom: 4px;
}

.titulo-card-criterio {
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.titulo-card-badge-ativo {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: .6rem;
  font-weight: 800;
  color: var(--bg-deepest);
  background: var(--titulo-cor);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.titulo-config {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ==================== PLANS ==================== */

.plans-hero {
  text-align: left;
  padding: 64px 0;
}

/* ====================================================================
   OTIMIZAÇÃO DE PESO — Diego 2026-07-09
   O site estava pesado demais pra abrir no celular. Cortes de efeito:

   1) FUMAÇA e BOLHAS (luzes sem cauda) desligadas em TODO o site. Só
      ficam as luzes COM cauda (.hero-rise), que o Diego quis manter.
      shell.js também parou de injetá-las nas abas do app (menos DOM).
   ==================================================================== */
.fumaca,
.fumaca--inv,
.fumaca--vermelha,
.bolhas {
  display: none !important;
}

/* ====================================================================
   2) MOBILE (≤820px): mata os efeitos MAIS caros de renderizar num
      celular — backdrop-filter (reprocessa a tela inteira a cada frame)
      e as auras de blur() gigantes de fundo. O layout NÃO muda; só some
      o desfoque caro. Também tira as luzes com cauda no celular, onde
      qualquer animação de fundo pesa (no desktop elas continuam).
   ==================================================================== */
@media (max-width: 820px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-rise,
  .shell-bg-fx { display: none !important; }
  /* auras de fundo desfocadas (blur de 50–80px, caríssimo no celular):
     tira o desfoque pesado. */
  .hero-bg::before,
  .hero-bg::after,
  .battle-preview::before,
  .cta-banner::before,
  .profile-banner::before { filter: none !important; }
}