/* ===============================
       DESIGN SYSTEM - NIVEL NVIDIA/APPLE
       =============================== */
    :root {
      /* PALETA PREMIUM - Industrial Tech */
      --space-1: #0A0E16;      /* Fundo principal */
      --space-2: #0F1522;      /* Fundo secundário */
      --space-3: #141B2B;      /* Cards/Containers */
      
      /* TEXTO - Hierarquia clara */
      --text-primary: #F0F4FF;
      --text-secondary: #B8C4E0;
      --text-tertiary: #7E8BA6;
      
      /* CORES DE MARCA - Vibração tech */
      --brand-primary: #0066FF;     /* Azul NVIDIA */
      --brand-secondary: #00D4AA;   /* Ciano Apple */
      --brand-accent: #FF6B35;      /* Laranja Alerta */
      
      /* SEMÂNTICAS */
      --success: #00C781;
      --warning: #FFB224;
      --error: #FF4757;
      
      /* GRADIENTS PREMIUM */
      --gradient-space: linear-gradient(135deg, var(--space-1) 0%, var(--space-2) 100%);
      --gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
      --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
      
      /* SOMBRAS - Profundidade real */
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
      --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
      --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
      --shadow-glow: 0 0 40px rgba(0,102,255,0.3);
      
      /* BORDAS - Precisas */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      
      /* TIPOGRAFIA - Scale de 4px */
      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 20px;
      --text-2xl: 24px;
      --text-3xl: 32px;
      --text-4xl: 40px;
      --text-5xl: 48px;
      
      /* ESPAÇAMENTO - Sistema 8pt */
      --space-4: 4px;
      --space-8: 8px;
      --space-12: 12px;
      --space-16: 16px;
      --space-20: 20px;
      --space-24: 24px;
      --space-32: 32px;
      --space-40: 40px;
      --space-48: 48px;
      --space-64: 64px;
      
      /* ANIMAÇÕES - Suaves e propositais */
      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
      
      /* GLASSMORPHISM */
      --glass-bg: rgba(255,255,255,0.05);
      --glass-border: rgba(255,255,255,0.1);
      --glass-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }

    /* ===============================
       RESET & BASE STYLES
       =============================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: var(--gradient-space);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* ===============================
       TYPOGRAPHY SCALE
       =============================== */
    /* Margem inferior para cards */
.visual-card {
  margin-bottom: var(--space-48);
}
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: var(--space-16);
    }

    h1 { font-size: var(--text-5xl); }
    h2 { font-size: var(--text-4xl); }
    h3 { font-size: var(--text-3xl); }
    h4 { font-size: var(--text-2xl); }
    h5 { font-size: var(--text-xl); }
    h6 { font-size: var(--text-lg); }

    p {
      margin-bottom: var(--space-16);
      color: var(--text-secondary);
    }

    .text-lead {
      font-size: var(--text-xl);
      line-height: 1.4;
      color: var(--text-secondary);
    }

    /* ===============================
       LAYOUT COMPONENTS
       =============================== */
    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--space-24);
    }

    .section {
      padding: var(--space-64) 0;
      position: relative;
    }
/* PATCH — sobe a dobra da Metodologia para o CTA aparecer */
#methodology.section{
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}
    .section-header {
      /* Espaçamento entre menu e conteúdo */
.main-content {
  margin-top: var(--space-32);
}
      text-align: center;
      margin-bottom: var(--space-48);
    }

    .section-header .overline {
      display: inline-block;
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--brand-secondary);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--space-12);
    }

    /* ===============================
       NAVIGATION - Premium Fixed
       =============================== */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(10, 14, 22, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      padding: var(--space-16) 0;
      transition: all var(--transition-base);
    }

    .navbar.scrolled {
      padding: var(--space-12) 0;
      background: rgba(10, 14, 22, 0.98);
    }

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

    .logo {
      display: flex;
      align-items: center;
      gap: var(--space-12);
      text-decoration: none;
      color: var(--text-primary);
      font-weight: 700;
      font-size: var(--text-xl);
    }

    .navbar .logo img{
  height: 34px !important;  /* ajuste aqui: 32 / 36 / 40 */
  width: auto !important;
  display: block;
}
    .mobile-menu .logo img{
  height: 34px !important;
  width: auto !important;
  display: block;
}
    .logo-text{ max-width: 220px; }
.logo-sub{ white-space: nowrap; opacity: .9; }

.logo-text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-title{
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 16px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-sub{
  margin-top: 2px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #8D97A6;              /* cinza da referência */
}

    .nav-menu {
      display: flex;
      align-items: center;
      gap: var(--space-32);
      list-style: none;
    }

    .nav-link {
      color: var(--text-secondary);
      text-decoration: none;
      font-weight: 500;
      font-size: var(--text-sm);
      transition: color var(--transition-fast);
      position: relative;
    }

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

    .nav-link.active {
      color: var(--brand-primary);
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--brand-primary);
      border-radius: 2px;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: var(--space-16);
    }

    /* ===============================
       BUTTON SYSTEM - Premium
       =============================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-8);
      padding: var(--space-12) var(--space-24);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: var(--text-sm);
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all var(--transition-base);
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transition: left 0.6s;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn-primary {
      background: var(--gradient-brand);
      color: white;
      box-shadow: var(--shadow-glow);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(0,102,255,0.4);
    }

    .btn-secondary {
      background: var(--glass-bg);
      color: var(--text-primary);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
    }

    .btn-secondary:hover {
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    .btn-outline {
      background: transparent;
      color: var(--brand-primary);
      border: 2px solid var(--brand-primary);
    }

    .btn-outline:hover {
      background: rgba(0,102,255,0.1);
      transform: translateY(-2px);
    }

    /* ===============================
       HERO SECTION - Impacto Imediato
       =============================== */
    .hero {
  min-height: calc(100svh - 88px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 56px;
}

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 30%, rgba(0,102,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,212,170,0.1) 0%, transparent 50%);
      z-index: -1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-48);
      align-items: center;
    }

    .hero-content h1 {
      margin-bottom: var(--space-24);
    }

    .hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin: var(--space-24) 0;
}

    .stat {
      text-align: center;
    }

    .stat-number {
      font-size: 56px; /* AQUI */
      font-weight: 800;
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: var(--space-4);
    }

    .stat-label {
      font-size: var(--text-sm);
      color: var(--text-tertiary);
    }

    .hero-visual {
      position: relative;
    }

    .visual-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 32px;        /* mais arredondado, premium */
  padding: var(--space-24);   /* reduz altura total do card */
  box-shadow: var(--shadow-lg);
  overflow: hidden;           /* garante borda limpa com glow */
}

    /* ===============================
       CASES SECTION - Grid Interativo
       =============================== */
    /* ===============================
   ASSESSMENT CARD - Compacto
   =============================== */
.assessment-card {
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  padding: var(--space-20);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.assessment-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,102,255,0.08) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

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

.assessment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-8);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-4);
}

.assessment-item:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

.assessment-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.assessment-item span {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--text-secondary);
}

.assessment-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.assessment-actions {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

    .cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-24);
      margin: var(--space-48) 0;
    }

    .case-card {
      background: var(--space-3);
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.05);
      transition: all var(--transition-base);
      cursor: pointer;
    }

    .case-card:hover {
      transform: translateY(-6px);
      border-color: var(--brand-primary);
      box-shadow: var(--shadow-lg);
    }

    .case-image {
      height: 140px;

      /* Fundo padrão (mantém o visual premium nos outros cards) */
      background:
        linear-gradient(
          135deg,
          rgba(20,30,60,.75),
          rgba(20,30,60,.85)
        );

      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* IMAGEM APENAS NO CASE 1 (1º card) — caminho confirmado */
    .cases-grid--4 .case-card:nth-child(1) .case-image{
      background:
        linear-gradient(
          135deg,
          rgba(20,30,60,.55),
          rgba(20,30,60,.78)
        ),
        url("/assets/img/robo-case1.png") center / cover no-repeat;
    }

/* IMAGEM APENAS NO CASE 2 (2º card) — DOE */
.cases-grid--4 .case-card:nth-child(2) .case-image{
  background:
    linear-gradient(
      135deg,
      rgba(20,30,60,.55),
      rgba(20,30,60,.78)
    ),
    url("/assets/img/methodology-doe-framework.png") center / cover no-repeat;
}

    .case-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
    }

    .case-client {
      position: absolute;
      bottom: var(--space-16);
      left: var(--space-16);
      font-size: var(--text-sm);
      font-weight: 600;
      color: white;
      z-index: 1;
    }

    .case-content {
      padding: var(--space-24);
    }

    .case-tags {
      display: flex;
      gap: var(--space-8);
      margin-bottom: var(--space-16);
      flex-wrap: wrap;
    }

    .case-tag {
      font-size: var(--text-xs);
      padding: var(--space-4) var(--space-8);
      background: rgba(0,102,255,0.1);
      color: var(--brand-primary);
      border-radius: var(--radius-sm);
      font-weight: 600;
    }

    .case-results {
      margin-top: var(--space-16);
      padding-top: var(--space-16);
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .result-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: var(--space-8);
    }

    .result-label {
      color: var(--text-tertiary);
      font-size: var(--text-sm);
    }

    .result-value {
      color: var(--success);
      font-weight: 600;
      font-size: var(--text-sm);
    }

    /* ===============================
       PATCH - CASES (4 COL, COMPACT, CTA SOBRE CARD 4)
       =============================== */
    #cases.section{
      padding-top: var(--space-32);   /* aproxima do header/nav */
      padding-bottom: var(--space-48);
      scroll-margin-top: 96px;        /* âncora não fica colada no menu */
    }
    #cases .section-header{
      margin-bottom: var(--space-32); /* menos “respiro” antes do grid */
    }

    .cases-stage{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-24);
      align-items: start;
      margin-top: var(--space-24);
    }

    /* CTA “encaixado” acima do card 4 */
    .cases-cta-float{
      grid-column: 4;
      grid-row: 1;
      align-self: end;
      justify-self: stretch;
    }

   .cases-cta-float .btn{
  width: 100%;
  border-radius: 14px;              /* era radius-lg -> menor */
  padding: 10px 14px;               /* era 12/16 -> reduz altura */
  font-size: 13px;                  /* ligeiramente menor */
  line-height: 1.1;                 /* trava altura */
  box-shadow: 0 8px 26px rgba(0,102,255,0.18);
}


    /* grid dos 4 cases */
    .cases-grid--4{
      grid-column: 1 / -1;
      grid-row: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-24);
      margin: 0; /* remove margin antiga da .cases-grid */
    }

    /* Compactação dos cards (para caber em 1 tela) */
    #cases .case-client{
      bottom: var(--space-12);
      left: var(--space-12);
      font-size: 13px;
    }
   #cases .case-content{ padding: 12px; padding-bottom: 40px; }
    #cases .case-tags{ margin-bottom: var(--space-12); }
    #cases .case-tag{ font-size: 11px; padding: 3px 8px; }
    #cases .case-content h4{
      font-size: var(--text-lg);
      margin-bottom: var(--space-8);
    }
    #cases .case-content p{
      font-size: var(--text-sm);
      margin-bottom: var(--space-12);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    #cases .case-results{
      margin-top: var(--space-12);
      padding-top: var(--space-12);
    }
    #cases .result-item{ margin-bottom: 6px; }
    #cases .result-label, #cases .result-value{ font-size: 13px; }

    /* Responsivo: 2 col + CTA em cima */
    @media (max-width: 1200px){
      .cases-stage{
        grid-template-columns: repeat(2, 1fr);
      }
      .cases-cta-float{
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        max-width: 460px;
        width: 100%;
      }
      .cases-grid--4{
        grid-template-columns: repeat(2, 1fr);
        grid-row: 2;
      }
    }
    @media (max-width: 640px){
      .cases-grid--4{
        grid-template-columns: 1fr;
      }
      .cases-cta-float{
        max-width: none;
      }
    }
    /* =========================================
   PATCH 2 — CASES "1 PÁGINA" (mais compacto)
   - sobe "RESULTADOS COMPROVADOS"
   - reduz espaço do texto final -> CTA
   - cards mais largos e mais próximos
   ========================================= */

#cases.section{
  padding-top: 22px;              /* estava 32px -> sobe um pouco mais */
  padding-bottom: var(--space-40);
}

/* sobe um toque o overline */
#cases .section-header .overline{
  margin-bottom: 6px;             /* estava 12px */
  transform: translateY(-2px);
}

/* reduz espaço entre título/sub e o grid */
#cases .section-header{
  margin-bottom: 18px;            /* estava 32px -> aproxima do conteúdo */
}

/* reduz distância do texto "no seu negócio" para o CTA/grid */
#cases .section-header .text-lead{
  margin-bottom: 8px !important;  /* força menor respiro */
}

/* aproxima CTA do texto e do topo do card 4 */
.cases-stage{
  gap: 16px;                      /* estava 24px -> reduz espaçamento geral */
  margin-top: 10px;               /* estava 24px -> sobe o conjunto */
}

/* CTA mais perto do texto final e alinhado melhor */
.cases-cta-float{
  align-self: start;              /* antes end -> sobe o botão */
  margin-top: -6px;               /* aproxima um pouco mais do parágrafo */
}

/* deixa cards mais "largos" visualmente: menor gap entre eles */
.cases-grid--4{
  gap: 16px;                      /* estava 24px */
}

/* em telas largas, dá ainda mais largura pros cards (sem quebrar layout) */
@media (min-width: 1280px){
  .container{ max-width: 1360px; }  /* antes 1280 -> +largura pros 4 cards */
}

/* opcional: card um pouco mais baixo para caber sem scroll */
#cases .case-content{ padding: 12px; padding-bottom: 48px; } /* estava 16px */
/* =========================================
   PATCH FINAL — FECHAMENTO DE DOBRA
   ========================================= */

/* sobe levemente todo o bloco de cases */
#cases.section{
  padding-top: 16px;        /* era 22px */
}

/* reduz mais um pouco o espaço do texto final */
#cases .section-header .text-lead{
  margin-bottom: 4px !important;
}

/* aproxima CTA do texto */
.cases-cta-float{
  margin-top: -10px;        /* era -6px */
}

/* cards ainda mais “juntos” */
.cases-stage{
  gap: 9px;                /* era 16px */
}

/* reduz 2px da imagem do card */

/* título do card levemente menor (imperceptível visualmente) */
#cases .case-content h4{
  font-size: 17px;
}

/* descrição com 1 linha e meia visual */
#cases .case-content p{
  -webkit-line-clamp: 2;
  line-height: 1.35;
}


    /* ===============================
       METHODOLOGY - Arquitetura Visual
       =============================== */
    .methodology-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--space-24);
      margin: var(--space-48) 0;
    }

    .step {
      text-align: center;
      padding: var(--space-32);
      background: var(--glass-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-border);
      position: relative;
    }

    .step-number {
      width: 48px;
      height: 48px;
      background: var(--gradient-brand);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: var(--text-lg);
      margin: 0 auto var(--space-16);
      color: white;
    }

    /* ===============================
       TESTIMONIALS - Social Proof
       =============================== */
    .testimonial-slider {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
    }

    .testimonial {
      background: var(--space-3);
      border-radius: var(--radius-lg);
      padding: var(--space-40);
      text-align: center;
      border: 1px solid rgba(255,255,255,0.05);
    }

    .testimonial-quote {
      font-size: var(--text-xl);
      font-style: italic;
      margin-bottom: var(--space-24);
      color: var(--text-secondary);
    }

    .testimonial-author {
      font-weight: 600;
      margin-bottom: var(--space-4);
    }

    .testimonial-role {
      color: var(--text-tertiary);
      font-size: var(--text-sm);
    }

    /* ===============================
       CTA SECTION - Conversão Final
       =============================== */
    .cta-section {
      text-align: center;
      padding: var(--space-80) 0;
      background: linear-gradient(135deg, rgba(0,102,255,0.1), rgba(0,212,170,0.05));
      position: relative;
      overflow: hidden;
    }

    .cta-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      right: -50%;
      bottom: -50%;
      background: radial-gradient(circle at 50% 50%, rgba(0,102,255,0.1) 0%, transparent 50%);
      animation: rotate 20s linear infinite;
      z-index: -1;
    }

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

    /* ===============================
       FOOTER
       =============================== */
    .footer {
      background: var(--space-1);
      border-top: 1px solid rgba(255,255,255,0.05);
      padding: var(--space-64) 0 var(--space-32);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-48);
      margin-bottom: var(--space-48);
    }

    .footer-logo {
      font-size: var(--text-xl);
      font-weight: 700;
      margin-bottom: var(--space-16);
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: var(--space-8);
    }

    .footer-links a {
      color: var(--text-tertiary);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .footer-links a:hover {
      color: var(--text-primary);
    }

    .footer-bottom {
      text-align: center;
      padding-top: var(--space-32);
      border-top: 1px solid rgba(255,255,255,0.05);
      color: var(--text-tertiary);
      font-size: var(--text-sm);
    }

    /* ===============================
       UTILITY CLASSES
       =============================== */
    .text-gradient {
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .glass {
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
    }

    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===============================
       RESPONSIVE DESIGN
       =============================== */
    @media (max-width: 1024px) {
      :root {
        --text-4xl: 36px;
        --text-5xl: 42px;
      }
      
      .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  align-items: center;
}

      .nav-menu {
        display: none;
      }

      .mobile-menu-btn {
        display: block;
      }
    }

    @media (max-width: 768px) {
      .section {
        padding: var(--space-48) 0;
      }

      h1 { font-size: var(--text-4xl); }
      h2 { font-size: var(--text-3xl); }

      .hero-stats {
        grid-template-columns: 1fr;
      }

      .cases-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .container {
        padding: 0 var(--space-16);
      }

      .btn {
        width: 100%;
        justify-content: center;
      }

      .nav-cta {
        flex-direction: column;
        width: 100%;
      }
    }

    /* ===============================
       MOBILE MENU
       =============================== */
    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 24px;
      cursor: pointer;
    }

    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--space-1);
      z-index: 1001;
      padding: var(--space-32);
      transform: translateX(100%);
      transition: transform var(--transition-base);
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    .mobile-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-32);
    }

    .mobile-nav {
      list-style: none;
    }

    .mobile-nav li {
      margin-bottom: var(--space-16);
    }

    .mobile-nav a {
      font-size: var(--text-xl);
      color: var(--text-primary);
      text-decoration: none;
      display: block;
      padding: var(--space-12) 0;
    }

    /* ===============================
       ANIMATIONS & EFFECTS
       =============================== */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .floating {
      animation: float 3s ease-in-out infinite;
    }

   /* ===============================
   HERO STATS - Pulse premium (sutil)
   =============================== */

.hero .stat-number.pulse {
  animation: heroPulse 900ms ease-out 1;
  filter: drop-shadow(0 0 12px rgba(0,102,255,.28));
}

@keyframes heroPulse {
  0%   { transform: translateZ(0) scale(1);   opacity: 1; }
  45%  { transform: translateZ(0) scale(1.035); opacity: 1; }
  100% { transform: translateZ(0) scale(1);   opacity: 1; }
}

    /* ===============================
       CUSTOM SCROLLBAR
       =============================== */
    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--space-1);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--brand-primary);
      border-radius: var(--radius-sm);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--brand-secondary);
    }

    /* ===============================
       ACCESSIBILITY
       =============================== */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .focus-visible {
      outline: 2px solid var(--brand-primary);
      outline-offset: 2px;
    }

    /* ===============================
       LOADING STATES
       =============================== */
    .loading {
      position: relative;
      overflow: hidden;
    }

    .loading::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    /* ===============================
   HERO ASSESSMENT - COMPACT MODE (sem mudar textos)
   =============================== */
.hero .visual-card {
  padding: var(--space-20);
}
.hero .assess-item {
  padding: 10px !important;
  gap: var(--space-8) !important;
  border-radius: var(--radius-md);
}

.hero .assess-item span {
  font-size: 13px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   PATCH — NOTA NO CARD DE CASE (sem mexer no HTML)
   ========================================================= */
#cases .case-card .case-content{
  position: relative;
}

#cases .case-card .case-content::after{
  content: "Clique aqui para mais detalhes";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  opacity: .9;
  pointer-events: none;
}

#cases .text-lead{
  font-size: 18px; /* antes era ~20px */
}
/* IMAGEM APENAS NO CASE 3 (3º card) — O&R + Poka-Yoke */
.cases-grid--4 .case-card:nth-child(3) .case-image{
  background:
    linear-gradient(135deg, rgba(20,30,60,.55), rgba(20,30,60,.78)),
    url("/assets/img/case3-or-pokayoke-bg.png") center / cover no-repeat;
}

/* IMAGEM APENAS NO CASE 4 (4º card) — Case 4 */
.cases-grid--4 .case-card:nth-child(4) .case-image{
  background:
    linear-gradient(135deg, rgba(20,30,60,.55), rgba(20,30,60,.78)),
    url("/assets/img/case4-transfer.png") center / cover no-repeat;
}


.case-card{
  display: block;
  text-decoration: none;
  color: inherit;
}

#methodology.section{
  padding-top: 24px;
}

/* Metodologia — aproxima cards do CTA */
#methodology .methodology-steps{
  margin-bottom: 10px;
}

#methodology .btn-outline{
  margin-top: 0px;
}

/* ===============================
   PATCH 2+3+4 — DOBRA + ESPAÇAMENTOS (HOME)
   2) reduzir padding top da metodologia
   3) reduzir distância entre cards e CTA
   4) trazer metodologia "pra dobra" (compactar)
   =============================== */

/* ---------- (3) CASES: CTA mais colado no grid + grid mais compacto ---------- */
.cases-stage{
  margin-top: var(--space-16) !important;
}

.cases-cta-float{
  margin-bottom: var(--space-12) !important; /* aproxima CTA do grid */
}

/* Se seu layout usa position absolute/fixed no CTA, isso evita "flutuar" alto demais */
.cases-cta-float .btn{
  padding: 12px 18px !important;
}

/* Compacta o grid (distância entre cards) */
.cases-grid.cases-grid--4{
  gap: var(--space-16) !important; /* era maior; reduz o "respiro" */
}

/* ---------- (2) METODOLOGIA: reduzir padding top (e geral) ---------- */
#methodology.section{
  padding-top: 64px !important;   /* sobe a seção */
  padding-bottom: 72px !important;
}

/* ---------- (4) METODOLOGIA NA DOBRA: compactar header + steps + CTA ---------- */
#methodology .section-header{
  margin-bottom: var(--space-20) !important;
}

#methodology .section-header .overline{
  margin-bottom: 10px !important;
}

#methodology .section-header h2{
  margin-bottom: 10px !important;
}

#methodology .section-header .text-lead{
  margin-top: 0 !important;
  line-height: 1.45 !important;
}

/* Steps mais compactos */
#methodology .methodology-steps{
  gap: var(--space-16) !important;
}

#methodology .methodology-steps .step{
  padding: var(--space-16) !important;
}

#methodology .methodology-steps .step .step-number{
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  margin-bottom: 10px !important;
}

/* CTA do whitepaper sobe (tira aquele “vazio” grande) */
#methodology .container > div[style*="margin-top: var(--space-48)"]{
  margin-top: var(--space-20) !important;
}

/* Mobile: ainda mais compacto pra realmente caber na dobra */
@media (max-width: 768px){
  #methodology.section{
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }
  #methodology .section-header{
    margin-bottom: var(--space-16) !important;
  }
  #methodology .methodology-steps .step{
    padding: var(--space-14) !important;
  }
}


/* ===============================
   SERVICES — DIAGNÓSTICO SISTÊMICO (PREMIUM FINAL)
   - sem cortar textos (sem clamp)
   - mapa grande (sem sobras laterais)
   - grid equilibrado (1fr / 1fr)
   =============================== */

#services.section{
  padding-top: var(--space-48);
  padding-bottom: var(--space-64);
  scroll-margin-top: 96px;
}

#services .section-header{
  margin-bottom: var(--space-32);
}
#services .section-header .overline{ margin-bottom: var(--space-8); }
#services .section-header h2{ margin-bottom: var(--space-12); }
#services .section-header .text-lead{
  margin: 0 auto;
  max-width: 860px;
}

/* Shell */
#services .svc-shell{
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

/* Pills */
#services .svc-situations{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: center;
  margin: 0 auto var(--space-24);
}

#services .svc-pill{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
#services .svc-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
}
#services .svc-pill.is-active{
  color: var(--text-primary);
  background: rgba(0,102,255,0.12);
  border-color: rgba(0,102,255,0.35);
  box-shadow: 0 12px 30px rgba(0,102,255,0.16);
}

/* Grid principal: para acabar com “sobras laterais” */
#services .svc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* <-- aqui é o ganho real */
  gap: var(--space-24);
  align-items: start;
}

/* MAPA (lado esquerdo) */
#services .svc-map-wrap{
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

#services .svc-map-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
#services .svc-map-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
#services .svc-map-sub{
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Mapa ocupa o máximo possível do card (sem “sobras”) */
#services .svc-map{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,102,255,0.10) 0%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(0,212,170,0.08) 0%, transparent 55%),
    rgba(255,255,255,0.015);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

#services .svc-axis{
  position: absolute;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.65);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#services .svc-axis span{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
}
#services .axis-top{ top: 12px; left: 50%; transform: translateX(-50%); }
#services .axis-right{ right: 12px; top: 50%; transform: translateY(-50%); }
#services .axis-bottom{ bottom: 12px; left: 50%; transform: translateX(-50%); }
#services .axis-left{ left: 12px; top: 50%; transform: translateY(-50%); }

#services .svc-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

#services .svc-cross{
  width: 70%;
  height: 70%;
  position: relative;
  opacity: 0.72;
  transform: none; /* <-- evita qualquer offset */
}
#services .svc-cross::before,
#services .svc-cross::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
}
#services .svc-cross::before{ width: 2px; height: 100%; }
#services .svc-cross::after{ height: 2px; width: 100%; }

#services .svc-dot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand-secondary);
  box-shadow: 0 0 0 6px rgba(0,212,170,0.12), 0 18px 44px rgba(0,212,170,0.18);
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left .35s ease, top .35s ease, box-shadow .35s ease, background .35s ease;
  animation: svcPulse 1.6s ease-in-out infinite;
}
@keyframes svcPulse{
  0%,100%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -50%) scale(1.08); }
}

/* Contexto (SEM cortar texto) */
#services .svc-context{
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(255,255,255,0.08);
}
#services .svc-context-kicker{
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
#services .svc-context-text{
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Painel direito */
#services .svc-solution{
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

#services .svc-solution-head{ margin-bottom: var(--space-16); }
#services .svc-solution-title{
  font-size: var(--text-xl);
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
#services .svc-solution-mini{
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* Blocos (SEM cortar texto) */
#services .svc-rows{
  display: grid;
  gap: var(--space-14);
  margin-top: var(--space-16);
}
#services .svc-row{
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
#services .svc-row-label{
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: 8px;
  font-weight: 700;
}
#services .svc-row-text{
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: var(--text-sm);
}

/* Como entregamos (3 col no desktop, sem cortes) */
#services .svc-delivery{
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(255,255,255,0.08);
}
#services .svc-delivery-title{
  font-weight: 800;
  margin-bottom: var(--space-12);
}
#services .svc-delivery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}
#services .svc-chip{
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

#services .svc-chip-top{
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--brand-secondary); /* verde serviços */
}

#services .svc-chip-top{
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--brand-secondary);
  letter-spacing: -0.01em;
}

#services .svc-chip-sub{
  color: var(--text-secondary);
}




#services .svc-chip-sub{
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* CTAs */
#services .svc-cta{
  margin-top: var(--space-20);
  display: grid;
  gap: var(--space-10);
}
#services .svc-cta .btn{
  width: 100%;
  justify-content: center;
  text-decoration: none;
}
#services .svc-footnote{
  text-align:center;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  margin-top: 6px;
  line-height: 1.5;
}

/* Responsivo */
@media (max-width: 1024px){
  #services .svc-grid{ grid-template-columns: 1fr; }
  #services .svc-delivery-grid{ grid-template-columns: 1fr; }
}


/* ===============================
   SERVICES — DOBRA PREMIUM (sem cortar texto)
   Cole no FINAL do site.css
   =============================== */

:root{
  --nav-h: 88px; /* ajuste fino: 80/88/96 conforme seu navbar real */
}

/* 1) Alvo de dobra (não corta) */
#services.section{
  min-height: calc(100svh - var(--nav-h));
  padding-top: 24px !important;
  padding-bottom: 34px !important;
}

/* 2) Header mais compacto (sem mexer no texto) */
#services .section-header{
  margin-bottom: 16px !important;
}
#services .section-header .overline{ margin-bottom: 6px !important; }
#services .section-header h2{ margin-bottom: 10px !important; }
#services .section-header .text-lead{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3) “Card” principal mais enxuto */
#services .svc-shell{
  padding: 18px !important; /* era 32 */
}

/* 4) Pills ocupam menos vertical */
#services .svc-situations{
  margin-bottom: 12px !important;
  gap: 8px !important;
}
#services .svc-pill{
  padding: 9px 12px !important;
}

/* 5) Grid: menos gap, mais “cheio” */
#services .svc-grid{
  gap: 14px !important;
}

/* 6) Map card e Solution card: menos padding */
#services .svc-map-wrap,
#services .svc-solution{
  padding: 16px !important;
}

/* 7) Mapa: ocupa mais do card (mata sobra lateral) */
#services .svc-map{
  max-width: 520px !important; /* deixa crescer dentro do card */
}

/* 8) Blocos internos: compactar “ar” */
#services .svc-rows{ gap: 10px !important; margin-top: 10px !important; }
#services .svc-row{ padding: 12px !important; }
#services .svc-row-label{ margin-bottom: 6px !important; }

/* 9) Contexto e Delivery: menos separação */
#services .svc-context{
  margin-top: 10px !important;
  padding-top: 10px !important;
}
#services .svc-delivery{
  margin-top: 12px !important;
  padding-top: 10px !important;
}
#services .svc-delivery-title{ margin-bottom: 8px !important; }
#services .svc-delivery-grid{ gap: 10px !important; }
#services .svc-chip{ padding: 12px !important; }

/* 10) CTAs: compactar */
#services .svc-cta{ margin-top: 12px !important; gap: 8px !important; }
#services .svc-cta .btn{ padding: 10px 14px !important; }
#services .svc-footnote{ margin-top: 4px !important; }

/* ===============================
   SERVICES - DOBRA ULTRA COMPACTA (100% visível)
   =============================== */

/* 1) Container principal otimizado */
#services.section {
  min-height: auto !important;
  padding-top: 20px !important;
  padding-bottom: 24px !important;
  scroll-margin-top: 80px;
}

/* 2) Header super compacto */
#services .section-header {
  margin-bottom: 12px !important;
}

#services .section-header .overline { 
  margin-bottom: 4px !important;
  font-size: var(--text-xs) !important;
}

#services .section-header h2 { 
  margin-bottom: 6px !important;
  font-size: var(--text-3xl) !important;
  line-height: 1.1 !important;
}

#services .section-header .text-lead {
  font-size: var(--text-base) !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* 3) Shell principal - menos padding */
#services .svc-shell {
  padding: 12px !important;
  border-radius: var(--radius-lg) !important;
}

/* 4) Pills - linha única compacta */
#services .svc-situations {
  margin-bottom: 8px !important;
  gap: 6px !important;
  overflow-x: auto;
  padding-bottom: 4px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

#services .svc-pill {
  padding: 6px 10px !important;
  font-size: var(--text-xs) !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 5) Grid principal - gap mínimo */
#services .svc-grid {
  gap: 12px !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
}

/* 6) Cards interiores - padding reduzido */
#services .svc-map-wrap,
#services .svc-solution {
  padding: 12px !important;
  border-radius: var(--radius-md) !important;
}

/* 7) Mapa - altura fixa menor */
#services .svc-map {
  height: 280px !important;
  aspect-ratio: 1 / 1 !important;
}

#services .svc-axis {
  font-size: 10px !important;
}

#services .svc-axis span {
  padding: 4px 6px !important;
}

/* 8) Títulos internos compactos */
#services .svc-map-title,
#services .svc-solution-title {
  font-size: var(--text-base) !important;
  margin-bottom: 4px !important;
}

#services .svc-map-sub,
#services .svc-solution-mini {
  font-size: var(--text-xs) !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

/* 9) Contexto - menos espaço */
#services .svc-context {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

#services .svc-context-kicker {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}

#services .svc-context-text {
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 10) Linhas de conteúdo - ultra compactas */
#services .svc-rows {
  gap: 6px !important;
  margin-top: 8px !important;
}

#services .svc-row {
  padding: 8px !important;
  border-radius: var(--radius-sm) !important;
}

#services .svc-row-label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}

#services .svc-row-text {
  font-size: var(--text-xs) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* 11) Entrega - 3 colunas compactas */
#services .svc-delivery {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

#services .svc-delivery-title {
  font-size: var(--text-sm) !important;
  margin-bottom: 6px !important;
}

#services .svc-delivery-grid {
  gap: 6px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

#services .svc-chip {
  padding: 8px !important;
  border-radius: var(--radius-sm) !important;
}

#services .svc-chip-top {
  font-size: var(--text-xs) !important;
  margin-bottom: 2px !important;
}

#services .svc-chip-sub {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* 12) CTAs - linha única */
#services .svc-cta {
  margin-top: 8px !important;
  gap: 6px !important;
}

#services .svc-cta .btn {
  padding: 8px 12px !important;
  font-size: var(--text-xs) !important;
  height: auto !important;
  line-height: 1.1 !important;
}

#services .svc-cta .btn span[style*="font-size: 20px"] {
  font-size: 16px !important;
}

#services .svc-footnote {
  font-size: 10px !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

/* 13) Responsivo mobile - empilha tudo */
@media (max-width: 1024px) {
  #services .svc-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  #services .svc-delivery-grid {
    grid-template-columns: 1fr !important;
  }
  
  #services .svc-map {
    height: 250px !important;
  }
}

@media (max-width: 768px) {
  #services.section {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }
  
  #services .section-header h2 {
    font-size: var(--text-2xl) !important;
  }
  
  #services .section-header .text-lead {
    font-size: var(--text-sm) !important;
  }
  
  #services .svc-situations {
    gap: 4px !important;
    padding-bottom: 2px;
  }
  
  #services .svc-pill {
    padding: 4px 8px !important;
  }
}

/* SERVICES — 1px visual sem alterar layout */
#services .svc-map-wrap,
#services .svc-solution,
#services .svc-chip,
#services .svc-row{
  outline: 1px solid rgba(255,255,255,0.08);
  outline-offset: -1px;
}


/* FAILSAFE — não deixa HTML “vazar” no CTA de Serviços */
#services .svc-cta .btn span[style]{
  display: none !important;
}

/* Já existe, mas pode ser intensificado */
#services .svc-pill.is-active {
  background: rgba(0,102,255,0.15); /* aumentar opacidade */
  border-color: var(--brand-primary);
  box-shadow: 0 6px 20px rgba(0,102,255,0.25); /* mais intenso */
  transform: scale(1.02); /* leve destaque */
}

#services .svc-dot {
  animation: svcPulse 1.6s ease-in-out infinite;
}

#services .svc-dot {
  box-shadow: 0 0 0 8px rgba(0,212,170,0.1), 
              0 12px 32px rgba(0,212,170,0.2);
}

@media (max-width: 768px) {
  #services .svc-map {
    margin-bottom: 20px;
  }
  #services .svc-grid {
    display: flex;
    flex-direction: column;
  }
  #services .svc-map-wrap {
    order: -1; /* mapa primeiro */
  }
}

#services .svc-cta .btn-primary {
  position: relative;
  overflow: hidden;
}
#services .svc-cta .btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0) 55%
  );
  transform: rotate(30deg);
  animation: shine 3s infinite linear;
}
@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(30deg); }
}


/* CARD 1 - AÇÃO IMEDIATA (Urgência) */
#services .svc-row:nth-child(1) {
  border-left: 3px solid #FF6B35; /* Laranja da paleta */
  background: rgba(255, 107, 53, 0.03);

}

#services .svc-row:nth-child(2) {
  border-left: 3px solid var(--warning); /* #FFB224 - AMARELO */
  background: linear-gradient(
    90deg,
    rgba(255, 178, 36, 0.06) 0%,    /* Mais visível */
    rgba(255, 178, 36, 0.01) 100%
  );
}

/* CARD 3 - RESULTADO ESPERADO (Sucesso/Conclusão) */
#services .svc-row:nth-child(3) {
  border-left: 3px solid var(--success); /* #00C781 */
  background: rgba(0, 199, 129, 0.03);
}


/* ===============================
   NAV DROPDOWN / MEGA MENU — PREMIUM
   (cole no FINAL do site.css)
   =============================== */

.nav-item{ position: relative; }

.nav-dd-toggle{
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-caret{
  font-size: 12px;
  opacity: .8;
  transform: translateY(1px);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.has-dropdown.is-open .nav-caret{
  transform: rotate(180deg) translateY(-1px);
  opacity: 1;
}

/* Dropdown shell */
.nav-dropdown{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  z-index: 2000;

  background: rgba(10,14,22,0.92);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);

  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.has-dropdown.is-open > .nav-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown simples (Insights) */
.nav-drop{
  width: 280px;
}

.nav-drop-item{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-drop-item:hover{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* Mega menu (ESG & Inovação) */
.nav-mega{
  width: min(720px, calc(100vw - 48px));
  padding: 14px;
}

.nav-mega-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nav-mega-item{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.nav-mega-item:hover{
  transform: translateY(-2px);
  border-color: rgba(0,102,255,0.35);
  background: rgba(0,102,255,0.08);
}

.nav-mega-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 14px;
}

.nav-mega-sub{
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-tertiary);
}

/* Evita dropdown em telas pequenas (vamos usar mobile menu) */
@media (max-width: 1024px){
  .nav-dropdown{ display: none !important; }
}

/* ===============================
   FIX FINAL — CASES (estabiliza após vários patches)
   Cole NO FINAL do site.css
   =============================== */

#cases .cases-stage{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 10px;
}

#cases .cases-cta-float{
  grid-column: 4;
  grid-row: 1;
  align-self: start;
  margin: 0; /* neutraliza margens conflitantes */
}

#cases .cases-grid.cases-grid--4{
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
}

@media (max-width: 1200px){
  #cases .cases-stage{ grid-template-columns: repeat(2, 1fr); }
  #cases .cases-cta-float{
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    max-width: 460px;
    width: 100%;
  }
  #cases .cases-grid.cases-grid--4{
    grid-template-columns: repeat(2, 1fr);
    grid-row: 2;
  }
}

@media (max-width: 640px){
  #cases .cases-grid.cases-grid--4{ grid-template-columns: 1fr; }
  #cases .cases-cta-float{ max-width: none; }
}

/* =========================================================
   CASES — BLOCO DE CONFIDENCIALIDADE (ÚNICO / PADRÃO FINAL)
   Usar com:
   <div class="case-download">
     <p>Projetos conduzidos sob confidencialidade...</p>
   </div>
   ========================================================= */

.case-download{
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(800px 260px at 15% 20%, rgba(47,107,255,.18), transparent 60%),
    radial-gradient(600px 220px at 85% 80%, rgba(60,255,200,.10), transparent 60%),
    rgba(255,255,255,.03);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

.case-download p{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.72);
  max-width: 90ch;
}


/* ===============================
   ROI CALC — SPLIT CARD (PATCH)
   =============================== */
.roi-card{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-24);
  align-items: start;
}

.roi-left .roi-title{
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-12);
}

.roi-right{
  padding: var(--space-24);
  border-radius: var(--radius-xl);
  background: rgba(0,102,255,0.10);
  border: 1px solid rgba(0,102,255,0.22);
}

.roi-kicker{
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-8);
}

.roi-big{
  font-size: var(--text-5xl);
  line-height: 1;
  font-weight: 800;
  margin-bottom: var(--space-12);
}

.roi-meta{
  display: grid;
  gap: var(--space-10);
  margin: var(--space-12) 0 var(--space-20);
}

.roi-meta .row{
  display:flex;
  justify-content: space-between;
  gap: var(--space-12);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.roi-actions{
  display: grid;
  gap: var(--space-10);
}

.roi-actions .btn{
  justify-content: center;
  width: 100%;
}

/* responsivo */
@media (max-width: 980px){
  .roi-card{ grid-template-columns: 1fr; }
  .roi-right{ margin-top: var(--space-16); }
}


/* ===============================
   ROI — PILLS GRID (ALINHAMENTO)
   =============================== */
#roiChallenges{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (min-width: 900px){
  #roiChallenges{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#roiChallenges .roi-ch{
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}


/* ===============================
   ROI — FEEDBACK VISUAL (VERDE)
   =============================== */
.roi-right{
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.roi-right.roi-high{
  border-color: rgba(0,199,129,.35);
  background: linear-gradient(180deg, rgba(0,199,129,.10), rgba(0,0,0,0));
  box-shadow: 0 0 0 1px rgba(0,199,129,.25), var(--shadow-lg);
}

.roi-right.roi-mid{
  border-color: rgba(0,212,170,.28);
  background: linear-gradient(180deg, rgba(0,212,170,.08), rgba(0,0,0,0));
  box-shadow: 0 0 0 1px rgba(0,212,170,.18), var(--shadow-lg);
}


/* ===============================
   ROI CALC — MICROCOPY (GLASS)
   =============================== */
.roi-microcopy-box {
  margin-top: 8px;
  padding: 10px 12px;

  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);

  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: none;

  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.roi-microcopy-box.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


/* ===============================
   ROI CALC — VISUAL PATCH
   =============================== */
.roi-microcopy-box{
  display:none;
  margin-top: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.roi-microcopy-box.is-visible{ display:block; }

#roiChallenges .roi-ch{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  border-radius: 999px;
}
#roiChallenges .roi-ch.is-active{
  background: var(--brand-primary);
  border-color: rgba(0,102,255,0.6);
  color: #fff;
}

/* “fica verde” */
#calculator .roi-right{
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#calculator .roi-right.roi-mid{
  background: rgba(0, 199, 129, 0.06);
  border-color: rgba(0, 199, 129, 0.22);
}
#calculator .roi-right.roi-high{
  background: rgba(0, 199, 129, 0.10);
  border-color: rgba(0, 199, 129, 0.32);
  box-shadow: 0 0 0 1px rgba(0,199,129,0.25) inset;
}


/* ===============================
   ROI — DESAFIOS (PILLS PREMIUM)
   =============================== */
#roiChallenges{
  gap: var(--space-10) !important;
}

#roiChallenges .roi-ch{
  /* tipografia e espaçamento */
  font-size: 11px;               /* ↓ um pouco menor */
  font-weight: 650;
  letter-spacing: .01em;
  padding: 10px 14px;

  /* aparência premium */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(120% 140% at 20% 20%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.02) 100%),
    rgba(255,255,255,0.02);
  color: rgba(240,244,255,0.92);

  /* “botão” */
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

#roiChallenges .roi-ch:hover{
  transform: translateY(-1px);
  border-color: rgba(0,102,255,0.35);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.28),
    0 0 0 1px rgba(0,102,255,0.12) inset,
    inset 0 1px 0 rgba(255,255,255,0.12);
}

#roiChallenges .roi-ch:active{
  transform: translateY(0px);
}

#roiChallenges .roi-ch.is-active{
  color: #fff;
  border-color: rgba(0,212,170,0.40);
  background:
    radial-gradient(120% 150% at 20% 20%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 38%, rgba(255,255,255,0.00) 100%),
    linear-gradient(90deg, rgba(0,102,255,0.95), rgba(0,212,170,0.85));
  box-shadow:
    0 18px 34px rgba(0,0,0,0.30),
    0 0 0 1px rgba(0,212,170,0.22) inset,
    0 0 26px rgba(0,212,170,0.18);
}
/* ===============================
   ROI — CENTRALIZAÇÃO DO RESULTADO
   =============================== */
.roi-card{
  align-items: center; /* centraliza esquerda+direita na vertical */
}

.roi-right{
  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza o conteúdo dentro do card */
}

/* No mobile (stack), volta ao normal pra não “apertar” */
@media (max-width: 900px){
  .roi-card{ align-items: stretch; }
  .roi-right{ justify-content: flex-start; }
}

/* ===============================
   ROI — MICROCOPY SETOR (AJUSTE FINO)
   =============================== */
#roiSectorMicrocopy{
  font-size: 12.5px;          /* ↓ menor e mais elegante */
  line-height: 1.45;
  opacity: 0.85;
}

/* ===============================
   ROI CALC — AJUSTE DE TEXTO LEAD
   =============================== */
#calculator .text-lead{
  font-size: 14px;       /* ↓ reduz impacto visual */
  line-height: 1.45;
  opacity: 0.85;
}

/* ===============================
   ROI CALC — ESPAÇAMENTO HEADER → CARD
   =============================== */
#calculator .section-header{
  margin-bottom: var(--space-24); /* antes era bem maior */
}
#calculator .visual-card{
  margin-top: var(--space-8);
}

/* =========================================================
   SOBRE — PATCH PREMIUM (SAFE)
   Corrige: bordas feias, overflow de texto, tipografia e espaçamento topo
   ========================================================= */

/* 1) Distância do topo (navbar fixa) */
#sobre{
  padding-top: calc(var(--space-72) + 84px) !important;
}
@media (max-width: 768px){
  #sobre{
    padding-top: calc(var(--space-72) + 64px) !important;
  }
}

/* 2) Tipografia padronizada */
#sobre h1{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
#sobre h2{
  font-size: clamp(24px, 3.0vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
#sobre .text-lead{
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}
#sobre p{
  line-height: 1.6;
}

/* 3) Anti “texto passando da borda” */
#sobre, #sobre *{
  box-sizing: border-box;
}
#sobre p, 
#sobre li, 
#sobre h1, 
#sobre h2, 
#sobre h3{
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* 4) Bordas e cards: mais premium, menos “borda dura” */
#sobre .visual-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-lg);
  overflow: hidden; /* impede vazamento visual */
}
#sobre .glass{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* impede textos/elementos vazarem */
}

/* 5) Layout do HERO do Sobre (evita “apertar” e quebrar) */
#sobre .visual-card > div{
  padding: 0 !important; /* mantém o padding do seu próprio bloco */
}

/* 6) Coluna direita (card do Marcelo) mais “limpa” */
#sobre .glass [style*="padding: var(--space-12)"]{
  border-radius: 14px;
}

/* 7) Botões/CTAs não estourarem */
#sobre .btn{
  white-space: nowrap;
}
@media (max-width: 520px){
  #sobre .btn{
    width: 100%;
    justify-content: center;
  }
}

/* 8) Ajuste fino do bloco do hero para respirar mais */
#sobre section.visual-card,
#sobre .visual-card[style*="padding: var(--space-32)"]{
  padding: clamp(18px, 2.2vw, 32px) !important;
}

/* 9) Ajuste: listas do “check” sem desalinhamento */
#sobre [style*="width: 26px; height: 26px"]{
  flex: 0 0 26px;
}

/* 10) Grids responsivos do Sobre (sem depender de style*=repeat) */
@media (max-width: 960px){
  #sobre .container > section .visual-card [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   MAXPROD GALAXY CSS - Design System Premium
   ========================================================= */

/* 1. PALETA PREMIUM EXPANDIDA */
:root {
  /* Cores principais otimizadas */
  --brand-primary: #0066ff;
  --brand-primary-rgb: 0, 102, 255;
  --brand-secondary: #00d4aa;
  --brand-secondary-rgb: 0, 212, 170;
  --success: #00c781;
  
  /* Tons de fundo sofisticados */
  --bg-primary: #0a0f1c;
  --bg-secondary: #111827;
  --bg-tertiary: #1a2332;
  
  /* Textos com mais contraste */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-quaternary: #64748b;
  
  /* Gradientes premium */
  --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  --gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  
  /* Sombras premium */
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 60px rgba(var(--brand-primary-rgb), 0.3);
  --shadow-glow-secondary: 0 0 40px rgba(var(--brand-secondary-rgb), 0.3);
  
  /* Bordas premium */
  --border-glow: 1px solid rgba(var(--brand-primary-rgb), 0.3);
  --border-glow-secondary: 1px solid rgba(var(--brand-secondary-rgb), 0.3);
  
  /* Espaçamento expandido */
  --space-96: 6rem;
  --space-128: 8rem;
}

/* 2. ANIMAÇÕES PREMIUM */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

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

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 3. COMPONENTES PREMIUM */
.glass-premium {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.glass-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-glass);
  opacity: 0.3;
  pointer-events: none;
}

.card-hover {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl), var(--shadow-glow);
  border: var(--border-glow);
}

.glow-container {
  position: relative;
}

.glow-container::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--gradient-primary);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.glow-container:hover::after {
  opacity: 0.3;
}

/* 4. BOTÕES PREMIUM */
.btn-premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  background: var(--gradient-primary);
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1rem 2rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s ease;
}

.btn-premium:hover::after {
  transform: translateX(100%) rotate(45deg);
}

/* 5. TYPOGRAPHY ENHANCEMENT */
.text-gradient-premium {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.text-gradient-premium::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(8px);
  opacity: 0.7;
  z-index: -1;
}

.overline-premium {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-secondary);
  position: relative;
  display: inline-block;
  padding-left: 1rem;
}

.overline-premium::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  height: 2px;
  background: var(--gradient-primary);
  transform: translateY(-50%);
}

/* 6. SOBRE PAGE SPECIFIC ENHANCEMENTS */
#sobre {
  padding-top: calc(var(--space-96) + 32px) !important;
  position: relative;
}

#sobre::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(var(--brand-primary-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--brand-secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Hero section premium */
#sobre .visual-card:first-of-type {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: var(--border-glow);
  box-shadow: var(--shadow-2xl), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

#sobre .visual-card:first-of-type::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(var(--brand-primary-rgb), 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(var(--brand-secondary-rgb), 0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* Credibility cards premium */
#sobre .glass[style*="padding: var(--space-16)"] {
  transition: all 0.3s ease;
  cursor: default;
}

#sobre .glass[style*="padding: var(--space-16)"]:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  border: var(--border-glow-secondary);
}

/* Awards section enhancement */
#sobre .glass[style*="position:absolute; inset:-45%"] {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* Stats counters */
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Timeline/milestones */
.timeline-item {
  position: relative;
  padding-left: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--gradient-primary);
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: var(--gradient-primary);
  border-radius: 50%;
  position: absolute;
  left: -5px;
  top: 4px;
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.5);
}

/* 7. RESPONSIVE ENHANCEMENTS */
@media (max-width: 768px) {
  #sobre {
    padding-top: calc(var(--space-72) + 48px) !important;
  }
  
  #sobre .visual-card {
    padding: var(--space-24) !important;
  }
  
  #sobre .glass {
    padding: var(--space-16) !important;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  #sobre h1 {
    font-size: 2rem;
  }
  
  #sobre h2 {
    font-size: 1.75rem;
  }
  
  .btn-premium {
    padding: 0.875rem 1.5rem;
    width: 100%;
    text-align: center;
  }
}

/* 8. PERFORMANCE OPTIMIZATIONS */
@media (prefers-reduced-motion: reduce) {
  .card-hover,
  .btn-premium,
  .glass {
    transition: none;
  }
  
  .float,
  .glow-pulse {
    animation: none;
  }
}

/* 9. PRINT STYLES */
@media print {
  #sobre .glass,
  #sobre .visual-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: white !important;
    color: black !important;
  }
  
  .text-gradient-premium {
    background: none !important;
    -webkit-text-fill-color: black !important;
    color: black !important;
  }
}
/* PATCH FINAL - Correções críticas */
#sobre .visual-card:first-of-type > div:first-child {
  padding: var(--space-32) !important;
}

#sobre .glass img {
  transition: transform 0.3s ease;
}

#sobre .glass:hover img {
  transform: scale(1.05);
}

#sobre .btn-outline {
  position: relative;
  overflow: hidden;
}

#sobre .btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

#sobre .btn-outline:hover::before {
  opacity: 0.1;
}

/* Ajuste de performance */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Suporte para navegadores antigos */
@supports not (backdrop-filter: blur(20px)) {
  .glass-premium {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* =========================================================
   SOBRE — REDUZ GLOW + REDUZ TIPOGRAFIA (SAFE)
   Cole no FINAL do site.css
   ========================================================= */

/* 0) Mata o “background fixo” do GALAXY no Sobre */
#sobre::before{ display:none !important; }

/* 1) Neutraliza glow/sombra exagerada somente no Sobre */
#sobre .visual-card,
#sobre .glass{
  box-shadow: var(--shadow-md) !important; /* era shadow-lg/2xl + glow */
  border-color: rgba(255,255,255,0.10) !important;
}

#sobre .visual-card:first-of-type{
  box-shadow: var(--shadow-lg) !important; /* mantém premium, sem neon */
  border-color: rgba(255,255,255,0.12) !important;
}

/* 2) Botões no Sobre: sem glow forte */
#sobre .btn-primary{
  box-shadow: 0 10px 26px rgba(0,0,0,0.35) !important; /* tira o --shadow-glow */
}
#sobre .btn-primary:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,0.45) !important;
  transform: translateY(-1px) !important; /* menos “saltitante” */
}

/* 3) Texto: reduz tudo no Sobre (hierarquia mais executiva) */
#sobre h1{
  font-size: clamp(26px, 3.0vw, 40px) !important;
  line-height: 1.08 !important;
  margin-bottom: var(--space-12) !important;
}
#sobre h2{
  font-size: clamp(20px, 2.2vw, 30px) !important;
  line-height: 1.12 !important;
}
#sobre h3{
  font-size: clamp(16px, 1.7vw, 22px) !important;
  line-height: 1.2 !important;
}
#sobre .text-lead{
  font-size: 15px !important;
  line-height: 1.55 !important;
}
#sobre p{
  font-size: 14px !important;
  line-height: 1.65 !important;
}
#sobre li{
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* 4) Cards: menos “inflado” */
#sobre .visual-card{
  padding: 22px !important; /* estava 28/32 */
}
#sobre .glass{
  padding: 16px !important; /* estava 18/20 */
}

/* 5) Prêmios: remove o glow interno (inline) de forma indireta
   (se não remover do HTML, isso reduz o impacto)
*/
#sobre .glass[style*="position: relative; overflow: hidden"]{
  background: rgba(255,255,255,0.03) !important;
}


/* =========================================
   SOBRE — AJUSTE DE ESPAÇO VERTICAL (FIX)
   ========================================= */

/* 1) Reduz padding vertical dos cards grandes */
#sobre .visual-card{
  padding-top: clamp(20px, 2.2vw, 28px) !important;
  padding-bottom: clamp(24px, 2.6vw, 32px) !important;
}

/* 2) Kicker (CONECTE-SE / PRÓXIMO PASSO) — cola no topo */
#sobre .visual-card .overline,
#sobre .visual-card .kicker{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  opacity: 0.85;
}

/* 3) Título logo após o kicker */
#sobre .visual-card h2,
#sobre .visual-card h3{
  margin-top: 0 !important;
}

/* 4) Primeiro parágrafo não “empurrar” */
#sobre .visual-card p:first-of-type{
  margin-top: 6px;
}

/* 5) Remove qualquer espaçador invisível */
#sobre .visual-card > *:first-child{
  margin-top: 0 !important;
}


/* =========================================
   SOBRE — ESPAÇO ENTRE PILLS E PILL FINAL
   ========================================= */

/* bloco das pills (Dono / Prazo / Indicador / Sustentação) */
#sobre .visual-card .pill-group,
#sobre .visual-card [class*="pill"]{
  margin-bottom: 28px; /* ajuste fino aqui (24–36px) */
}

/* pill final "Sem teatro..." */
#sobre .visual-card .pill-final,
#sobre .visual-card [class*="sem-teatro"],
#sobre .visual-card [style*="Sem teatro"]{
  margin-top: 0; /* garante que o espaço vem de cima */
}
/* ===============================
   PATCH — SOBRE (ajustes de espaçamento)
   Cole no FINAL do site.css
   =============================== */

/* 1) Cards grandes: reduz padding top e remove margem do primeiro elemento */
.about-card,
.section-card,
.glass-card,
.glass-panel,
.hero-card {
  padding-top: clamp(22px, 3vw, 34px) !important;
  padding-bottom: clamp(22px, 3vw, 34px) !important;
}

.about-card > :first-child,
.section-card > :first-child,
.glass-card > :first-child,
.glass-panel > :first-child,
.hero-card > :first-child {
  margin-top: 0 !important;
}

/* 2) “eyebrow / label” tipo CONECTE-SE, PRÓXIMO PASSO etc */
.eyebrow,
.kicker,
.section-label,
.section-overline {
  margin-bottom: 10px !important;
}

/* 3) Título + subtítulo (reduz respiro entre eles) */
.about-card h1,
.about-card h2,
.section-card h1,
.section-card h2,
.glass-card h1,
.glass-card h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.about-card .lead,
.about-card p,
.section-card .lead,
.section-card p {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
/* Espaço entre as pills (Dono/Prazo/Indicador/Sustentação) e a frase “Sem teatro…” */
.pills,
.pill-row,
.chips,
.tag-row {
  margin-bottom: 18px !important;
}

/* A frase/pill inferior */
.bottom-pill,
.about-bottom-pill,
.about-claim,
.callout-pill {
  margin-top: 18px !important;
}
/* Botões no card Trajetória: descer e dar respiro */
.cta-row,
.card-ctas,
.actions,
.button-row {
  margin-top: 18px !important;
  padding-top: 6px !important;
}

/* Se os botões estiverem colados no rodapé do card */
.cta-row {
  padding-bottom: 8px !important;
}
/* =========================================================
   SOBRE — PATCH FINAL (APENAS #sobre)
   Resolve:
   1) Espaço feio no topo dentro dos cards (.visual-card)
   2) Gap entre título (h2) e subtítulo (.text-lead)
   3) “Sem teatro...” mais abaixo (desencostar)
   4) Botões Trajetória mais abaixo (desencostar)
   ========================================================= */

/* 0) Segurança */
#sobre, #sobre * { box-sizing: border-box; }

/* 1) Cards do Sobre: reduzir respiro superior interno (o “vazio feio”) */
#sobre .sobre-card.visual-card{
  padding-top: 22px !important;     /* reduz o topo */
  padding-bottom: 30px !important;  /* mantém premium sem “murchar” */
}

/* 2) Overline: encostar mais no topo e reduzir espaço até o título */
#sobre .sobre-card .overline{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* 3) Título vs subtítulo: reduzir gap em TODOS os cards do Sobre */
#sobre .sobre-title{
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}
#sobre .sobre-sub{
  margin-top: 0 !important;
}

/* 4) “Por que existe”: separar pills da frase “Sem teatro...” (descer) */
#sobre .sobre-pills{
  margin-bottom: 18px !important;
}
#sobre .sobre-claim{
  margin-top: 26px !important; /* desce a frase */
}

/* 5) Trajetória: descer os botões “Ver cases / Estimar impacto (ROI)” */
#sobre .sobre-actions{
  margin-top: 26px !important;    /* desce os botões */
  padding-top: 6px !important;
  padding-bottom: 4px !important;
}

/* 6) Anti “conteúdo encostando na borda” por margens padrão de H2/P */
#sobre .sobre-card h1,
#sobre .sobre-card h2,
#sobre .sobre-card h3,
#sobre .sobre-card p{
  max-width: 100%;
}

/* 7) Responsivo: grid vira 1 coluna sem quebrar */
@media (max-width: 960px){
  #sobre .sobre-card [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   GLOBAL — COMPACT LAYOUT (SITE TODO)
   Menos “respiro” em cards/sections
   EXCEÇÃO: NÃO mexe no HERO do Sobre (primeiro .visual-card dentro de #sobre)
   Cole no FINAL do site.css
   ========================================================= */

/* 1) Cards principais (global) */
.visual-card{
  padding: 22px !important;          /* estava grande */
}

/* 2) EXCEÇÃO — mantém o HERO do Sobre do jeito que está */
#sobre .visual-card:first-of-type{
  padding: var(--space-32) !important;  /* preserva o hero "SOBRE A MAXPROD" */
}

/* 3) Títulos e textos dentro de cards: reduz margens (global) */
.visual-card .overline{
  margin-bottom: 8px !important;
}

.visual-card h1,
.visual-card h2,
.visual-card h3{
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

.visual-card p,
.visual-card .text-lead{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* 4) Grids dentro de cards: aproxima do texto (global) */
.visual-card > div[style*="grid"]{
  margin-top: 12px !important;
}

/* 5) Espaço entre seções (global) — reduz aqueles “var(--space-24)” do HTML */
main .container > section{
  margin-top: 16px !important;
}
main .container > section:first-child{
  margin-top: 0 !important;
}

/* 6) Botões/CTAs dentro de cards: menos espaço acima (global) */
.visual-card [style*="display:flex"][style*="gap"]{
  margin-top: 10px !important;
}

/* 7) Pills/chips (global): menos respiro */
.visual-card [style*="flex-wrap: wrap"]{
  row-gap: 10px !important;
}


.has-dropdown:hover > .nav-dropdown, .has-dropdown:focus-within > .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);} @media (max-width:1024px){.nav-dropdown{display:block !important;}}


/* ===============================
   CONTACT CTA — 1 DOBRA + CENTRALIZADO
   =============================== */

:root{
  --nav-h: 88px; /* ajuste fino se seu header for maior/menor */
}

#contact.cta-section{
  /* ocupa 1 tela (tirando o header) */
  min-height: calc(100svh - var(--nav-h));
  padding: 0 !important;

  /* centraliza vertical e horizontal */
  display: flex;
  align-items: center;
}

#contact.cta-section .container{
  width: 100%;
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

/* melhora “a sensação” de bloco único */
#contact.cta-section .section-header{
  margin-bottom: var(--space-24) !important;
}

#contact.cta-section .section-header h2{
  margin-bottom: 10px !important;
}

#contact.cta-section .section-header .text-lead{
  margin-top: 0 !important;
}

/* Mobile: garante respiro e ainda fica 1 dobra */
@media (max-width: 768px){
  #contact.cta-section .container{
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}


/* ===============================
   MOBILE FIX — HERO + ASSESSMENT
   Faz o assessment ir para baixo e evita “corte”
   =============================== */

@media (max-width: 900px) {
  /* hero não pode cortar conteúdo no mobile */
  .hero.section,
  #home.hero.section {
    min-height: auto !important;
    align-items: flex-start !important;
    overflow: visible !important;
    padding-top: 96px !important;   /* mantém respiro do navbar */
    padding-bottom: 32px !important;
  }

  /* grid vira 1 coluna */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-24) !important;
    align-items: stretch !important;
  }

  /* força o visual (assessment) para baixo */
  .hero-content { order: 1; }
  .hero-visual  { order: 2; }

  /* garante que o card não estoure a largura */
  .hero-visual .visual-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===============================
   MOBILE MENU — botão elegante + CTA fora do header
   =============================== */

.mobile-menu-btn{
  display: none;                 /* desktop: escondido */
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

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

@media (max-width: 1024px){
  .mobile-menu-btn{ display: inline-flex; align-items:center; justify-content:center; }
}

@media (max-width: 768px){
  /* CTA grande some do header (fica no drawer) */
  .nav-cta{ display: none !important; }

  /* garante que logo + hambúrguer encaixem */
  .nav-container{ gap: 12px; }
  .logo{ min-width: 0; }
}

/* Drawer */
.mobile-menu{
  background: rgba(6, 12, 22, 0.92) !important; /* seu fundo premium */
  backdrop-filter: blur(14px);
}

/* botão fechar */
#closeMobileMenu{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
}

/* ===============================
   MOBILE MENU — permitir rolagem interna (iOS/Android)
   =============================== */

.mobile-menu{
  position: fixed;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  height: 100vh;
  height: 100svh;           /* iOS moderno: evita corte */
  overflow: hidden;         /* rolagem fica no conteúdo interno */
  z-index: 9999;
}

/* O conteúdo do drawer precisa poder rolar */
.mobile-menu .mobile-nav{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* inércia iOS */
  max-height: calc(100svh - 110px);  /* subtrai o header do drawer + botões */
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Se você tiver o bloco de botões (Calcular ROI / Fale Conosco) dentro do drawer,
   garante que ele não “tampa” os últimos links */
.mobile-menu > div:last-child{
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}