/* ============================================================================================================
   
   ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗     ███████╗██╗  ██╗ ██████╗     ██████╗ ███╗   ███╗ ██████╗
  ██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║     ██╔════╝╚██╗██╔╝██╔═══██╗    ██╔══██╗████╗ ████║██╔════╝
  ██║     ██║   ██║██╔████╔██║██████╔╝██║     █████╗   ╚███╔╝ ██║   ██║    ██║  ██║██╔████╔██║██║     
  ██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║     ██╔══╝   ██╔██╗ ██║   ██║    ██║  ██║██║╚██╔╝██║██║     
  ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ███████╗███████╗██╔╝ ██╗╚██████╔╝    ██████╔╝██║ ╚═╝ ██║╚██████╗
   ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚══════╝╚══════╝╚═╝  ╚═╝ ╚═════╝     ╚═════╝ ╚═╝     ╚═╝ ╚═════╝
                                                                                                      
   COMPLEXO DMC - STYLESHEET PRINCIPAL
   Última atualização: 2024
   
   ============================================================================================================
   
   📋 ÍNDICE DE SEÇÕES / TABLE OF CONTENTS
   
   ============================================================================================================
   
   🔧 FUNDAMENTOS / FOUNDATION
       ├── 01. RESET & VARIÁVEIS CSS ........................... (Linha ~60)
       ├── 02. MODO ESCURO (DARK MODE) ......................... (Linha ~100)
       └── 03. MODO CLARO (LIGHT MODE) ......................... (Linha ~150)
   
   🧭 NAVEGAÇÃO / NAVIGATION
       ├── 04. NAVBAR PRINCIPAL ................................ (Linha ~360)
       ├── 05. BOTÕES NAVBAR ................................... (Linha ~500)
       └── 06. WHATSAPP FLOATING BUTTON ........................ (Linha ~1500)
   
   🏠 HERO & INTRODUÇÃO
       ├── 07. HERO SECTION .................................... (Linha ~1800)
       ├── 08. HERO BADGES & ELEMENTOS ......................... (Linha ~2000)
       └── 09. HERO ANIMAÇÕES .................................. (Linha ~2200)
   
   🏢 SEÇÕES PRINCIPAIS
       ├── 10. CONHEÇA O COMPLEXO DMC (Cards Rino) ............. (Linha ~3000)
       ├── 11. AD-TECH SECTION ................................. (Linha ~9200)
       ├── 12. PRODUTOS CARDS .................................. (Linha ~4100)
       ├── 13. TREINAMENTOS (Carousel Netflix) ................. (Linha ~4600)
       ├── 14. INSTAGRAM FEED / ARTIGOS ........................ (Linha ~8900)
       ├── 15. BEAR FINANCE (Açaí Purple Corporate) ........... (Linha ~9700)
       └── 16. COMPLEXO DMC SOBRE (Cyan Professional) .......... (Linha ~10200)
   
   📞 CONTATO & FOOTER
       ├── 17. FORMULÁRIO DE CONTATO ........................... (Linha ~6200)
       └── 18. FOOTER .......................................... (Linha ~6400)
   
   📱 RESPONSIVIDADE
       ├── 19. MOBILE SMALL (360px) ............................ (Linha ~10700)
       ├── 20. MOBILE MEDIUM (480px) ........................... (Linha ~10900)
       ├── 21. TABLET (768px) .................................. (Linha ~11000)
       ├── 22. DESKTOP LARGE (1600px) .......................... (Linha ~11100)
       ├── 23. DESKTOP XL (1920px) ............................. (Linha ~11200)
       └── 24. ULTRAWIDE (2560px) .............................. (Linha ~11300)
   
   ============================================================================================================
*/




/* ============================================================================================================
   
   🔧 01. RESET & VARIÁVEIS CSS
   
   Resetando estilos padrão do navegador e definindo variáveis globais (cores, gradientes, espaçamentos)
   
   ============================================================================================================ */

/* Scroll Suave Global */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Offset para compensar navbar fixa */
section[id] {
  scroll-margin-top: 100px;
}

:root {
  --gradient-primary: linear-gradient(
    90deg,
    rgba(0, 231, 252, 1) 0%,
    rgba(0, 255, 77, 1) 100%
  );
  --gradient-badge: linear-gradient(
    90deg,
    rgba(0, 41, 99, 1) 0%,
    rgba(0, 207, 182, 1) 21%,
    rgba(0, 245, 180, 1) 48%,
    rgba(0, 246, 131, 1) 80%,
    rgba(0, 255, 68, 1) 100%
  );
  --gradient-flare: radial-gradient(
    circle,
    rgba(0, 231, 252, 0.4) 0%,
    rgba(0, 255, 77, 0.3) 30%,
    rgba(0, 255, 77, 0.2) 60%,
    transparent 100%
  );
  --color-primary: #00e7fc;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================================================
   
   🌙 02. MODO ESCURO (DARK MODE - PADRÃO)
   
   Esquema de cores padrão do site - fundo escuro com acentos cyan/verde
   
   ============================================================================================================ */

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-tertiary: #808080;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.5);
}

/* ============================================================================================================
   
   ☀️ 03. MODO CLARO (LIGHT MODE - PREMIUM)
   
   Esquema de cores alternativo - fundo claro com cores adaptadas
   
   ============================================================================================================ */

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --border-color: rgba(15, 23, 42, 0.12);
  --shadow-color: rgba(15, 23, 42, 0.1);
  /* Gradientes adaptados para tema claro - mais vibrantes */
  --gradient-primary: linear-gradient(
    90deg,
    rgba(14, 165, 233, 1) 0%,
    rgba(34, 197, 94, 1) 100%
  );
  --gradient-badge: linear-gradient(
    90deg,
    rgba(14, 165, 233, 0.9) 0%,
    rgba(34, 197, 94, 0.9) 100%
  );
  --gradient-flare: radial-gradient(
    circle,
    rgba(14, 165, 233, 0.15) 0%,
    rgba(34, 197, 94, 0.12) 30%,
    rgba(34, 197, 94, 0.08) 60%,
    transparent 100%
  );
  --color-primary: #0ea5e9;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}




/* ============================================================================================================
   
   🧭 04. NAVBAR FLUTUANTE
   
   Barra de navegação fixa com efeito blur e glassmorphism
   
   ============================================================================================================ */

.navbar {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 4rem);
  max-width: 1000px;
  padding: 1rem 2rem;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}

/* Flare effect no header (tema escuro) */
.navbar::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: var(--gradient-flare);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.navbar.scrolled::before {
  opacity: 0.2;
}

[data-theme="light"] .navbar::before {
  opacity: 0;
}

[data-theme="light"] .logo img {
  filter: brightness(0) invert(0);
  opacity: 1;
}

.navbar.scrolled {
  top: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  flex-shrink: 0;
  min-width: 120px;
  z-index: 10;
}

.logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  max-height: 40px;
  display: block;
  max-width: 200px;
  opacity: 1;
  visibility: visible;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
}

.nav-menu li {
  flex-shrink: 0;
  overflow: visible;
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link:hover::after {
  width: 100%;
}

/* Link ativo no menu */
.nav-link.active {
  color: #00e7fc !important;
  font-weight: 600;
}

.nav-link.active::after {
  width: 100%;
  background: var(--gradient-primary);
  opacity: 1;
}

.nav-cta {
  padding: 0.75rem 1.5rem;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 231, 252, 0.3), 0 0 20px rgba(0, 231, 252, 0.2),
    0 0 30px rgba(0, 255, 77, 0.15), inset 0 0 10px rgba(0, 231, 252, 0.1);
  animation: neonGlowButton 3s ease-in-out infinite;
}

/* Borda neon com gradiente usando pseudo-elemento */
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

.nav-cta span {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

@keyframes neonGlowButton {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 231, 252, 0.3), 0 0 20px rgba(0, 231, 252, 0.2),
      0 0 30px rgba(0, 255, 77, 0.15), inset 0 0 10px rgba(0, 231, 252, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(0, 231, 252, 0.5), 0 0 25px rgba(0, 231, 252, 0.3),
      0 0 40px rgba(0, 255, 77, 0.25), inset 0 0 15px rgba(0, 231, 252, 0.15);
  }
}

.nav-cta:hover {
  transform: translateY(-2px);
  animation: none;
  box-shadow: 0 0 15px rgba(0, 231, 252, 0.5), 0 0 25px rgba(0, 231, 252, 0.3),
    0 0 40px rgba(0, 255, 77, 0.25), inset 0 0 15px rgba(0, 231, 252, 0.15);
}

[data-theme="light"] .nav-cta {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important;
  animation: none !important;
}

[data-theme="light"] .nav-cta::before {
  display: none !important;
}

[data-theme="light"] .nav-cta span {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: none !important;
  background-clip: unset !important;
  font-weight: 700;
}

[data-theme="light"] .nav-cta:hover {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

/* Theme toggle removed: styles kept out to avoid unused UI */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-primary);
}




/* ============================================================================================================
   
   🏠 07. HERO SECTION
   
   Seção principal com título, badges e animações de entrada
   
   ============================================================================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: layout;
}

/* Triângulos decorativos - removido */
.hero::after {
  display: none;
}

/* Segundo triângulo */
.hero {
  background-image: none;
}

/* Flares de luz nas laterais */
.hero-flare {
  position: absolute;
  top: 10%;
  left: 0;
  width: 600px;
  height: 80%;
  background: radial-gradient(
    ellipse at left center,
    rgba(0, 231, 252, 0.25) 0%,
    rgba(0, 231, 252, 0.15) 30%,
    transparent 70%
  );
  border-radius: 0;
  filter: blur(100px);
  z-index: 0;
  animation: pulseFlare 8s ease-in-out infinite;
  transform-origin: left center;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Flare secundário - lateral direita */
.hero-flare-secondary {
  position: absolute;
  top: 10%;
  right: 0;
  width: 600px;
  height: 80%;
  background: radial-gradient(
    ellipse at right center,
    rgba(0, 255, 77, 0.25) 0%,
    rgba(0, 255, 77, 0.15) 30%,
    transparent 70%
  );
  border-radius: 0;
  filter: blur(100px);
  z-index: 0;
  animation: pulseFlare 10s ease-in-out infinite reverse;
  transform-origin: right center;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Terceiro flare - removido */
.hero-flare-tertiary {
  display: none;
}

/* Triângulo decorativo grande */
.hero::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.1) 0%,
    rgba(0, 231, 252, 0.08) 50%,
    rgba(0, 255, 77, 0.1) 100%
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(25deg);
  filter: blur(60px);
  z-index: 0;
  animation: floatTriangle 20s ease-in-out infinite;
  pointer-events: none;
}

/* Padrão de Triângulos Moderno e Dinâmico */
.hero-triangle-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='tg1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.15);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.08);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='tg2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.12);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,231,252,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.08);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='tg3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.06);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='tg4' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.05);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='0.9'%3E%3Cpolygon points='0,0 400,346 0,692' fill='url(%23tg1)' stroke='rgba(0,231,252,0.2)' stroke-width='1'/%3E%3Cpolygon points='400,0 800,0 400,346' fill='url(%23tg2)' stroke='rgba(0,255,77,0.2)' stroke-width='1'/%3E%3Cpolygon points='800,0 800,346 400,346' fill='url(%23tg3)' stroke='rgba(0,231,252,0.15)' stroke-width='1'/%3E%3Cpolygon points='0,346 200,519 0,692' fill='url(%23tg4)' stroke='rgba(0,255,77,0.18)' stroke-width='1'/%3E%3Cpolygon points='200,346 400,346 200,519' fill='url(%23tg1)' stroke='rgba(0,231,252,0.12)' stroke-width='1'/%3E%3Cpolygon points='400,346 600,519 400,692' fill='url(%23tg2)' stroke='rgba(0,255,77,0.15)' stroke-width='1'/%3E%3Cpolygon points='600,346 800,346 600,519' fill='url(%23tg3)' stroke='rgba(0,231,252,0.1)' stroke-width='1'/%3E%3Cpolygon points='800,346 800,519 600,519' fill='url(%23tg4)' stroke='rgba(0,255,77,0.12)' stroke-width='1'/%3E%3Cpolygon points='200,519 400,692 200,692' fill='url(%23tg1)' stroke='rgba(0,231,252,0.08)' stroke-width='1'/%3E%3Cpolygon points='400,519 600,692 400,692' fill='url(%23tg2)' stroke='rgba(0,255,77,0.1)' stroke-width='1'/%3E%3Cpolygon points='600,519 800,692 600,692' fill='url(%23tg3)' stroke='rgba(0,231,252,0.08)' stroke-width='1'/%3E%3Cpolygon points='100,173 300,346 100,519' fill='url(%23tg4)' stroke='rgba(0,255,77,0.1)' stroke-width='0.8'/%3E%3Cpolygon points='300,173 500,173 300,346' fill='url(%23tg1)' stroke='rgba(0,231,252,0.1)' stroke-width='0.8'/%3E%3Cpolygon points='500,173 700,173 500,346' fill='url(%23tg2)' stroke='rgba(0,255,77,0.12)' stroke-width='0.8'/%3E%3Cpolygon points='700,173 800,173 700,346' fill='url(%23tg3)' stroke='rgba(0,231,252,0.08)' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
  filter: blur(0.5px);
  animation: trianglePatternMove 120s linear infinite;
  transform-origin: center center;
}

.hero-triangle-pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='tgAlt1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.08);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.05);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 300,520 0,600' fill='url(%23tgAlt1)' stroke='rgba(0,231,252,0.1)' stroke-width='0.5'/%3E%3Cpolygon points='300,0 600,0 300,520' fill='url(%23tgAlt1)' stroke='rgba(0,255,77,0.1)' stroke-width='0.5'/%3E%3Cpolygon points='600,0 600,520 300,520' fill='url(%23tgAlt1)' stroke='rgba(0,231,252,0.08)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: 0.4;
  animation: trianglePatternMoveReverse 100s linear infinite;
  filter: blur(1px);
}

.hero-triangle-pattern::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(0, 231, 252, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(0, 255, 77, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 231, 252, 0.05) 0%,
      transparent 70%
    );
  animation: triangleGlow 8s ease-in-out infinite alternate;
  opacity: 0.6;
}

[data-theme="light"] .hero-triangle-pattern {
  opacity: 0.12;
  filter: blur(0.8px);
}

[data-theme="light"] .hero-triangle-pattern::before {
  opacity: 0.2;
  filter: blur(1.5px);
}

[data-theme="light"] .hero-triangle-pattern::after {
  background: radial-gradient(
      circle at 20% 30%,
      rgba(0, 0, 0, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.015) 0%, transparent 70%);
  opacity: 0.4;
}

@keyframes trianglePatternMove {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-50px, 50px);
  }
  50% {
    transform: translate(-100px, 0px);
  }
  75% {
    transform: translate(-50px, -50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes trianglePatternMoveReverse {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, -30px);
  }
  50% {
    transform: translate(60px, 0px);
  }
  75% {
    transform: translate(30px, 30px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes triangleGlow {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* Animações */
@keyframes floatTriangle {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-30px);
    opacity: 1;
  }
}

/* Animações para padrão mosaico - movimento suave vertical */
@keyframes floatTriangle1 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle2 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-18px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle3 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-16px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle4 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle5 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle6 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-19px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle7 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-17px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle8 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle9 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-18px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle10 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-16px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle11 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle12 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle13 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-19px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle14 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-17px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle15 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle16 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-18px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle17 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-16px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle18 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle19 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle20 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-19px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle21 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-17px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle22 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle23 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-18px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle24 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-16px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle25 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle26 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle27 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-19px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle28 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-17px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle29 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle30 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-18px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle31 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-16px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle32 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatTriangle33 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-14px) rotate(0deg);
    opacity: 1;
  }
}

@keyframes pulseFlare {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.hero.hero-index .hero-triangle-pattern {
  /* Use site image instead of SVG pattern */
  background-image: url("../images/FUNDO-SITE-ALTERADO.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9; /* slightly reduced so flares still show */
  filter: none;
  animation: none; /* keep static for hero image */
}

.hero.hero-index .hero-triangle-pattern::before,
.hero.hero-index .hero-triangle-pattern::after {
  display: none; /* disable extra svg overlays */
}

/* Left-align texts inside the index hero only */
.hero.hero-index .hero-container {
  text-align: left;
  padding-left: 4rem;
  padding-right: 2rem;
}

.hero.hero-index .hero-subtitle {
  margin-left: 0;
  margin-right: auto;
  max-width: 680px;
}

.hero.hero-index .hero-cta {
  justify-content: flex-start;
  margin-left: 0;
}

/* Responsive: on small screens keep center alignment for readability */
@media (max-width: 768px) {
  .hero.hero-index .hero-container {
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .hero.hero-index .hero-cta {
    justify-content: center;
  }
}

/* Ensure any triangular pseudo-elements are removed and use the real image as the hero background.
           This avoids the triangle gradient overlaying the photo. */
.hero.hero-index {
  background-image: url("../images/FUNDO-SITE.png");
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

.hero.hero-index::after,
.hero.hero-index .hero-triangle-pattern,
.hero.hero-index .hero-triangle-pattern::before,
.hero.hero-index .hero-triangle-pattern::after {
  display: none !important;
}

/* Dark overlay for better contrast + reposition and resize text for index hero */
.hero.hero-index {
  position: relative; /* ensure pseudo element positioning */
}

.hero.hero-index::before {
  /* Left-side dark overlay to improve text contrast while keeping image visible on the right */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60%; /* cover the left side */
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
  z-index: 1; /* sit above the background image but below the hero content (hero-container has z-index:2) */
  pointer-events: none;
}

/* Move the hero container slightly to the left and reduce widths so text doesn't overlap the rhino */
.hero.hero-index .hero-container {
  position: relative; /* above overlay */
  z-index: 2;
  max-width: 860px; /* narrower so it stays left of center */
  transform: translateX(-18%); /* shift further left on desktop */
  transition: transform 0.3s ease;
}

/* Smaller, less-aggressive title on index so it doesn't collide with the image */
.hero.hero-index .hero-title {
  font-size: clamp(2rem, 6.5vw, 4rem);
  line-height: 1.05;
}

.hero.hero-index .hero-subtitle {
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  color: rgb(255, 255, 255);
  max-width: 620px;
  margin-bottom: 1.75rem;
}

.hero.hero-index .hero-cta .btn {
  padding: 0.8rem 1.8rem;
  font-size: 0.98rem;
}

/* Reduce translation on medium screens */
@media (max-width: 1200px) {
  .hero.hero-index .hero-container {
    transform: translateX(-12%);
    max-width: 780px;
  }
}

/* On small screens revert to centered layout and remove translate */
@media (max-width: 768px) {
  .hero.hero-index .hero-container {
    transform: none;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }
  .hero.hero-index .hero-cta {
    justify-content: center;
  }
  .hero.hero-index::before {
    /* On small screens make the overlay subtler and full-width so text remains legible */
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 60%);
  }
}

/* Hero-specific button tweaks: more opaque background and slightly smaller size */
.hero.hero-index .btn-primary,
.hero.hero-index .btn-secondary {
  background: rgba(17, 17, 17, 0.72) !important; /* more opaque */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero.hero-index .hero-cta .btn {
  padding: 0.6rem 1.4rem; /* smaller */
  font-size: 0.95rem; /* slightly smaller */
  border-radius: 40px;
}

/* Slightly smaller hover effect to match reduced size */
.hero.hero-index .btn-primary:hover,
.hero.hero-index .btn-secondary:hover {
  transform: translateY(-2px);
}

/* Light theme override for hero buttons to keep contrast on light theme */
[data-theme="light"] .hero.hero-index .btn-primary,
[data-theme="light"] .hero.hero-index .btn-secondary {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
}

@keyframes rotateFlare {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

[data-theme="light"] .hero-flare {
  background: radial-gradient(
    ellipse at left center,
    rgba(150, 150, 150, 0.15) 0%,
    rgba(200, 200, 200, 0.1) 30%,
    transparent 70%
  );
  filter: blur(120px);
  opacity: 0.6;
}

[data-theme="light"] .hero-flare-secondary {
  background: radial-gradient(
    ellipse at right center,
    rgba(180, 180, 180, 0.15) 0%,
    rgba(220, 220, 220, 0.1) 30%,
    transparent 70%
  );
  filter: blur(120px);
  opacity: 0.6;
}

[data-theme="light"] .hero::after {
  background: linear-gradient(
    135deg,
    rgba(180, 180, 180, 0.08) 0%,
    rgba(200, 200, 200, 0.05) 50%,
    rgba(220, 220, 220, 0.08) 100%
  );
  filter: blur(80px);
  opacity: 0.4;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Textura de filme/grain abaixo dos textos do hero */

/* Hero Badge - Card Neon */
.hero-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid transparent;
  border-radius: 25px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out 0.1s both, neonGlow 3s ease-in-out infinite;
}

/* Borda neon com gradiente usando pseudo-elemento */
.hero-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 1px;
  background: var(--gradient-badge);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Efeito glow neon */
.hero-badge {
  box-shadow: 0 0 10px rgba(0, 207, 182, 0.3), 0 0 20px rgba(0, 207, 182, 0.2),
    0 0 30px rgba(0, 245, 180, 0.15), inset 0 0 10px rgba(0, 207, 182, 0.1);
}

@keyframes neonGlow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 207, 182, 0.3), 0 0 20px rgba(0, 207, 182, 0.2),
      0 0 30px rgba(0, 245, 180, 0.15), inset 0 0 10px rgba(0, 207, 182, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(0, 207, 182, 0.5), 0 0 25px rgba(0, 207, 182, 0.3),
      0 0 40px rgba(0, 245, 180, 0.25), inset 0 0 15px rgba(0, 207, 182, 0.15);
  }
}

[data-theme="light"] .hero-badge {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(20, 20, 20, 0.9) 100%
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    ) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  position: relative;
  animation: fadeInUp 0.8s ease-out 0.1s both !important;
  overflow: hidden;
}

/* Textura de vidro com padrão */
[data-theme="light"] .hero-badge::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.01) 1px,
      rgba(255, 255, 255, 0.01) 2px
    );
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
  border-radius: 25px;
}

[data-theme="light"] .hero-badge::before {
  display: none !important;
}

[data-theme="light"] .hero-badge:hover {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(15, 15, 15, 0.98) 100%
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}

[data-theme="light"] .hero-badge:hover::after {
  opacity: 0.8;
}

[data-theme="light"] .hero-badge span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-clip: unset !important;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

.hero-title {
  position: clamp(1rem, 1.4vw, 1rem);
  font-size: small;
  margin-right: 70px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 2rem;
  color: var(--text-primary);
  animation: fadeInUp 0.8s ease-out;
}

.hero-title .gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .section-title .gradient-text {
  background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.15));
}

/* Manter apenas "empresarial" com gradiente */
[data-theme="light"] .hero-title .gradient-text {
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.2));
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: #fff;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-cta {
  display: inline-flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.btn {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  border: 1px solid transparent;
}

.btn-primary {
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  background-clip: padding-box;
  box-shadow: 0 0 10px rgba(0, 231, 252, 0.3), 0 0 20px rgba(0, 231, 252, 0.2),
    0 0 30px rgba(0, 255, 77, 0.15), inset 0 0 10px rgba(0, 231, 252, 0.1);
  animation: neonGlowButton 3s ease-in-out infinite;
}

/* Borda neon com gradiente usando pseudo-elemento - igual ao nav-cta */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}

.btn-primary {
  isolation: isolate;
}

.btn-primary span {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
}

.btn-primary:hover {
  transform: translateY(-3px);
  animation: none;
  box-shadow: 0 0 15px rgba(0, 231, 252, 0.5), 0 0 25px rgba(0, 231, 252, 0.3),
    0 0 40px rgba(0, 255, 77, 0.25), inset 0 0 15px rgba(0, 231, 252, 0.15);
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(20, 20, 20, 0.9) 100%
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    ) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}

/* Textura de vidro com padrão */
[data-theme="light"] .btn-primary::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.01) 1px,
      rgba(255, 255, 255, 0.01) 2px
    );
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
  border-radius: 50px;
}

[data-theme="light"] .btn-primary::before {
  display: none;
}

[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(15, 15, 15, 0.98) 100%
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}

[data-theme="light"] .btn-primary:hover::after {
  opacity: 0.8;
}

[data-theme="light"] .btn-primary span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-clip: unset !important;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

.btn-secondary {
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  background-clip: padding-box;
  box-shadow: 0 0 10px rgba(0, 231, 252, 0.3), 0 0 20px rgba(0, 231, 252, 0.2),
    0 0 30px rgba(0, 255, 77, 0.15), inset 0 0 10px rgba(0, 231, 252, 0.1);
  animation: neonGlowButton 3s ease-in-out infinite;
}

/* Borda neon com gradiente usando pseudo-elemento - igual ao nav-cta */
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}

.btn-secondary {
  isolation: isolate;
}

.btn-secondary span {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
}

.btn-secondary:hover {
  transform: translateY(-3px);
  animation: none;
  box-shadow: 0 0 15px rgba(0, 231, 252, 0.5), 0 0 25px rgba(0, 231, 252, 0.3),
    0 0 40px rgba(0, 255, 77, 0.25), inset 0 0 15px rgba(0, 231, 252, 0.15);
}

[data-theme="light"] .btn-secondary {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(20, 20, 20, 0.9) 100%
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    ) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.05) !important;
  animation: none;
  position: relative;
  overflow: hidden;
}

/* Textura de vidro com padrão */
[data-theme="light"] .btn-secondary::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.01) 1px,
      rgba(255, 255, 255, 0.01) 2px
    );
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
  border-radius: 50px;
}

[data-theme="light"] .btn-secondary::before {
  display: none;
}

[data-theme="light"] .btn-secondary:hover {
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(15, 15, 15, 0.98) 100%
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
  animation: none;
}

[data-theme="light"] .btn-secondary:hover::after {
  opacity: 0.8;
}

[data-theme="light"] .btn-secondary span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-clip: unset !important;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

/* ============================================ SECTIONS ============================================ */
.section {
  padding: var(--spacing-xxl) 2rem;
  position: relative;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  margin-top: 4rem;
}

#features .section-header {
  margin-top: 8rem !important;
}

.section-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.section-title .gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .section-title .gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background-clip: unset !important;
  filter: none !important;
  color: #1a1a1a !important;
}

[data-theme="light"] .section-subtitle {
  color: #006694;
  font-weight: 700;
}

[data-theme="light"] .section-description {
  color: #4a4a4a;
}

[data-theme="light"] .feature-title {
  color: #1a1a1a;
  font-weight: 700;
}

[data-theme="light"] .feature-description {
  color: #4a4a4a;
  line-height: 1.7;
}

.services-products-title {
  text-align: center;
  margin-bottom: 8rem !important;
  margin-top: 4rem !important;
  padding-top: 3rem;
  padding-bottom: 4rem;
  position: relative;
}

.services-products-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 231, 252, 0.5), 0 0 20px rgba(0, 255, 77, 0.3);
}

.services-products-title h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0;
}

.services-products-title .section-title {
  margin-bottom: 0 !important;
}

.section-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}




/* ============================================================================================================
   
   🏢 10. CONHEÇA O COMPLEXO DMC (Cards Rino)
   
   Seção com 3 cards apresentando as empresas do grupo (Rino com borda gradiente)
   
   ============================================================================================================ */

.conheca {
  text-align: center;
  margin-bottom: 0;
  padding: 6rem 2rem 4rem 0rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  position: relative;
  overflow: visible;
}

/* Background com partículas sutis */
.conheca::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(0, 231, 252, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 255, 77, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.conheca-container {
  position: relative;
  z-index: 1;
}

/* Título com gradiente neon */
.conheca-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #00e7fc 50%, #00ff4d 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerTitle 4s ease-in-out infinite;
}

@keyframes shimmerTitle {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.conheca h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem !important;
  padding: 0;
}

.conheca-description {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  margin-bottom: 3rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.grid-container-rino {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  padding: 1rem;
}

/* Card central - DESTAQUE com BORDA FINA */
.card-imagem-conheca {
  margin: 0 auto;
  width: 100%;
  height: 520px !important;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 1px solid transparent;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-imagem-conheca:hover {
  transform: translateY(-20px);
  box-shadow: 
    0 0 40px rgba(0, 231, 252, 0.6), 
    0 0 80px rgba(0, 255, 77, 0.4),
    0 40px 80px rgba(0, 0, 0, 0.5);
}

/* Imagem ocupa todo o card */
.card-imagem-conheca .texto-sobre-imagem-conheca {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 23px;
  overflow: hidden;
}

.card-imagem-conheca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.card-imagem-conheca:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.adtech-botton-esquerdo,
.bottom-adtech-direito {
  margin: 1rem;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  text-transform: capitalize;
}
.adtech-botton-esquerdo {
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  color: #000000;
  border: none;
}

.adtech-botton-esquerdo:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 231, 252, 0.4);
}

.bottom-adtech-direito {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.bottom-adtech-direito:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
}
/* ---------------- texto sobre a imagem ------------------- */
.texto-sobre-imagem-conheca h3 {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 3rem;
  padding: 2rem;
  z-index: 2;
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.texto-sobre-imagem-conheca p {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 2rem;
  z-index: 2;
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.texto-sobre-imagem-conheca h3 {
  bottom: 60px;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  margin: 0;
  font-weight: 700;
}

.texto-sobre-imagem-conheca p {
  bottom: 30px;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  margin: 0;
}

/* Overlay escuro para melhor legibilidade do texto */
.texto-sobre-imagem-conheca::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  z-index: 1;
}

/* Cards laterais - BORDAS GRADIENTE */
.container-conheca-adtech,
.automacao-subtitulo {
  height: 300px;
  border-radius: 20px;
  padding: 2.5rem;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 1px solid transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.container-conheca-adtech:hover,
.automacao-subtitulo:hover {
  transform: translateY(-15px);
  box-shadow: 
    0 0 30px rgba(0, 231, 252, 0.5), 
    0 0 60px rgba(0, 255, 77, 0.3),
    0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Container interno do card esquerdo */
.conheca-container3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* Ícones com borda gradiente */
.container-conheca-adtech .icon-card,
.automacao-subtitulo .icon-card,
.conheca-container3 .icon-card {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 1px solid transparent;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.container-conheca-adtech:hover .icon-card,
.automacao-subtitulo:hover .icon-card,
.conheca-container3:hover .icon-card {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 255, 77, 0.4);
}

.container-conheca-adtech .icon-card svg,
.automacao-subtitulo .icon-card svg,
.conheca-container3 .icon-card svg {
  color: #00ff4d;
  width: 28px;
  height: 28px;
  transition: filter 0.4s ease;
}

.container-conheca-adtech:hover .icon-card svg,
.automacao-subtitulo:hover .icon-card svg,
.conheca-container3:hover .icon-card svg {
  filter: drop-shadow(0 0 8px rgba(0, 255, 77, 0.6));
}

/* Títulos dos cards laterais */
.container-conheca-adtech h3,
.automacao-subtitulo h3,
.conheca-container3 h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.container-conheca-adtech p,
.conheca-container3 p {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.Adtech-titulo {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: white;
}

.automacao-subtitulo p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: white;
  margin: 0;
}

/* Responsivo para tablets */
@media (max-width: 992px) {
  .grid-container-rino {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .card-imagem-conheca {
    height: 400px !important;
  }

  .container-conheca-adtech,
  .automacao-subtitulo {
    height: 250px;
  }
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .grid-container-rino {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .card-imagem-conheca {
    height: 400px !important;
    margin-bottom: 2rem;
  }

  .container-conheca-adtech,
  .automacao-subtitulo {
    height: 250px;
  }
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .grid-container-rino {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .card-imagem-conheca {
    height: 400px !important;
    margin-bottom: 2rem;
  }

  .container-conheca-adtech,
  .automacao-subtitulo {
    height: 250px;
  }
}
/* =========================== AD-TECH IMAGE E TEXTO ============================ */
.adtech-section {
  text-align: left;
  margin-bottom: 4rem;
  padding: 4rem 2rem 0 2rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.adtech-container {
  display: grid;
  grid-template-columns: repeat(1, 1.2fr);
  margin: 20px;
}
.textos-adtech {
  padding: 0;
  margin: 0 0 1.2rem 0;
}
.adtech-description {
  margin-bottom: 2rem;
}
.adtech-title {
  padding: 2%;
  margin-bottom: 20px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.box-image-lateral {
  padding: 20px;
  margin: 30px;
  max-width: 520px; /* allow image to display at reasonable size */
}
.adtech-container .adtech-image-wrapper img {
  max-width: 500px;
}

/*========================================= ADTECH PT 2 ============================*/
.section-cards {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-de-texto {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -100px;
}

.adtech-description-secundario h3 {
  margin-top: 100px;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
}

/* Grid de Cards */
.adtech-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 6rem;
  align-items: stretch;
}

.cards-adtech-wrapper {
  width: 100%;
  min-height: 280px;
  padding: 2.2rem;
  background: #0b0b0b;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.cards-adtech-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.1) 0%,
    rgba(0, 255, 77, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.cards-adtech-wrapper:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 231, 252, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 231, 252, 0.2);
}

.cards-adtech-wrapper:hover::before {
  opacity: 1;
}

.card-adtech-integracao {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card-adtech-integracao .icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 255, 160, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-adtech-integracao h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}
.card-adtech-integracao p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 90%;
}

.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}

.card-icon svg {
  width: 32px;
  height: 32px;
  color: #00ff4d;
}

.adtech-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-title-adtech {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.adtech-content-description {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* Responsivo para tablets */
@media (max-width: 1024px) {
  .adtech-section {
    padding: 4rem 1.5rem;
  }

  .adtech-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .adtech-section {
    padding: 3rem 1rem;
  }

  .textos-adtech {
    margin-bottom: 2rem;
  }

  .box-image-lateral {
    margin: 2rem 0;
  }

  .bottom-adtech-container {
    flex-direction: column;
    width: 100%;
  }

  .adtech-botton-esquerdo,
  .bottom-adtech-direito {
    width: 100%;
    text-align: center;
    padding: 1rem;
  }

  .adtech-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cards-adtech-wrapper {
    padding: 2rem 1.5rem;
  }
}
/* ====================================== LOGO COMPLEXO DMC ============================================ */
.complexo-section {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

/* Flares animados para Complexo DMC */
.complexo-flare-1 {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 231, 252, 0.3) 0%,
    rgba(0, 231, 252, 0.2) 30%,
    transparent 70%
  );
  filter: blur(80px);
  z-index: 0;
  animation: complexoPulse1 8s ease-in-out infinite;
  pointer-events: none;
}

.complexo-flare-2 {
  position: absolute;
  bottom: 15%;
  right: 10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 77, 0.3) 0%,
    rgba(0, 255, 77, 0.2) 30%,
    transparent 70%
  );
  filter: blur(90px);
  z-index: 0;
  animation: complexoPulse2 10s ease-in-out infinite;
  pointer-events: none;
}

.complexo-flare-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 231, 252, 0.2) 0%,
    rgba(0, 255, 77, 0.15) 40%,
    transparent 70%
  );
  filter: blur(70px);
  z-index: 0;
  transform: translate(-50%, -50%);
  animation: complexoPulse3 12s ease-in-out infinite;
  pointer-events: none;
}

/* Padrão triangular animado para Complexo DMC */
.complexo-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='cpt1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.2);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,255,77,0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.1);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='cpt2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.18);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,231,252,0.12);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 300,520 0,600' fill='url(%23cpt1)'/%3E%3Cpolygon points='300,0 600,0 300,520' fill='url(%23cpt2)'/%3E%3Cpolygon points='600,0 600,520 300,520' fill='url(%23cpt1)'/%3E%3Cpolygon points='150,260 450,260 300,0' fill='url(%23cpt2)' opacity='0.6'/%3E%3Cpolygon points='150,520 450,520 300,260' fill='url(%23cpt1)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 600px 600px;
  background-repeat: repeat;
  filter: blur(0.5px);
  animation: complexoTriangleMove 100s linear infinite;
  transform-origin: center center;
}

.complexo-pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='cptAlt' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 200,346 0,400' fill='url(%23cptAlt)'/%3E%3Cpolygon points='200,0 400,0 200,346' fill='url(%23cptAlt)'/%3E%3Cpolygon points='400,0 400,346 200,346' fill='url(%23cptAlt)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-repeat: repeat;
  opacity: 0.5;
  animation: complexoTriangleMoveReverse 80s linear infinite;
  filter: blur(1px);
}

.complexo-pattern::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 40%,
      rgba(0, 231, 252, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(0, 255, 77, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 231, 252, 0.08) 0%,
      transparent 70%
    );
  animation: complexoGlow 9s ease-in-out infinite alternate;
  opacity: 0.7;
}

/* Partículas triangulares flutuantes */
.complexo-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.complexo-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.4;
}

.complexo-triangle-1 {
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 0;
  border-bottom: 60px solid rgba(0, 231, 252, 0.5);
  top: 10%;
  left: 5%;
  animation: complexoFloat1 12s ease-in-out infinite;
}

.complexo-triangle-2 {
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 70px solid rgba(0, 255, 77, 0.45);
  border-bottom: 0;
  top: 5%;
  right: 8%;
  animation: complexoFloat2 15s ease-in-out infinite;
}

.complexo-triangle-3 {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 0;
  border-bottom: 25px solid rgba(0, 231, 252, 0.4);
  bottom: 15%;
  left: 12%;
  animation: complexoFloat3 18s ease-in-out infinite;
}

.complexo-triangle-4 {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 85px solid rgba(0, 255, 77, 0.4);
  border-bottom: 0;
  bottom: 10%;
  right: 15%;
  animation: complexoFloat4 14s ease-in-out infinite;
}

.complexo-triangle-5 {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 0;
  border-bottom: 20px solid rgba(0, 231, 252, 0.35);
  top: 50%;
  left: 3%;
  animation: complexoFloat5 16s ease-in-out infinite;
}

.complexo-triangle-6 {
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 75px solid rgba(0, 255, 77, 0.4);
  border-bottom: 0;
  top: 45%;
  right: 5%;
  animation: complexoFloat6 13s ease-in-out infinite;
}

/* Animações para Complexo DMC */
@keyframes complexoPulse1 {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2) translate(30px, -20px);
    opacity: 0.9;
  }
}

@keyframes complexoPulse2 {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15) translate(-25px, 30px);
    opacity: 0.8;
  }
}

@keyframes complexoPulse3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.7;
  }
}

@keyframes complexoTriangleMove {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-40px, 40px);
  }
  50% {
    transform: translate(-80px, 0px);
  }
  75% {
    transform: translate(-40px, -40px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes complexoTriangleMoveReverse {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(35px, -35px);
  }
  50% {
    transform: translate(70px, 0px);
  }
  75% {
    transform: translate(35px, 35px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes complexoGlow {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

@keyframes complexoFloat1 {
  0%,
  100% {
    transform: rotate(90deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(90deg) translateY(-40px) translateX(25px);
    opacity: 0.6;
  }
}

@keyframes complexoFloat2 {
  0%,
  100% {
    transform: rotate(180deg) translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: rotate(180deg) translateY(45px) translateX(-30px);
    opacity: 0.65;
  }
}

@keyframes complexoFloat3 {
  0%,
  100% {
    transform: rotate(45deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(45deg) translateY(50px) translateX(35px);
    opacity: 0.6;
  }
}

@keyframes complexoFloat4 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-55px) translateX(-40px);
    opacity: 0.6;
  }
}

@keyframes complexoFloat5 {
  0%,
  100% {
    transform: rotate(-30deg) translateY(0) translateX(0);
    opacity: 0.25;
  }
  50% {
    transform: rotate(-30deg) translateY(-35px) translateX(30px);
    opacity: 0.55;
  }
}

@keyframes complexoFloat6 {
  0%,
  100% {
    transform: rotate(135deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(135deg) translateY(40px) translateX(-25px);
    opacity: 0.6;
  }
}

.complexo-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.complexo-image-wrapper {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.complexo-image-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
}

.complexo-image-wrapper img {
  width: 100%;
  height: auto;
  max-width: 600px;
  display: block;
  border-radius: 24px;
  object-fit: cover;
  position: relative;
  z-index: 1;
  /* removed decorative drop-shadows per request */
  filter: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.complexo-image-wrapper:hover img {
  /* keep a subtle lift on hover but no colored shadows */
  transform: translateY(-6px) scale(1.01);
}

.complexo-text {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.complexo-title {
  /* reduce the main title size to avoid overpowering the section */
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: center;
}
.texto-container-card-complexo {
  margin: 16px;
  padding: 14px 18px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  /* slightly smaller and more compact for long paragraph headings */
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 1rem auto;
    margin-left: 10px;
}
.complexo-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    opacity: 0.8;
    text-align: center;
}
.container-borda {
  /* reduce overall footprint: constrain width and center */
  max-width: 1100px;
  margin: 1.25rem auto; /* smaller vertical margin and centered */
  padding: 0.75rem 1.25rem; /* reduced padding */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgb(12, 12, 12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 8px rgba(0, 231, 252, 0.18), 0 0 14px rgba(0, 231, 252, 0.12),
    0 0 22px rgba(0, 255, 77, 0.08), inset 0 0 6px rgba(0, 231, 252, 0.06);
}
.texto-container-borda {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 2rem auto;
    text-align: left;
}

.complexo-image-wrapper {
  background-color: transparent;
  /* act as a horizontal mask: make the wrapper rectangular */
  width: 100%;
  max-width: 920px; /* control maximum display width */
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 3 / 1; /* forces a wide rectangular shape */
  border-radius: 8px;
}
.imagem_justica{
  color: #00ff4d;
  background-color: transparent;
}
.complexo-content img {
  margin: 2rem auto;
  border: 1px solid rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  max-width: 1000px;
  padding: 2rem 3rem;
}
.textos-subtitulos-complexo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 2rem 3rem;
}
.container-texto-complexo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 1rem auto;
    text-align: center;
}
.texto-subtitulo-complexo {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* Responsividade para Complexo DMC */
@media (max-width: 991px) {
  .complexo-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .complexo-image-wrapper {
    width: 100%;
    max-width: 900px;
  }

  .complexo-image-wrapper img {
    max-width: 100%;

  }

  .complexo-text {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .complexo-section {
    padding: 3rem 0;
  }

  .complexo-image-wrapper img {
    max-width: 100%;
  }
}

.complexo-image-wrapper {
  overflow: hidden; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.complexo-image-wrapper img.imagem_justica {
  /* Fill the rectangular mask and focus crop on the face */
  width: 150%; /* slightly larger so sides are cropped and face remains visible */
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transform: none; /* rely on object-position for centering */
  /* tune these percentages if you want the face more to the left/right or higher/lower */
  object-position: 38% 22%; /* x% y% — adjust horizontally and vertically to favor the face */
}

@media (max-width: 900px) {
  .complexo-image-wrapper img.imagem_justica {
    width: 100%;
    height: auto; /* let it flow naturally on small screens */
    transform: none;
  }
}

/* ============================================
           BEAR FINANCE SECTION
           ============================================ */
.bear-section {
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

/* Flares animados para Bear Finance */
.bear-flare-1 {
  position: absolute;
  top: 15%;
  right: 8%;
  width: 550px;
  height: 550px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 77, 0.35) 0%,
    rgba(0, 255, 77, 0.25) 30%,
    transparent 70%
  );
  filter: blur(85px);
  z-index: 0;
  animation: bearPulse1 9s ease-in-out infinite;
  pointer-events: none;
}

.bear-flare-2 {
  position: absolute;
  bottom: 10%;
  left: 8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 231, 252, 0.35) 0%,
    rgba(0, 231, 252, 0.25) 30%,
    transparent 70%
  );
  filter: blur(95px);
  z-index: 0;
  animation: bearPulse2 11s ease-in-out infinite;
  pointer-events: none;
}

.bear-flare-3 {
  position: absolute;
  top: 45%;
  right: 50%;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 77, 0.25) 0%,
    rgba(0, 231, 252, 0.2) 40%,
    transparent 70%
  );
  filter: blur(75px);
  z-index: 0;
  transform: translate(50%, -50%);
  animation: bearPulse3 13s ease-in-out infinite;
  pointer-events: none;
}

/* Padrão triangular animado para Bear Finance */
.bear-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg width='700' height='700' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='bpt1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.25);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,231,252,0.2);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.15);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='bpt2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.22);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,255,77,0.18);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.12);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 350,606 0,700' fill='url(%23bpt1)'/%3E%3Cpolygon points='350,0 700,0 350,606' fill='url(%23bpt2)'/%3E%3Cpolygon points='700,0 700,606 350,606' fill='url(%23bpt1)'/%3E%3Cpolygon points='175,303 525,303 350,0' fill='url(%23bpt2)' opacity='0.7'/%3E%3Cpolygon points='175,606 525,606 350,303' fill='url(%23bpt1)' opacity='0.7'/%3E%3Cpolygon points='87.5,151.5 262.5,151.5 175,0' fill='url(%23bpt2)' opacity='0.5'/%3E%3Cpolygon points='437.5,151.5 612.5,151.5 525,0' fill='url(%23bpt1)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 700px 700px;
  background-repeat: repeat;
  filter: blur(0.6px);
  animation: bearTriangleMove 110s linear infinite;
  transform-origin: center center;
}

.bear-pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg width='500' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='bptAlt' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.18);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.12);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 250,433 0,500' fill='url(%23bptAlt)'/%3E%3Cpolygon points='250,0 500,0 250,433' fill='url(%23bptAlt)'/%3E%3Cpolygon points='500,0 500,433 250,433' fill='url(%23bptAlt)'/%3E%3Cpolygon points='125,216.5 375,216.5 250,0' fill='url(%23bptAlt)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  background-repeat: repeat;
  opacity: 0.6;
  animation: bearTriangleMoveReverse 90s linear infinite;
  filter: blur(1.2px);
}

.bear-pattern::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 60% 35%,
      rgba(0, 255, 77, 0.18) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 25% 65%,
      rgba(0, 231, 252, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 255, 77, 0.1) 0%,
      transparent 70%
    );
  animation: bearGlow 10s ease-in-out infinite alternate;
  opacity: 0.8;
}

/* Partículas triangulares flutuantes para Bear */
.bear-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bear-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.4;
}

.bear-triangle-1 {
  border-left: 42px solid transparent;
  border-right: 42px solid transparent;
  border-top: 0;
  border-bottom: 70px solid rgba(0, 255, 77, 0.5);
  top: 8%;
  right: 10%;
  animation: bearFloat1 14s ease-in-out infinite;
}

.bear-triangle-2 {
  border-left: 38px solid transparent;
  border-right: 38px solid transparent;
  border-top: 65px solid rgba(0, 231, 252, 0.45);
  border-bottom: 0;
  top: 3%;
  left: 7%;
  animation: bearFloat2 17s ease-in-out infinite;
}

.bear-triangle-3 {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 0;
  border-bottom: 30px solid rgba(0, 255, 77, 0.4);
  bottom: 12%;
  right: 8%;
  animation: bearFloat3 16s ease-in-out infinite;
}

.bear-triangle-4 {
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  border-top: 95px solid rgba(0, 231, 252, 0.4);
  border-bottom: 0;
  bottom: 8%;
  left: 10%;
  animation: bearFloat4 13s ease-in-out infinite;
}

.bear-triangle-5 {
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 0;
  border-bottom: 24px solid rgba(0, 255, 77, 0.35);
  top: 55%;
  right: 4%;
  animation: bearFloat5 15s ease-in-out infinite;
}

.bear-triangle-6 {
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 80px solid rgba(0, 231, 252, 0.4);
  border-bottom: 0;
  top: 50%;
  left: 4%;
  animation: bearFloat6 18s ease-in-out infinite;
}

/* Animações para Bear Finance */
@keyframes bearPulse1 {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.25) translate(-35px, 25px);
    opacity: 1;
  }
}

@keyframes bearPulse2 {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2) translate(30px, -35px);
    opacity: 0.9;
  }
}

@keyframes bearPulse3 {
  0%,
  100% {
    transform: translate(50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(50%, -50%) scale(1.35);
    opacity: 0.8;
  }
}

@keyframes bearTriangleMove {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(45px, -45px);
  }
  50% {
    transform: translate(90px, 0px);
  }
  75% {
    transform: translate(45px, 45px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes bearTriangleMoveReverse {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-40px, 40px);
  }
  50% {
    transform: translate(-80px, 0px);
  }
  75% {
    transform: translate(-40px, -40px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes bearGlow {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes bearFloat1 {
  0%,
  100% {
    transform: rotate(-90deg) translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: rotate(-90deg) translateY(-50px) translateX(-30px);
    opacity: 0.7;
  }
}

@keyframes bearFloat2 {
  0%,
  100% {
    transform: rotate(180deg) translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: rotate(180deg) translateY(55px) translateX(40px);
    opacity: 0.7;
  }
}

@keyframes bearFloat3 {
  0%,
  100% {
    transform: rotate(60deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(60deg) translateY(-60px) translateX(35px);
    opacity: 0.65;
  }
}

@keyframes bearFloat4 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(45px) translateX(-40px);
    opacity: 0.7;
  }
}

@keyframes bearFloat5 {
  0%,
  100% {
    transform: rotate(-45deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(-45deg) translateY(-40px) translateX(-25px);
    opacity: 0.6;
  }
}

@keyframes bearFloat6 {
  0%,
  100% {
    transform: rotate(120deg) translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: rotate(120deg) translateY(50px) translateX(30px);
    opacity: 0.7;
  }
}

/* Ajustes para tema claro Bear */
[data-theme="light"] .bear-flare-1,
[data-theme="light"] .bear-flare-2,
[data-theme="light"] .bear-flare-3 {
  opacity: 0.15;
  filter: blur(110px);
}

[data-theme="light"] .bear-pattern {
  opacity: 0.08;
}

[data-theme="light"] .bear-pattern::after {
  background: radial-gradient(
      circle at 60% 35%,
      rgba(0, 0, 0, 0.025) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 25% 65%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.015) 0%, transparent 70%);
  opacity: 0.25;
}

.bear-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .bear-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .bear-content {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .bear-content {
    gap: 1.5rem;
  }
}

/* ============================================
           ABOUT SECTION - ANIMATED BACKGROUND
           ============================================ */
.about-section {
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

/* Flares animados para About Section */
.about-flare-1 {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 231, 252, 0.32) 0%,
    rgba(0, 231, 252, 0.22) 30%,
    transparent 70%
  );
  filter: blur(85px);
  z-index: 0;
  animation: aboutPulse1 9s ease-in-out infinite;
  pointer-events: none;
}

.about-flare-2 {
  position: absolute;
  bottom: 18%;
  right: 12%;
  width: 470px;
  height: 470px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 77, 0.32) 0%,
    rgba(0, 255, 77, 0.22) 30%,
    transparent 70%
  );
  filter: blur(95px);
  z-index: 0;
  animation: aboutPulse2 11s ease-in-out infinite;
  pointer-events: none;
}

.about-flare-3 {
  position: absolute;
  top: 48%;
  left: 52%;
  width: 430px;
  height: 430px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 231, 252, 0.22) 0%,
    rgba(0, 255, 77, 0.17) 40%,
    transparent 70%
  );
  filter: blur(75px);
  z-index: 0;
  transform: translate(-50%, -50%);
  animation: aboutPulse3 13s ease-in-out infinite;
  pointer-events: none;
}

/* Padrão triangular animado para About Section */
.about-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='apt1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.2);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,255,77,0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.1);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='apt2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.18);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,231,252,0.12);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 300,520 0,600' fill='url(%23apt1)'/%3E%3Cpolygon points='300,0 600,0 300,520' fill='url(%23apt2)'/%3E%3Cpolygon points='600,0 600,520 300,520' fill='url(%23apt1)'/%3E%3Cpolygon points='0,600 300,80 0,80' fill='url(%23apt2)'/%3E%3Cpolygon points='300,600 600,600 300,80' fill='url(%23apt1)'/%3E%3C/svg%3E");
  background-size: 600px 600px;
  background-repeat: repeat;
  filter: blur(0.5px);
  animation: aboutTriangleMove 105s linear infinite;
  transform-origin: center center;
}

.about-pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='aptAlt' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 200,346 0,400' fill='url(%23aptAlt)'/%3E%3Cpolygon points='200,0 400,0 200,346' fill='url(%23aptAlt)'/%3E%3Cpolygon points='400,0 400,346 200,346' fill='url(%23aptAlt)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-repeat: repeat;
  opacity: 0.5;
  animation: aboutTriangleMoveReverse 85s linear infinite;
  filter: blur(1px);
}

.about-pattern::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 35% 45%,
      rgba(0, 231, 252, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 65% 55%,
      rgba(0, 255, 77, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 231, 252, 0.08) 0%,
      transparent 70%
    );
  animation: aboutGlow 10s ease-in-out infinite alternate;
  opacity: 0.7;
}

/* Partículas triangulares flutuantes */
.about-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.4;
}

.about-triangle-1 {
  border-left: 38px solid transparent;
  border-right: 38px solid transparent;
  border-top: 0;
  border-bottom: 65px solid rgba(0, 231, 252, 0.5);
  top: 8%;
  left: 7%;
  animation: aboutFloat1 13s ease-in-out infinite;
}

.about-triangle-2 {
  border-left: 42px solid transparent;
  border-right: 42px solid transparent;
  border-top: 72px solid rgba(0, 255, 77, 0.45);
  border-bottom: 0;
  top: 6%;
  right: 10%;
  animation: aboutFloat2 16s ease-in-out infinite;
}

.about-triangle-3 {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 0;
  border-bottom: 28px solid rgba(0, 231, 252, 0.4);
  bottom: 18%;
  left: 14%;
  animation: aboutFloat3 19s ease-in-out infinite;
}

.about-triangle-4 {
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-top: 88px solid rgba(0, 255, 77, 0.4);
  border-bottom: 0;
  bottom: 12%;
  right: 17%;
  animation: aboutFloat4 15s ease-in-out infinite;
}

.about-triangle-5 {
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 0;
  border-bottom: 22px solid rgba(0, 231, 252, 0.35);
  top: 52%;
  left: 4%;
  animation: aboutFloat5 17s ease-in-out infinite;
}

.about-triangle-6 {
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 78px solid rgba(0, 255, 77, 0.4);
  border-bottom: 0;
  top: 48%;
  right: 6%;
  animation: aboutFloat6 14s ease-in-out infinite;
}

/* Animações para About Section */
@keyframes aboutPulse1 {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.22) translate(35px, -25px);
    opacity: 0.9;
  }
}

@keyframes aboutPulse2 {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.18) translate(-30px, 35px);
    opacity: 0.8;
  }
}

@keyframes aboutPulse3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.32);
    opacity: 0.7;
  }
}

@keyframes aboutTriangleMove {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-45px, 45px);
  }
  50% {
    transform: translate(-85px, 0px);
  }
  75% {
    transform: translate(-45px, -45px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes aboutTriangleMoveReverse {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(50px, -50px);
  }
  50% {
    transform: translate(100px, 0px);
  }
  75% {
    transform: translate(50px, 50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes aboutGlow {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes aboutFloat1 {
  0%,
  100% {
    transform: rotate(75deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(75deg) translateY(-45px) translateX(30px);
    opacity: 0.6;
  }
}

@keyframes aboutFloat2 {
  0%,
  100% {
    transform: rotate(165deg) translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: rotate(165deg) translateY(50px) translateX(-35px);
    opacity: 0.65;
  }
}

@keyframes aboutFloat3 {
  0%,
  100% {
    transform: rotate(50deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(50deg) translateY(55px) translateX(40px);
    opacity: 0.6;
  }
}

@keyframes aboutFloat4 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-60px) translateX(-45px);
    opacity: 0.6;
  }
}

@keyframes aboutFloat5 {
  0%,
  100% {
    transform: rotate(-25deg) translateY(0) translateX(0);
    opacity: 0.25;
  }
  50% {
    transform: rotate(-25deg) translateY(-40px) translateX(35px);
    opacity: 0.55;
  }
}

@keyframes aboutFloat6 {
  0%,
  100% {
    transform: rotate(140deg) translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: rotate(140deg) translateY(45px) translateX(-30px);
    opacity: 0.6;
  }
}

/* Ajustes para tema claro About */
[data-theme="light"] .about-flare-1,
[data-theme="light"] .about-flare-2,
[data-theme="light"] .about-flare-3 {
  opacity: 0.18;
  filter: blur(105px);
}

[data-theme="light"] .about-pattern {
  opacity: 0.1;
}

[data-theme="light"] .about-pattern::after {
  background: radial-gradient(
      circle at 35% 45%,
      rgba(0, 0, 0, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 65% 55%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.015) 0%, transparent 70%);
  opacity: 0.3;
}

.about-content {
  position: relative;
  z-index: 1;
}

.bear-image-wrapper {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bear-image-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
}

.bear-image-wrapper img {
  width: 100%;
  height: auto;
  max-width: 400px;
  display: block;
  border-radius: 24px;
  object-fit: cover;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(0, 231, 252, 0.25))
    drop-shadow(0 0 8px rgba(0, 255, 77, 0.2))
    drop-shadow(0 0 12px rgba(0, 231, 252, 0.15));
  transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bear-image-wrapper:hover img {
  filter: drop-shadow(0 0 6px rgba(0, 231, 252, 0.4))
    drop-shadow(0 0 12px rgba(0, 255, 77, 0.3))
    drop-shadow(0 0 18px rgba(0, 231, 252, 0.25))
    drop-shadow(0 0 24px rgba(0, 255, 77, 0.2));
}

.bear-text {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bear-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  width: 100%;
}

.bear-description {
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.bear-description p {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.25rem 0;
}

.bear-description p:last-child {
  margin-bottom: 0;
}

.bear-highlight {
  font-weight: 600 !important;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 1rem !important;
}

[data-theme="light"] .bear-description p {
  color: #4a4a4a;
}

[data-theme="light"] .bear-highlight {
  color: #1a1a1a;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

.bear-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: center;
}

.bear-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  opacity: 0.8;
  text-align: center;
}

.btn-bear {
  display: inline-block;
  padding: 0.9rem 2rem;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 1rem;
}

.btn-bear span {
  position: relative;
  z-index: 2;
}

.btn-bear:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 231, 252, 0.5);
  box-shadow: 0 8px 20px rgba(0, 231, 252, 0.2);
  background: rgba(17, 17, 17, 0.6);
}

[data-theme="light"] .btn-bear {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #1a1a1a;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

[data-theme="light"] .btn-bear:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  color: #1a1a1a;
}

[data-theme="light"] .bear-image-wrapper img {
  filter: drop-shadow(0 0 4px rgba(0, 231, 252, 0.3))
    drop-shadow(0 0 8px rgba(0, 255, 77, 0.25))
    drop-shadow(0 0 12px rgba(0, 231, 252, 0.2));
}

[data-theme="light"] .bear-image-wrapper:hover img {
  filter: drop-shadow(0 0 6px rgba(0, 231, 252, 0.45))
    drop-shadow(0 0 12px rgba(0, 255, 77, 0.35))
    drop-shadow(0 0 18px rgba(0, 231, 252, 0.3))
    drop-shadow(0 0 24px rgba(0, 255, 77, 0.25));
}

[data-theme="light"] .bear-title {
  color: #1a1a1a;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

[data-theme="light"] .bear-subtitle {
  color: #4a4a4a;
}

/* Responsividade para Bear Finance */
@media (max-width: 991px) {
  .bear-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .bear-image-wrapper {
    width: 100%;
    max-width: 500px;
  }

  .bear-image-wrapper img {
    max-width: 100%;
  }

  .bear-text {
    width: 100%;
  }

  .bear-content-wrapper {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .bear-description {
    text-align: center;
    max-width: 100%;
  }

  .btn-bear {
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {
  .bear-section {
    padding: 3rem 0;
  }

  .bear-image-wrapper img {
    max-width: 100%;
  }

  .btn-bear {
    padding: 0.8rem 1.75rem;
    font-size: 0.9rem;
  }
}




/* ============================================================================================================
   
   🛒 12. PRODUTOS CARDS
   
   Grid de produtos/serviços com cards e bordas gradiente
   
   ============================================================================================================ */

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: var(--spacing-xl);
}

/* Cards dos produtos - BORDAS FINAS */
.feature-card {
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              0 0 15px rgba(0, 231, 252, 0.15);
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  display: flex;
  flex-direction: column;
}

.feature-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(0, 231, 252, 0.4),
              0 0 50px rgba(0, 255, 77, 0.2);
}

/* Área da imagem - IMAGEM COMPLETA */
.feature-icon {
  width: 100%;
  height: 330px;
  margin: 0;
  display: block;
  background: #000;
  border-radius: 19px 19px 0 0;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* Imagem dos produtos - PREENCHE TODO O TOPO */
.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s ease;
}

.feature-card:hover .feature-icon img {
  transform: scale(1.08);
}

/* Conteúdo do card */
.feature-card-content {
  padding: 1.5rem 1.5rem 2rem;
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  line-height: 1.4;
}

.feature-description {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  flex: 1;
}

/* Botão Saiba Mais - DISCRETO E ELEGANTE */
.btn-feature {
  display: inline-block;
  padding: 0.75rem 1.8rem;
  background: transparent;
  border: 1px solid rgba(0, 231, 252, 0.4);
  border-radius: 10px;
  color: #00e7fc;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: auto;
  position: relative;
  z-index: 10;
}

.btn-feature span {
  position: relative;
  z-index: 2;
}

.btn-feature:hover {
  background: rgba(0, 231, 252, 0.1);
  border-color: #00e7fc;
  color: #00ff4d;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 231, 252, 0.2);
}

.btn-feature:active {
  transform: translateY(0);
}

/* Responsividade para produtos */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================
           SOBRE SECTION - CARD SYSTEM
           ============================================ */
.about-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .about-content {
    grid-template-columns: 1fr;
  }
}

/* Cards Container */
.about-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .about-cards-container {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .about-cards-container {
    flex-direction: column;
    align-items: center;
  }
}

/* Card estilo cartão de crédito vertical */
.about-card {
  width: 320px;
  height: 600px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(
    135deg,
    rgba(17, 17, 17, 0.95) 0%,
    rgba(25, 25, 25, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

@media (max-width: 991px) {
  .about-card {
    width: 100%;
    max-width: 320px;
    height: 500px;
  }
}

@media (max-width: 767px) {
  .about-card {
    max-width: 300px;
    height: 400px;
  }
}

@media (max-width: 480px) {
  .about-card {
    max-width: 100%;
    width: 100%;
    height: 350px;
  }
}

.about-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 231, 252, 0.3),
    0 12px 40px rgba(0, 255, 77, 0.2), 0 0 0 1px rgba(0, 231, 252, 0.3) inset;
  border-color: rgba(0, 231, 252, 0.4);
}

/* Foto do card */
.about-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 0;
}

.about-card:hover .about-card-image {
  transform: scale(1.05);
}

/* Informações que aparecem no hover - estilo cartão de crédito */
.about-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.75rem 2rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.85) 40%,
    rgba(0, 0, 0, 0.5) 70%,
    transparent 100%
  );
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  backdrop-filter: blur(10px);
}

.about-card:hover .about-card-info {
  transform: translateY(0);
}

.about-card-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0, 231, 252, 0.5));
}

.about-card-role {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.about-card-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.about-card:hover .about-card-description {
  opacity: 1;
  transform: translateY(0);
}

/* Container lateral com scroll */
.about-sidebar {
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 991px) {
  .about-sidebar {
    height: auto;
    max-height: 500px;
  }
}

@media (max-width: 767px) {
  .about-sidebar {
    max-height: 400px;
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .about-sidebar {
    max-height: 400px;
    padding: 1.25rem;
  }
}

.about-sidebar::-webkit-scrollbar {
  width: 8px;
}

.about-sidebar::-webkit-scrollbar-track {
  background: rgba(17, 17, 17, 0.3);
  border-radius: 10px;
}

.about-sidebar::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 10px;
}

.about-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--gradient-primary);
  opacity: 0.8;
}

.about-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-sidebar-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-sidebar-text {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.about-sidebar-section {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.about-sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about-sidebar-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  border-image: var(--gradient-primary) 1;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(17, 17, 17, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(0, 231, 252, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-item .stat-number,
.stat-item .stat-label {
  position: relative;
  z-index: 2;
}

.stat-item:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 231, 252, 0.5);
  box-shadow: 0 8px 24px rgba(0, 231, 252, 0.2);
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4rem;
  line-height: 1.2;
  word-wrap: break-word;
}

/* Estilo especial para texto longo como "resolução" */
.stat-item .stat-number:contains("resolução"),
.stat-item .stat-number[style*="resolução"] {
  font-size: 1.8rem;
  line-height: 1.3;
}

/* Aplicar estilo quando o texto for "resolução" */
.stat-item:nth-child(2) .stat-number {
  font-size: 1.8rem;
  line-height: 1.3;
  padding: 0 0.5rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Tema Light para About Section */
[data-theme="light"] .about-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(14, 165, 233, 0.2);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .about-card::before {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.8) 0%,
    rgba(34, 197, 94, 0.8) 100%
  );
}

[data-theme="light"] .about-card:hover {
  box-shadow: 0 16px 48px rgba(14, 165, 233, 0.2),
    0 8px 24px rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .about-card-info {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.95) 50%,
    transparent 100%
  );
}

[data-theme="light"] .about-card-name {
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .about-sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(14, 165, 233, 0.2);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .about-sidebar-subtitle {
  color: #1a1a1a;
}

[data-theme="light"] .about-sidebar-text {
  color: #4a4a4a;
}

[data-theme="light"] .stat-item {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(14, 165, 233, 0.2);
}

/* ============================================
           NOSSOS RESULTADOS SECTION
           ============================================ */
.results-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.results-grid::-webkit-scrollbar {
  height: 6px;
}

.results-grid::-webkit-scrollbar-track {
  background: rgba(17, 17, 17, 0.2);
  border-radius: 10px;
}

.results-grid::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 10px;
}

[data-theme="light"] .results-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

[data-theme="light"] .results-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.6) 0%,
    rgba(0, 255, 77, 0.6) 100%
  );
  border-radius: 10px;
}

[data-theme="light"] .results-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.8) 0%,
    rgba(0, 255, 77, 0.8) 100%
  );
}

.result-card {
  background: rgba(17, 17, 17, 0.25);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  padding: 2.5rem;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 231, 252, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  animation: resultCardPulse 4s ease-in-out infinite;
}

.result-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: resultCardEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    resultCardPulse 4s ease-in-out infinite 0.8s;
}

@keyframes resultCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9) rotateX(10deg);
  }
  60% {
    transform: translateY(-10px) scale(1.05) rotateX(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes resultCardPulse {
  0%,
  100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 231, 252, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 231, 252, 0.3),
      0 0 25px rgba(0, 255, 77, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* Borda neon com gradiente usando pseudo-elemento */
.result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.6;
}

.result-card:hover::before {
  opacity: 1;
}

.result-card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 231, 252, 0.4),
    0 0 40px rgba(0, 255, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.result-icon {
  width: 140px;
  height: 140px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.result-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(0, 231, 252, 0.3));
  transition: all 0.3s ease;
}

.result-card:hover .result-icon svg {
  filter: drop-shadow(0 0 15px rgba(0, 231, 252, 0.5));
  transform: scale(1.05);
}

.result-number {
  font-size: 3rem;
  font-weight: 800;
  background: var(--gradient-primary);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultNumberGradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.result-card:hover .result-number {
  transform: scale(1.1);
  animation: resultNumberGradient 3s ease infinite;
}

.result-label {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

[data-theme="light"] .result-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .result-card::before {
  opacity: 0.6;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.15) 0%,
    rgba(0, 255, 77, 0.12) 100%
  );
}

[data-theme="light"] .result-card:hover {
  border-color: rgba(0, 231, 252, 0.2);
  box-shadow: 0 20px 60px rgba(0, 231, 252, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(0, 231, 252, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(248, 250, 252, 0.98) 100%
  );
  transform: translateY(-8px) scale(1.02);
}

[data-theme="light"] .result-card:hover::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.25) 0%,
    rgba(0, 255, 77, 0.2) 100%
  );
}

/* Manter números com gradiente no tema claro */
[data-theme="light"] .result-number {
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 1) 0%,
    rgba(0, 255, 77, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0, 231, 252, 0.2));
}

/* Labels em preto sólido para melhor legibilidade */
[data-theme="light"] .result-label {
  color: #1a1a1a;
  font-weight: 600;
}

/* Manter ícones SVG com gradiente visível */
[data-theme="light"] .result-icon svg {
  filter: drop-shadow(0 4px 8px rgba(0, 231, 252, 0.15));
}




/* ============================================================================================================
   
   🎬 13. TREINAMENTOS SECTION (Carousel Netflix Style)
   
   Carrossel de cursos/treinamentos estilo Netflix com blur e destaque central
   
   ============================================================================================================ */

.treinamentos-section {
  padding: 6rem 2rem;
  background: #0a0a0a;
}

.treinamentos-section .section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.treinamentos-section .section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.treinamentos-section .section-subtitle {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.treinamentos-section .section-title {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 1rem;
}

.treinamentos-section .section-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Carrossel Wrapper */
.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
}

.carousel-container {
  overflow: visible;
  width: 100%;
}

.carousel-track {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  padding: 1rem 0;
}

.treinamento-card {
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 320px;
  max-width: 320px;
  flex-shrink: 0;
  opacity: 0.35;
  transform: scale(0.88);
  filter: blur(3px);
  cursor: pointer;
}

/* Card ativo/central - em destaque */
.treinamento-card.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  box-shadow: 0 20px 60px rgba(0, 231, 252, 0.15),
              0 0 40px rgba(0, 255, 77, 0.08);
  cursor: default;
}

/* Cards adjacentes - semi-visíveis */
.treinamento-card.adjacent {
  opacity: 0.5;
  transform: scale(0.92);
  filter: blur(1.5px);
}

.treinamento-card.active:hover {
  box-shadow: 0 25px 70px rgba(0, 231, 252, 0.2),
              0 0 50px rgba(0, 255, 77, 0.1);
}

/* Botões do Carrossel */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  border: none;
  color: #0a0a0a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 20;
  box-shadow: 0 5px 20px rgba(0, 231, 252, 0.4);
}

.carousel-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 30px rgba(0, 231, 252, 0.6);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-btn svg {
  stroke: #0a0a0a;
  stroke-width: 2.5;
  width: 22px;
  height: 22px;
}

.carousel-btn-prev {
  left: 30px;
}

.carousel-btn-next {
  right: 30px;
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) scale(0.9);
}

.carousel-btn:disabled:hover {
  transform: translateY(-50%) scale(0.9);
  box-shadow: 0 5px 20px rgba(0, 231, 252, 0.2);
}

/* Indicadores (bolinhas) - Só contorno */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 0;
}

.carousel-dot:hover {
  border-color: #00e7fc;
}

.carousel-dot.active {
  border-color: #00ff4d;
  background: transparent;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(0, 255, 77, 0.5);
}

.treinamento-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(0, 231, 252, 0.15) 0%, rgba(0, 255, 77, 0.15) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  transition: all 0.3s ease;
}

.treinamento-card.active .treinamento-icon {
  background: linear-gradient(135deg, rgba(0, 231, 252, 0.25) 0%, rgba(0, 255, 77, 0.25) 100%);
}

.treinamento-icon svg {
  width: 40px;
  height: 40px;
  stroke: #00e7fc;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.treinamento-card.active .treinamento-icon svg {
  stroke: #00ff4d;
}

.treinamento-title {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 600;
  text-align: center;
}

.treinamento-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.treinamento-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.treinamento-duracao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.treinamento-duracao svg {
  color: #00e7fc;
  width: 18px;
  height: 18px;
  stroke: #00e7fc;
}

.treinamento-formato {
  background: linear-gradient(135deg, rgba(0, 231, 252, 0.2) 0%, rgba(0, 255, 77, 0.2) 100%);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #00ff4d;
  font-weight: 500;
}

.treinamento-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: transparent;
  border: 1px solid transparent;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.treinamento-btn:hover {
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  color: #0a0a0a;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 231, 252, 0.4);
}

/* Responsivo Carrossel */
@media (max-width: 991px) {
  .treinamento-card {
    min-width: 280px;
    max-width: 280px;
  }
  
  .carousel-wrapper {
    padding: 1rem 60px;
  }
  
  .carousel-btn {
    width: 45px;
    height: 45px;
  }
  
  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 600px) {
  .treinamentos-section {
    padding: 4rem 1rem;
  }
  
  .treinamento-card {
    min-width: 260px;
    max-width: 260px;
    padding: 2rem 1.5rem;
  }
  
  .carousel-wrapper {
    padding: 1rem 50px;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
  }
  
  .carousel-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .carousel-btn-prev {
    left: 5px;
  }
  
  .carousel-btn-next {
    right: 5px;
  }
  
  .treinamentos-section .section-title {
    font-size: 1.8rem;
  }
  
  .carousel-indicators {
    gap: 0.75rem;
  }
  
  .carousel-dot {
    width: 10px;
    height: 10px;
  }
}

/* ============================================
           CONTATO SECTION
           ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  margin-top: 3rem;
}

@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  padding: 2rem;
  background: rgba(17, 17, 17, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

@media (max-width: 767px) {
  .contact-item {
    padding: 1.5rem;
    gap: 1.25rem;
  }
}

@media (max-width: 480px) {
  .contact-item {
    padding: 1.25rem;
    gap: 1rem;
    flex-direction: column;
    text-align: center;
  }
}

.contact-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 231, 252, 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.contact-item:hover::before {
  left: 100%;
}

.contact-item:hover {
  transform: translateY(-5px) translateX(5px);
  border-color: rgba(0, 231, 252, 0.4);
  box-shadow: 0 12px 40px rgba(0, 231, 252, 0.2),
    0 8px 24px rgba(0, 255, 77, 0.15), 0 0 0 1px rgba(0, 231, 252, 0.2);
  background: rgba(17, 17, 17, 0.5);
}

.contact-icon,
.contact-details {
  position: relative;
  z-index: 2;
}

.contact-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.15) 0%,
    rgba(0, 255, 77, 0.12) 100%
  );
  border-radius: 18px;
  border: 2px solid transparent;
  flex-shrink: 0;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
  .contact-icon {
    width: 60px;
    height: 60px;
  }

  .contact-icon svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .contact-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto;
  }

  .contact-icon svg {
    width: 26px;
    height: 26px;
  }
}

/* Borda gradiente animada */
.contact-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

/* Ícone SVG moderno */
.contact-icon svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
  stroke: none;
  color: rgba(0, 231, 252, 0.9);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 231, 252, 0.2));
}

/* Estilo especial para WhatsApp */
.contact-icon-whatsapp {
  background: linear-gradient(
    135deg,
    rgba(37, 211, 102, 0.2) 0%,
    rgba(0, 231, 252, 0.15) 100%
  );
}

.contact-icon-whatsapp svg {
  color: rgba(37, 211, 102, 0.95);
  filter: drop-shadow(0 2px 6px rgba(37, 211, 102, 0.3));
}

.contact-item:hover .contact-icon-whatsapp {
  background: linear-gradient(
    135deg,
    rgba(37, 211, 102, 0.3) 0%,
    rgba(0, 231, 252, 0.25) 100%
  );
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4),
    0 4px 12px rgba(0, 231, 252, 0.2);
}

.contact-item:hover .contact-icon-whatsapp svg {
  color: rgba(37, 211, 102, 1);
  filter: drop-shadow(0 4px 12px rgba(37, 211, 102, 0.5));
  transform: scale(1.15);
}

.contact-icon-whatsapp::before {
  background: linear-gradient(
    135deg,
    rgba(37, 211, 102, 0.8) 0%,
    rgba(0, 231, 252, 0.7) 100%
  );
}

.contact-item:hover .contact-icon-whatsapp::before {
  background: linear-gradient(
    135deg,
    rgba(37, 211, 102, 1) 0%,
    rgba(0, 231, 252, 1) 100%
  );
}

/* Fallback para Font Awesome quando necessário */
.contact-icon i {
  font-size: 1.75rem;
  color: rgba(0, 231, 252, 0.9);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-item:hover .contact-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.25) 0%,
    rgba(0, 255, 77, 0.2) 100%
  );
  box-shadow: 0 8px 24px rgba(0, 231, 252, 0.3),
    0 4px 12px rgba(0, 255, 77, 0.2);
}

.contact-item:hover .contact-icon::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 1) 0%,
    rgba(0, 255, 77, 1) 100%
  );
}

.contact-item:hover .contact-icon svg,
.contact-item:hover .contact-icon i {
  color: rgba(0, 231, 252, 1);
  transform: scale(1.1);
}

.contact-details h4 {
  color: var(--text-primary);
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.contact-item:hover .contact-details h4 {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .contact-details h4 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .contact-details h4 {
    font-size: 1rem;
  }
}

.contact-details p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.contact-item:hover .contact-details p {
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .contact-details p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .contact-details p {
    font-size: 0.85rem;
  }
}

.contact-form-container {
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  padding: 3rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 231, 252, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.contact-form-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
  opacity: 0.6;
}

@media (max-width: 767px) {
  .contact-form-container {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .contact-form-container {
    padding: 1.5rem;
  }
}

.contact-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-group label {
  position: absolute;
  left: 1.5rem;
  top: 1rem;
  color: var(--text-tertiary);
  font-size: 1rem;
  font-weight: 500;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  background: transparent;
  padding: 0 0.25rem;
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
  top: -0.5rem;
  left: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 231, 252, 1);
  background: var(--bg-secondary);
  padding: 0 0.5rem;
}

[data-theme="light"] .form-group input:focus ~ label,
[data-theme="light"] .form-group input:not(:placeholder-shown) ~ label,
[data-theme="light"] .form-group textarea:focus ~ label,
[data-theme="light"] .form-group textarea:not(:placeholder-shown) ~ label {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 100, 150, 1);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  /* border: 1px solid rgba(0, 231, 252, 0.2); */
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  /* Show placeholders by default so users see field purpose without focusing */
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
  opacity: 0.6;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  /* Use green on focus to match validation/brand (was blue) */
  border-color: rgba(0, 255, 77, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 255, 77, 0.12), 0 0 15px rgba(0, 255, 77, 0.28);
  transform: translateY(-2px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-tertiary);
}

/* Estados de validação */
.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
  border-color: rgba(0, 255, 77, 0.5);
}

.form-group input:invalid:not(:placeholder-shown):not(:focus),
.form-group textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(255, 77, 77, 0.5);
}

.form-group .error-message {
  display: none;
  color: rgba(255, 77, 77, 1);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  padding-left: 1.5rem;
  animation: slideDown 0.3s ease;
}

.form-group.error .error-message {
  display: block;
}

.form-group.error input,
.form-group.error textarea {
  border-color: rgba(255, 77, 77, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.1);
}

.form-group.success input,
.form-group.success textarea {
  border-color: rgba(0, 255, 77, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 255, 77, 0.1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indicador de campo obrigatório */
.form-group.required label::after {
  content: " *";
  color: rgba(255, 77, 77, 0.8);
}

/* Ícone de validação */
.form-group::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.form-group.success::after {
  content: "✓";
  color: rgba(0, 255, 77, 1);
  opacity: 1;
  font-size: 1.2rem;
  font-weight: bold;
}

.form-group.error::after {
  content: "✕";
  color: rgba(255, 77, 77, 1);
  opacity: 1;
  font-size: 1.2rem;
  font-weight: bold;
}

.form-group textarea ~ .form-group::after {
  top: 1.5rem;
  transform: none;
}

.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 77, 77, 0.5);
}

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
  border-color: rgba(0, 255, 77, 0.5);
}

/* ============================================
           HOW IT WORKS SECTION
           ============================================ */
.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-top: var(--spacing-xl);
  position: relative;
}

.step-card {
  text-align: center;
  position: relative;
  padding: 2rem;
  background: rgba(17, 17, 17, 0.25);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 231, 252, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  animation: stepCardPulse 4s ease-in-out infinite;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.step-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: stepCardEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    stepCardPulse 4s ease-in-out infinite 0.8s;
}

@keyframes stepCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9) rotateX(10deg);
  }
  60% {
    transform: translateY(-10px) scale(1.05) rotateX(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes stepCardPulse {
  0%,
  100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 231, 252, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 231, 252, 0.3),
      0 0 25px rgba(0, 255, 77, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* Borda neon com gradiente usando pseudo-elemento */
.step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.6;
}

.step-card:hover::before {
  opacity: 1;
}

.step-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 231, 252, 0.1),
    rgba(0, 255, 77, 0.1),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
  border-radius: 24px;
}

.step-card:hover::after {
  left: 100%;
}

.step-card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 231, 252, 0.4),
    0 0 40px rgba(0, 255, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .step-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

[data-theme="light"] .step-card::before {
  opacity: 0.8 !important;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.15) 0%,
    rgba(0, 255, 77, 0.12) 100%
  ) !important;
  z-index: 0;
}

[data-theme="light"] .step-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 231, 252, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(0, 231, 252, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(248, 250, 252, 0.98) 100%
  );
  border-color: rgba(0, 231, 252, 0.2);
}

[data-theme="light"] .step-card:hover::before {
  opacity: 1 !important;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.25) 0%,
    rgba(0, 255, 77, 0.2) 100%
  ) !important;
}

.step-card > * {
  position: relative;
  z-index: 2;
}

.step-number {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 231, 252, 0.2);
  position: relative;
  z-index: 1;
  background-image: var(--gradient-primary);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: stepNumberGradient 4s ease infinite;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stepNumberGradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.step-card:hover .step-number {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 231, 252, 0.3);
}

/* Borda com gradiente usando pseudo-elemento */
.step-number::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: var(--gradient-primary);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.step-card:hover .step-number::before {
  opacity: 1;
}

.step-number::after {
  display: none;
}

.step-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
  transition: all 0.3s ease;
  position: relative;
}

.step-card:hover .step-title {
  transform: translateY(-3px);
  color: var(--text-primary);
}

.step-title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--gradient-primary);
  transition: transform 0.3s ease;
}

.step-card:hover .step-title::after {
  transform: translateX(-50%) scaleX(1);
}

.step-description {
  color: var(--text-secondary);
  line-height: 1.7;
  transition: all 0.3s ease;
}

.step-card:hover .step-description {
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* ============================================
           TESTIMONIALS SECTION
           ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: var(--spacing-xl);
}

.testimonial-card {
  background: rgba(17, 17, 17, 0.25);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.testimonial-card > * {
  position: relative;
  z-index: 2;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 231, 252, 0.15);
  border-color: rgba(0, 231, 252, 0.3);
}

.testimonial-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.testimonial-avatar-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.testimonial-avatar-wrapper::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--gradient-primary);
  z-index: -1;
  pointer-events: none;
}

.testimonial-avatar-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bg-secondary);
  z-index: 0;
  pointer-events: none;
}

.testimonial-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar {
  transform: scale(1.05);
}

.testimonial-info h4 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.testimonial-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ============================================ FAQ SECTION - PREMIUM DESIGN ============================================ */  

.faq-container {
  max-width: 900px;
  margin: var(--spacing-xl) auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
}

.faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 231, 252, 0.2),
    0 0 0 1px rgba(0, 231, 252, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 231, 252, 0.3);
}

.faq-item:hover::before {
  transform: scaleX(1);
}

.faq-item.active {
  background: rgba(17, 17, 17, 0.6);
  border-color: rgba(0, 231, 252, 0.4);
  box-shadow: 0 8px 35px rgba(0, 231, 252, 0.25),
    0 0 0 1px rgba(0, 231, 252, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.faq-item.active::before {
  transform: scaleX(1);
}

.faq-question {
  padding: 1.75rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}

.faq-question:hover {
  color: rgba(0, 231, 252, 0.9);
}

.faq-item.active .faq-question {
  color: rgba(0, 231, 252, 1);
}

.faq-question span {
  flex: 1;
  padding-right: 1rem;
}

.faq-question i {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-secondary);
  font-size: 0.9rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 231, 252, 0.1);
  flex-shrink: 0;
}

.faq-item:hover .faq-question i {
  background: rgba(0, 231, 252, 0.2);
  color: rgba(0, 231, 252, 0.8);
  transform: scale(1.1);
}

.faq-item.active .faq-question i {
  transform: rotate(180deg) scale(1.1);
  color: rgba(0, 231, 252, 1);
  background: rgba(0, 231, 252, 0.25);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-answer-content {
  padding: 0 2rem 2rem;
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 1rem;
  animation: fadeInUp 0.4s ease-out 0.1s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Light theme adjustments */
[data-theme="light"] .faq-item {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(14, 165, 233, 0.2);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .faq-item:hover {
  box-shadow: 0 12px 40px rgba(14, 165, 233, 0.15),
    0 4px 16px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(14, 165, 233, 0.3),
    0 0 20px rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.35);
}

[data-theme="light"] .faq-item.active {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 12px 48px rgba(14, 165, 233, 0.2),
    0 4px 16px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(14, 165, 233, 0.4),
    0 0 24px rgba(14, 165, 233, 0.12);
}

[data-theme="light"] .faq-item::before {
  background: linear-gradient(
    90deg,
    rgba(14, 165, 233, 1) 0%,
    rgba(34, 197, 94, 1) 100%
  );
}

/* ============================================
           WHATSAPP FLOATING BUTTON
           ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 4px 20px rgba(37, 211, 102, 0.5),
    0 0 30px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  animation: whatsappPulse 2s ease-in-out infinite;
  border: none;
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
  color: #ffffff;
}

.whatsapp-float:hover {
  transform: scale(1.15);
  box-shadow: 
    0 6px 35px rgba(37, 211, 102, 0.7),
    0 0 50px rgba(37, 211, 102, 0.5);
}

@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 
      0 4px 20px rgba(37, 211, 102, 0.5),
      0 0 30px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 
      0 4px 30px rgba(37, 211, 102, 0.7),
      0 0 50px rgba(37, 211, 102, 0.5);
  }
}

.whatsapp-float i {
  display: none;
}

@media (max-width: 767px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 1rem;
    right: 1rem;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* Tema claro - Botão preto e branco */
[data-theme="light"] .whatsapp-float {
  background: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .whatsapp-float:hover {
  background: rgba(0, 0, 0, 1) !important;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

[data-theme="light"] .whatsapp-float svg {
  fill: #fff;
  color: #fff;
}

[data-theme="light"] .whatsapp-float i {
  display: none;
}

/* Animação pulse no tema claro */
@keyframes whatsappPulseLight {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.2);
  }
}

[data-theme="light"] .whatsapp-float {
  animation: whatsappPulseLight 2s ease-in-out infinite;
}

@keyframes whatsappPulse {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4),
      0 0 20px rgba(37, 211, 102, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6),
      0 0 30px rgba(37, 211, 102, 0.5), 0 0 40px rgba(37, 211, 102, 0.3);
  }
}

/* ============================================
           SCROLL TO TOP BUTTON
           ============================================ */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 50px;
  height: 50px;
  background: rgba(17, 17, 17, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 231, 252, 0.2);
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 231, 252, 0.3);
  border-color: rgba(0, 231, 252, 0.5);
}

.scroll-to-top i {
  font-size: 1.2rem;
  color: rgba(0, 231, 252, 1);
  transition: transform 0.3s ease;
}

.scroll-to-top:hover i {
  transform: translateY(-2px);
}

[data-theme="light"] .scroll-to-top {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 231, 252, 0.15);
}

[data-theme="light"] .scroll-to-top:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 231, 252, 0.4);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15), 0 0 30px rgba(0, 231, 252, 0.25);
}

[data-theme="light"] .scroll-to-top i {
  color: rgba(0, 231, 252, 1);
}

@media (max-width: 768px) {
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 1.5rem;
    left: 1.5rem;
  }

  .scroll-to-top i {
    font-size: 1rem;
  }
}

/* ============================================
           FORM MESSAGE FEEDBACK
           ============================================ */
.form-message {
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  font-weight: 500;
}

.form-message.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.form-message.success {
  background: rgba(0, 255, 77, 0.15);
  border: 1px solid rgba(0, 255, 77, 0.3);
  color: rgba(0, 255, 77, 1);
}

.form-message.error {
  background: rgba(255, 77, 77, 0.15);
  border: 1px solid rgba(255, 77, 77, 0.3);
  color: rgba(255, 77, 77, 1);
}

[data-theme="light"] .form-message.success {
  background: rgba(0, 255, 77, 0.1);
  border-color: rgba(0, 255, 77, 0.4);
  color: rgba(0, 150, 0, 1);
}

[data-theme="light"] .form-message.error {
  background: rgba(255, 77, 77, 0.1);
  border-color: rgba(255, 77, 77, 0.4);
  color: rgba(200, 0, 0, 1);
}

.btn.btn-primary.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.btn-primary.loading span::after {
  content: "...";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%,
  100% {
    content: "...";
  }
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .whatsapp-float i {
    font-size: 1.8rem;
  }
}

/* ============================================ CONTACT SECTION NEW - COM FUNDO GRID ============================================ */
.contact-section-new {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #070707 100%);
  overflow: hidden;
}

.contact-bg-gradient {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(0, 231, 252, 0.08) 0%, rgba(0, 255, 77, 0.04) 40%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Padrão de Triângulos Flutuantes - Seção Footer/Rodapé */
.footer-section {
  position: relative;
  overflow: hidden;
}

.footer-triangle-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='ctg1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.15);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.08);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='ctg2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.12);stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:rgba(0,231,252,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.08);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='ctg3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.06);stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='ctg4' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,255,77,0.1);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,231,252,0.05);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='0.9'%3E%3Cpolygon points='0,0 400,346 0,692' fill='url(%23ctg1)' stroke='rgba(0,231,252,0.2)' stroke-width='1'/%3E%3Cpolygon points='400,0 800,0 400,346' fill='url(%23ctg2)' stroke='rgba(0,255,77,0.2)' stroke-width='1'/%3E%3Cpolygon points='800,0 800,346 400,346' fill='url(%23ctg3)' stroke='rgba(0,231,252,0.15)' stroke-width='1'/%3E%3Cpolygon points='0,346 200,519 0,692' fill='url(%23ctg4)' stroke='rgba(0,255,77,0.18)' stroke-width='1'/%3E%3Cpolygon points='200,346 400,346 200,519' fill='url(%23ctg1)' stroke='rgba(0,231,252,0.12)' stroke-width='1'/%3E%3Cpolygon points='400,346 600,519 400,692' fill='url(%23ctg2)' stroke='rgba(0,255,77,0.15)' stroke-width='1'/%3E%3Cpolygon points='600,346 800,346 600,519' fill='url(%23ctg3)' stroke='rgba(0,231,252,0.1)' stroke-width='1'/%3E%3Cpolygon points='800,346 800,519 600,519' fill='url(%23ctg4)' stroke='rgba(0,255,77,0.12)' stroke-width='1'/%3E%3Cpolygon points='200,519 400,692 200,692' fill='url(%23ctg1)' stroke='rgba(0,231,252,0.08)' stroke-width='1'/%3E%3Cpolygon points='400,519 600,692 400,692' fill='url(%23ctg2)' stroke='rgba(0,255,77,0.1)' stroke-width='1'/%3E%3Cpolygon points='600,519 800,692 600,692' fill='url(%23ctg3)' stroke='rgba(0,231,252,0.08)' stroke-width='1'/%3E%3Cpolygon points='100,173 300,346 100,519' fill='url(%23ctg4)' stroke='rgba(0,255,77,0.1)' stroke-width='0.8'/%3E%3Cpolygon points='300,173 500,173 300,346' fill='url(%23ctg1)' stroke='rgba(0,231,252,0.1)' stroke-width='0.8'/%3E%3Cpolygon points='500,173 700,173 500,346' fill='url(%23ctg2)' stroke='rgba(0,255,77,0.12)' stroke-width='0.8'/%3E%3Cpolygon points='700,173 800,173 700,346' fill='url(%23ctg3)' stroke='rgba(0,231,252,0.08)' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-repeat: repeat;
  filter: blur(0.5px);
  animation: trianglePatternMove 120s linear infinite;
  transform-origin: center center;
}

.footer-triangle-pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='ctgAlt1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(0,231,252,0.08);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(0,255,77,0.05);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 300,520 0,600' fill='url(%23ctgAlt1)' stroke='rgba(0,231,252,0.1)' stroke-width='0.5'/%3E%3Cpolygon points='300,0 600,0 300,520' fill='url(%23ctgAlt1)' stroke='rgba(0,255,77,0.1)' stroke-width='0.5'/%3E%3Cpolygon points='600,0 600,520 300,520' fill='url(%23ctgAlt1)' stroke='rgba(0,231,252,0.08)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: 0.4;
  animation: trianglePatternMoveReverse 100s linear infinite;
  filter: blur(1px);
}

/* Triângulo Flutuante Grande - Footer */
.footer-floating-triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  width: 500px;
  height: 500px;
  background: linear-gradient(
    135deg,
    rgba(0, 231, 252, 0.08) 0%,
    rgba(0, 231, 252, 0.05) 50%,
    rgba(0, 255, 77, 0.08) 100%
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  filter: blur(40px);
  z-index: 0;
  animation: floatTriangle 20s ease-in-out infinite;
  pointer-events: none;
}

.footer-section .contact-container {
  position: relative;
  z-index: 1;
}

.contact-section-new .section-container {
  position: relative;
  z-index: 1;
}

/* ============================================ FOOTER ============================================ */
.footer {
  padding: 2rem 7rem;
  margin: 5rem;
}
        .contact-container {
            background: rgba(0, 0, 0, 0.6);
            border-radius: 24px;
            margin: 60px auto;
            padding: 60px;
            max-width: 1100px;
            width: 100%;
            display: flex;
            gap: 60px;
            box-shadow: 
                0 0 80px rgba(0, 255, 150, 0.15),
                0 0 40px rgba(0, 255, 150, 0.1),
                inset 0 0 60px rgba(0, 255, 150, 0.03);
            border: 1px solid rgba(0, 255, 150, 0.2);
            backdrop-filter: blur(20px);
            position: relative;
            z-index: 1;
        }

        .contact-container::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            background: linear-gradient(45deg, 
                transparent 0%, 
                rgba(0, 255, 150, 0.1) 25%, 
                rgba(0, 255, 200, 0.15) 50%, 
                rgba(0, 255, 150, 0.1) 75%, 
                transparent 100%);
            border-radius: 24px;
            z-index: -1;
            opacity: 0.5;
            animation: borderGlow 3s ease-in-out infinite;
        }

        @keyframes borderGlow {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        .contact-left {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .contact-title {
            font-size: 48px;
            font-weight: 700;
            line-height: 1.3;
            color: #ffffff;
            text-shadow: 0 0 30px rgba(0, 255, 150, 0.3);
        }

        .contact-title .highlight {
            background: linear-gradient(135deg, #00ff96 0%, #00ffd5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            filter: drop-shadow(0 0 20px rgba(0, 255, 150, 0.6));
        }

        .contact-right {
            flex: 1;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        input, textarea {
            width: 100%;
            padding: 16px 20px;
            border: 1px solid rgba(0, 255, 150, 0.3);
            border-radius: 12px;
            background: rgba(0, 20, 10, 0.4);
            font-size: 15px;
            color: #ffffff;
            outline: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 0 20px rgba(0, 255, 150, 0.05);
        }

        input:focus, textarea:focus {
            border-color: #00ff96;
            background: rgba(0, 30, 15, 0.6);
            box-shadow: 
                0 0 30px rgba(0, 255, 150, 0.3),
                inset 0 0 30px rgba(0, 255, 150, 0.1),
                0 0 0 1px rgba(0, 255, 150, 0.5);
            transform: translateY(-2px);
        }

        input::placeholder, textarea::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        textarea {
            resize: vertical;
            min-height: 120px;
            font-family: inherit;
        }

        .recaptcha-container {
            margin: 20px 0;
            display: flex;
            justify-content: flex-start;
        }

        .recaptcha-box {
            background: rgba(0, 20, 10, 0.4);
            border: 1px solid rgba(0, 255, 150, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 0 20px rgba(0, 255, 150, 0.1);
        }

        .recaptcha-checkbox {
            width: 28px;
            height: 28px;
            border: 2px solid rgba(0, 255, 150, 0.5);
            border-radius: 4px;
            cursor: pointer;
            background: rgba(0, 10, 5, 0.6);
            transition: all 0.3s;
            position: relative;
        }

        .recaptcha-checkbox.checked {
            background: linear-gradient(135deg, #00ff96 0%, #00ffd5 100%);
            border-color: #00ff96;
            box-shadow: 0 0 20px rgba(0, 255, 150, 0.6);
        }

        .recaptcha-checkbox.checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #000;
            font-size: 18px;
            font-weight: bold;
        }

        .recaptcha-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

        .recaptcha-text strong {
            color: #00ff96;
        }

        .recaptcha-logo {
            width: 40px;
            height: 40px;
            margin-left: 15px;
            opacity: 0.7;
            filter: drop-shadow(0 0 10px rgba(0, 255, 150, 0.4));
        }

    .submit-btn {
      width: auto;
      padding: 14px 28px;
      border: 2px solid #00ff96;
      border-radius: 32px;
      background: rgba(17, 17, 17, 0.6);
      color: #00ff96;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 10px auto 0 auto;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0, 255, 150, 0.15);
      display: block;
    }

    .submit-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(150deg, rgba(0,255,150,0.9) 0%, rgba(0,255,200,0.4) 100%);
      transition: left 0.3s ease;
      z-index: -1;
    }

    .submit-btn:hover {
      color: #00ffd5;
      border-color: #00ffd5;
      box-shadow: 
        0 0 30px rgba(0, 255, 150, 0.35),
        inset 0 0 20px rgba(0, 255, 150, 0.15);
      transform: translateY(-2px);
    }

        .submit-btn:hover::before {
            left: 0;
        }

        .submit-btn:active {
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .contact-container {
                flex-direction: column;
                padding: 40px 30px;
                gap: 40px;
            }

            .contact-title {
                font-size: 36px;
                text-align: center;
            }

            .form-row {
                grid-template-columns: 1fr;
            }
        }
/* ============================================ RODAPE ============================================ */
                .footer-container-rodape {
            background: #000000;
            padding: 80px 40px;
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 40px;
            position: relative;
            overflow: hidden;
        }

        .footer-container-rodape::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: 
                radial-gradient(ellipse 600px 500px at 30% 50%, rgba(0, 255, 150, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse 500px 600px at 70% 50%, rgba(0, 255, 200, 0.1) 0%, transparent 50%);
            pointer-events: none;
            animation: gradientFloat 10s ease-in-out infinite alternate;
        }

        @keyframes gradientFloat {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(30px, -30px) rotate(5deg); }
        }

        .footer-card {
            background: rgba(0, 0, 0, 0.6);
            border-radius: 24px;
            padding: 50px 45px;
            min-width: 320px;
            box-shadow: 
                0 0 60px rgba(0, 255, 150, 0.15),
                0 0 30px rgba(0, 255, 150, 0.1),
                inset 0 0 40px rgba(0, 255, 150, 0.03);
            border: 1px solid rgba(0, 255, 150, 0.25);
            backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
            transition: all 0.4s;
        }

        .footer-card:hover {
            border-color: rgba(0, 255, 150, 0.4);
            box-shadow: 
                0 0 80px rgba(0, 255, 150, 0.25),
                0 0 40px rgba(0, 255, 150, 0.15),
                inset 0 0 50px rgba(0, 255, 150, 0.05);
        }

        .footer-logo {
            margin-bottom: 35px;
        }

        .logo-icon {
            width: 70px;
            height: auto;
            filter: drop-shadow(0 0 20px rgba(0, 255, 150, 0.6));
            margin-bottom: 15px;
        }

        .footer-title {
            font-size: 42px;
            font-weight: 700;
            background: linear-gradient(135deg, #00ff96 0%, #00ffd5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0;
            letter-spacing: -1px;
            filter: drop-shadow(0 0 30px rgba(0, 255, 150, 0.4));
        }

        .footer-contact-info {
            margin-top: auto;
        }

        .footer-email {
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            display: block;
            margin-bottom: 25px;
            transition: all 0.3s;
        }

        .footer-email:hover {
            color: #00ff96;
            text-shadow: 0 0 20px rgba(0, 255, 150, 0.5);
        }

        .footer-social-links {
            display: flex;
            gap: 15px;
        }

        .social-icon-link {
            width: 45px;
            height: 45px;
            background: rgba(0, 20, 10, 0.6);
            border: 1px solid rgba(0, 255, 150, 0.3);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00ff96;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 0 20px rgba(0, 255, 150, 0.1);
        }

        .social-icon-link:hover {
            background: rgba(0, 255, 150, 0.15);
            border-color: #00ff96;
            box-shadow: 0 0 30px rgba(0, 255, 150, 0.4);
        }

        .social-icon-link i {
            font-size: 20px;
        }

        .footer-address-card {
            background: linear-gradient(135deg, 
                rgba(0, 255, 150, 0.15) 0%, 
                rgba(0, 255, 200, 0.2) 50%,
                rgba(0, 255, 150, 0.15) 100%);
            position: relative;
            overflow: hidden;
        }

        .address-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
            z-index: 1;
        }

        .address-text {
            font-size: 18px;
            line-height: 1.7;
            margin-bottom: 20px;
            flex-grow: 1;
            color: #ffffff;
            text-shadow: 0 0 20px rgba(0, 255, 150, 0.3);
        }

        .phone-number {
            font-size: 22px;
            font-weight: 700;
            margin-top: auto;
            background: linear-gradient(135deg, #00ff96 0%, #00ffd5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 20px rgba(0, 255, 150, 0.6));
        }

        @media (max-width: 968px) {
            .footer-container-rodape {
                flex-direction: column;
                padding: 60px 20px;
                align-items: center;
            }

            .footer-card {
                width: 100%;
                max-width: 450px;
            }
        }
/* ============================================ ANIMATIONS MELHORADAS - SUPER PREMIUM ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px) rotateY(-10deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(60px) rotateY(10deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(1deg);
  }
  66% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(2px);
  }
}

@keyframes smoothBounce {
  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-15px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes rotateGradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes morphBackground {
  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

/* Classes de animação melhoradas */
.fade-in-up {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-60px) rotateY(-10deg);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0) rotateY(0deg);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(60px) rotateY(10deg);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0) rotateY(0deg);
}

.scale-in {
  opacity: 0;
  transform: scale(0.8) rotate(-5deg);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Animação para cards com delay escalonado melhorado */
.testimonial-card,
.step-card,
.faq-item {
  opacity: 0;
  transform: translateY(50px) scale(0.95) rotateX(5deg);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
  animation: cardPulse 5s ease-in-out infinite;
}

.testimonial-card.visible,
.step-card.visible,
.faq-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  animation: cardEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    cardPulse 5s ease-in-out infinite 0.8s;
}

@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95) rotateX(5deg);
  }
  60% {
    transform: translateY(-8px) scale(1.02) rotateX(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes cardPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

/* Efeito de gradiente animado nos cards */
.feature-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 231, 252, 0.08),
    rgba(0, 255, 77, 0.08),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
  border-radius: 22px;
  z-index: 1;
}

.feature-card:hover::after {
  left: 100%;
}

/* Animação de entrada mais suave para números */
.result-number {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-card:hover .result-number {
  transform: scale(1.15) rotate(5deg);
}

.result-label {
  transition: all 0.3s ease;
  position: relative;
}

.result-card:hover .result-label {
  transform: translateY(-3px);
  color: var(--text-primary);
}

.result-label::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--gradient-primary);
  transition: transform 0.3s ease;
}

.result-card:hover .result-label::after {
  transform: translateX(-50%) scaleX(1);
}

/* Botões com animação melhorada */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn span {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.btn:hover span {
  transform: translateY(-2px);
}

/* Animação de loading melhorada */
@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Efeito parallax sutil em imagens */
.complexo-image-wrapper img,
.bear-image-wrapper img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animação suave para texto */
.section-title,
.section-subtitle,
.section-description {
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efeito de brilho nos gradientes */
.gradient-text {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* Navbar com animação mais suave */
.navbar {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* WhatsApp button com animação melhorada */
.whatsapp-float {
  animation: smoothBounce 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  animation: none;
  transform: scale(1.15) rotate(5deg);
}

/* Scroll to top com efeito melhorado */
.scroll-to-top {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-to-top:hover {
  transform: translateY(-8px) rotate(5deg);
}

/* FAQ com animação suave */
.faq-item {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active {
  transform: scale(1.02);
}

/* Loading dots melhorado */
@keyframes dots {
  0%,
  20% {
    content: ".";
    opacity: 0.3;
  }
  40% {
    content: "..";
    opacity: 0.6;
  }
  60%,
  100% {
    content: "...";
    opacity: 1;
  }
}

/* Animação de texto com gradiente (defined earlier) — duplicate removed */
/* ============================================
           RESPONSIVE - SISTEMA COMPLETO
           ============================================ */

/* ============================================
           DESKTOP LARGE (1440px+)
           ============================================ */
@media (min-width: 1440px) {
  .section-container {
    max-width: 1400px;
  }

  .hero-title {
    font-size: clamp(3.5rem, 8vw, 6rem);
  }

  .section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
  }

  .hero-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .steps-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }

  .about-content {
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    max-width: 1000px;
  }

  .contact-grid {
    gap: 5rem;
  }
}

/* ============================================
           DESKTOP (1024px - 1439px)
           ============================================ */
@media (max-width: 1439px) and (min-width: 1024px) {
  .section-container {
    max-width: 1200px;
  }

  .hero-title {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
  }

  .section-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .steps-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .about-content {
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
  }

  .about-card {
    width: 300px;
    height: 500px;
  }

  .about-sidebar {
    height: 500px;
  }

  .contact-grid {
    gap: 4rem;
  }

  .results-grid {
    gap: 2rem;
    overflow-x: auto;
  }

  .result-card {
    min-width: 200px;
  }
}

/* ============================================
           TABLET LANDSCAPE (992px - 1023px)
           ============================================ */
@media (max-width: 1023px) and (min-width: 992px) {
  .section-container {
    max-width: 960px;
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .steps-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* ============================================
           TABLET PORTRAIT (768px - 991px)
           ============================================ */
@media (max-width: 991px) and (min-width: 768px) {
  .section {
    padding: var(--spacing-lg) 2rem;
  }

  .section-container {
    max-width: 100%;
    padding: 0 1.5rem;
  }

  .hero-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
  }

  .section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .steps-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-cards-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .about-card {
    width: 100%;
    max-width: 320px;
    height: 500px;
  }

  .about-sidebar {
    height: auto;
    max-height: 500px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact-item {
    padding: 1.75rem;
    gap: 1.5rem;
  }

  .contact-icon {
    width: 65px;
    height: 65px;
  }

  .contact-icon svg {
    width: 30px;
    height: 30px;
  }

  .bear-content {
    flex-direction: column;
    gap: 2.5rem;
    text-align: center;
  }

  .bear-image-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .bear-title {
    font-size: clamp(2.5rem, 7vw, 4rem);
  }

  .bear-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
  }

  .about-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .results-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .result-card {
    flex: 1 1 calc(33.333% - 1rem);
    min-width: 180px;
  }

  .feature-card,
  .testimonial-card {
    padding: 2rem;
  }

  .feature-icon {
    height: 200px;
  }

  .hero-cta {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .btn {
    flex: 1 1 auto;
    min-width: 200px;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .client-logo {
    width: 180px;
    height: 100px;
  }

  .client-logo img {
    width: 120%;
    height: 120%;
  }

  .client-logo img[src*="CAMUCA_LOGO"],
  .client-logo img[src*="ZEUS ROSOLVE_LOGO"] {
    width: 250%;
    height: 250%;
    transform: translateY(10px);
  }
}

/* ============================================
           MOBILE LANDSCAPE & SMALL TABLET (576px - 767px)
           ============================================ */
@media (max-width: 767px) and (min-width: 576px) {
  .section {
    padding: var(--spacing-md) 1.5rem;
  }

  .section-container {
    padding: 0 1rem;
  }

  .hero {
    padding: 7rem 1.5rem 3rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
  }

  .section-title {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
  }

  .section-subtitle {
    font-size: clamp(0.9rem, 2vw, 1rem);
  }

  .section-description {
    font-size: 1rem;
  }

  .features-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .steps-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-cards-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .about-card {
    width: 100%;
    max-width: 300px;
    height: 400px;
  }

  .about-sidebar {
    height: auto;
    max-height: 400px;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-item {
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .contact-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }

  .contact-icon svg {
    width: 28px;
    height: 28px;
  }

  .contact-details h4 {
    font-size: 1.1rem;
  }

  .contact-details p {
    font-size: 0.9rem;
  }

  .contact-form-container {
    padding: 2rem;
  }

  .bear-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .bear-image-wrapper {
    max-width: 350px;
  }

  .bear-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
  }

  .bear-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
  }

  .results-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .result-card {
    width: 100%;
    min-width: auto;
  }

  .feature-card,
  .testimonial-card {
    padding: 1.75rem;
  }

  .feature-icon {
    height: 180px;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .btn {
    width: 100%;
    padding: 1rem 2rem;
  }

  .btn-feature {
    padding: 0.8rem 1.75rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .faq-container {
    padding: 1.5rem;
  }

  .faq-item {
    padding: 1.25rem;
  }

  .faq-question {
    font-size: 1rem;
  }

  .client-logo {
    width: 160px;
    height: 90px;
    padding: 1rem;
  }

  .client-logo img {
    width: 130%;
    height: 130%;
  }

  .client-logo img[src*="CAMUCA_LOGO"],
  .client-logo img[src*="ZEUS ROSOLVE_LOGO"] {
    width: 280%;
    height: 280%;
    transform: translateY(12px);
  }
}

/* ============================================ MOBILE PORTRAIT (até 768px) - NAVEGAÇÃO ============================================ */
@media (max-width: 768px) {
  .navbar {
    top: 0.5rem;
    width: calc(100% - 1.5rem);
    padding: 0.6rem 1rem;
    z-index: 1002;
  }

  .navbar.scrolled {
    top: 0.5rem;
    padding: 0.6rem 1rem;
  }

  .nav-container {
    justify-content: space-between;
    width: 100%;
  }

  .logo {
    height: 28px;
  }

  .logo img {
    max-height: 28px;
  }

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1003;
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 1.1rem;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: var(--bg-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 4rem 1.5rem 2rem;
    padding-top: 5rem;
    box-shadow: 0 4px 20px var(--shadow-color);
    transition: left 0.3s ease, opacity 0.3s ease;
    gap: 0;
    z-index: 1001;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    opacity: 0;
    visibility: hidden;
  }

  .nav-menu.active {
    left: 0;
    opacity: 1;
    visibility: visible;
  }

  .nav-menu li {
    width: 100%;
    margin-bottom: 0.4rem;
    flex-shrink: 0;
  }

  .nav-menu li:last-child {
    margin-top: 0.8rem;
  }

  .nav-link {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    width: 100%;
    white-space: nowrap;
    overflow: visible;
  }

  .nav-link::after {
    display: none !important;
  }

  .nav-link:hover {
    background: var(--bg-tertiary);
  }

  .nav-cta {
    width: 100%;
    text-align: center;
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: visible;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-left: 0;
    margin-top: 0.5rem;
    flex-shrink: 0;
  }

  .hero {
    padding: 8rem 1.5rem 3rem;
    min-height: auto;
  }

  .hero-badge {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
  }

  .section {
    padding: var(--spacing-lg) 1.5rem;
  }

  .features-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .steps-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .contact-form-container {
    padding: 2rem;
  }

  .form-group input,
  .form-group textarea {
    font-size: 1rem;
  }
}

/* ============================================
           MOBILE SMALL (481px - 575px)
           ============================================ */
@media (max-width: 575px) and (min-width: 481px) {
  .section {
    padding: var(--spacing-md) 1.25rem;
  }

  .section-container {
    padding: 0 0.75rem;
  }

  .hero {
    padding: 7rem 1.25rem 2.5rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .hero-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-cards-container {
    flex-direction: column;
    align-items: center;
  }

  .about-card {
    max-width: 280px;
    height: 380px;
  }

  .about-sidebar {
    height: auto;
    max-height: 400px;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-item {
    padding: 1.25rem;
    gap: 1rem;
  }

  .contact-icon {
    width: 55px;
    height: 55px;
  }

  .contact-icon svg {
    width: 26px;
    height: 26px;
  }

  .contact-form-container {
    padding: 1.75rem;
  }

  .bear-content {
    flex-direction: column;
    gap: 1.5rem;
  }

  .bear-image-wrapper {
    max-width: 280px;
  }

  .bear-title {
    font-size: clamp(1.75rem, 7vw, 3rem);
  }

  .bear-subtitle {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  }

  .client-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-number {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .feature-icon {
    height: 160px;
  }
}

/* ============================================
           MOBILE EXTRA SMALL (até 480px)
           ============================================ */
@media (max-width: 480px) {
  .section {
    padding: var(--spacing-md) 1rem;
  }

  .section-container {
    padding: 0 0.5rem;
  }

  .hero {
    padding: 6.5rem 1rem 2.5rem;
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }

  .hero-badge {
    padding: 0.35rem 0.85rem;
    font-size: 0.6rem;
    letter-spacing: 0.9px;
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 1.75rem);
  }

  .section-subtitle {
    font-size: 0.85rem;
  }

  .section-description {
    font-size: 0.95rem;
  }

  .features-grid,
  .testimonials-grid {
    gap: 1.25rem;
  }

  .feature-card,
  .testimonial-card {
    padding: 1.5rem;
  }

  .feature-title {
    font-size: 1.1rem;
  }

  .feature-icon {
    height: 150px;
  }

  .feature-icon img {
    max-width: 80px;
    max-height: 80px;
  }

  .steps-container {
    gap: 1.5rem;
  }

  .step-number {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }

  .step-title {
    font-size: 1.1rem;
  }

  .step-description {
    font-size: 0.9rem;
  }

  /* About Section - Mobile */
  .about-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-cards-container {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .about-card {
    width: 100%;
    max-width: 280px;
    height: 350px;
  }

  .about-sidebar {
    height: auto;
    max-height: 500px;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Contact Section - Mobile */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-item {
    padding: 1.25rem;
    gap: 1rem;
    flex-direction: column;
    text-align: center;
  }

  .contact-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto;
  }

  .contact-icon svg {
    width: 26px;
    height: 26px;
  }

  .contact-details {
    text-align: center;
  }

  .contact-details h4 {
    font-size: 1rem;
  }

  .contact-details p {
    font-size: 0.85rem;
  }

  .contact-form-container {
    padding: 1.5rem;
  }

  /* Bear Finance - Mobile */
  .bear-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .bear-image-wrapper {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .bear-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .bear-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .bear-description {
    text-align: left;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .contact-item {
    padding: 1rem;
    gap: 1rem;
  }

  .contact-icon {
    width: 50px;
    height: 50px;
  }

  .contact-icon svg {
    width: 24px;
    height: 24px;
  }

  .contact-details h4 {
    font-size: 0.95rem;
  }

  .contact-details p {
    font-size: 0.85rem;
  }

  .contact-form-container {
    padding: 1.5rem;
  }

  /* About Section - Mobile Extra Small */
  .about-card {
    max-width: 260px;
    height: 320px;
  }

  .about-sidebar {
    max-height: 450px;
  }

  /* Bear Finance - Mobile Extra Small */
  .bear-image-wrapper {
    max-width: 250px;
  }

  .bear-title {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }

  .bear-subtitle {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-group input,
  .form-group textarea {
    padding: 0.85rem;
    font-size: 0.95rem;
  }

  .btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
  }

  .btn-feature {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .result-card {
    padding: 1.5rem;
  }

  .result-number {
    font-size: 2rem;
  }

  .result-label {
    font-size: 0.85rem;
  }

  .client-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .client-logo {
    padding: 0.75rem;
  }

  .client-logo img {
    max-height: 30px;
  }

  .footer-content {
    gap: 1.5rem;
  }

  .footer-section h3 {
    font-size: 1.1rem;
  }

  .footer-section p,
  .footer-section a {
    font-size: 0.85rem;
  }

  .faq-item {
    padding: 1rem;
  }

  .faq-question {
    font-size: 0.95rem;
  }

  .faq-answer {
    font-size: 0.85rem;
  }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 1.25rem;
    right: 1.25rem;
    font-size: 1.5rem;
  }
}

/* ============================================
           DISPOSITIVOS MUITO PEQUENOS (320px - 375px)
           ============================================ */
@media (max-width: 375px) {
  .navbar {
    padding: 0.5rem 0.8rem;
    width: calc(100% - 1rem);
  }

  .logo {
    height: 24px;
  }

  .logo img {
    max-height: 24px;
  }

  /* About Section - Very Small Mobile */
  .about-card {
    max-width: 100%;
    height: 300px;
  }

  .about-sidebar {
    max-height: 400px;
    padding: 1.5rem;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Contact Section - Very Small Mobile */
  .contact-item {
    padding: 1rem;
    gap: 0.75rem;
  }

  .contact-icon {
    width: 45px;
    height: 45px;
  }

  .contact-icon svg {
    width: 22px;
    height: 22px;
  }

  .contact-form-container {
    padding: 1.25rem;
  }

  /* Bear Finance - Very Small Mobile */
  .bear-image-wrapper {
    max-width: 220px;
  }

  .bear-title {
    font-size: clamp(1.5rem, 10vw, 2.25rem);
  }

  .bear-subtitle {
    font-size: clamp(0.8rem, 4vw, 0.95rem);
  }

  .menu-toggle {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .nav-menu {
    padding: 3.5rem 1rem 1.5rem;
    padding-top: 4.5rem;
  }

  .nav-link {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
  }

  .nav-cta {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    margin-top: 0.4rem;
  }

  .hero {
    padding: 6rem 1rem 2.5rem;
    min-height: 90vh;
  }

  .hero-title {
    font-size: clamp(1.5rem, 8vw, 2rem);
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 0.85rem;
    padding: 0 0.5rem;
  }

  .hero-badge {
    padding: 0.3rem 0.8rem;
    font-size: 0.55rem;
    letter-spacing: 0.8px;
    margin-bottom: 1rem;
  }

  .section {
    padding: var(--spacing-md) 0.75rem;
  }

  .section-container {
    padding: 0 0.5rem;
  }

  .section-title {
    font-size: clamp(1.4rem, 7vw, 1.65rem);
  }

  .section-description {
    font-size: 0.9rem;
  }

  .feature-card,
  .testimonial-card {
    padding: 1.25rem;
  }

  .feature-icon {
    height: 140px;
  }

  .feature-icon img {
    max-width: 70px;
    max-height: 70px;
  }

  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }

  .contact-form-container {
    padding: 1.25rem;
  }

  .client-grid {
    gap: 0.5rem;
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
}

/* ============================================
           AJUSTES ESPECÍFICOS PARA ORIENTAÇÃO
           ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 5rem 1.5rem 2rem;
    min-height: auto;
  }

  .nav-menu {
    padding-top: 3rem;
  }
}

/* ============================================
           IMPRESSÃO
           ============================================ */
@media print {
  .navbar,
  .whatsapp-float,
  .scroll-to-top,
  .hero-cta {
    display: none;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* ==========================
   ADTECH SECTION STYLES
   Image one side, text other, 3 cards aligned
   ========================== */
.adtech-section {
  padding: 6rem 1.5rem 4rem; /* more vertical margin as requested */
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 720px) 360px; /* wider text column, narrower image column to bring image closer */
  gap: 1.25rem 1.75rem; /* smaller horizontal gap so image is nearer text */
  align-items: start;
  justify-content: center;
}

/* Ensure the container with the main text stays in the left column */
.adtech-section > .adtech-container {
  grid-column: 1 / 2;
  align-self: center;
  padding: 0 1rem;
  margin: 0;
}

/* The image block may be a <section> wrapping .box-image-lateral */
.adtech-section .box-image-lateral,
.adtech-section > section .box-image-lateral {
  grid-column: 2 / 3;
  align-self: center;
  justify-self: start; /* move image toward the left edge of its column (closer to text) */
  margin: 0;
  padding: 0 1rem;
}

.adtech-section .adtech-image-wrapper img,
.adtech-section .adtech-image {
  max-width: 420px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: block;
}

/* Make buttons, secondary text and cards span full width under the intro row */
.adtech-section .bottom-adtech-container,
.adtech-section .sessao-texto,
.adtech-section .adtech-cards-grid {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 1.5rem;
}

.adtech-section .sessao-texto .container-de-texto {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem;
}

.adtech-section .adtech-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.adtech-section .cards-adtech-wrapper {
  background: #0b0b0b;
  border-radius: 12px;
  padding: 1.6rem;
  min-height: 160px;
}

/* small screens: stack everything */
@media (max-width: 900px) {
  .adtech-section {
    grid-template-columns: 1fr;
    padding: 2.5rem 1rem;
    gap: 1.25rem;
  }

  .adtech-section > .adtech-container,
  .adtech-section .box-image-lateral {
    grid-column: 1 / -1;
  }

  .adtech-section .adtech-image-wrapper img {
    max-width: 320px;
    margin: 0 auto;
  }

  .adtech-section .adtech-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ANIMAÇÕES GARANTIDAS - SEÇÃO CONHEÇA
   ============================================ */

/* Transições para todos os cards */
.conheca .card-imagem-conheca,
.conheca .container-conheca-adtech,
.conheca .automacao-subtitulo,
.conheca .icon-card,
.conheca .icon-card svg,
.conheca img {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}




/* ============================================================================================================
   
   📸 14. INSTAGRAM FEED / ARTIGOS SECTION
   
   Seção estilo feed Instagram com grid de posts e perfil
   
   ============================================================================================================ */

.instagram-section {
  background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(5, 5, 5, 1) 100%);
}

/* Header do Perfil estilo Instagram */
.insta-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
}

.insta-profile-pic {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  padding: 3px;
  flex-shrink: 0;
}

.insta-profile-pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #0a0a0a;
}

.insta-profile-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0a0a0a;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.insta-profile-info {
  flex: 1;
}

.insta-username {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.insta-bio {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.insta-follow-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  color: #000;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.insta-follow-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 25px rgba(0, 231, 252, 0.4);
}

.insta-follow-btn svg {
  stroke: #000;
}

/* Grid de Posts Instagram */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 900px;
  margin: 0 auto;
}

.insta-post {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.insta-post-thumb {
  width: 100%;
  height: 100%;
  position: relative;
}

.insta-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.insta-post:hover .insta-thumb-placeholder {
  background: linear-gradient(145deg, #222 0%, #151515 100%);
}

.insta-post:hover .insta-thumb-placeholder svg {
  color: rgba(0, 231, 252, 0.3);
}

/* Overlay com estatísticas */
.insta-post-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.insta-post:hover .insta-post-overlay {
  opacity: 1;
}

.insta-stats {
  display: flex;
  gap: 1.5rem;
}

.insta-stats span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

.insta-stats svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Ícone de Vídeo/Reels */
.insta-video-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
}

.insta-video-icon svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

.insta-post:hover .insta-video-icon {
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  transform: scale(1.1);
}

.insta-post:hover .insta-video-icon svg {
  fill: #000;
}

/* Ícone de Carrossel */
.insta-carousel-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  opacity: 0.9;
}

.insta-carousel-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Botão Ver no Instagram */
.insta-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.btn-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid;
  border-image: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) 1;
  border-radius: 0;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-instagram::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-instagram:hover::before {
  left: 0;
}

.btn-instagram:hover {
  color: #000;
}

.btn-instagram:hover svg {
  stroke: #000;
}

/* Responsivo Instagram */
@media (max-width: 768px) {
  .insta-profile-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .insta-profile-pic {
    width: 80px;
    height: 80px;
  }

  .insta-follow-btn {
    width: 100%;
    justify-content: center;
  }

  .insta-grid {
    gap: 2px;
  }

  .insta-video-icon {
    width: 26px;
    height: 26px;
    top: 8px;
    right: 8px;
  }

  .insta-video-icon svg {
    width: 12px;
    height: 12px;
  }

  .insta-stats {
    gap: 1rem;
  }

  .insta-stats span {
    font-size: 0.85rem;
  }

  .insta-stats svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .insta-username {
    font-size: 1.1rem;
  }

  .insta-bio {
    font-size: 0.8rem;
  }

  .insta-thumb-placeholder svg {
    width: 28px;
    height: 28px;
  }

  .btn-instagram {
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* ============================================
   AD-TECH NEW SECTION STYLES
   ============================================ */

.adtech-section-new {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  padding: 6rem 0;
}

/* Background Effects */
.adtech-bg-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 231, 252, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.adtech-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 231, 252, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 231, 252, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.adtech-section-new .section-container {
  position: relative;
  z-index: 1;
}

/* Main Content Layout */
.adtech-main-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* Lado da Imagem */
.adtech-image-side {
  position: relative;
}

.adtech-image-container {
  position: relative;
  max-width: 580px;
}

.adtech-image-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(0, 255, 77, 0.15) 0%, rgba(0, 231, 252, 0.1) 40%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.adtech-image-frame {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 2px solid transparent;
  padding: 8px;
  z-index: 1;
}

.adtech-image-frame img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* Floating Badges */
.adtech-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(0, 231, 252, 0.3);
  border-radius: 30px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  z-index: 10;
  animation: float-badge 3s ease-in-out infinite;
}

.adtech-float-badge svg {
  stroke: #00e7fc;
}

.adtech-float-1 {
  top: -15px;
  right: -20px;
  animation-delay: 0s;
}

.adtech-float-2 {
  bottom: 20%;
  left: -30px;
  animation-delay: 1s;
}

.adtech-float-3 {
  bottom: -10px;
  right: 10%;
  animation-delay: 2s;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Lado do Texto */
.adtech-text-side {
  max-width: 560px;
}

.adtech-headline {
  margin-bottom: 2rem;
}

.adtech-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(0, 231, 252, 0.1);
  border: 1px solid rgba(0, 231, 252, 0.3);
  border-radius: 30px;
  color: #00e7fc;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.adtech-main-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.adtech-main-description {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.adtech-main-description strong {
  color: #00ff4d;
  font-weight: 700;
}

/* Features List */
.adtech-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.adtech-features-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.feature-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 231, 252, 0.2) 0%, rgba(0, 255, 77, 0.2) 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.feature-check svg {
  stroke: #00ff4d;
}

/* CTAs */
.adtech-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.adtech-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 25px rgba(0, 231, 252, 0.3);
}

.adtech-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0, 231, 252, 0.4);
}

.adtech-btn-primary svg {
  stroke: #000;
  transition: transform 0.3s ease;
}

.adtech-btn-primary:hover svg {
  transform: translateX(4px);
}

.adtech-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.adtech-btn-secondary:hover {
  border-color: #00e7fc;
  background: rgba(0, 231, 252, 0.1);
}

.adtech-btn-secondary svg {
  stroke: #00e7fc;
}

/* Cards Row */
.adtech-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.adtech-feature-card {
  background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
              linear-gradient(135deg, rgba(0, 231, 252, 0.3) 0%, rgba(0, 255, 77, 0.3) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 1.75rem;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.adtech-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 231, 252, 0.05) 0%, rgba(0, 255, 77, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.adtech-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 231, 252, 0.15);
}

.adtech-feature-card:hover::before {
  opacity: 1;
}

.adtech-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 231, 252, 0.1);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.adtech-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.adtech-card-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.adtech-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #00e7fc;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.adtech-card-link:hover {
  color: #00ff4d;
}

.adtech-card-link svg {
  transition: transform 0.3s ease;
}

.adtech-card-link:hover svg {
  transform: translateX(4px);
}

/* Responsivo Ad-tech */
@media (max-width: 1100px) {
  .adtech-main-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .adtech-image-side {
    order: -1;
  }

  .adtech-image-container {
    max-width: 500px;
    margin: 0 auto;
  }

  .adtech-text-side {
    max-width: 100%;
    text-align: center;
  }

  .adtech-features-list {
    align-items: center;
  }

  .adtech-cta-group {
    justify-content: center;
  }

  .adtech-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .adtech-section-new {
    padding: 4rem 0;
  }

  .adtech-float-badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  .adtech-float-1 {
    top: -10px;
    right: 5px;
  }

  .adtech-float-2 {
    left: -10px;
  }

  .adtech-float-3 {
    bottom: -5px;
    right: 5%;
  }

  .adtech-main-title {
    font-size: 1.6rem;
  }

  .adtech-main-description {
    font-size: 0.95rem;
  }

  .adtech-btn-primary,
  .adtech-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .adtech-cards-row {
    grid-template-columns: 1fr;
  }

  .adtech-feature-card {
    text-align: center;
  }

  .adtech-card-icon {
    margin: 0 auto 1.25rem;
  }

  .adtech-image-container {
    max-width: 100%;
  }

  .adtech-float-2 {
    display: none;
  }
}

/* ============================================ BEAR FINANCE NEW SECTION - CORPORATE STYLE ============================================ */

.bear-finance-new {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #070707 100%);
  overflow: hidden;
}

.bear-bg-gradient {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.bear-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(107, 63, 160, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 63, 160, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.bear-finance-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

/* Header */
.bear-header {
  text-align: center;
  margin-bottom: 4rem;
}

.bear-subtitle-tag {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(107, 63, 160, 0.15);
  border: 1px solid rgba(107, 63, 160, 0.4);
  border-radius: 30px;
  color: #8b5fbf;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
}

.bear-main-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.bear-gradient-text {
  background: linear-gradient(135deg, #6b3fa0 0%, #8b5fbf 50%, #6b3fa0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bear-main-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

/* Grid Cards Layout */
.bear-grid-cards {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 4rem;
}

/* Cards Laterais */
.bear-card {
  height: 100%;
}

.bear-card-inner {
  background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
              linear-gradient(135deg, rgba(107, 63, 160, 0.5) 0%, rgba(107, 63, 160, 0.15) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s ease;
}

.bear-card-inner:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(107, 63, 160, 0.2);
}

.bear-card-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(107, 63, 160, 0.2) 0%, rgba(107, 63, 160, 0.08) 100%);
  border-radius: 16px;
  margin-bottom: 1.25rem;
}

.bear-card-icon svg {
  stroke: #8b5fbf;
}

.bear-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.bear-card-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* Card Central com Imagem */
.bear-card-central {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bear-image-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-bottom: 1.5rem;
}

.bear-image-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.25) 0%, transparent 60%);
  filter: blur(30px);
  z-index: 0;
}

.bear-image-frame {
  position: relative;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #6b3fa0 0%, #8b5fbf 50%, #6b3fa0 100%) border-box;
  border: 2px solid transparent;
  border-radius: 24px;
  padding: 1rem;
  z-index: 1;
}

.bear-image-frame img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.bear-image-info {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6b3fa0 0%, #4a2875 100%);
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.bear-brand {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: 1px;
}

.bear-tagline {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  white-space: nowrap;
}

/* Stats Row */
.bear-stats-row {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

.bear-stat {
  text-align: center;
}

.bear-stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #8b5fbf;
}

.bear-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Features Section */
.bear-features-section {
  margin-bottom: 3rem;
}

.bear-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.bear-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.bear-feature-item:hover {
  background: rgba(107, 63, 160, 0.08);
  border-color: rgba(107, 63, 160, 0.3);
}

.bear-feature-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(107, 63, 160, 0.15);
  border-radius: 10px;
  flex-shrink: 0;
}

.bear-feature-icon svg {
  stroke: #8b5fbf;
}

.bear-feature-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem 0;
}

.bear-feature-content p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.5;
}

/* Leader Section */
.bear-leader-section {
  margin-bottom: 3rem;
}

.bear-leader-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
              linear-gradient(135deg, rgba(107, 63, 160, 0.4) 0%, rgba(107, 63, 160, 0.15) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  text-align: center;
}

.bear-leader-quote {
  position: relative;
  margin-bottom: 1.5rem;
}

.bear-leader-quote svg {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #8b5fbf;
}

.bear-leader-quote p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  line-height: 1.7;
  margin: 0;
  padding-top: 2rem;
}

.bear-leader-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.bear-leader-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #6b3fa0 0%, #4a2875 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
}

.bear-leader-details h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.bear-leader-details p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* CTA Section */
.bear-cta-section {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bear-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #6b3fa0 0%, #4a2875 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 25px rgba(107, 63, 160, 0.35);
}

.bear-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(107, 63, 160, 0.5);
}

.bear-btn-primary svg {
  stroke: #fff;
  transition: transform 0.3s ease;
}

.bear-btn-primary:hover svg {
  transform: translateX(4px);
}

.bear-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid rgba(107, 63, 160, 0.5);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.bear-btn-secondary:hover {
  border-color: #6b3fa0;
  background: rgba(107, 63, 160, 0.15);
}

.bear-btn-secondary svg {
  stroke: #8b5fbf;
}

/* Responsivo Bear Finance */
@media (max-width: 1024px) {
  .bear-grid-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .bear-card-central {
    order: -1;
  }

  .bear-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bear-finance-new {
    padding: 4rem 0;
  }

  .bear-header {
    margin-bottom: 3rem;
  }

  .bear-main-title {
    font-size: 1.8rem;
  }

  .bear-main-description {
    font-size: 1rem;
  }

  .bear-stats-row {
    gap: 1.25rem;
  }

  .bear-stat-number {
    font-size: 1.25rem;
  }

  .bear-features-grid {
    grid-template-columns: 1fr;
  }

  .bear-feature-item {
    flex-direction: column;
    text-align: center;
  }

  .bear-feature-icon {
    margin: 0 auto;
  }

  .bear-leader-quote p {
    font-size: 1rem;
  }

  .bear-btn-primary,
  .bear-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .bear-stats-row {
    flex-direction: column;
    gap: 1rem;
  }

  .bear-image-info {
    padding: 0.6rem 1rem;
  }

  .bear-brand {
    font-size: 0.9rem;
  }

  .bear-tagline {
    font-size: 0.65rem;
  }
}

/* ============================================
   COMPLEXO DMC NEW SECTION - CORPORATE STYLE
   ============================================ */

.complexo-dmc-new {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #070707 100%);
  overflow: hidden;
}

.complexo-bg-gradient {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(0, 231, 252, 0.06) 0%, rgba(0, 255, 77, 0.04) 40%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.complexo-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 231, 252, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 231, 252, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.complexo-dmc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

/* Header */
.complexo-header {
  text-align: center;
  margin-bottom: 4rem;
}

.complexo-subtitle-tag {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(0, 231, 252, 0.1);
  border: 1px solid rgba(0, 231, 252, 0.3);
  border-radius: 30px;
  color: #00e7fc;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
}

.complexo-main-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.complexo-gradient-text {
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.complexo-main-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

/* Grid Cards Layout */
.complexo-grid-cards {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 4rem;
}

/* Cards Laterais */
.complexo-card {
  height: 100%;
}

.complexo-card-inner {
  background: linear-gradient(#0c0c0c, #0c0c0c) padding-box,
              linear-gradient(135deg, rgba(0, 231, 252, 0.4) 0%, rgba(0, 255, 77, 0.2) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s ease;
}

.complexo-card-inner:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 231, 252, 0.15);
}

.complexo-card-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 231, 252, 0.15) 0%, rgba(0, 255, 77, 0.1) 100%);
  border-radius: 16px;
  margin-bottom: 1.25rem;
}

.complexo-card-icon svg {
  stroke: #00e7fc;
}

.complexo-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.complexo-card-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* Card Central com Imagem */
.complexo-card-central {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.complexo-image-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-bottom: 1.5rem;
}

.complexo-image-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(0, 231, 252, 0.15) 0%, rgba(0, 255, 77, 0.1) 40%, transparent 60%);
  filter: blur(30px);
  z-index: 0;
}

.complexo-image-frame {
  position: relative;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%) border-box;
  border: 2px solid transparent;
  border-radius: 24px;
  padding: 1rem;
  z-index: 1;
}

.complexo-image-frame img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.complexo-image-info {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.complexo-brand {
  font-size: 1rem;
  font-weight: 800;
  color: #000;
  margin: 0;
  letter-spacing: 1px;
}

.complexo-tagline {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  white-space: nowrap;
}

/* Stats Row */
.complexo-stats-row {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

.complexo-stat {
  text-align: center;
}

.complexo-stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.complexo-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Features Section */
.complexo-features-section {
  margin-bottom: 3rem;
}

.complexo-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.complexo-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.complexo-feature-item:hover {
  background: rgba(0, 231, 252, 0.05);
  border-color: rgba(0, 231, 252, 0.2);
}

.complexo-feature-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 231, 252, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}

.complexo-feature-icon svg {
  stroke: #00e7fc;
}

.complexo-feature-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem 0;
}

.complexo-feature-content p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.5;
}

/* Quote Section */
.complexo-quote-section {
  margin-bottom: 3rem;
}

.complexo-quote-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
              linear-gradient(135deg, rgba(0, 231, 252, 0.3) 0%, rgba(0, 255, 77, 0.2) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  text-align: center;
}

.complexo-quote-box {
  position: relative;
  margin-bottom: 1.5rem;
}

.complexo-quote-box svg {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #00e7fc;
}

.complexo-quote-box p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  line-height: 1.7;
  margin: 0;
  padding-top: 2rem;
}

.complexo-quote-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.complexo-quote-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #000;
  font-size: 0.85rem;
}

.complexo-quote-details h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.complexo-quote-details p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* CTA Section */
.complexo-cta-section {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.complexo-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #00e7fc 0%, #00ff4d 100%);
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 25px rgba(0, 231, 252, 0.3);
}

.complexo-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0, 231, 252, 0.4);
}

.complexo-btn-primary svg {
  stroke: #000;
  transition: transform 0.3s ease;
}

.complexo-btn-primary:hover svg {
  transform: translateX(4px);
}

.complexo-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid rgba(0, 231, 252, 0.4);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.complexo-btn-secondary:hover {
  border-color: #00e7fc;
  background: rgba(0, 231, 252, 0.1);
}

.complexo-btn-secondary svg {
  stroke: #00e7fc;
}

/* Responsivo Complexo DMC */
@media (max-width: 1024px) {
  .complexo-grid-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .complexo-card-central {
    order: -1;
  }

  .complexo-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .complexo-dmc-new {
    padding: 4rem 0;
  }

  .complexo-header {
    margin-bottom: 3rem;
  }

  .complexo-main-title {
    font-size: 1.8rem;
  }

  .complexo-main-description {
    font-size: 1rem;
  }

  .complexo-stats-row {
    gap: 1.25rem;
  }

  .complexo-stat-number {
    font-size: 1.25rem;
  }

  .complexo-features-grid {
    grid-template-columns: 1fr;
  }

  .complexo-feature-item {
    flex-direction: column;
    text-align: center;
  }

  .complexo-feature-icon {
    margin: 0 auto;
  }

  .complexo-quote-box p {
    font-size: 1rem;
  }

  .complexo-btn-primary,
  .complexo-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .complexo-stats-row {
    flex-direction: column;
    gap: 1rem;
  }

  .complexo-image-info {
    padding: 0.6rem 1rem;
  }

  .complexo-brand {
    font-size: 0.9rem;
  }

  .complexo-tagline {
    font-size: 0.65rem;
  }
}

/* ============================================
   RESPONSIVIDADE GLOBAL - TELAS GRANDES (ULTRAWIDE)
   ============================================ */

@media (min-width: 1600px) {
  /* Container principal mais largo */
  .section-container,
  .bear-finance-container,
  .complexo-dmc-container {
    max-width: 1400px;
  }

  /* Hero ajustes */
  .hero-content h1 {
    font-size: 4.5rem;
  }

  .hero-content p {
    font-size: 1.4rem;
    max-width: 700px;
  }

  /* Navbar mais confortável */
  .navbar {
    max-width: 1200px;
    padding: 1.2rem 2.5rem;
  }

  /* Seção Conheça */
  .conheca-container {
    max-width: 1400px;
  }

  .grid-container-rino {
    gap: 3rem;
  }

  .card-imagem-conheca img {
    max-width: 350px;
  }

  /* Ad-tech */
  .adtech-main-content {
    gap: 5rem;
  }

  .adtech-image-container {
    max-width: 650px;
  }

  .adtech-main-title {
    font-size: 2.8rem;
  }

  /* Products Grid */
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* Treinamentos Carousel */
  .treinamentos-card {
    width: 420px;
  }

  /* Instagram Grid */
  .insta-grid {
    max-width: 1000px;
    gap: 6px;
  }

  /* Bear Finance */
  .bear-grid-cards {
    gap: 3rem;
  }

  .bear-image-container {
    max-width: 380px;
  }

  /* Complexo DMC */
  .complexo-grid-cards {
    gap: 3rem;
  }

  .complexo-image-container {
    max-width: 380px;
  }

  /* Cards Features maiores */
  .adtech-cards-row,
  .bear-features-grid,
  .complexo-features-grid {
    gap: 2rem;
  }
}

@media (min-width: 1920px) {
  /* Ultrawide 1920px+ */
  .section-container,
  .bear-finance-container,
  .complexo-dmc-container {
    max-width: 1600px;
  }

  .hero-content h1 {
    font-size: 5rem;
  }

  .navbar {
    max-width: 1400px;
  }

  .conheca-container {
    max-width: 1600px;
  }

  .section-title {
    font-size: 3.5rem;
  }

  .section-description {
    font-size: 1.25rem;
  }

  /* Produtos em 5 colunas */
  .products-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .adtech-image-container {
    max-width: 700px;
  }

  .bear-image-container,
  .complexo-image-container {
    max-width: 420px;
  }
}

@media (min-width: 2560px) {
  /* 4K / Super Ultrawide */
  .section-container,
  .bear-finance-container,
  .complexo-dmc-container {
    max-width: 1800px;
  }

  .hero {
    padding: 12rem 2rem;
  }

  .hero-content h1 {
    font-size: 5.5rem;
  }

  .hero-content p {
    font-size: 1.6rem;
    max-width: 900px;
  }

  .section {
    padding: 8rem 0;
  }

  .section-title {
    font-size: 4rem;
  }

  .navbar {
    max-width: 1600px;
    padding: 1.5rem 3rem;
  }

  .nav-link {
    font-size: 1.1rem;
  }
}

/* ============================================
   RESPONSIVIDADE GLOBAL - MOBILE REFINADO
   ============================================ */

@media (max-width: 768px) {
  /* Hero Mobile */
  .hero {
    padding: 8rem 1rem 4rem;
    min-height: auto;
  }

  .hero-content h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-content p {
    font-size: 1rem;
    padding: 0 0.5rem;
  }

  .hero-cta {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0 1rem;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Navbar Mobile */
  .navbar {
    top: 1rem;
    width: calc(100% - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 20px;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-link {
    font-size: 1.25rem;
  }

  /* Seção Conheça Mobile */
  .conheca {
    padding: 3rem 1rem;
  }

  .conheca-title {
    font-size: 1.6rem;
  }

  .conheca-description {
    font-size: 0.95rem;
  }

  .grid-container-rino {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .card-imagem-conheca {
    order: -1;
  }

  .card-imagem-conheca img {
    max-width: 200px;
  }

  .container-conheca-adtech,
  .automacao-subtitulo {
    padding: 1.25rem;
  }

  /* Ad-tech Mobile */
  .adtech-section-new {
    padding: 3rem 0;
  }

  .adtech-float-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
  }

  .adtech-float-1 {
    top: -8px;
    right: 0;
  }

  .adtech-float-2 {
    display: none;
  }

  .adtech-float-3 {
    bottom: -8px;
    right: 5%;
  }

  /* Products Mobile */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.5rem;
  }

  .product-card {
    padding: 1.25rem;
  }

  /* Treinamentos Mobile */
  .treinamentos-section {
    padding: 3rem 0;
  }

  .treinamentos-card {
    width: 280px;
  }

  .carousel-dots {
    gap: 0.5rem;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
  }

  /* Instagram Mobile */
  .insta-grid {
    gap: 2px;
  }

  .insta-profile-header {
    margin: 0 1rem 2rem;
    padding: 1rem;
  }

  /* Section Headers Mobile */
  .section-header {
    padding: 0 1rem;
    margin-bottom: 2rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .section-subtitle {
    font-size: 0.8rem;
  }

  .section-description {
    font-size: 0.9rem;
  }

  /* Buttons Mobile */
  .btn {
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
  }

  /* Contato Mobile */
  .contact-form-container {
    margin: 0 1rem;
    padding: 1.5rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  /* Extra Small Mobile */
  .hero-content h1 {
    font-size: 1.7rem;
  }

  .hero-content p {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .navbar {
    padding: 0.6rem 0.85rem;
  }

  .logo img {
    height: 28px;
  }

  /* Conheca Extra Small */
  .conheca-title {
    font-size: 1.4rem;
  }

  .card-imagem-conheca img {
    max-width: 160px;
  }

  .icon-card {
    width: 45px;
    height: 45px;
  }

  .icon-card svg {
    width: 22px;
    height: 22px;
  }

  /* Ad-tech Extra Small */
  .adtech-main-title {
    font-size: 1.4rem;
  }

  .adtech-tag {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }

  .adtech-features-list li {
    font-size: 0.85rem;
  }

  .adtech-cards-row {
    gap: 1rem;
  }

  .adtech-feature-card {
    padding: 1.25rem;
  }

  /* Treinamentos Extra Small */
  .treinamentos-card {
    width: 260px;
  }

  .treinamento-card-content {
    padding: 1rem;
  }

  .treinamento-title {
    font-size: 1rem;
  }

  /* Stats em todas as seções */
  .bear-stats-row,
  .complexo-stats-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .bear-stat-number,
  .complexo-stat-number {
    font-size: 1.15rem;
  }

  .bear-stat-label,
  .complexo-stat-label {
    font-size: 0.7rem;
  }

  /* Feature items */
  .bear-feature-item,
  .complexo-feature-item {
    padding: 1rem;
  }

  .bear-feature-content h4,
  .complexo-feature-content h4 {
    font-size: 0.9rem;
  }

  .bear-feature-content p,
  .complexo-feature-content p {
    font-size: 0.75rem;
  }

  /* Quote boxes */
  .bear-leader-quote p,
  .complexo-quote-box p {
    font-size: 0.9rem;
    padding-top: 1.5rem;
  }

  .bear-leader-quote svg,
  .complexo-quote-box svg {
    width: 30px;
    height: 30px;
  }

  /* CTAs */
  .bear-btn-primary,
  .bear-btn-secondary,
  .complexo-btn-primary,
  .complexo-btn-secondary,
  .adtech-btn-primary,
  .adtech-btn-secondary {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
  }

  /* WhatsApp Button */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 360px) {
  /* Ultra Small (iPhone SE, etc) */
  .hero {
    padding: 7rem 0.75rem 3rem;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .section {
    padding: 2.5rem 0;
  }

  .section-container {
    padding: 0 0.75rem;
  }

  .section-title {
    font-size: 1.35rem;
  }

  .navbar {
    width: calc(100% - 1.5rem);
    top: 0.75rem;
  }

  .conheca {
    padding: 2.5rem 0.75rem;
  }

  .conheca-title {
    font-size: 1.25rem;
  }

  .treinamentos-card {
    width: 240px;
  }

  .products-grid {
    padding: 0 0.25rem;
  }

  .product-card {
    padding: 1rem;
  }

  .adtech-image-frame,
  .bear-image-frame,
  .complexo-image-frame {
    padding: 0.5rem;
  }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 5rem 1.5rem 2rem;
    min-height: auto;
  }

  .hero-content h1 {
    font-size: 1.75rem;
  }

  .hero-content p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .hero-cta {
    flex-direction: row;
    gap: 1rem;
  }

  .nav-menu {
    padding-top: 4rem;
  }

  .section {
    padding: 3rem 0;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .product-card:hover,
  .adtech-feature-card:hover,
  .bear-card-inner:hover,
  .complexo-card-inner:hover {
    transform: none;
  }

  /* Larger touch targets */
  .nav-link {
    padding: 0.75rem 1rem;
  }

  .btn {
    min-height: 48px;
  }

  /* Carousel navigation easier to tap */
  .carousel-btn {
    width: 48px;
    height: 48px;
  }

  .carousel-dot {
    width: 14px;
    height: 14px;
  }

  /* Instagram posts easier to tap */
  .insta-post-overlay {
    opacity: 0.7;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .navbar,
  .whatsapp-float,
  .hero-cta,
  .carousel-navigation,
  .insta-cta,
  .bear-cta-section,
  .complexo-cta-section,
  .adtech-cta-group {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: 2rem;
  }

  .section {
    page-break-inside: avoid;
    padding: 2rem 0;
  }

  body {
    background: white;
    color: black;
  }

  .section-title,
  .hero-content h1 {
    color: black;
    -webkit-text-fill-color: black;
  }
}