/* ============================================================
   LIGHT THEME OVERRIDE v2
   Converts dark theme (black bg, white text, gold accents)
   to light theme (white bg, dark text, purple accents)

   Rules:
   - All rules use !important to override Tailwind utilities
   - Animations (opacity, transform) are NOT modified
   - Sections that STAY DARK: #about, #support, footer, #contact
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (ROOT VARIABLES)
   ============================================================ */
:root,
:host {
  --color-primary: #7B2D8E !important;
  --color-primary-light: #9B4DCA !important;
  --color-accent: #9B4DCA !important;
  --color-background: #ffffff !important;
  --color-surface: #f5f5f7 !important;
  --color-text-primary: #1a1a2e !important;
  --color-text-secondary: rgba(26,26,46,0.65) !important;
  --color-amber-300: #9B4DCA !important;
  --color-amber-400: #7B2D8E !important;
  --color-amber-500: #7B2D8E !important;
  --color-yellow-500: #9B4DCA !important;
  --color-white: #fff !important;
  --color-black: #000 !important;
}


/* ============================================================
   2. BODY & GLOBAL BACKGROUNDS
   ============================================================ */
body {
  background-color: #ffffff !important;
  color: #1a1a2e !important;
}


/* ============================================================
   3. DARK BACKGROUND UTILITIES → WHITE/LIGHT
   (Excluded from: footer, #about, #support, #contact)
   ============================================================ */

/* bg-[#080808] */
section:not(#about):not(#support):not(#contact):not(#services) .bg-\[\#080808\],
nav .bg-\[\#080808\],
header .bg-\[\#080808\],
main > .bg-\[\#080808\],
div:not(footer *):not(section#about *):not(section#support *):not(section#contact *) > .bg-\[\#080808\] {
  background-color: #ffffff !important;
}

/* bg-[#080808] with opacity - nav bar */
nav .bg-\[\#080808\]\/60,
header .bg-\[\#080808\]\/60 {
  background-color: rgba(255,255,255,0.85) !important;
}

nav .bg-\[\#080808\]\/70,
header .bg-\[\#080808\]\/70 {
  background-color: rgba(255,255,255,0.88) !important;
}

nav .bg-\[\#080808\]\/80,
header .bg-\[\#080808\]\/80 {
  background-color: rgba(255,255,255,0.92) !important;
}

nav .bg-\[\#080808\]\/95,
header .bg-\[\#080808\]\/95 {
  background-color: rgba(255,255,255,0.97) !important;
}

/* bg-[#121210] - card/surface backgrounds (EXCLUDE services + ecossistema) */
section:not(#about):not(#support):not(#contact):not(#services) .bg-\[\#121210\] {
  background-color: #f5f5f7 !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-\[\#121210\]\/80 {
  background-color: rgba(245,245,247,0.9) !important;
}

/* Services + Ecossistema cards - STAY DARK */
section#services .bg-\[\#121210\] {
  background-color: #1a1a2e !important;
}

/* bg-[#0c0b08] - darker surface */
section:not(#about):not(#support):not(#contact):not(#services) .bg-\[\#0c0b08\]\/95 {
  background-color: rgba(240,240,242,0.97) !important;
}

/* ==============================================
   HERO SECTION - Clean white/light purple theme
   ALL overrides use highest specificity to beat inline styles
   ============================================== */

/* Main hero bg */
section.relative.min-h-screen {
  background: #f8f5fc !important;
}

/* Dark overlay div - HIDE it completely and replace with light */
section.relative.min-h-screen > .absolute.inset-0.bg-\[\#080808\],
section.relative.min-h-screen > .absolute.inset-0[class*="bg-"] {
  background: #f8f5fc !important;
}

/* Hide the bg-amarelo image */
section.relative.min-h-screen img[src*="bg-amarelo"] {
  opacity: 0 !important;
}

/* Hide ALL absolute overlays with inline gradient styles */
section.relative.min-h-screen > .absolute.inset-0 .absolute.inset-0,
section.relative.min-h-screen > .absolute.inset-0 > .absolute.inset-0 {
  background: transparent !important;
  opacity: 0 !important;
}

/* Light beam animation - purple tint for light bg */
section.relative.min-h-screen [data-us-project] {
  mix-blend-mode: multiply !important;
  opacity: 0.15 !important;
  filter: hue-rotate(270deg) !important;
}

/* Purple glow accent - subtle on light bg */
section.relative.min-h-screen .rounded-full.opacity-50 {
  opacity: 0.4 !important;
}

/* Hero text - DARK on light bg */
section.relative.min-h-screen h1 {
  color: #1a1a2e !important;
}

section.relative.min-h-screen .text-white {
  color: #1a1a2e !important;
}

section.relative.min-h-screen .text-text-secondary,
section.relative.min-h-screen .relative.z-20 > p,
section.relative.min-h-screen .relative.z-20 p {
  color: rgba(26,26,46,0.6) !important;
}

/* Hero badge pill */
section.relative.min-h-screen .badge-pill {
  background: rgba(123,45,142,0.08) !important;
  border: 1px solid rgba(123,45,142,0.15) !important;
  color: #7B2D8E !important;
}

section.relative.min-h-screen .badge-pill svg {
  color: #7B2D8E !important;
}

/* Hero buttons */
section.relative.min-h-screen .btn-primary {
  background: linear-gradient(-90deg, #4A1259 0%, #7B2D8E 50%, #9B4DCA 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(123,45,142,0.35) !important;
}

section.relative.min-h-screen .btn-outline {
  background: #ffffff !important;
  border: 1.5px solid rgba(26,26,46,0.12) !important;
  color: #1a1a2e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

section.relative.min-h-screen .btn-outline:hover {
  background: #f8f5fc !important;
  border-color: rgba(123,45,142,0.3) !important;
  color: #7B2D8E !important;
}

section.relative.min-h-screen .btn-outline svg {
  color: inherit !important;
}

/* Hero gradient overlays - transparent (not needed on light bg) */
section.relative.min-h-screen .bg-gradient-to-b {
  background: transparent !important;
}

/* Dashboard card - light theme */
section.relative.min-h-screen .overflow-hidden.rounded-2xl {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 48px rgba(123,45,142,0.08) !important;
}

/* Dashboard inner elements */
section.relative.min-h-screen .overflow-hidden.rounded-2xl .text-white {
  color: #1a1a2e !important;
}

section.relative.min-h-screen .overflow-hidden.rounded-2xl .text-white\/40,
section.relative.min-h-screen .overflow-hidden.rounded-2xl .text-white\/60 {
  color: rgba(26,26,46,0.5) !important;
}

section.relative.min-h-screen .overflow-hidden.rounded-2xl .border-white\/\[0\.06\],
section.relative.min-h-screen .overflow-hidden.rounded-2xl .border-b {
  border-color: rgba(0,0,0,0.06) !important;
}

section.relative.min-h-screen .overflow-hidden.rounded-2xl .bg-\[\#080808\] {
  background: #f8f8fa !important;
}

/* No transition gradient needed - hero is light, body is light */


/* ============================================================
   4. TEXT COLOR OVERRIDES
   Excluded from: footer, #about, #support, #contact, .btn-primary
   ============================================================ */

/* .text-white → dark text (with exclusions) */
section:not(#about):not(#support):not(#contact):not(#services) .text-white:not(.btn-primary):not(.btn-primary *):not(.bg-primary *):not([class*="bg-primary"] *) {
  color: #1a1a2e !important;
}

nav .text-white:not(.btn-primary):not(.btn-primary *) {
  color: #1a1a2e !important;
}

header .text-white:not(.btn-primary):not(.btn-primary *) {
  color: #1a1a2e !important;
}

/* Restore white text inside dark sections */
footer .text-white,
footer .text-white * {
  color: #fff !important;
}

/* #about cards (top part, light bg) - dark text */
section#about .rounded-xl.border {
  background-color: #f5f5f7 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
section#about .rounded-xl.border:hover {
  background-color: #eee8f5 !important;
  border-color: rgba(123,45,142,0.2) !important;
}
section#about .rounded-xl.border .text-white,
section#about .rounded-xl.border h3,
section#about .rounded-xl.border p {
  color: #1a1a2e !important;
}
section#about .rounded-xl.border .text-white\/50,
section#about .rounded-xl.border .text-white\/60 {
  color: rgba(26,26,46,0.55) !important;
}
section#about .rounded-xl.border .text-purple-400 {
  color: #7B2D8E !important;
}
section#about .rounded-xl.border svg {
  color: #9B4DCA !important;
}
section#about .rounded-xl.border [class*="bg-purple"],
section#about .rounded-xl.border [class*="bg-white"] {
  background-color: rgba(123,45,142,0.1) !important;
}

/* #about photo area - KEEP white text */
section#about .text-white {
  color: #fff !important;
}

section#support .text-white {
  color: #fff !important;
}

section#contact .text-white {
  color: #fff !important;
}

.btn-primary,
.btn-primary .text-white,
.btn-primary * {
  color: #fff !important;
}

/* .text-white/70 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/70:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.65) !important;
}

nav .text-white\/70 {
  color: rgba(26,26,46,0.65) !important;
}

/* .text-white/60 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/60:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.55) !important;
}

/* .text-white/50 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/50:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.45) !important;
}

/* .text-white/40 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/40:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.35) !important;
}

/* .text-white/30 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/30:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.25) !important;
}

/* .text-white/20 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/20:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.15) !important;
}

/* .text-white/80 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/80:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.75) !important;
}

/* .text-white/90 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/90:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.85) !important;
}

/* .text-white/45 */
section:not(#about):not(#support):not(#contact):not(#services) .text-white\/45:not(.btn-primary *):not(.bg-primary *) {
  color: rgba(26,26,46,0.40) !important;
}

/* Hover states for nav */
nav .hover\:text-white:hover:not(.btn-primary) {
  color: #1a1a2e !important;
}

nav .hover\:text-white\/70:hover {
  color: rgba(26,26,46,0.65) !important;
}

/* Placeholder text */
section:not(#about):not(#support):not(#contact):not(#services) .placeholder\:text-white\/30::placeholder {
  color: rgba(26,26,46,0.25) !important;
}


/* ============================================================
   5. ACCENT / PRIMARY COLOR OVERRIDES (Gold → Purple)
   ============================================================ */

/* .text-primary - gold text → purple text */
.text-primary {
  color: #7B2D8E !important;
}

.text-primary\/80 {
  color: rgba(123,45,142,0.8) !important;
}

/* .text-accent */
.text-accent {
  color: #9B4DCA !important;
}

/* .text-amber-300, .text-amber-400 */
section:not(#about):not(#support):not(#contact):not(#services) .text-amber-300 {
  color: #9B4DCA !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .text-amber-400 {
  color: #7B2D8E !important;
}

footer .text-amber-300,
footer .text-amber-400 {
  color: #9B4DCA !important;
}

/* .bg-primary */
.bg-primary {
  background-color: #7B2D8E !important;
}

.bg-primary\/3 {
  background-color: rgba(123,45,142,0.03) !important;
}

.bg-primary\/10 {
  background-color: rgba(123,45,142,0.10) !important;
}

.bg-primary\/15 {
  background-color: rgba(123,45,142,0.15) !important;
}

.bg-primary\/20 {
  background-color: rgba(123,45,142,0.20) !important;
}

.bg-primary\/\[0\.04\] {
  background-color: rgba(123,45,142,0.04) !important;
}

/* Border primary */
.border-primary\/25 {
  border-color: rgba(123,45,142,0.25) !important;
}

.border-primary\/30 {
  border-color: rgba(123,45,142,0.30) !important;
}

.hover\:border-primary\/20:hover {
  border-color: rgba(123,45,142,0.20) !important;
}

.focus\:border-primary\/30:focus {
  border-color: rgba(123,45,142,0.30) !important;
}

/* Border amber */
.border-amber-500\/20 {
  border-color: rgba(123,45,142,0.20) !important;
}

/* Gradient from amber → purple */
.from-amber-500\/10 {
  --tw-gradient-from: rgba(123,45,142,0.10) !important;
}


/* ============================================================
   6. GRADIENT TEXT (Gold → Purple)
   ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, #7B2D8E, #9B4DCA, #7B2D8E) 0 0/200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* ============================================================
   7. BUTTON OVERRIDES
   ============================================================ */

/* Primary button - gold gradient → purple gradient */
.btn-primary {
  background: linear-gradient(-90deg, #4A1259 0%, #7B2D8E 50%, #9B4DCA 100%) 0 0/100% 100% !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(123,45,142,0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(#9B4DCA 0%, #7B2D8E 50%, #4A1259 100%) !important;
  box-shadow: 0 0 20px 4px rgba(123,45,142,0.4) !important;
}

/* Outline button - dark glass → light glass */
.btn-outline {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(26,26,46,0.12) !important;
  color: #1a1a2e !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.btn-outline:hover {
  background: rgba(255,255,255,1) !important;
  border-color: rgba(26,26,46,0.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Restore dark btn-outline inside dark sections */
footer .btn-outline,
section#about .btn-outline,
section#support .btn-outline {
  background: linear-gradient(rgba(20,18,12,0.8) 0%, rgba(12,11,8,0.85) 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.4) !important;
}


/* ============================================================
   8. BADGE PILL
   ============================================================ */
.badge-pill {
  background: rgba(123,45,142,0.08) !important;
  color: #7B2D8E !important;
  border: 1px solid rgba(123,45,142,0.15) !important;
}

.badge-pill::before {
  background: conic-gradient(
    from var(--badge-light-angle, 0deg),
    rgba(255,255,255,0.06) 0%,
    rgba(123,45,142,0.3) 35%,
    rgba(255,255,255,0.06) 70%,
    rgba(123,45,142,0.7) 78%,
    rgba(255,255,255,0.95) 85%,
    rgba(123,45,142,0.7) 92%,
    rgba(255,255,255,0.06) 100%
  ) !important;
}

/* Restore badge inside dark sections */
section#about .badge-pill,
section#support .badge-pill,
section#contact .badge-pill,
footer .badge-pill {
  background: rgba(8,8,8,0.85) !important;
  color: #f5d78e !important;
  border: 1px solid transparent !important;
}


/* ============================================================
   9. GLOW EFFECTS (Gold → Purple)
   ============================================================ */
.glow-blue {
  box-shadow: 0 0 24px 8px rgba(123,45,142,0.08) !important;
}

.glow-blue-hover:hover {
  box-shadow: 0 0 40px 12px rgba(123,45,142,0.15) !important;
}


/* ============================================================
   10. GRADIENT BORDER (Gold → Purple)
   ============================================================ */
section:not(#about):not(#support):not(#contact):not(#services) .gradient-border {
  background: #f5f5f7 !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .gradient-border::before {
  background: linear-gradient(135deg, rgba(123,45,142,0.4), rgba(155,77,202,0.2), rgba(123,45,142,0.1)) !important;
}


/* ============================================================
   11. HERO GRADIENT OVERRIDE
   ============================================================ */
.hero-gradient {
  background: linear-gradient(129deg,
    rgba(123,45,142,0.04) 0%,
    rgba(155,77,202,0.02) 10.86%,
    rgba(255,255,255,0.5) 21.29%,
    rgba(255,255,255,0.8) 29.09%,
    rgba(255,255,255,0.95) 37.03%,
    #ffffff 100%
  ) !important;
}


/* ============================================================
   12. BORDER COLOR OVERRIDES
   (White borders in dark theme → subtle dark borders in light)
   ============================================================ */

/* Excluded from dark sections */
section:not(#about):not(#support):not(#contact):not(#services) .border-white\/10,
nav .border-white\/10 {
  border-color: rgba(0,0,0,0.08) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .border-white\/15 {
  border-color: rgba(0,0,0,0.08) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .border-white\/\[0\.1\] {
  border-color: rgba(0,0,0,0.08) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .border-white\/\[0\.06\] {
  border-color: rgba(0,0,0,0.05) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .border-white\/\[0\.07\] {
  border-color: rgba(0,0,0,0.06) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .border-white\/\[0\.08\] {
  border-color: rgba(0,0,0,0.06) !important;
}


/* ============================================================
   13. BACKGROUND OPACITY VARIANTS
   (White with low opacity on dark → Black with low opacity on light)
   ============================================================ */

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/5 {
  background-color: rgba(0,0,0,0.02) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/10 {
  background-color: rgba(0,0,0,0.03) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/20 {
  background-color: rgba(0,0,0,0.04) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/30 {
  background-color: rgba(0,0,0,0.05) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/40 {
  background-color: rgba(0,0,0,0.06) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/\[0\.02\] {
  background-color: rgba(0,0,0,0.02) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/\[0\.03\] {
  background-color: rgba(0,0,0,0.02) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/\[0\.04\] {
  background-color: rgba(0,0,0,0.02) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/\[0\.05\] {
  background-color: rgba(0,0,0,0.03) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/\[0\.06\] {
  background-color: rgba(0,0,0,0.03) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-white\/\[0\.08\] {
  background-color: rgba(0,0,0,0.04) !important;
}


/* ============================================================
   14. NAVIGATION BAR
   ============================================================ */

/* Nav background - dark glass → light glass */
nav,
nav > div,
header {
  border-color: rgba(0,0,0,0.06) !important;
}

/* Nav mobile menu background */
nav .bg-\[\#080808\]\/95 {
  background-color: rgba(255,255,255,0.97) !important;
}

/* Ensure nav "Contato" button stays purple with white text */
nav .btn-primary {
  color: #fff !important;
}


/* ============================================================
   15. HERO SECTION SPECIFICS
   ============================================================ */

/* Hero overlay backgrounds → transparent/white */
section.relative.min-h-screen .bg-\[\#080808\]\/60,
section.relative.min-h-screen .bg-\[\#080808\]\/70,
section.relative.min-h-screen .bg-\[\#080808\]\/80,
section.relative.min-h-screen .bg-\[\#080808\]\/95 {
  background-color: rgba(255,255,255,0.6) !important;
}

/* Hero gradient overlays - invert for white bg */
section.relative.min-h-screen .from-\[\#080808\] {
  --tw-gradient-from: #ffffff !important;
}

section.relative.min-h-screen .from-\[\#080808\]\/70 {
  --tw-gradient-from: rgba(255,255,255,0.7) !important;
}

section.relative.min-h-screen .via-\[\#080808\]\/60 {
  --tw-gradient-via: rgba(255,255,255,0.6) !important;
}

section.relative.min-h-screen .via-\[\#080808\]\/80 {
  --tw-gradient-via: rgba(255,255,255,0.8) !important;
}

section.relative.min-h-screen .to-\[\#080808\] {
  --tw-gradient-to: #ffffff !important;
}

/* Hero bg-amarelo.png image → heavily reduce opacity */
section.relative.min-h-screen img[src*="amarelo"],
section.relative.min-h-screen [style*="amarelo"] {
  opacity: 0.08 !important;
}

/* Hero light beam line → purple instead of gold */
section.relative.min-h-screen [class*="bg-gradient"][class*="amber"],
section.relative.min-h-screen .from-amber-500\/10 {
  --tw-gradient-from: rgba(123,45,142,0.10) !important;
}

section.relative.min-h-screen .to-yellow-500\/5 {
  --tw-gradient-to: rgba(155,77,202,0.05) !important;
}

/* Dashboard card in hero → light bg */
section.relative.min-h-screen .bg-\[\#121210\],
section.relative.min-h-screen .bg-\[\#0c0b08\]\/95 {
  background-color: #f5f5f7 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}


/* ============================================================
   16. LOGO CARDS (Client logos - "Quem ja confia")
   ============================================================ */

/* Give logo containers visible backgrounds so transparent logos show */
section:not(#about):not(#support):not(#contact) [class*="marquee"] .bg-white\/\[0\.02\],
section:not(#about):not(#support):not(#contact) [class*="marquee"] .bg-white\/\[0\.04\],
section:not(#about):not(#support):not(#contact) [class*="marquee"] .bg-white\/5 {
  background-color: rgba(0,0,0,0.04) !important;
}

/* Client logos - invert white logos to dark for visibility on light bg */
/* Logos are in /images/clients/X.png with opacity-50 class */
section:not(#about):not(#support):not(#contact) img[src*="/clients/"] {
  filter: brightness(0) !important;
  opacity: 0.5 !important;
}

section:not(#about):not(#support):not(#contact) img[src*="/clients/"]:hover {
  filter: brightness(0) !important;
  opacity: 0.8 !important;
}

/* Ecossistema Move card logos */
section:not(#about):not(#support):not(#contact):not(#services) .overflow-hidden img[alt*="Move"],
section:not(#about):not(#support):not(#contact):not(#services) .overflow-hidden img[alt*="move"],
section:not(#about):not(#support):not(#contact) img[src*="logo-3d"],
section:not(#about):not(#support):not(#contact):not(#services) .overflow-hidden.rounded-2xl img[class*="object-contain"] {
  filter: brightness(0.3) !important;
}


/* ============================================================
   17. SERVICES SECTION (#services)
   ============================================================ */
/* ==============================================
   SERVICES CARDS - Pure CSS fix (no HTML attrs needed)
   ============================================== */

/* Services ENTIRE section dark */
#services {
  background-color: #1a1a2e !important;
}

/* Services container stays dark - use #id for max specificity */
#services .bg-\[\#121210\],
section#services .bg-\[\#121210\],
#services .overflow-hidden.rounded-2xl {
  background-color: #1a1a2e !important;
  border-color: rgba(155,77,202,0.15) !important;
}

#services .bg-\[\#080808\] {
  background-color: #ffffff !important;
}

/* Services cards hover - purple glow on dark */
#services .group:hover {
  background-color: rgba(155,77,202,0.1) !important;
}

/* ALL text inside services - white */
#services .text-white,
#services h3,
#services h2,
#services p,
#services .font-semibold,
#services .font-bold {
  color: #fff !important;
}

#services .text-white\/50,
#services .text-white\/60,
#services .text-white\/70 {
  color: rgba(255,255,255,0.6) !important;
}

#services .text-text-secondary {
  color: rgba(255,255,255,0.6) !important;
}

#services .text-purple-400,
#services .text-accent {
  color: #c07eff !important;
}

#services .group:hover p {
  color: rgba(255,255,255,0.7) !important;
}

#services [class*="bg-purple"],
#services .bg-white\/\[0\.04\] {
  background-color: rgba(123,45,142,0.15) !important;
}

#services svg {
  color: #9B4DCA !important;
}

#services .border-white\/\[0\.1\],
#services .border-b {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Services badge */
#services .badge-pill {
  background: rgba(123,45,142,0.15) !important;
  border-color: rgba(155,77,202,0.2) !important;
  color: #c07eff !important;
}

#services .badge-pill svg {
  color: #9B4DCA !important;
}

/* Services btn-outline */
#services .btn-outline {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

#services .btn-outline:hover {
  background: rgba(155,77,202,0.15) !important;
  border-color: rgba(155,77,202,0.3) !important;
}


/* ============================================================
   18. CASES SECTION (#cases)
   ============================================================ */
section#cases .bg-\[\#121210\] {
  background-color: #f5f5f7 !important;
}

section#cases .bg-\[\#080808\] {
  background-color: #ffffff !important;
}

/* Laptop/device images keep their original look */
section#cases img[src*="case"],
section#cases img[src*="laptop"],
section#cases img[src*="mockup"] {
  filter: none !important;
}


/* ============================================================
   19. PROCESS SECTION (#process)
   ============================================================ */
section#process .bg-\[\#121210\] {
  background-color: #f5f5f7 !important;
}

section#process .bg-\[\#080808\] {
  background-color: #ffffff !important;
}


/* ============================================================
   20. "MUITO MAIS QUE UMA AGENCIA" SECTION
   ============================================================ */

/* General card overrides for light sections */
section:not(#about):not(#support):not(#contact):not(#services) .bg-\[\#0c0b08\]\/95 {
  background-color: rgba(240,240,242,0.97) !important;
}


/* ============================================================
   21. REGIONAL MAP SECTION
   ============================================================ */
/* Already handled by general bg overrides */


/* ============================================================
   22. CONTACT/CTA SECTION (#contact)
   — Convert to purple gradient, keep white text
   ============================================================ */
section#contact {
  background: linear-gradient(135deg, #4A1259 0%, #7B2D8E 50%, #9B4DCA 100%) !important;
}

section#contact .text-white {
  color: #fff !important;
}

section#contact .text-white\/70 {
  color: rgba(255,255,255,0.7) !important;
}

section#contact .text-white\/60 {
  color: rgba(255,255,255,0.6) !important;
}

section#contact .text-white\/80 {
  color: rgba(255,255,255,0.8) !important;
}

section#contact .gradient-text {
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8), #fff) 0 0/200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* ============================================================
   23. ABOUT SECTION (#about) — KEEP DARK
   ============================================================ */
section#about {
  /* No background change - keep original dark with photo */
}

section#about .text-white {
  color: #fff !important;
}

section#about .text-white\/70 {
  color: rgba(255,255,255,0.7) !important;
}

section#about .text-white\/60 {
  color: rgba(255,255,255,0.6) !important;
}

section#about .text-white\/80 {
  color: rgba(255,255,255,0.8) !important;
}

section#about .text-white\/40 {
  color: rgba(255,255,255,0.4) !important;
}

section#about .text-white\/50 {
  color: rgba(255,255,255,0.5) !important;
}


/* ============================================================
   24. SUPPORT/WHATSAPP SECTION (#support) — KEEP DARK
   ============================================================ */
section#support {
  /* No background change - keep original dark with phone mockup */
}

section#support .text-white {
  color: #fff !important;
}

section#support .text-white\/70 {
  color: rgba(255,255,255,0.7) !important;
}

section#support .text-white\/60 {
  color: rgba(255,255,255,0.6) !important;
}

section#support .text-white\/80 {
  color: rgba(255,255,255,0.8) !important;
}


/* ============================================================
   25. FOOTER — KEEP DARK
   ============================================================ */
/* Footer has bg-white in HTML, so it's a WHITE footer. Text needs to be DARK */
footer {
  background-color: #1a1a2e !important; /* Make footer dark for contrast */
}

footer .text-white {
  color: rgba(255,255,255,0.9) !important;
}

footer .text-white\/70 {
  color: rgba(255,255,255,0.6) !important;
}

footer .text-white\/60 {
  color: rgba(255,255,255,0.5) !important;
}

footer .text-white\/40 {
  color: rgba(255,255,255,0.35) !important;
}

footer .text-white\/50 {
  color: rgba(255,255,255,0.45) !important;
}

footer .text-white\/80 {
  color: rgba(255,255,255,0.75) !important;
}

footer .text-white\/30 {
  color: rgba(255,255,255,0.25) !important;
}

footer .text-white\/20 {
  color: rgba(255,255,255,0.15) !important;
}

footer .border-white\/10 {
  border-color: rgba(255,255,255,0.1) !important;
}

footer .border-white\/\[0\.1\] {
  border-color: rgba(255,255,255,0.1) !important;
}

footer .border-white\/\[0\.06\] {
  border-color: rgba(255,255,255,0.06) !important;
}

footer .bg-white\/5 {
  background-color: rgba(255,255,255,0.05) !important;
}

footer .bg-white\/10 {
  background-color: rgba(255,255,255,0.10) !important;
}

footer .bg-white\/\[0\.02\] {
  background-color: rgba(255,255,255,0.02) !important;
}

footer .bg-white\/\[0\.04\] {
  background-color: rgba(255,255,255,0.04) !important;
}

footer .bg-white {
  background-color: transparent !important; /* Override the bg-white class inside footer */
}

footer a {
  color: rgba(255,255,255,0.7) !important;
}

footer a:hover {
  color: #fff !important;
}

footer .text-primary {
  color: #9B4DCA !important;
}

footer .text-accent {
  color: #9B4DCA !important;
}

footer svg {
  color: inherit !important;
}


/* ============================================================
   26. SHADOW OVERRIDES FOR LIGHT SECTIONS
   ============================================================ */
section:not(#about):not(#support):not(#contact):not(#services) .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0,0,0,0.08) !important;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.03) !important;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .shadow-\[0_10px_80px_rgba\(0\,0\,0\,0\.7\)\] {
  --tw-shadow: 0 10px 80px rgba(0,0,0,0.12) !important;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}


/* ============================================================
   27. GRADIENT OVERLAYS FOR LIGHT SECTIONS
   (from-[#080808] → from white, to-[#080808] → to white)
   ============================================================ */

section:not(#about):not(#support):not(#contact):not(#services) .from-\[\#080808\] {
  --tw-gradient-from: #ffffff !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .from-\[\#080808\]\/70 {
  --tw-gradient-from: rgba(255,255,255,0.7) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .via-\[\#080808\]\/60 {
  --tw-gradient-via: rgba(255,255,255,0.6) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .via-\[\#080808\]\/80 {
  --tw-gradient-via: rgba(255,255,255,0.8) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .to-\[\#080808\] {
  --tw-gradient-to: #ffffff !important;
}

/* Amber/gold gradient endpoints → purple */
section:not(#about):not(#support):not(#contact):not(#services) .from-amber-500\/10 {
  --tw-gradient-from: rgba(123,45,142,0.10) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .to-yellow-500\/5 {
  --tw-gradient-to: rgba(155,77,202,0.05) !important;
}


/* ============================================================
   28. INPUT FIELDS (for forms in light sections)
   ============================================================ */
section:not(#about):not(#support):not(#contact) input,
section:not(#about):not(#support):not(#contact) textarea,
section:not(#about):not(#support):not(#contact) select {
  color: #1a1a2e !important;
}

/* Keep contact form inputs looking good on purple bg */
section#contact input,
section#contact textarea,
section#contact select {
  color: #fff !important;
}


/* ============================================================
   29. SCROLLBAR (optional, for webkit browsers)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: #f5f5f7 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(123,45,142,0.25) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(123,45,142,0.4) !important;
}


/* ============================================================
   30. PURPLE GLOW CIRCLE (Hero decorative element)
   ============================================================ */
section.relative.min-h-screen [class*="rounded-full"][class*="blur"] {
  /* Enhance purple glow on white background */
  opacity: 0.6 !important;
}


/* ============================================================
   31. CARD HOVER EFFECTS IN LIGHT SECTIONS
   ============================================================ */
section:not(#about):not(#support):not(#contact):not(#services) .hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgba(0,0,0,0.04) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .hover\:border-white\/\[0\.15\]:hover {
  border-color: rgba(0,0,0,0.1) !important;
}


/* ============================================================
   32. RING / OUTLINE COLORS
   ============================================================ */
section:not(#about):not(#support):not(#contact):not(#services) .ring-white\/10 {
  --tw-ring-color: rgba(0,0,0,0.08) !important;
}


/* ============================================================
   33. SELECTION COLOR
   ============================================================ */
::selection {
  background-color: rgba(123,45,142,0.2) !important;
  color: #1a1a2e !important;
}


/* ============================================================
   34. GENERAL BACKGROUND SECTION OVERRIDES
   Catch-all for any section-level bg-[#080808] not already handled
   ============================================================ */
section:not(#about):not(#support):not(#contact) {
  background-color: transparent !important;
}

/* Ensure the body-level sections get white bg */
main,
main > section:not(#about):not(#support):not(#contact),
main > div:not(footer):not([class*="footer"]) {
  background-color: #ffffff !important;
}


/* ============================================================
   35. WHATSAPP / PHONE SECTION BACKGROUNDS
   (Keep all WhatsApp chat UI colors as-is)
   ============================================================ */
section#support .bg-\[\#0B141A\],
section#support .bg-\[\#1F2C34\],
section#support .bg-\[\#2A3942\],
section#support .bg-\[\#005C4B\],
section#support .bg-\[\#202C33\],
section#support .bg-\[\#182229\] {
  /* Keep original WhatsApp colors - no override needed */
}


/* ============================================================
   36. TRANSITION BETWEEN LIGHT AND DARK SECTIONS
   Smooth visual separation
   ============================================================ */

/* Add subtle top border to dark sections for clean transition */
section#about,
section#support {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}


/* ============================================================
   37. BACKGROUND IMAGE CONTAINERS IN HERO
   Hide or tone down the bg-amarelo.png overlay
   ============================================================ */

/* Target absolute positioned image containers in hero */
section.relative.min-h-screen > .absolute.inset-0[class*="bg-"] {
  background-color: transparent !important;
}

/* Any inline background-image referencing amarelo */
section.relative.min-h-screen [style*="bg-amarelo"],
section.relative.min-h-screen [class*="bg-amarelo"] {
  opacity: 0.05 !important;
}


/* ============================================================
   38. FIX FOR GRADIENT STOPS IN LIGHT SECTIONS
   Override Tailwind gradient variables
   ============================================================ */
section:not(#about):not(#support):not(#contact):not(#services) .bg-gradient-to-b .from-\[\#080808\],
section:not(#about):not(#support):not(#contact):not(#services) .bg-gradient-to-t .from-\[\#080808\],
section:not(#about):not(#support):not(#contact):not(#services) .bg-gradient-to-r .from-\[\#080808\],
section:not(#about):not(#support):not(#contact):not(#services) .bg-gradient-to-l .from-\[\#080808\],
section:not(#about):not(#support):not(#contact):not(#services) .bg-gradient-to-br .from-\[\#080808\] {
  --tw-gradient-from: #ffffff !important;
}


/* ============================================================
   39. NAV BAR FIXES - Always readable regardless of section below
   ============================================================ */

/* Nav - DARK header for contrast with original light logo */
nav.fixed {
  background-color: rgba(26,26,46,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Nav links - white on dark nav */
nav a {
  color: rgba(255,255,255,0.7) !important;
}

nav a:hover {
  color: #fff !important;
}

/* Nav text - keep white */
nav .text-white,
nav .text-white\/70,
nav .text-white\/60,
nav .text-white\/40 {
  color: rgba(255,255,255,0.7) !important;
}

/* Nav PT/EN button */
nav .rounded-full.border {
  border-color: rgba(255,255,255,0.25) !important;
  background-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

nav .rounded-full.border span {
  color: #fff !important;
}

/* ==============================================
   LANGUAGE SWITCHER - Pure CSS flag replacement
   Survives React hydration
   ============================================== */

/* PT-BR page: link goes to /en/ */
nav a[href="/en/"] span:first-child {
  font-size: 0 !important;
  display: inline-block !important;
  width: 22px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Crect width='640' height='480' fill='%23009b3a'/%3E%3Cpolygon points='320,39 600,240 320,441 40,240' fill='%23fedf00'/%3E%3Ccircle cx='320' cy='240' r='90' fill='%23002776'/%3E%3C/svg%3E") center/cover no-repeat !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  color: transparent !important;
}

nav a[href="/en/"] span:nth-child(2) {
  color: rgba(255,255,255,0.3) !important;
  margin: 0 3px !important;
}

nav a[href="/en/"] span:last-child {
  font-size: 0 !important;
  display: inline-block !important;
  width: 22px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Crect width='640' height='480' fill='%23bd3d44'/%3E%3Cg fill='%23fff'%3E%3Crect y='37' width='640' height='37'/%3E%3Crect y='111' width='640' height='37'/%3E%3Crect y='185' width='640' height='37'/%3E%3Crect y='259' width='640' height='37'/%3E%3Crect y='333' width='640' height='37'/%3E%3Crect y='407' width='640' height='37'/%3E%3C/g%3E%3Crect width='260' height='259' fill='%23192f5d'/%3E%3C/svg%3E") center/cover no-repeat !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  opacity: 0.5 !important;
  color: transparent !important;
}

/* EN page: link goes to /pt-BR/ */
nav a[href="/pt-BR/"] span:first-child {
  font-size: 0 !important;
  display: inline-block !important;
  width: 22px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Crect width='640' height='480' fill='%23bd3d44'/%3E%3Cg fill='%23fff'%3E%3Crect y='37' width='640' height='37'/%3E%3Crect y='111' width='640' height='37'/%3E%3Crect y='185' width='640' height='37'/%3E%3Crect y='259' width='640' height='37'/%3E%3Crect y='333' width='640' height='37'/%3E%3Crect y='407' width='640' height='37'/%3E%3C/g%3E%3Crect width='260' height='259' fill='%23192f5d'/%3E%3C/svg%3E") center/cover no-repeat !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  color: transparent !important;
}

nav a[href="/pt-BR/"] span:nth-child(2) {
  color: rgba(255,255,255,0.3) !important;
  margin: 0 3px !important;
}

nav a[href="/pt-BR/"] span:last-child {
  font-size: 0 !important;
  display: inline-block !important;
  width: 22px !important;
  height: 16px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Crect width='640' height='480' fill='%23009b3a'/%3E%3Cpolygon points='320,39 600,240 320,441 40,240' fill='%23fedf00'/%3E%3Ccircle cx='320' cy='240' r='90' fill='%23002776'/%3E%3C/svg%3E") center/cover no-repeat !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  opacity: 0.5 !important;
  color: transparent !important;
}

nav .rounded-full.border:hover {
  background-color: rgba(255,255,255,0.08) !important;
}

/* Nav "Fale Conosco" button */
nav a.rounded-full.border[href*="wa.me"],
nav a.flex.items-center.gap-2.rounded-full.border {
  border-color: rgba(255,255,255,0.2) !important;
  background-color: transparent !important;
  color: #fff !important;
}

nav a.rounded-full.border[href*="wa.me"]:hover,
nav a.flex.items-center.gap-2.rounded-full.border:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

nav a.rounded-full.border svg {
  color: #fff !important;
}

/* Nav Contato button - solid purple */
nav .bg-primary,
nav .rounded-full.bg-primary,
nav a.rounded-full.bg-primary {
  background-color: #9B4DCA !important;
  border: none !important;
  color: #fff !important;
}

nav .bg-primary *,
nav .rounded-full.bg-primary * {
  color: #fff !important;
}

nav .bg-primary:hover,
nav a.rounded-full.bg-primary:hover {
  background-color: #7B2D8E !important;
}

/* Nav mobile menu button */
nav button svg {
  color: #fff !important;
}

/* Nav logo - ORIGINAL colors (no filter) */
nav img[alt="Move"] {
  filter: none !important;
}


/* ============================================================
   40. DASHBOARD CHART COLORS (SVG/inline - yellow → purple)
   ============================================================ */

/* SVG stroke colors - yellow to purple */
section.relative.min-h-screen svg path[stroke="#eaa31e"],
section.relative.min-h-screen svg path[stroke="#EAA31E"],
section.relative.min-h-screen svg line[stroke="#eaa31e"],
section.relative.min-h-screen svg circle[stroke="#eaa31e"] {
  stroke: #7B2D8E !important;
}

section.relative.min-h-screen svg path[fill="#eaa31e"],
section.relative.min-h-screen svg path[fill="#EAA31E"],
section.relative.min-h-screen svg rect[fill="#eaa31e"],
section.relative.min-h-screen svg circle[fill="#eaa31e"] {
  fill: #7B2D8E !important;
}

/* SVG lighter yellows */
section.relative.min-h-screen svg path[stroke="#f5c547"],
section.relative.min-h-screen svg path[fill="#f5c547"] {
  stroke: #9B4DCA !important;
  fill: #9B4DCA !important;
}

/* Dashboard ring/donut chart */
section.relative.min-h-screen .text-primary svg,
section.relative.min-h-screen [class*="text-primary"] svg {
  color: #7B2D8E !important;
}

/* Dashboard chart area fill */
section.relative.min-h-screen svg path[fill*="rgba(234"],
section.relative.min-h-screen svg path[fill*="eaa31e"] {
  fill: rgba(123,45,142,0.15) !important;
}

/* Inline style chart colors via CSS filter on SVG container */
section.relative.min-h-screen .overflow-hidden.rounded-2xl svg {
  filter: hue-rotate(270deg) saturate(1.2) !important;
}


/* ============================================================
   41. JOINVILLE / LOCATION CARDS FIX
   ============================================================ */

/* Location cards - first one may have a gradient bg that hides text */
section:not(#about):not(#support):not(#contact):not(#services) .rounded-xl .text-white,
section:not(#about):not(#support):not(#contact):not(#services) .rounded-2xl .text-white {
  color: #1a1a2e !important;
}

/* But keep white text inside buttons */
section:not(#about):not(#support):not(#contact):not(#services) .btn-primary .text-white,
section:not(#about):not(#support):not(#contact):not(#services) .bg-primary .text-white {
  color: #fff !important;
}

/* Location icon backgrounds */
section:not(#about):not(#support):not(#contact):not(#services) .bg-primary\/20 {
  background-color: rgba(123,45,142,0.12) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .bg-primary\/10 {
  background-color: rgba(123,45,142,0.08) !important;
}


/* ============================================================
   42. CTA SECTION - Purple gradient instead of dark
   ============================================================ */

section#contact {
  background: linear-gradient(180deg, #f0eaf5 0%, #e8ddf0 20%, #ddd0e8 50%, #e8ddf0 80%, #f0eaf5 100%) !important;
}

section#contact .text-white {
  color: #1a1a2e !important;
}

section#contact .text-white\/70,
section#contact .text-white\/60 {
  color: rgba(26,26,46,0.6) !important;
}

section#contact .text-white\/80 {
  color: rgba(26,26,46,0.75) !important;
}

section#contact .btn-primary {
  background: linear-gradient(-90deg, #4A1259 0%, #7B2D8E 50%, #9B4DCA 100%) !important;
  color: #fff !important;
}

section#contact .btn-outline,
section#contact a.btn-outline,
#contact .btn-outline {
  background: linear-gradient(-90deg, #4A1259 0%, #7B2D8E 50%, #9B4DCA 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(123,45,142,0.3) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

section#contact .btn-outline svg,
#contact .btn-outline svg {
  color: #fff !important;
}

section#contact .btn-outline:hover,
section#contact a.btn-outline:hover,
#contact .btn-outline:hover,
#contact a.btn-outline:hover {
  background: linear-gradient(-90deg, #3a0e47 0%, #5E1D6E 50%, #7B2D8E 100%) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 28px rgba(123,45,142,0.5) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

section#contact .btn-outline:hover svg,
section#contact a.btn-outline:hover svg,
#contact .btn-outline:hover svg,
#contact a.btn-outline:hover svg {
  color: #fff !important;
}

/* Nuclear override for btn-outline hover globally in CTA */
.btn-outline:hover {
  background: linear-gradient(-90deg, #3a0e47 0%, #5E1D6E 50%, #7B2D8E 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 28px rgba(123,45,142,0.5) !important;
}

section#contact .gradient-text {
  background-image: linear-gradient(90deg, #7B2D8E 0%, #9B4DCA 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

section#contact .btn-outline {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

section#contact .btn-outline:hover {
  background: rgba(255,255,255,0.25) !important;
}


/* ============================================================
   43. TRANSITION BETWEEN SECTIONS - smooth gradients
   ============================================================ */

/* No artificial gradients between sections */


/* ============================================================
   44. ECOSSISTEMA MOVE CARDS - Logo visibility
   ============================================================ */

/* Ecossistema Move cards - DARK cards to keep original glass-style logos */
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl {
  background-color: #1a1a2e !important;
  border-color: rgba(255,255,255,0.08) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl:hover {
  border-color: rgba(123,45,142,0.3) !important;
  background-color: #222040 !important;
}

/* Keep logos original style (mix-blend-screen on dark bg) */
section:not(#about):not(#support):not(#contact):not(#services) .group img[src*="client-logo-"],
section:not(#about):not(#support):not(#contact):not(#services) .group img[alt*="Move"] {
  mix-blend-mode: screen !important;
  filter: none !important;
  opacity: 0.8 !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .group:hover img[src*="client-logo-"],
section:not(#about):not(#support):not(#contact):not(#services) .group:hover img[alt*="Move"] {
  opacity: 1 !important;
}

/* Card titles and text - WHITE on dark cards, always visible */
/* Use ultra-high specificity to beat the section text-white→dark override */
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl .text-white,
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl h3.text-white,
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl h3,
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col h3 {
  color: #fff !important;
  opacity: 1 !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl .text-white\/50,
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl p,
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col p {
  color: rgba(255,255,255,0.6) !important;
}

/* Hover - keep dark bg */
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl:hover {
  background-color: #252040 !important;
  border-color: rgba(155,77,202,0.35) !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl:hover h3,
section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl:hover .text-white {
  color: #fff !important;
}

section:not(#about):not(#support):not(#contact):not(#services) .group.flex.flex-col.rounded-2xl:hover p {
  color: rgba(255,255,255,0.7) !important;
}