html,body{
  background:#02060f!important;
  color:#fff!important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 25%, rgba(0,140,255,.28), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(0,90,255,.18), transparent 40%),
    radial-gradient(circle at 30% 75%, rgba(0,180,255,.12), transparent 35%);
}

/* Variables globales */
:root{
  --cl-accent:#008cff!important;
  --cl-accent-rgb:0,140,255!important;
  --bs-primary:#008cff!important;
  --bs-primary-rgb:0,140,255!important;
}

/* Navbar */
.navbar,
nav,
header{
  background:#000814!important;
  border-bottom:1px solid rgba(0,140,255,.35)!important;
}

/* Cards */
.card,
.feature,
.features .feature,
.features .list .feature,
.products .card,
.status-card,
.testimonial,
.variant,
.variants .variant,
.social,
.product,
.cart .product,
.cart .form{
  background:rgba(5,15,35,.92)!important;
  border:1px solid rgba(0,140,255,.28)!important;
  box-shadow:
    0 0 15px rgba(0,140,255,.12),
    inset 0 0 10px rgba(0,140,255,.04)!important;
}

/* Hover cards */
.card:hover,
.feature:hover,
.features .feature:hover,
.products .card:hover,
.status-card:hover,
.testimonial:hover{
  border-color:rgba(0,170,255,.65)!important;
  box-shadow:
    0 0 25px rgba(0,140,255,.30),
    0 0 45px rgba(0,140,255,.12)!important;
}

/* Botones */
.btn-primary,
.discord-cta,
button.btn-primary{
  background:#008cff!important;
  border-color:#008cff!important;
  box-shadow:0 0 18px rgba(0,140,255,.35)!important;
}

.btn-primary:hover,
.discord-cta:hover,
button.btn-primary:hover{
  background:#19a0ff!important;
  border-color:#19a0ff!important;
  box-shadow:0 0 28px rgba(0,160,255,.55)!important;
}

/* Botones outline */
.btn-outline-primary{
  color:#008cff!important;
  border-color:#008cff!important;
}

.btn-outline-primary:hover{
  background:#008cff!important;
  color:#fff!important;
}

/* Links */
a,
.nav-link{
  color:#8ccfff!important;
}

a:hover,
.nav-link:hover{
  color:#33b5ff!important;
}

/* Badges */
.badge,
.badges div,
.product-wrapper .badges div,
.products .badges div{
  background:#008cff!important;
  color:#fff!important;
}

/* Inputs */
.form-control,
.form-select{
  background:#081120!important;
  border-color:rgba(0,140,255,.22)!important;
  color:#fff!important;
}

.form-control:focus,
.form-select:focus{
  border-color:#008cff!important;
  box-shadow:0 0 0 .25rem rgba(0,140,255,.25)!important;
}

/* Footer */
footer,
.footer{
  background:#050b18!important;
  border-top:1px solid rgba(0,140,255,.22)!important;
}

/* Glow azul */
.navbar a,
.nav-link,
.navbar button,
.discord-cta{
  border-color:rgba(0,140,255,.45)!important;
  box-shadow:0 0 12px rgba(0,140,255,.18)!important;
}

/* Elimina tonos rojos */
[class*="grid"],
.hero-grid,
.grid-overlay,
.glow,
[class*="glow"],
[class*="light"],
[class*="blur"]{
  filter:hue-rotate(190deg) saturate(1.2)!important;
}

/* ========================================= */
/* FORCE BLUE HERO / PHONE SECTION */
/* ========================================= */

/* Texto principal hero */
.hero h1,
.hero .title,
.hero .content h1,
.hero .content .title,
.cta-text-image .title,
.cta-text-center .title{
  color:#ffffff!important;
  text-shadow:
    0 0 15px rgba(0,140,255,.35),
    0 0 35px rgba(0,140,255,.15)!important;
}

/* Texto azul pequeño */
.hero .subtitle,
.cta-text-image .subtitle,
.cta-text-center .subtitle{
  color:#33b5ff!important;
}

/* Telefono */
.hero img,
.hero-image,
.phone,
.phone-wrapper,
.phone-container,
.mockup,
.mockup-phone,
[class*="phone"],
[class*="mockup"]{
  filter:hue-rotate(190deg) saturate(1.4)!important;
}

/* Cards alrededor del telefono */
.hero .card,
.hero .feature,
.hero .feature-card,
.hero .stats,
.hero .stats div,
.socials .social,
.features .feature,
.products .card{
  background:rgba(5,15,35,.95)!important;
  border:1px solid rgba(0,140,255,.28)!important;
  box-shadow:
    0 0 18px rgba(0,140,255,.18),
    inset 0 0 10px rgba(0,140,255,.05)!important;
}

/* Glow rojo -> azul */
.hero::before,
.hero::after,
.hero .glow,
.hero .light,
.hero .blur,
[class*="hero"] [class*="glow"],
[class*="hero"] [class*="light"],
[class*="hero"] [class*="blur"]{
  filter:hue-rotate(190deg) saturate(1.4)!important;
}

/* SVG rojos */
svg [fill="#ff0000"],
svg [fill="#dc2626"],
svg [fill="#ef4444"],
svg [fill="#f43f5e"]{
  fill:#008cff!important;
}

/* Gradientes rojos */
[style*="#ff0000"],
[style*="#dc2626"],
[style*="#ef4444"],
[style*="#f43f5e"]{
  filter:hue-rotate(190deg)!important;
}