/* ===== SOURCE: style.css ===== */
/* --- Geral e Variáveis --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Fira+Code:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Brand Colors */
  --primary: #3B82F6;
  --primary-light: rgba(59,130,246,0.08);
  --primary-dark: #1E40AF;
  --accent: #10B981;
  --accent-light: rgba(16,185,129,0.08);
  --accent2: #f59e0b;
  --brand-blue: #3B82F6;
  --brand-green: #10B981;

  /* Background */
  --dark: #05080F;
  --dark-card: #111827;
  --light: #ffffff;
  --light-secondary: #e5e7eb;

  /* Cards */
  --card-border-color: rgba(59,130,246,0.12);
  --card-hover-border-color: rgba(16,185,129,0.4);

  /* Shadows */
  --shadow-light: rgba(16,185,129,0.12);
  --shadow-dark: rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px rgba(59,130,246,0.15);
  --shadow-glow-green: 0 0 30px rgba(16,185,129,0.15);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Layout */
  --navbar-height: 75px;
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.8s ease;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', monospace;

  /* Tema */
  --bg-primary: var(--dark);
  --text-primary: var(--light);
  --text-secondary: var(--light-secondary);
  --card-bg: var(--dark-card);
  --card-border: var(--card-border-color);
  --card-hover-border: var(--card-hover-border-color);
}

[data-theme="light"] {
  /* Cores de Fundo */
  --bg-primary: #f4f7fc;
  /* Um cinza azulado muito claro, suave para os olhos */
  --bg-secondary: #ffffff;
  /* Branco puro para seções ou elementos que precisam de destaque */

  /* Cores de Texto */
  --text-primary: #1c202e;
  /* Um azul escuro profundo, melhor que preto puro */
  --text-secondary: #5a647e;
  /* Um cinza azulado para textos secundários */

  /* Cores dos Cards */
  --card-bg: #ffffff;
  /* Cards brancos para limpar o layout */
  --card-border: #e0e5f0;
  /* Borda cinza clara sutil */
  --card-hover-border: var(--primary);
  /* Borda roxa no hover (usando a cor primária original) */

  /* Sombras */
  --shadow-light: rgba(59,130,246,0.1);
  /* Sombra roxa bem suave */
  --shadow-dark: rgba(0, 0, 0, 0.1);
  /* Sombra escura padrão, mas mais suave */

  /* Cores de Destaque (Acentos) Adaptadas para o Tema Claro */
  --primary-on-light: var(--primary);
  /* Roxo original da marca para elementos de destaque */
  --accent-on-light: var(--accent);
  /* Ciano original da marca para elementos de destaque */

  /* Cores específicas para elementos que precisam de mais contraste no tema claro */
  --link-color-light: #1E40AF;
  /* Roxo mais escuro para links */
  --icon-color-light: var(--primary);
  /* Roxo para ícones */
  --highlight-word-light-bg: rgba(59,130,246,0.1);
  /* Fundo leve para palavras destacadas */
}

/* Ajustes Globais para o Tema Claro */
[data-theme="light"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Títulos no Tema Claro */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-primary);
}

/* Gradiente de título no tema claro - usar cores mais escuras */
[data-theme="light"] .section-title h2 {
  background: linear-gradient(90deg, var(--primary), #00a0b0);
  /* Roxo e um tom de ciano mais escuro */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .section-title h2::after {
  background: linear-gradient(90deg, var(--primary), #00a0b0);
}

/* Parágrafos no Tema Claro */
[data-theme="light"] p {
  color: var(--text-secondary);
}

/* Links no Tema Claro */
[data-theme="light"] a {
  color: var(--link-color-light);
}

[data-theme="light"] a:hover {
  color: var(--primary);
  /* Roxo original ao passar o mouse */
}

/* Cards no Tema Claro */
[data-theme="light"] .step,
[data-theme="light"] .service-card,
[data-theme="light"] .differential-card,
[data-theme="light"] .result-card,
[data-theme="light"] .mvv-card,
[data-theme="light"] .case-studies-slider,
[data-theme="light"] .testimonial-section,
[data-theme="light"] .cta-container,
/* Adicionado .cta-container para o estilo de card do CTA */
[data-theme="light"] .lead-popup-content,
[data-theme="light"] .cookie-consent {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 25px var(--shadow-dark);
}

[data-theme="light"] .step:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .differential-card:hover,
[data-theme="light"] .result-card:hover,
[data-theme="light"] .mvv-card:hover,
[data-theme="light"] .cta-container:hover {
  /* Adicionado hover para .cta-container */
  border-color: var(--card-hover-border);
  box-shadow: 0 12px 30px rgba(59,130,246,0.15);
  /* Sombra mais pronunciada no hover */
}

/* Ícones dos cards no Tema Claro */
[data-theme="light"] .step-icon,
[data-theme="light"] .service-icon,
[data-theme="light"] .result-icon,
[data-theme="light"] .cta-card-icon {
  /* Adicionado .cta-card-icon */
  background: linear-gradient(135deg, rgba(59,130,246,0.05), rgba(0, 242, 255, 0.05));
  border: 1px solid rgba(59,130,246,0.1);
}

[data-theme="light"] .step-icon i,
[data-theme="light"] .service-icon i,
[data-theme="light"] .result-icon i,
[data-theme="light"] .cta-card-icon i {
  /* Adicionado .cta-card-icon i */
  color: var(--primary-on-light);
  /* Roxo nos ícones */
}

[data-theme="light"] .diff-icon {
  color: var(--primary-on-light);
}

/* Botões no Tema Claro */
[data-theme="light"] .btn-primary {
  background: linear-gradient(95deg, var(--primary), var(--accent));
  color: #ffffff;
  /* Texto branco para contraste com gradiente */
  box-shadow: 0 5px 15px rgba(59,130,246,0.2);
}

[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 20px rgba(59,130,246,0.3);
}

[data-theme="light"] .btn-secondary {
  background-color: transparent;
  color: var(--primary-on-light);
  /* Roxo para texto */
  border: 2px solid var(--primary-on-light);
  /* Borda roxa */
}

[data-theme="light"] .btn-secondary:hover {
  background-color: rgba(59,130,246,0.05);
  /* Fundo roxo muito claro no hover */
  color: var(--primary);
}

[data-theme="light"] .btn-contact {
  background-color: var(--primary);
  /* Roxo */
  color: #ffffff;
}

[data-theme="light"] .btn-contact:hover {
  background-color: var(--primary-dark);
  /* Roxo mais escuro */
}


/* Navbar no Tema Claro */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.85);
  /* Branco com transparência e blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e0e5f0;
  /* Borda cinza clara */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .navbar-scrolled {
  background: rgba(255, 255, 255, 0.95);
  /* Mais opaco ao rolar */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .logo a {
  background: linear-gradient(90deg, var(--primary), #333, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .logo span {
  color: var(--primary);
  /* Roxo para o span do logo */
}

[data-theme="light"] .nav-link {
  color: var(--text-secondary);
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link:focus {
  color: var(--primary-on-light);
  /* Roxo ao passar o mouse */
}

[data-theme="light"] .nav-link::after {
  background-color: var(--primary-on-light);
  /* Roxo para a linha abaixo do link */
}

[data-theme="light"] .mobile-menu-toggle {
  color: var(--text-primary);
}

/* Rodapé no Tema Claro */
[data-theme="light"] .footer {
  /* Corrigido: removido o _ de data-theme_light */
  background-color: #e9edf5;
  /* Um cinza bem claro para o rodapé */
  border-top: 1px solid #d1d9e6;
}

[data-theme="light"] .footer-title {
  color: var(--text-primary);
}

[data-theme="light"] .footer-link a,
[data-theme="light"] .footer-about,
[data-theme="light"] .footer-copyright,
[data-theme="light"] .footer-bottom-link {
  color: var(--text-secondary);
}

[data-theme="light"] .footer-link a:hover,
[data-theme="light"] .footer-bottom-link:hover {
  color: var(--primary-on-light);
}

[data-theme="light"] .footer-contact-item i {
  color: var(--primary-on-light);
}

[data-theme="light"] .social-icon {
  background-color: rgba(59,130,246,0.08);
  color: var(--primary-on-light);
}

[data-theme="light"] .social-icon:hover {
  background-color: var(--primary);
  color: #ffffff;
}

[data-theme="light"] .footer .logo a {
  /* Especificidade para logo no footer tema claro */
  background: linear-gradient(90deg, var(--primary), #333, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .footer .logo span {
  /* Especificidade para span do logo no footer tema claro */
  color: var(--primary);
}

[data-theme="light"] .footer p {
  /* Parágrafos no rodapé tema claro */
  color: var(--text-secondary);
}


/* Hero section no tema claro */
[data-theme="light"] .hero-subtitle {
  color: var(--text-secondary);
}

[data-theme="light"] #hero-title {
  background: linear-gradient(90deg, var(--primary), #00a0b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .highlight-word {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-stat {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  border: 1px solid var(--card-border);
}

[data-theme="light"] .hero-stat-number {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Números dos cards de resultado no tema claro */
[data-theme="light"] .result-card h3.count-up {
  color: var(--primary);
  /* Roxo para os números */
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    -2px -2px 5px rgba(0, 242, 255, 0.3),
    /* Sombra ciano sutil */
    2px 2px 5px rgba(0, 242, 255, 0.3);
}

/* Journey Navigation no tema claro */
[data-theme="light"] .journey-dot {
  background-color: rgba(5, 8, 15, 0.2);
  /* Pontos mais escuros */
}

[data-theme="light"] .journey-step:hover .journey-dot,
[data-theme="light"] .journey-step.active .journey-dot {
  background-color: var(--primary);
}

[data-theme="light"] .journey-step span {
  color: var(--text-secondary);
}

/* Theme Toggle no tema claro */
[data-theme="light"] .theme-toggle-inner {
  background-color: var(--bg-primary);
  /* Fundo do botão de tema */
}

[data-theme="light"] .theme-icon {
  color: var(--primary-on-light);
  /* Cor dos ícones sol/lua */
}

/* --- Seção CTA (Call to Action) no Tema Claro --- */
[data-theme="light"] .cta-section {
  background-color: #e9edf5;
}





[data-theme="light"] .cta-text {
  color: var(--text-secondary);
}

[data-theme="light"] .cta-card {
  /* Cards dentro do CTA */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .cta-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 25px rgba(59,130,246,0.12);
}





[data-theme="light"] .cta-card h3 {
  color: var(--text-primary);
}

[data-theme="light"] .cta-card p,
[data-theme="light"] .cta-card .cta-card-description {
  color: var(--text-secondary);
}

[data-theme="light"] .cta-card .btn-primary {
  background: linear-gradient(95deg, var(--primary), var(--accent));
  color: #ffffff;
}

[data-theme="light"] .cta-card .btn-secondary {
  color: var(--primary);
  border-color: var(--primary);
}

[data-theme="light"] .cta-card .btn-secondary:hover {
  background-color: rgba(59,130,246,0.05);
  color: var(--primary-dark);
}

[data-theme="light"] .cta-limited,
[data-theme="light"] .cta-highlight {
  color: var(--link-color-light);
}


/* ============================================= */
/* ESTILOS GERAIS (APLICÁVEIS A AMBOS OS TEMAS)  */
/* ============================================= */

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Poppins", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.7;
  transition: background-color 0.5s ease, color 0.5s ease;
  font-weight: 400;
}

/* --- Cursor Personalizado --- */
.custom-cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
}

.custom-cursor-follower {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, transform 0.6s ease;
  opacity: 0.5;
}

.cursor-expanded {
  transform: translate(-50%, -50%) scale(2);
  background-color: var(--primary);
}

.cursor-expanded-follower {
  width: 60px;
  height: 60px;
  border-color: var(--accent);
  opacity: 0.3;
}

/* --- Partículas Canvas --- */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  opacity: 0.4;
  pointer-events: none;
}



/* --- Controle de Tema --- */
.theme-toggle {
  position: fixed;
  top: 100px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* Default shadow for dark theme */
  transition: transform var(--transition-fast);
}

[data-theme="light"] .theme-toggle {
  box-shadow: 0 5px 15px var(--shadow-dark);
  /* Uses light theme shadow variable */
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(10deg);
}

.theme-toggle-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  /* Uses theme variable */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.theme-icon {
  position: absolute;
  font-size: 1.5rem;
  color: var(--primary);
  /* Default for dark theme */
  transition: all var(--transition-medium);
}

.theme-icon.sun {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

.theme-icon.moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* JS adds .dark-theme to theme-toggle when dark mode is active */
/* These rules will apply if theme-toggle.js adds .dark-theme class */
.theme-toggle.dark-theme .theme-icon.sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.theme-toggle.dark-theme .theme-icon.moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

/* If .dark-theme is NOT present (meaning light theme), sun is hidden, moon is visible by default icon styles.
   So, we need to ensure the correct icon shows for the active theme based on `html[data-theme]` */
[data-theme="dark"] .theme-icon.sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

[data-theme="dark"] .theme-icon.moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

[data-theme="light"] .theme-icon.sun {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

[data-theme="light"] .theme-icon.moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}


/* --- Efeitos de Parallax --- */
.parallax-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.hero-bg-element {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
}

.hero-bg-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -100px;
}

.hero-bg-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  right: -50px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}

.hero-bg-3 {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 60%;
  background: radial-gradient(circle, var(--accent2) 0%, transparent 70%);
}

/* --- Animações de Texto Criativas --- */
.creative-text-container {
  display: inline-block;
  overflow: hidden;
}

.creative-letter {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.creative-text-container.is-visible .creative-letter {
  transform: translateY(0);
  opacity: 1;
}

.creative-letter:nth-child(1) {
  transition-delay: 0.05s;
}

.creative-letter:nth-child(2) {
  transition-delay: 0.1s;
}

.creative-letter:nth-child(3) {
  transition-delay: 0.15s;
}

.creative-letter:nth-child(4) {
  transition-delay: 0.2s;
}

.creative-letter:nth-child(5) {
  transition-delay: 0.25s;
}

.creative-letter:nth-child(6) {
  transition-delay: 0.3s;
}

.creative-letter:nth-child(7) {
  transition-delay: 0.35s;
}

.creative-letter:nth-child(8) {
  transition-delay: 0.4s;
}

.creative-letter:nth-child(9) {
  transition-delay: 0.45s;
}

.creative-letter:nth-child(10) {
  transition-delay: 0.5s;
}

.creative-letter:nth-child(11) {
  transition-delay: 0.55s;
}

.creative-letter:nth-child(12) {
  transition-delay: 0.6s;
}

.creative-letter:nth-child(13) {
  transition-delay: 0.65s;
}

.creative-letter:nth-child(14) {
  transition-delay: 0.7s;
}

.creative-letter:nth-child(15) {
  transition-delay: 0.75s;
}


/* --- Visualização de Dados Interativa --- */
.data-viz {
  background-color: rgba(17, 24, 39, 0.5);
  /* Default for dark theme */
  position: relative;
}

[data-theme="light"] .data-viz {
  background-color: rgba(244, 247, 252, 0.7);
  /* Lighter background for light theme */
}


.data-viz-container {
  background: var(--card-bg);
  /* Uses theme variable */
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  /* Default for dark theme */
  transition: all var(--transition-medium);
}

[data-theme="light"] .data-viz-container {
  box-shadow: 0 15px 40px var(--shadow-dark);
  /* Uses light theme shadow variable */
}


.data-viz-container:hover {
  border-color: var(--card-hover-border);
  /* Uses theme variable */
  box-shadow: 0 25px 50px var(--shadow-light);
  /* Uses theme variable */
  transform: translateY(-10px);
}

.data-viz-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.data-viz-btn {
  background: rgba(17, 24, 39, 0.7);
  /* Default for dark theme */
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  color: var(--text-secondary);
  /* Uses theme variable */
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

[data-theme="light"] .data-viz-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}


.data-viz-btn.active,
.data-viz-btn:hover {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: var(--light);
  /* Text color for active/hover button */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px var(--shadow-light);
  /* Uses theme variable */
}

[data-theme="light"] .data-viz-btn.active,
[data-theme="light"] .data-viz-btn:hover {
  color: #ffffff;
  /* Ensure text is white on gradient for light theme */
}


.data-chart {
  height: 400px;
  margin-bottom: 20px;
  position: relative;
}

.data-viz-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 20px;
  height: 10px;
  border-radius: 5px;
}

.legend-color.before {
  background-color: rgba(59,130,246,0.7);
}

.legend-color.after {
  background-color: rgba(0, 242, 255, 0.7);
}

/* --- Portfólio 3D --- */
.portfolio {
  position: relative;
  background-color: var(--bg-primary);
  /* Uses theme variable */
}

.portfolio-container {
  position: relative;
}

.portfolio-gallery {
  height: 500px;
  position: relative;
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
  background-color: rgba(5, 8, 15, 0.3);
  /* Default for dark theme */
}

[data-theme="light"] .portfolio-gallery {
  background-color: rgba(224, 229, 240, 0.5);
  /* Lighter shade for light theme */
}


.portfolio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.portfolio-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  /* Text color for nav button */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

[data-theme="light"] .portfolio-nav-btn {
  color: #ffffff;
  /* Ensure text is white on gradient for light theme */
}


.portfolio-nav-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px var(--shadow-light);
  /* Uses theme variable */
}

.portfolio-info {
  flex: 1;
  text-align: center;
}

.portfolio-title {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.portfolio-description {
  color: var(--text-secondary);
  /* Uses theme variable */
}

/* --- Hero 3D Model --- */
.hero-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

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

/* Tipografia Moderna e Hierarquia */
h1,
h2,
h3,
h4 {
  font-family: 'Inter';
  letter-spacing: 1.2px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-primary);
  /* Uses theme variable */
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 3.8rem);
}

h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
}

h3 {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
}

h4 {
  font-size: clamp(1.2rem, 3.5vw, 1.4rem);
}

p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.8;
  color: var(--text-secondary);
  /* Uses theme variable */
  margin-bottom: 1.75em;
  font-weight: 400;
}

a {
  text-decoration: none;
  color: var(--accent);
  /* Default link color for dark theme */
  transition: color var(--transition-fast), transform var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--primary);
  /* Default link hover color for dark theme */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px;
}

.section {
  padding: clamp(100px, 15vh, 150px) 0;
  position: relative;
  overflow: hidden;
}

/* Separadores Visuais Modernos */
.section-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  /* Uses theme variable */
  z-index: 10;
  pointer-events: none;
}

.section-separator.reverse {
  top: 0;
  bottom: auto;
  background: linear-gradient(to bottom, var(--bg-primary), transparent);
  /* Uses theme variable */
}

/* Títulos de Seção Aprimorados */
.section-title {
  text-align: center;
  margin-bottom: clamp(60px, 10vw, 90px);
  position: relative;
}

.section-title h2 {
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--accent2));
  /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% auto;
  animation: gradient-flow 8s ease infinite;
  padding-bottom: 10px;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  /* Default for dark theme */
  border-radius: 2px;
  transition: width var(--transition-medium) ease-out 0.3s;
}

.section-title.is-visible h2::after {
  width: 120px;
}

.section-subtitle {
  max-width: 700px;
  margin: 0 auto 20px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--text-secondary);
  /* Uses theme variable */
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* --- Botões Modernizados --- */
.btn-primary,
.btn-secondary,
.btn-contact,
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  border-radius: 50px;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  z-index: 1;
  gap: 10px;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
  transition: left 0.5s ease;
  z-index: -1;
}

.btn-primary:hover::before,
.btn-primary:focus::before {
  left: 0;
}

.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5);
  color: #ffffff;
}

.btn-secondary {
  background-color: rgba(59,130,246,0.08);
  color: #ffffff;
  border: 2px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  font-weight: 600;
}

[data-theme="light"] .btn-secondary {
  background-color: rgba(59, 130, 246, 0.05);
  color: var(--primary);
  border: 2px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.btn-secondary:hover,
.btn-secondary:focus {
  transform: translateY(-3px) scale(1.03);
  border-color: #10B981;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-secondary:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
  border-color: transparent;
}


.btn-contact {
  background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
  color: #ffffff;
  padding: 10px 25px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-contact:hover,
.btn-contact:focus {
  background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(16,185,129,0.4);
  transform: translateY(-2px);
}

.btn-primary i,
.btn-secondary i {
  font-size: 1.2em;
  transition: transform var(--transition-fast);
}

.btn-primary:hover i,
.btn-secondary:hover i {
  transform: translateX(5px);
}

/* --- Navbar Moderna --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  background: rgba(5, 8, 15, 0.8);
  /* Default for dark theme */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1000;
  border-bottom: 1px solid rgba(59,130,246,0.15);
  /* Default for dark theme */
  transition: padding var(--transition-medium), background-color var(--transition-medium), box-shadow var(--transition-medium), transform 0.4s ease-out;
  will-change: transform;
}

.navbar-scrolled {
  padding: 10px 0;
  background: rgba(5, 8, 15, 0.9);
  /* Default for dark theme */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
  /* Default for dark theme */
}

.navbar-hidden {
  transform: translateY(-110%);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: 'Inter';
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  font-weight: 700;
  transition: transform var(--transition-fast);
}

.logo a {
  background: linear-gradient(90deg, var(--light), var(--accent), var(--primary));
  /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 250% auto;
  animation: gradient-flow 6s ease infinite;
  display: inline-block;
  transition: transform var(--transition-fast);
}

.logo a:hover {
  transform: scale(1.05);
}

.logo span {
  color: var(--accent);
  /* Default for dark theme */
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.logo a:hover span {
  transform: scale(1.1) rotate(-5deg);
}

.nav-links {
  display: flex;
  gap: clamp(20px, 3vw, 35px);
  list-style: none;
}

.nav-link {
  font-weight: 500;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  position: relative;
  padding: 8px 5px;
  color: var(--text-secondary);
  /* Uses theme variable */
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  /* Default for dark theme */
  border-radius: 1px;
  transform-origin: center;
  transition: transform var(--transition-medium) cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--text-primary);
  /* Uses theme variable */
  transform: translateY(-2px);
}

.nav-link:hover::after,
.nav-link:focus::after {
  transform: translateX(-50%) scaleX(1);
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  margin-right: 15px;
}

.lang-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-weight: 500;
}

.lang-link:hover {
  color: var(--accent);
}

.lang-link.active {
  color: var(--accent);
  font-weight: 700;
}

.lang-divider {
  color: var(--text-secondary);
  opacity: 0.5;
}

.mobile-lang-switcher {
  justify-content: flex-start;
  font-size: 1.1rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(240, 248, 255, 0.1);
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  /* Uses theme variable */
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 350px;
  height: 100vh;
  background: rgba(5, 8, 15, 0.95);
  /* Default for dark theme */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1001;
  transition: right var(--transition-medium);
  padding: 20px;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
  /* Default for dark theme */
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .mobile-menu {
  background: rgba(244, 247, 252, 0.95);
  /* Lighter background for mobile menu in light theme */
  box-shadow: -5px 0 25px var(--shadow-dark);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(59,130,246,0.2);
  /* Default for dark theme */
}

[data-theme="light"] .mobile-menu-header {
  border-bottom: 1px solid var(--card-border);
}


.mobile-menu-close {
  background: transparent;
  border: none;
  color: var(--text-primary);
  /* Uses theme variable */
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mobile-nav-links {
  list-style: none;
  margin-bottom: 30px;
}

.mobile-nav-link {
  display: block;
  padding: 15px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  /* Uses theme variable */
  border-bottom: 1px solid rgba(240, 248, 255, 0.1);
  /* Default for dark theme */
  transition: all var(--transition-fast);
}

[data-theme="light"] .mobile-nav-link {
  border-bottom: 1px solid var(--card-border);
}

.mobile-nav-link:hover {
  color: var(--accent);
  /* Default for dark theme */
  padding-left: 10px;
}

[data-theme="light"] .mobile-nav-link:hover {
  color: var(--primary-on-light);
}

.mobile-cta {
  margin-top: auto;
  width: 100%;
}

/* --- Hero Section Reimaginada --- */
.hero {
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: calc(var(--navbar-height) + 60px);
  padding-bottom: 80px;
  overflow: visible;
}

.hero .container {
  width: 100%;
  z-index: 1;
}

.hero-content {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  position: relative;
}

.hero-text-content {
  flex: 1 1 55%;
  order: 1;
}

.hero-img-container {
  flex: 1 1 45%;
  order: 2;
  perspective: 1200px;
  position: relative;
}

.hero-img-container img {
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  /* Default for dark theme */
  transform: rotateY(-5deg) rotateX(2deg) scale(1.05);
  transition: transform var(--transition-slow);
}

[data-theme="light"] .hero-img-container img {
  box-shadow: 0 20px 50px var(--shadow-dark);
}

.hero-img-container:hover img {
  transform: rotateY(0deg) rotateX(0deg) scale(1);
}

.hero-abstract-viz {
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.6) 0%, rgba(17, 24, 39, 0.4) 100%);
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.15);
  transition: all var(--transition-slow);
}

[data-theme="light"] .hero-abstract-viz {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 247, 252, 0.8) 100%);
  box-shadow: 0 20px 60px var(--shadow-dark);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.hero-img-container:hover .hero-abstract-viz {
  transform: scale(1.02);
  box-shadow: 0 25px 70px rgba(59, 130, 246, 0.3);
  border-color: rgba(16,185,129,0.4);
}

.hero-badge {
  position: absolute;
  top: 20px;
  right: -15px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 10px 20px;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.hero-badge::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent var(--primary) var(--primary) transparent;
  filter: brightness(0.7);
}

.hero-badge span {
  font-size: 0.75rem;
  opacity: 0.9;
}

.hero-badge strong {
  font-weight: 700;
  font-size: 1rem;
}

.hero h1 {
  margin-bottom: 30px;
  line-height: 1.25;
  font-weight: 700;
}

.hero-subtitle {
  margin-bottom: 40px;
  max-width: 550px;
  color: var(--text-primary);
  /* Uses theme variable, was --light-secondary before theme vars */
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.hero-stats {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(17, 24, 39, 0.6);
  /* Default for dark theme */
  backdrop-filter: blur(5px);
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  min-width: 120px;
  transition: all var(--transition-medium);
}

.hero-stat:hover {
  transform: translateY(-5px);
  border-color: var(--card-hover-border);
  /* Uses theme variable */
  box-shadow: 0 10px 25px var(--shadow-light);
  /* Uses theme variable */
}

.hero-stat-number {
  font-family: 'Inter';
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-stat-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  /* Uses theme variable */
  margin-top: 5px;
}

#hero-title {
  display: inline;
  /* Gradient for hero title should be handled by its own theme-specific rule if needed */
}

.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  margin-left: 4px;
  animation: blinkCursor 0.8s infinite;
  vertical-align: baseline;
}

@keyframes blinkCursor {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.highlight-word {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  animation: pulseHighlight 2s infinite alternate;
}

@keyframes pulseHighlight {
  0% {
    filter: drop-shadow(0 0 5px var(--accent2));
  }

  100% {
    filter: drop-shadow(0 0 15px var(--accent));
  }
}

.hero-btns {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  /* Uses theme variable */
  font-size: 0.9rem;
  opacity: 0.7;
  transition: all var(--transition-fast);
  animation: bounce 2s infinite;
}

.scroll-indicator:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

.scroll-indicator i {
  font-size: 24px;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  40% {
    transform: translateX(-50%) translateY(-10px);
  }

  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* --- Como Funciona (Nova Seção) --- */
.how-it-works {
  background-color: rgba(17, 24, 39, 0.5);
  /* Default for dark theme */
  position: relative;
}

[data-theme="light"] .how-it-works {
  background-color: rgba(244, 247, 252, 0.7);
  /* Lighter for light theme */
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

.step {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(17, 24, 39, 0.7) 100%);
  /* Card bg from theme, with dark overlay */
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  /* Default for dark theme */
  transition: all var(--transition-medium);
}

[data-theme="light"] .step {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(224, 229, 240, 0.7) 100%);
  /* Card bg from theme, with light overlay */
  box-shadow: 0 12px 35px var(--shadow-dark);
}

.step:hover {
  border-color: var(--card-hover-border);
  /* Uses theme variable */
  box-shadow: 0 25px 50px var(--shadow-light);
  /* Uses theme variable */
  transform: translateY(-10px);
}

.step-number {
  position: absolute;
  top: 15px;
  right: 15px;
  font-family: 'Inter';
  font-size: 3rem;
  font-weight: 700;
  color: rgba(59,130,246,0.15);
  line-height: 1;
  transition: all var(--transition-medium);
}

.step:hover .step-number {
  color: rgba(0, 242, 255, 0.2);
}

.step-icon {
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(0, 242, 255, 0.1));
  /* Default for dark theme */
  border: 1px solid rgba(59,130,246,0.2);
  /* Default for dark theme */
  position: relative;
  z-index: 1;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.step:hover .step-icon {
  transform: scale(1.1) rotate(-10deg);
  box-shadow: 0 0 20px rgba(59,130,246,0.4);
}

.step-icon i {
  font-size: 40px;
  color: var(--accent);
  /* Default for dark theme */
  transition: color var(--transition-fast);
}

.step:hover .step-icon i {
  color: var(--primary);
}

.step h3 {
  font-size: clamp(1.4rem, 3.5vw, 1.7rem);
  margin-bottom: 18px;
  z-index: 1;
  position: relative;
  color: var(--text-primary);
  /* Uses theme variable */
}

.step p {
  margin-bottom: 0;
  line-height: 1.7;
  flex-grow: 1;
  z-index: 1;
  position: relative;
  color: var(--text-secondary);
  /* Uses theme variable */
}

.steps-cta {
  text-align: center;
}

/* --- Seção Sobre Nós --- */
.about {
  position: relative;
}

.about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.about-img {
  grid-column: span 1;
  border-radius: 18px;
  overflow: visible;
  position: relative;
  transition: transform var(--transition-medium);
  z-index: 5;
}

.about-img img {
  border-radius: 18px;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5);
  /* Default for dark theme */
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  width: 100%;
  transform: rotate(-3deg) translateX(-10px);
}

[data-theme="light"] .about-img img {
  box-shadow: 0 25px 55px var(--shadow-dark);
}

.about-img:hover img {
  transform: rotate(1deg) scale(1.03) translateX(0);
  box-shadow: 0 30px 60px rgba(59,130,246,0.3);
  /* Default for dark theme */
}

[data-theme="light"] .about-img:hover img {
  box-shadow: 0 30px 60px var(--shadow-light);
}

.about-experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 15px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transform: rotate(10deg);
  transition: all var(--transition-medium);
}

.about-img:hover .about-experience-badge {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 15px 35px rgba(59,130,246,0.4);
}

.about-experience-badge span {
  font-family: 'Inter';
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.about-experience-badge strong {
  font-size: 0.8rem;
  margin-top: 5px;
  opacity: 0.9;
}

.about-text {
  grid-column: span 1;
  position: relative;
  z-index: 1;
  padding: 20px 0 20px 20px;
  background: linear-gradient(90deg, rgba(17, 24, 39, 0.5) 0%, rgba(17, 24, 39, 0) 100%);
  /* Default for dark theme */
  border-radius: 0 10px 10px 0;
  margin-left: -40px;
}

[data-theme="light"] .about-text {
  background: linear-gradient(90deg, rgba(244, 247, 252, 0.7) 0%, rgba(244, 247, 252, 0) 100%);
  /* Lighter for light theme */
}

.about-text h3 {
  margin-bottom: 25px;
  background: linear-gradient(90deg, var(--text-primary), var(--primary));
  /* Uses theme variable */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

ul.about-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.about-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  /* Uses theme variable */
}

.about-list li i {
  color: var(--primary);
  /* Uses theme variable */
  font-size: 1.2rem;
  font-weight: bold;
}

@media (max-width: 576px) {
  ul.about-list {
    grid-template-columns: 1fr;
  }
}

.mission-vision-values {
  margin-top: 45px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}

.mvv-card {
  background: linear-gradient(145deg, var(--card-bg) 0%, rgba(17, 24, 39, 0.8) 100%);
  /* Uses theme variable, dark overlay */
  padding: 35px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  /* Default for dark theme */
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

[data-theme="light"] .mvv-card {
  background: linear-gradient(145deg, var(--card-bg) 0%, rgba(224, 229, 240, 0.8) 100%);
  /* Uses theme variable, light overlay */
  box-shadow: 0 8px 25px var(--shadow-dark);
}

.mvv-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-light);
  /* Uses theme variable */
  border-color: var(--card-hover-border);
  /* Uses theme variable */
}

.mvv-icon {
  font-size: 1.5em;
  margin-right: 12px;
  color: var(--accent);
  /* Default for dark theme */
}

[data-theme="light"] .mvv-icon {
  color: var(--icon-color-light);
}

.mvv-card:hover .mvv-icon {
  color: var(--primary);
}

.mvv-card h4 {
  font-size: clamp(1.3rem, 3.8vw, 1.6rem);
  margin-bottom: 20px;
  color: var(--text-primary);
  /* Uses theme variable */
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}

.mvv-card h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 1.5px;
  transition: width var(--transition-medium);
}

.mvv-card:hover h4::after {
  width: 80px;
}

.mvv-card p,
.mvv-card ul {
  line-height: 1.7;
  flex-grow: 1;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: var(--text-secondary);
  /* Uses theme variable */
}

.mvv-card.values ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.mvv-card.values li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 28px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.mvv-card.values li:hover {
  transform: translateX(5px);
  color: var(--text-primary);
  /* Uses theme variable */
}

.mvv-card.values li .list-icon {
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 1.1em;
  color: var(--accent);
  /* Default for dark theme */
  transition: transform var(--transition-fast), color var(--transition-fast);
}

[data-theme="light"] .mvv-card.values li .list-icon {
  color: var(--icon-color-light);
}

.mvv-card.values li:hover .list-icon {
  color: var(--primary);
  transform: rotate(10deg);
}

/* --- Seção Serviços --- */
.services {
  background-color: rgba(17, 24, 39, 0.5);
  /* Default for dark theme */
}

[data-theme="light"] .services {
  background-color: rgba(244, 247, 252, 0.7);
  /* Lighter for light theme */
}

.services-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.filter-btn {
  background: rgba(17, 24, 39, 0.7);
  /* Default for dark theme */
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  color: var(--text-secondary);
  /* Uses theme variable */
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

[data-theme="light"] .filter-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.service-card {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(17, 24, 39, 0.7) 100%);
  /* Uses theme variable, dark overlay */
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  border: 1px solid var(--card-border);
  /* Uses theme variable */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  /* Default for dark theme */
  transition: all var(--transition-medium);
}

[data-theme="light"] .service-card {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(224, 229, 240, 0.7) 100%);
  /* Uses theme variable, light overlay */
  box-shadow: 0 12px 35px var(--shadow-dark);
}

.service-card:hover {
  transform: translateY(-15px);
  border-color: var(--card-hover-border);
  /* Uses theme variable */
  box-shadow: 0 25px 50px var(--shadow-light);
  /* Uses theme variable */
}

.service-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: all var(--transition-fast);
}

.service-card:hover .service-badge {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(59,130,246,0.4);
}

.service-icon {
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(0, 242, 255, 0.1));
  /* Default for dark theme */
  border: 1px solid rgba(59,130,246,0.2);
  /* Default for dark theme */
  position: relative;
  z-index: 1;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(-10deg);
  box-shadow: 0 0 20px rgba(59,130,246,0.4);
}

.service-icon i {
  font-size: 36px;
  color: var(--accent);
  /* Default for dark theme */
  transition: color var(--transition-fast);
}

.service-card:hover .service-icon i {
  color: var(--primary);
}

.service-card h3 {
  font-size: clamp(1.4rem, 3.5vw, 1.7rem);
  margin-bottom: 18px;
  z-index: 1;
  position: relative;
  color: var(--text-primary);
  /* Uses theme variable */
}

.service-card p {
  margin-bottom: 20px;
  line-height: 1.7;
  z-index: 1;
  position: relative;
  color: var(--text-secondary);
  /* Uses theme variable */
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 0 0 25px;
  text-align: left;
  z-index: 1;
  position: relative;
}

.service-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  /* Uses theme variable */
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.service-features li:hover {
  color: var(--text-primary);
  /* Uses theme variable */
  transform: translateX(5px);
}

.services-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
  text-align: center;
}
/* ================================================== */
/* BYTNEX LOGO — Estilo tipográfico da marca          */
/* ================================================== */

.bytnex-logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-style: italic;
  line-height: 1;
}

.bytnex-logo-byt {
  color: #3B82F6;
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bytnex-logo-nex {
  color: #10B981;
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bytnex-logo-link:hover .bytnex-logo-byt,
.bytnex-logo-link:hover .bytnex-logo-nex {
  filter: brightness(1.2);
}

/* Font override global */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

code, pre, .code-content, .terminal-body, .term-prompt, .term-cmd {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
}

/* ================================================== */
/* TRUST BAR — Barra de credibilidade                 */
/* ================================================== */

.trust-bar {
  background: linear-gradient(90deg, rgba(59,130,246,0.08) 0%, rgba(16,185,129,0.08) 100%);
  border-bottom: 1px solid rgba(59,130,246,0.15);
  padding: 8px 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #94a3b8;
  position: relative;
  z-index: 850;
  overflow: hidden;
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.trust-item i {
  color: #3B82F6;
  font-size: 0.9rem;
}

.trust-item:hover {
  color: #F8FAFC;
}

.trust-divider {
  color: rgba(148,163,184,0.3);
  font-size: 1rem;
}

[data-theme="light"] .trust-bar {
  background: linear-gradient(90deg, rgba(59,130,246,0.05) 0%, rgba(16,185,129,0.05) 100%);
  border-bottom: 1px solid rgba(59,130,246,0.1);
  color: #5a647e;
}

@media (max-width: 768px) {
  .trust-bar {
    font-size: 0.72rem;
    padding: 6px 0;
  }
  .trust-divider {
    display: none;
  }
  .trust-bar-inner {
    gap: 10px;
  }
}

/* ================================================== */
/* HERO SUBTITLE ATUALIZAÇÃO BYTNEX                   */
/* ================================================== */

.hero-stat-number {
  font-variant-numeric: tabular-nums;
}

/* FOOTER BRAND LOGO */
.footer-brand {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  line-height: 1;
}


/* ===== SOURCE: enhanced-style.css ===== */
/* Fix for Cases de Sucesso section */
.case-studies-slider {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.case-study {
  display: none;
}

.case-study.active {
  display: block;
}

.case-study-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-study-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.case-study-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-study-logo img {
  max-width: 80%;
  max-height: 80%;
}

.case-study-results {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.case-result {
  flex: 1;
  min-width: 100px;
  background-color: rgba(17, 24, 39, 0.5);
  padding: 15px;
  border-radius: 10px;
  text-align: center;
}

.case-result-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--secondary-color);
  display: block;
  margin-bottom: 5px;
}

.case-result-label {
  font-size: 0.85rem;
  color: var(--text-color);
}

.case-study-description {
  font-style: italic;
  margin: 15px 0;
}

.case-study-link {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.case-nav-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.case-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(59,130,246,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.case-nav-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.2);
}

/* Fix for Differentials section */
.differentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.differential-card {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  height: 100%;
}

.differential-card:hover {
  transform: translateY(-10px);
  border-color: var(--card-hover-border);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.differential-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.diff-icon {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

/* Fix for Results section */
.results-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.result-card {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-10px);
  border-color: var(--card-hover-border);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.result-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.result-icon i {
  font-size: 1.8rem;
  color: white;
}

.result-card h3 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testimonial-section {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 40px;
  border: 1px solid var(--border-color);
}

.testimonial-section h3 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--primary-color);
}

.testimonials-slider {
  position: relative;
}

.testimonial {
  display: none;
}

.testimonial.active {
  display: block;
}

.testimonial-content {
  background-color: rgba(17, 24, 39, 0.5);
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
}

.testimonial-content::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 20px;
  height: 20px;
  background-color: rgba(17, 24, 39, 0.5);
  transform: rotate(45deg);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 20px;
}

.testimonial-author-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-author-info strong {
  display: block;
  color: var(--text-color);
}

.testimonial-author-info span {
  font-size: 0.85rem;
  color: var(--secondary-color);
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.testimonial-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(59,130,246,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-nav-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.2);
}

.clients-count {
  text-align: center;
  margin-top: 30px;
}

.clients-count-title {
  font-size: 2rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.client-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

.client-logo {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.client-logo:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.2);
}

/* Fix for scroll to top button */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

#scrollToTopBtn:hover {
  transform: translateY(-5px);
}

#scrollToTopBtn.visible {
  display: flex;
}


/* ===== SOURCE: enhanced-style-fixes.css ===== */
/* Fix for Cases de Sucesso section */
.case-studies-slider {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.case-study {
  display: none;
}

.case-study.active {
  display: block;
}

.case-study-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-study-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.case-study-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-study-logo img {
  max-width: 80%;
  max-height: 80%;
}

.case-study-results {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.case-result {
  flex: 1;
  min-width: 100px;
  background-color: rgba(17, 24, 39, 0.5);
  padding: 15px;
  border-radius: 10px;
  text-align: center;
}

.case-result-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--secondary-color);
  display: block;
  margin-bottom: 5px;
}

.case-result-label {
  font-size: 0.85rem;
  color: var(--text-color);
}

.case-study-description {
  font-style: italic;
  margin: 15px 0;
}

.case-study-link {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.case-nav-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.case-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(59,130,246,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.case-nav-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.2);
}

/* Fix for Differentials section */
.differentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.differential-card {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  height: 100%;
}

.differential-card:hover {
  transform: translateY(-10px);
  border-color: var(--card-hover-border);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.differential-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.diff-icon {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

/* Fix for Results section */
.results-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.result-card {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-10px);
  border-color: var(--card-hover-border);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.result-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.result-icon i {
  font-size: 1.8rem;
  color: white;
}

.result-card h3 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testimonial-section {
  background-color: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 40px;
  border: 1px solid var(--border-color);
}

.testimonial-section h3 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--primary-color);
}

.testimonials-slider {
  position: relative;
}

.testimonial {
  display: none;
}

.testimonial.active {
  display: block;
}

.testimonial-content {
  background-color: rgba(17, 24, 39, 0.5);
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
}

.testimonial-content::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 20px;
  height: 20px;
  background-color: rgba(17, 24, 39, 0.5);
  transform: rotate(45deg);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 20px;
}

.testimonial-author-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-author-info strong {
  display: block;
  color: var(--text-color);
}

.testimonial-author-info span {
  font-size: 0.85rem;
  color: var(--secondary-color);
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.testimonial-nav-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.testimonial-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(59,130,246,0.15);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.testimonial-nav-dot:hover {
  background: rgba(59,130,246,0.15);
  transform: scale(1.15);
}

.testimonial-nav-dot.active {
  background: linear-gradient(135deg, var(--primary-color), var(--accent));
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(59,130,246,0.15);
}

.testimonial-nav-controls {
  display: flex;
  gap: 15px;
}

.testimonial-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.15);
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.2rem;
}

.testimonial-nav-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

.testimonial-nav-btn:active {
  transform: scale(0.95);
}

/* Mobile responsiveness for testimonials nav */
@media (max-width: 480px) {
  .testimonials-nav {
    flex-direction: column;
    gap: 20px;
  }

  .testimonial-nav-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
}

.clients-count {
  text-align: center;
  margin-top: 30px;
}

.clients-count-title {
  font-size: 2rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.client-logos {
  margin-top: 40px;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.client-logos::before,
.client-logos::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.client-logos::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary) 0%, transparent 100%);
}

.client-logos::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary) 0%, transparent 100%);
}

.client-logos-track {
  display: flex;
  gap: 40px;
  animation: scroll-logos 30s linear infinite;
  width: max-content;
}

.client-logos-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.client-logo {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.3) 100%);
  padding: 30px 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 120px;
  border: 1px solid rgba(59,130,246,0.15);
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.client-logo:hover {
  transform: translateY(-5px) scale(1.05);
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.3) 100%);
  border-color: rgba(16,185,129,0.3);
  box-shadow: 0 8px 25px rgba(59,130,246,0.15);
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(80%) contrast(1.1);
  opacity: 0.8;
  transition: all 0.4s ease;
}

.client-logo:hover img {
  filter: grayscale(0%) contrast(1) brightness(1.1);
  opacity: 1;
  transform: scale(1.1);
}

[data-theme="light"] .client-logo img {
  filter: grayscale(80%) contrast(1.2) brightness(0.9);
  opacity: 0.7;
}

[data-theme="light"] .client-logo:hover img {
  filter: grayscale(0%) contrast(1) brightness(1);
  opacity: 1;
}

/* Responsividade para logos de clientes */
@media (max-width: 768px) {
  .client-logos::before,
  .client-logos::after {
    width: 50px;
  }

  .client-logo {
    min-width: 170px;
    height: 95px;
    padding: 22px 35px;
  }

  .client-logos-track {
    gap: 30px;
    animation-duration: 25s;
  }
}

@media (max-width: 480px) {
  .client-logo {
    min-width: 145px;
    height: 85px;
    padding: 18px 28px;
  }

  .client-logos-track {
    gap: 20px;
    animation-duration: 20s;
  }
}

/* ===================================
   CASES DE SUCESSO - ESTILOS MODERNOS
   =================================== */

.case-study-challenge,
.case-study-solution {
  margin: 25px 0;
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.3) 100%);
  border-left: 3px solid rgba(59,130,246,0.15);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}

.case-study.active .case-study-challenge,
.case-study.active .case-study-solution {
  animation: fadeInUp 0.6s ease forwards;
}

.case-study.active .case-study-challenge {
  animation-delay: 0.2s;
}

.case-study.active .case-study-solution {
  animation-delay: 0.4s;
}

.case-study-challenge:hover,
.case-study-solution:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.3) 100%);
  border-left-color: rgba(16,185,129,0.3);
  transform: translateX(5px);
}

.case-study-challenge h4,
.case-study-solution h4 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-study-challenge h4 i {
  color: #f59e0b;
  font-size: 1.3rem;
}

.case-study-solution h4 i {
  color: #10B981;
  font-size: 1.3rem;
}

.case-study-challenge p,
.case-study-solution p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.case-study-testimonial {
  margin: 30px 0 20px;
  padding: 25px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,0.3) 0%, rgba(59,130,246,0.15) 100%);
  border: 1px solid rgba(16,185,129,0.3);
  position: relative;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
}

.case-study.active .case-study-testimonial {
  animation: scaleIn 0.6s ease forwards 0.6s;
}

.case-study-testimonial::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  color: rgba(16,185,129,0.3);
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

.case-study-testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(16,185,129,0.3);
  border-color: rgba(16,185,129,0.3);
}

.case-study-testimonial p {
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 15px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.case-study-testimonial span {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
}

.case-study-category {
  font-size: 0.85rem !important;
  opacity: 0.9;
}

.case-nav-controls {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

.case-nav-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.3) 100%);
  border: 1px solid rgba(59,130,246,0.15);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.case-nav-btn:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.3) 100%);
  border-color: rgba(16,185,129,0.3);
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(59,130,246,0.15);
}

.case-nav-btn:active {
  transform: scale(0.95);
}

/* Animações */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Parallax sutil para seção de cases */
.case-studies {
  position: relative;
  background-attachment: fixed;
}

.case-studies::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(59,130,246,0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(16,185,129,0.3) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

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

/* Responsividade */
@media (max-width: 768px) {
  .case-study-challenge,
  .case-study-solution,
  .case-study-testimonial {
    padding: 15px;
  }

  .case-study-testimonial::before {
    font-size: 3rem;
    top: -5px;
  }

  .case-nav-controls {
    margin-top: 15px;
  }

  .case-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* Fix for scroll to top button */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

#scrollToTopBtn:hover {
  transform: translateY(-5px);
}

#scrollToTopBtn.visible {
  display: flex;
}


/* ============================================= */
/* EFEITOS DE HOVER APRIMORADOS PARA OS CARDS    */
/* Adicionado para melhorar a interatividade     */
/* ============================================= */

/* Estilo base para transição suave nos cards */
.result-card,
.differential-card {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.4s ease;
}

/* Efeito de hover "Neon Glow" */
.result-card:hover,
.differential-card:hover {
  /* Levanta e aumenta o card */
  transform: translateY(-12px) scale(1.04);
  
  /* Borda ciano, mais destacada */
  border-color: var(--accent);

  /* Efeito de brilho "Neon" usando as cores do tema */
  box-shadow: 0 0 15px rgba(52,211,153,0.3), /* Brilho Ciano (--accent) */
              0 0 30px rgba(59,130,246,0.4);   /* Brilho Roxo (--primary) */
}

/* Animação para o ícone dentro do card */
.result-card .result-icon,
.differential-card .diff-icon {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.result-card:hover .result-icon,
.differential-card:hover .diff-icon {
  transform: scale(1.2) rotate(-10deg);
}

elevenlabs-convai {
  bottom: 90px !important;
}

/* ===== SOURCE: header-fix.css ===== */
/* Header/Navbar Layout Fix */

/* Navbar container flex improvements */
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Logo - reduce size slightly */
.navbar .logo {
    flex-shrink: 0;
}

.navbar .logo a {
    font-size: clamp(1rem, 2vw, 1.4rem);
    white-space: nowrap;
}

/* ==============================
   DESKTOP: show nav-links, hide hamburger
   ============================== */
@media (min-width: 992px) {
    .navbar nav {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .navbar .nav-links {
        display: flex;
        gap: clamp(12px, 2vw, 25px);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navbar .nav-link {
        font-size: clamp(0.8rem, 1.5vw, 0.95rem);
        white-space: nowrap;
        padding: 6px 4px;
    }

    .navbar .btn-contact {
        display: inline-flex !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: auto;
        border-radius: 6px;
    }

    .navbar .mobile-menu-toggle {
        display: none !important;
    }
}

/* ==============================
   MOBILE: hide nav-links and btn-contact, show hamburger
   ============================== */
@media (max-width: 991px) {
    .navbar nav {
        display: none;
    }

    .navbar .nav-links {
        display: none !important;
    }

    .navbar .btn-contact {
        display: none !important;
    }

    .navbar .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 1.6rem;
        cursor: pointer;
        padding: 8px;
        margin-left: auto;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .navbar .mobile-menu-toggle:hover {
        background: rgba(59,130,246,0.15);
        color: var(--accent);
    }

    .navbar .logo a {
        font-size: clamp(0.85rem, 3.5vw, 1.2rem);
    }
}

/* Theme toggle - ensure it's not covered by navbar */
.theme-toggle {
    z-index: 1050 !important;
    top: 85px;
    right: 20px;
}

/* Navbar scrolled state - smaller padding */
.navbar-scrolled .btn-contact {
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
}

@media (max-width: 768px) {
    .theme-toggle {
        top: 70px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
}

/* ===== SOURCE: hero-text-animation.css ===== */
.hero-title-container {
    min-height: 150px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title-line {
    display: block;
    opacity: 0;
    transform: translateY(20px) blur(5px);
    transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
    will-change: opacity, transform, filter;
}

.hero-title-line.is-visible {
    opacity: 1;
    transform: translateY(0) blur(0);
}

/* ===== SOURCE: code-animation.css ===== */
/* ==============================================
   CODE ANIMATION - Janela de código estilo IDE
   ============================================== */

.code-animation-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.code-window {
    background: #1e1e2e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(59,130,246,0.15),
        0 0 100px rgba(16,185,129,0.3);
    border: 1px solid rgba(59,130,246,0.15);
    font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
}

.code-window-header {
    background: linear-gradient(180deg, #2d2d3f 0%, #252535 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(59,130,246,0.15);
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.code-dot.red {
    background: #ff5f56;
}

.code-dot.yellow {
    background: #ffbd2e;
}

.code-dot.green {
    background: #27ca40;
}

.code-filename {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.code-content {
    padding: 20px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #cdd6f4;
    overflow-x: auto;
    min-height: 280px;
}

.code-content pre {
    margin: 0;
    white-space: pre;
}

.code-content code {
    font-family: inherit;
}

/* Syntax Highlighting - cores inspiradas em Catppuccin/One Dark */
.code-keyword {
    color: #cba6f7;
    /* roxo */
}

.code-string {
    color: #a6e3a1;
    /* verde */
}

.code-function {
    color: #89b4fa;
    /* azul */
}

.code-property {
    color: #f9e2af;
    /* amarelo */
}

.code-boolean {
    color: #fab387;
    /* laranja */
}

.code-type {
    color: #94e2d5;
    /* teal - para tipos TypeScript */
}

.code-comment {
    color: #6c7086;
    font-style: italic;
}

/* Cursor piscando */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #10B981;
    animation: cursor-blink 1s infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}

@keyframes cursor-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Efeito de brilho sutil no hover */
.code-window:hover {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(59,130,246,0.15),
        0 0 120px rgba(16,185,129,0.3);
    transform: translateY(-5px);
    transition: all 0.4s ease;
}

.code-window {
    transition: all 0.4s ease;
}

/* Responsivo */
@media (max-width: 768px) {
    .code-animation-container {
        max-width: 100%;
    }

    .code-content {
        font-size: 0.75rem;
        padding: 15px;
        min-height: 220px;
    }

    .code-window-header {
        padding: 10px 12px;
    }

    .code-dot {
        width: 10px;
        height: 10px;
    }
}

/* Light theme */
[data-theme="light"] .code-window {
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 60px rgba(59,130,246,0.15);
}

[data-theme="light"] .code-window-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #e2e8f0;
}

[data-theme="light"] .code-content {
    color: #1e293b;
}

[data-theme="light"] .code-keyword {
    color: #3B82F6;
}

[data-theme="light"] .code-string {
    color: #059669;
}

[data-theme="light"] .code-function {
    color: #2563eb;
}

[data-theme="light"] .code-property {
    color: #d97706;
}

[data-theme="light"] .code-boolean {
    color: #ea580c;
}

[data-theme="light"] .code-filename {
    color: rgba(0, 0, 0, 0.4);
}

/* Hero specific code animation */
.hero-code {
    max-width: 450px;
}

.hero-code .code-window {
    animation: float-code 6s ease-in-out infinite;
}

@keyframes float-code {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Glow effect on hero code */
.hero-code .code-window::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
    animation: rotate-glow 10s linear infinite;
    z-index: -1;
}

@keyframes rotate-glow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}