/* Somente cores — inspirado na paleta Simplo (azul navy, ciano, azul elétrico, verde CTA, amarelo destaque).
   Não altera layout, tipografia, componentes, links nem conteúdo. */

:root {
  --background: 214 93% 8%;
  --foreground: 0 0% 100%;
  --card: 212 70% 12%;
  --card-foreground: 0 0% 100%;
  --popover: 212 70% 12%;
  --popover-foreground: 0 0% 100%;
  --primary: 198 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 212 55% 14%;
  --secondary-foreground: 0 0% 100%;
  --muted: 212 45% 14%;
  --muted-foreground: 207 25% 72%;
  --accent: 222 77% 60%;
  --accent-foreground: 0 0% 100%;
  --success: 128 52% 47%;
  --success-foreground: 0 0% 100%;
  --cta: 128 55% 40%;
  --cta-foreground: 0 0% 100%;
  --cta-hover: 128 55% 34%;
  --border: 210 40% 22%;
  --input: 210 40% 22%;
  --ring: 198 100% 50%;
  --neon-cyan: 198 100% 50%;
  --neon-blue: 222 77% 60%;
  --neon-purple: 222 77% 60%;
  --dark-surface: 212 70% 12%;
  --glass: 212 60% 12%;
  --highlight: 44 100% 59%;
  --gradient-neon: linear-gradient(172deg, hsl(198 100% 50%), hsl(222 77% 60%));
  --gradient-card: linear-gradient(145deg, hsl(212 65% 14%), hsl(214 93% 8%));
  --gradient-hero: radial-gradient(ellipse at top, hsl(210 80% 18%) 0%, hsl(214 93% 8%) 60%, hsl(214 95% 6%) 100%);
  --shadow-neon: 0 0 20px hsl(198 100% 50% / .35), 0 0 50px hsl(222 77% 60% / .18);
  --shadow-elevated: 0 20px 60px hsl(198 100% 50% / .18), 0 8px 24px hsl(0 0% 0% / .5);
}

html {
  background-color: #021a3a;
}

body {
  background-color: #021a3a !important;
  background-image:
    radial-gradient(120% 70% at 50% 28%, rgba(0, 180, 255, 0.28), transparent 55%),
    radial-gradient(95% 55% at 14% 62%, rgba(74, 121, 231, 0.18), transparent 60%),
    radial-gradient(85% 55% at 88% 78%, rgba(0, 180, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #03264d 0%, #021a3a 55%, #011326 100%) !important;
  background-attachment: fixed !important;
}

/* Troca o brilho roxo antigo por ciano/azul (só cor) */
body:before {
  background:
    radial-gradient(38vmax 38vmax at 20% 30%, rgba(0, 180, 255, 0.18), transparent 60%),
    radial-gradient(34vmax 34vmax at 78% 62%, rgba(74, 121, 231, 0.16), transparent 60%),
    radial-gradient(30vmax 30vmax at 55% 12%, rgba(0, 180, 255, 0.12), transparent 62%) !important;
}

body:after {
  background:
    radial-gradient(32vmax 32vmax at 82% 22%, rgba(74, 121, 231, 0.14), transparent 62%),
    radial-gradient(36vmax 36vmax at 14% 78%, rgba(0, 180, 255, 0.13), transparent 62%) !important;
}

#root:before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, hsl(0 0% 100% / .55), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 14%, hsl(198 100% 80% / .5), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 72%, hsl(0 0% 100% / .4), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 58%, hsl(222 100% 85% / .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 44%, hsl(0 0% 100% / .35), transparent 60%),
    radial-gradient(1.1px 1.1px at 22% 88%, hsl(198 100% 85% / .4), transparent 60%) !important;
}

/* CTAs e botões que usam a cor --cta passam a verde Simplo automaticamente via tokens.
   Gradiente dos botões primários (quando aplicável) segue ciano → azul. */
.bg-primary,
[class*="from-primary"] {
  --tw-gradient-from: hsl(198 100% 50%) var(--tw-gradient-from-position);
}

/* Garante CTAs no verde da referência (botões de conversão) */
.bg-cta {
  background-color: #24902a !important;
  background-image: linear-gradient(180deg, #2ea62f, #177a1a) !important;
}
.hover\:bg-cta-hover:hover,
.bg-cta:hover {
  background-color: #1e7a24 !important;
  background-image: linear-gradient(180deg, #279628, #146618) !important;
}

/* O destaque do Banco de Reset/Decode é injetado via DOM (reset-decode-catalog.js).
   Movido para a posição mais alta possível (topo da página) sem alterar o React existente. */
#reset-decode {
  scroll-margin-top: 80px;
  margin-top: 0;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
}


/* HERO H1 responsive tweak - sales copy only */
h1.font-bold.leading-tight,
h1.text-4xl,
section h1 {
  line-height: 1.15;
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  h1.font-bold.leading-tight,
  h1.text-4xl,
  section h1 {
    font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
    line-height: 1.2 !important;
    padding-left: .25rem;
    padding-right: .25rem;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  h1.font-bold.leading-tight,
  h1.text-4xl,
  section h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
    line-height: 1.18 !important;
  }
}

/* Faixas brancas anteriores desativadas — identidade dark restaurada.
   Layout limpo dos cards/header fica em layout-clean.css */