/*
 * EngajaPro Neon Theme — AGGRESSIVE OVERRIDE
 * Forces dark+cyan neon look on top of legacy osweld theme.
 * Loaded after all other CSS via header.twig modification.
 */

:root {
  --neon: #00e5ff;
  --neon-soft: #22d3ee;
  --neon-deep: #0891b2;
  --neon-accent: #67e8f9;
  --bg-900: #0a1224;
  --bg-800: #0f172a;
  --bg-700: #111827;
  --bg-600: #1e293b;
  --bg-500: #334155;
  --line: rgba(255, 255, 255, 0.06);
  --line-bright: rgba(0, 229, 255, 0.25);
  --text: #e2e8f0;
  --text-strong: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --neon-glow: 0 0 14px rgba(0, 229, 255, 0.4);
  --neon-glow-lg: 0 0 30px rgba(0, 229, 255, 0.45), 0 0 60px rgba(0, 229, 255, 0.18);
  --gradient-neon: linear-gradient(135deg, #00e5ff 0%, #22d3ee 100%);
  --glass: rgba(30, 41, 59, 0.55);
  --radius: 16px;
}

/* ── Reset global ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background: var(--bg-900) !important;
  color: var(--text) !important;
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 18% 8%, rgba(0, 229, 255, 0.14), transparent 38%),
    radial-gradient(circle at 82% 22%, rgba(34, 211, 238, 0.10), transparent 42%),
    radial-gradient(circle at 50% 110%, rgba(8, 145, 178, 0.10), transparent 45%) !important;
  background-color: var(--bg-900) !important;
  background-attachment: fixed;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.5;
}

/* ── Typography ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: var(--text-strong) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}

p, span, div, label, li, a, td, th {
  color: inherit;
}

::selection {
  background: rgba(0, 229, 255, 0.35);
  color: #fff;
}

/* Links */
a, a:link {
  color: var(--neon) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
a:hover {
  color: var(--neon-accent) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* ── Header / Navbar ──────────────────────────── */
.navbar,
.navbar-default,
.navbar-fixed-top,
.navbar-inverse,
header,
#header,
.header,
.headerStyle1,
.headerTop,
nav.menu,
.topbar,
.top-header {
  background: rgba(10, 18, 36, 0.85) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(0, 229, 255, 0.1) !important;
  color: var(--text) !important;
}

.navbar-brand,
.brand,
.logo {
  color: var(--neon) !important;
  font-weight: 700 !important;
}

/* Replace existing logos with our SVG */
.navbar-brand img,
.brand img,
.logo img,
img[alt*="EngajaPro" i],
img[title*="EngajaPro" i],
img[src*="uploads/sites"],
img[src*="redesmm"],
img[src*="rede-smm"],
.logoImg {
  content: url("/assets/images/engajapro-logo.svg") !important;
  height: 44px !important;
  width: auto !important;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.55));
}

/* Nav links */
.navbar-nav > li > a,
.nav > li > a,
.menu li a,
.top-menu a,
header nav a {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  transition: color 0.2s, background 0.2s !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
.navbar-nav > li > a:hover,
.nav > li > a:hover,
.menu li.active a,
.menu li a:hover,
header nav a:hover {
  color: var(--neon) !important;
  background: rgba(0, 229, 255, 0.08) !important;
}

/* ── Sidebars / left menus ────────────────────── */
.sidebar,
.left-sidebar,
.main-sidebar,
.side-menu,
#sidebar,
.sidebar-left,
.sidebar-wrapper,
.sb-sidenav {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--line) !important;
  color: var(--text) !important;
}

.sidebar a,
.sidebar .nav-link,
.side-menu a,
.menu-item a,
.main-menu li a {
  color: var(--text-muted) !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar .active > a,
.side-menu a:hover,
.side-menu .active a,
.menu-item.active a,
.main-menu li.active a,
.main-menu li a:hover {
  color: var(--neon) !important;
  background: rgba(0, 229, 255, 0.10) !important;
  box-shadow: inset 3px 0 0 var(--neon), 0 0 12px rgba(0, 229, 255, 0.15);
}

.sidebar a i,
.side-menu i,
.main-menu i {
  color: inherit !important;
}

/* ── Buttons (aggressive) ─────────────────────── */
.btn, button, input[type="button"], input[type="submit"], input[type="reset"], a.btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
}

.btn-primary, .btn-info, .btn-success,
button[type="submit"], input[type="submit"],
.btn-blue, .btn-color-primary, .btnPrimary,
button.primary, a.primary, .btn-azul {
  background: var(--gradient-neon) !important;
  background-image: var(--gradient-neon) !important;
  color: var(--bg-900) !important;
  border: none !important;
  box-shadow: var(--neon-glow) !important;
  text-shadow: none !important;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover,
button[type="submit"]:hover, input[type="submit"]:hover,
.btn-blue:hover, .btn-color-primary:hover, .btnPrimary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: var(--neon-glow-lg) !important;
}

.btn-default, .btn-secondary, .btn-light, .btn-white, .btn-outline {
  background: rgba(30, 41, 59, 0.7) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline:hover {
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  background: rgba(0, 229, 255, 0.06) !important;
}

.btn-danger, .btn-red {
  background: linear-gradient(135deg, #ef4444, #f43f5e) !important;
  color: white !important;
  border: none !important;
}
.btn-warning, .btn-orange, .btn-yellow {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: var(--bg-900) !important;
  border: none !important;
}

/* ── Forms / Inputs ───────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"], input[type="search"],
textarea, select, .form-control, .form-select, .input {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-strong) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus {
  border-color: var(--neon) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18), 0 0 18px rgba(0, 229, 255, 0.3) !important;
  outline: none !important;
  background: rgba(15, 23, 42, 0.85) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-dim) !important;
}
label, .control-label, .form-label {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
.input-group-addon, .input-group-text {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: var(--line) !important;
  color: var(--neon) !important;
  border-radius: 12px !important;
}

select option {
  background: var(--bg-700) !important;
  color: var(--text) !important;
}

/* ── Cards / Boxes / Panels ───────────────────── */
.card, .panel, .box, .widget, .dashboard-stat,
.list-group, .modal-content, .dropdown-menu,
.popover, .tooltip-inner, .well, .alert,
.feature-block, .infoBlock, .stats, .stat-box,
.contentBlock, .innerBlock {
  background: var(--glass) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover, .panel:hover, .box:hover, .widget:hover,
.feature-block:hover, .stat-box:hover {
  border-color: var(--line-bright) !important;
  box-shadow:
    var(--neon-glow),
    0 12px 40px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-2px);
}

.card-header, .panel-heading, .modal-header,
.card-title, .box-title, .widget-title {
  background: rgba(17, 24, 39, 0.55) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text-strong) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.card-body, .panel-body, .modal-body, .card-content {
  color: var(--text) !important;
  background: transparent !important;
}

.card-footer, .panel-footer, .modal-footer {
  background: rgba(17, 24, 39, 0.35) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* ── Tables ───────────────────────────────────── */
table, .table {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: transparent !important;
}
.table thead, .table thead th, table thead th {
  background: rgba(17, 24, 39, 0.7) !important;
  color: var(--neon-soft) !important;
  border-color: var(--line) !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  padding: 14px !important;
}
.table tbody tr, table tbody tr {
  background: transparent !important;
  border-color: var(--line) !important;
  transition: background 0.15s ease;
}
.table tbody tr:hover, table tbody tr:hover {
  background: rgba(0, 229, 255, 0.04) !important;
}
.table td, .table th, table td, table th {
  border-color: var(--line) !important;
  padding: 14px !important;
  vertical-align: middle !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ── Badges / Status pills ────────────────────── */
.badge, .label, .tag, .chip {
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.badge-success, .label-success, .badge-green {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34d399 !important;
}
.badge-warning, .label-warning, .badge-yellow, .badge-orange {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
}
.badge-danger, .label-danger, .badge-red {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fb7185 !important;
}
.badge-info, .label-info, .badge-primary, .label-primary, .badge-blue {
  background: rgba(0, 229, 255, 0.14) !important;
  color: var(--neon) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.3);
}

/* ── Alerts ───────────────────────────────────── */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: rgba(30, 41, 59, 0.7) !important;
  backdrop-filter: blur(14px);
  color: var(--text) !important;
  padding: 16px 20px !important;
}
.alert-success { border-left: 4px solid #10b981 !important; }
.alert-danger, .alert-error { border-left: 4px solid #ef4444 !important; }
.alert-warning { border-left: 4px solid #f59e0b !important; }
.alert-info, .alert-primary { border-left: 4px solid var(--neon) !important; }

/* ── Modal ────────────────────────────────────── */
.modal-backdrop {
  background: rgba(10, 18, 36, 0.85) !important;
  backdrop-filter: blur(8px);
}
.modal-content {
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
}

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-900); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.25);
  border-radius: 10px;
  border: 2px solid var(--bg-900);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.5); }
* {
  scrollbar-color: rgba(0, 229, 255, 0.35) var(--bg-900);
  scrollbar-width: thin;
}

/* ── HERO / Banner promocional original ─────── */
/* Force-replace the original 'REDE SMM / SAM SMM' hero with neon style */
.bannerHome, .home-banner, .heroBlock, .heroBanner,
.banner-top, .promo-banner, .top-promo,
[class*="bannerPrincipal"], [class*="banner-principal"],
.headerSection, .sectionHero, .hero-section,
section.hero, .mainHero {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 229, 255, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(34, 211, 238, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85)) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: 22px !important;
  box-shadow: var(--neon-glow-lg) !important;
  color: var(--text-strong) !important;
  padding: 32px !important;
  margin: 24px auto !important;
  position: relative;
  overflow: hidden;
}

/* Hide images inside the promo banner that show the old "REDE SMM" art */
.bannerHome img, .home-banner img, .heroBanner img,
.banner-top img, .promo-banner img {
  border-radius: 16px !important;
  filter: brightness(0.85) contrast(1.05);
  max-height: 320px;
}

/* Color overrides on all the legacy color classes */
.bg-color-primary, .bg-primary, .bgPrimary,
.text-color-primary, .text-primary, .color-primary,
.btn-color-primary, [class*="bg-blue"], [class*="text-blue"],
.color-blue, .blue-text {
  color: var(--neon) !important;
}

.bg-color-primary, .bg-primary, .bgPrimary, .bg-blue {
  background: rgba(0, 229, 255, 0.10) !important;
  color: var(--neon) !important;
}

[style*="color: blue"], [style*="color:#"], [style*="color: #0"],
.color-red, .color-orange, .color-yellow {
  color: var(--neon) !important;
}

/* Section headings with gradient text */
.section-title, .pageTitle, .titleSection, .titleArea h1, .titleArea h2 {
  background: var(--gradient-neon) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* Spans inside titles that highlight a phrase */
h1 span:last-child, h2 span:last-child, h1 .highlight, h2 .highlight,
.title span:last-child, .gradient-text {
  background: var(--gradient-neon) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── Force-dark common white backgrounds ──────── */
[style*="background: white"],
[style*="background:#fff"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background: rgb(255"],
.bg-white, .bg-light, .white-bg, .light-bg {
  background-color: var(--glass) !important;
  color: var(--text) !important;
}

/* ── Footer ───────────────────────────────────── */
footer, .footer, #footer, .footer-area, .siteFooter {
  background: rgba(10, 18, 36, 0.92) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--line) !important;
  padding: 32px 20px !important;
}
footer a, .footer a, #footer a {
  color: var(--text-muted) !important;
}
footer a:hover, .footer a:hover, #footer a:hover {
  color: var(--neon) !important;
}
footer h4, footer h5, footer h6, .footer h4, .footer h5, .footer h6 {
  color: var(--text-strong) !important;
  margin-bottom: 12px !important;
}

/* ── Pagination ───────────────────────────────── */
.pagination .page-link, .pagination li a {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
}
.pagination .active .page-link, .pagination li.active a {
  background: var(--gradient-neon) !important;
  color: var(--bg-900) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

/* ── Dropdowns ────────────────────────────────── */
.dropdown-menu {
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(18px);
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), var(--neon-glow) !important;
}
.dropdown-menu > li > a, .dropdown-item {
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}
.dropdown-menu > li > a:hover, .dropdown-item:hover {
  background: rgba(0, 229, 255, 0.10) !important;
  color: var(--neon) !important;
}

/* ── Tabs ─────────────────────────────────────── */
.nav-tabs, .tabs-nav {
  border-bottom: 1px solid var(--line) !important;
}
.nav-tabs > li > a, .tabs-nav a {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  padding: 12px 20px !important;
  border-radius: 10px 10px 0 0 !important;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover,
.tabs-nav .active a, .tabs-nav a:hover {
  background: rgba(0, 229, 255, 0.08) !important;
  color: var(--neon) !important;
  border-bottom: 2px solid var(--neon) !important;
}

/* ── Switches / Checkboxes ───────────────────── */
.form-check-input:checked, input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--neon) !important;
  border-color: var(--neon) !important;
  accent-color: var(--neon) !important;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--neon) !important;
}

/* ── Auth pages (login/register) hero ─────────── */
.loginPage, .login-page, .auth-page,
.signupPage, .register-page,
body.login, body.register {
  background:
    radial-gradient(ellipse at top, rgba(0, 229, 255, 0.18), transparent 50%),
    radial-gradient(ellipse at bottom, rgba(34, 211, 238, 0.12), transparent 50%),
    var(--bg-900) !important;
}

.loginBox, .login-box, .login-form,
.loginContainer, .auth-container, .auth-wrapper {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(24px);
  border: 1px solid var(--line-bright) !important;
  border-radius: 20px !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    var(--neon-glow-lg) !important;
  padding: 40px !important;
}

/* ── Login illustration (if exists) ───────────── */
.loginBox img:not(.logoImg), .login-image,
img[src*="login"][src*="illust"], img[src*="signup"][src*="illust"] {
  filter: hue-rotate(180deg) saturate(0.7) drop-shadow(0 0 24px rgba(0, 229, 255, 0.4));
}

/* ── Loading / Spinner ────────────────────────── */
.spinner, .loader, .loading {
  border-color: var(--line) !important;
  border-top-color: var(--neon) !important;
}

/* ── Misc legacy elements to hide / soften ────── */
.whatsapp-button img[src*="positus"],
.whatsapp-button[style*="positus"],
[data-tour="positus"],
.poweredBy,
.powered-by {
  display: none !important;
}

/* Hide ads / promo originals */
.bannerAds, .ads-banner, [class*="adsense"],
img[src*="adsense.png"], img[alt*="adsense"] {
  display: none !important;
}

/* ── Loader / skeleton helper ─────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 0.4) 0%,
    rgba(0, 229, 255, 0.08) 50%,
    rgba(30, 41, 59, 0.4) 100%
  );
  background-size: 200% 100%;
  animation: skeleton 1.4s infinite;
  border-radius: 8px;
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile polish ────────────────────────────── */
@media (max-width: 768px) {
  .card, .panel, .box, .loginBox { border-radius: 14px !important; }
  .btn { padding: 12px 18px !important; }
  body { background-attachment: scroll !important; }
}

/* ── Animations ───────────────────────────────── */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(0, 229, 255, 0.35); }
  50% { box-shadow: 0 0 30px rgba(0, 229, 255, 0.7), 0 0 60px rgba(0, 229, 255, 0.25); }
}

.btn-primary, .btn-info, .btn-success,
button[type="submit"], input[type="submit"] {
  animation: none;
}
.btn-primary:focus, .btn-info:focus, .btn-success:focus,
button[type="submit"]:focus, input[type="submit"]:focus {
  animation: neonPulse 1.6s ease-in-out infinite;
}

/* ── Service cards (panel-specific) ───────────── */
.serviceCard, .service-card, .service-item,
.platform-item, .category-card, .child-panel-card {
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  transition: all 0.3s ease !important;
  padding: 20px !important;
}
.serviceCard:hover, .service-card:hover, .platform-item:hover {
  border-color: var(--neon) !important;
  box-shadow: var(--neon-glow) !important;
  transform: translateY(-3px);
}

/* ── Stats / KPI numbers ──────────────────────── */
.stat-number, .stats-number, .kpi-value, .big-number,
.stat-box .value, .countNumber, .counter {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.5em !important;
}

/* ── Logo halo ────────────────────────────────── */
.navbar-brand, .brand, .logo {
  position: relative;
}
.navbar-brand::after, .brand::after, .logo::after {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.2), transparent 70%);
  z-index: -1;
  filter: blur(12px);
  pointer-events: none;
}