html { scroll-behavior: smooth; }
  body {
    background-color: #050B18;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
  }

  .glass {
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .glass-strong {
    background: rgba(11, 31, 59, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 212, 255, 0.18);
  }

  .text-gradient {
    background: linear-gradient(90deg, #2563EB, #00D4FF, #2563EB);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-x 6s ease infinite;
  }
  /* Definido também em CSS puro (além do tailwind.config) para garantir que a
     animação sempre exista, já que nenhum elemento usa a classe utilitária
     "animate-gradient-x" — sem isso, o Tailwind via CDN não gera o @keyframes
     e o texto com gradiente fica estático. */
  @keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  /* Título do hero: duas linhas fixas, sem quebra desorganizada */
  .hero-title-1,
  .hero-title-2 {
    display: block;
    white-space: nowrap;
  }
  .hero-title-1 { font-size: 1.1875rem; }
  .hero-title-2 { font-size: 1rem; }
  @media (min-width: 360px) {
    .hero-title-1 { font-size: 1.375rem; }
    .hero-title-2 { font-size: 1.125rem; }
  }
  @media (min-width: 420px) {
    .hero-title-1 { font-size: 1.625rem; }
    .hero-title-2 { font-size: 1.375rem; }
  }
  @media (min-width: 500px) {
    .hero-title-1 { font-size: 2rem; }
    .hero-title-2 { font-size: 1.625rem; }
  }
  @media (min-width: 640px) {
    .hero-title-1 { font-size: 2.25rem; }
    .hero-title-2 { font-size: 1.875rem; }
  }
  @media (min-width: 768px) {
    .hero-title-1 { font-size: 2.5rem; }
    .hero-title-2 { font-size: 2.0625rem; }
  }
  @media (min-width: 1024px) {
    .hero-title-1 { font-size: 2.375rem; }
    .hero-title-2 { font-size: 2rem; }
  }
  @media (min-width: 1280px) {
    .hero-title-1 { font-size: 3.0625rem; }
    .hero-title-2 { font-size: 2.5625rem; }
  }
  .hero-gradient {
    background: linear-gradient(90deg, #2563EB, #00D4FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .bg-mesh {
    background:
      radial-gradient(ellipse 70% 55% at 15% -5%, rgba(37, 99, 235, 0.30), transparent 60%),
      radial-gradient(ellipse 55% 45% at 105% 20%, rgba(0, 212, 255, 0.14), transparent 60%),
      radial-gradient(ellipse 50% 40% at -5% 95%, rgba(37, 99, 235, 0.18), transparent 60%),
      #050B18;
  }

  /* Fitas onduladas decorativas (remetem à identidade visual) */
  .wave-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .wave-layer svg { width: 100%; height: 100%; }

  #planet-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
  }
  #planet-canvas:active { cursor: grabbing; }
  .canvas-wrapper { position: relative; }

  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #050B18; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(#2563EB, #00D4FF); border-radius: 10px; }

  .divider-line {
    height: 3px;
    width: 56px;
    background: linear-gradient(90deg, #2563EB, #00D4FF);
    border-radius: 4px;
  }

  .service-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }
  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px -15px rgba(0, 212, 255, 0.28);
    border-color: rgba(0, 212, 255, 0.45);
  }

  /* Ícones dos cards de Serviços: flutuação contínua + reação no hover */
  .service-icon-wrap {
    display: inline-flex;
    animation: service-icon-float 5s ease-in-out infinite;
  }
  @keyframes service-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }
  .service-icon {
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  }
  .service-card:hover .service-icon {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 10px 25px -5px rgba(0, 212, 255, 0.5);
  }

  /* Reveal-on-scroll (usado nos cards de Diferenciais) */
  .reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
  }
  .reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  .btn-glow { box-shadow: 0 0 0 rgba(0, 212, 255, 0); transition: box-shadow .4s ease, transform .3s ease; }
  .btn-glow:hover { box-shadow: 0 0 45px rgba(0, 212, 255, 0.55); transform: translateY(-2px); }

  /* Feixe de luz atravessando o badge de destaque */
  .badge-beam { position: relative; overflow: hidden; isolation: isolate; }
  .badge-beam::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0.55) 50%, rgba(0,212,255,0.35) 60%, rgba(255,255,255,0) 85%, transparent 100%);
    transform: skewX(-20deg);
    animation: badge-beam-sweep 4.5s ease-in-out infinite;
    animation-delay: 1s;
    pointer-events: none;
  }
  @keyframes badge-beam-sweep {
    0% { left: -60%; }
    75%, 100% { left: 140%; }
  }

  .whatsapp-float { animation: pulse-wa 2.4s infinite; }
  @keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5); }
    70% { box-shadow: 0 0 0 18px rgba(0, 212, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
  }

  .loader-dot { animation: loader-blink 1.4s infinite ease-in-out both; }
  .loader-dot:nth-child(1) { animation-delay: -0.32s; }
  .loader-dot:nth-child(2) { animation-delay: -0.16s; }
  @keyframes loader-blink {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
    40% { opacity: 1; transform: scale(1); }
  }

  .nav-link { position: relative; }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0%; height: 2px;
    background: linear-gradient(90deg, #2563EB, #00D4FF);
    transition: width .3s ease;
  }
  .nav-link:hover::after { width: 100%; }

  .step-num {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, rgba(0,212,255,0.5), rgba(37,99,235,0.05));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 0 rgba(0, 212, 255, 0));
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), filter .4s ease;
  }
  .step-num:hover {
    transform: translateY(-14px);
    filter: drop-shadow(0 12px 22px rgba(0, 212, 255, 0.75));
  }

  /* Marquee de serviços com rolagem infinita */
  .marquee-mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .marquee-track {
    animation: marquee-scroll 30s linear infinite;
  }
  .marquee-mask:hover .marquee-track {
    animation-play-state: paused;
  }
  @keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Carrossel de Diferenciais: entrada do conteúdo do slide ativo */
  .diff-slide { position: relative; opacity: 0.35; }
  .diff-slide.is-active { opacity: 1; }
  .diff-slide > * { position: relative; z-index: 1; }

  /* Ícone do carrossel: efeito de vidro (glassmorphism) + flutuação contínua */
  .diff-icon-wrap {
    display: inline-flex;
    animation: diff-icon-float 3.6s ease-in-out infinite;
  }
  .diff-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(0, 212, 255, 0.45));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -6px 12px rgba(0, 0, 0, 0.12),
      0 12px 28px -10px rgba(0, 212, 255, 0.5);
  }
  @keyframes diff-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }

  /* Textura de fundo com ar de circuito/tecnologia, discreta, atrás do conteúdo */
  .diff-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 50% 8%, rgba(0, 212, 255, 0.22), transparent 55%),
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 26px 26px, 26px 26px;
    background-position: center, center, center;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, black 45%, transparent 85%);
    mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, black 45%, transparent 85%);
  }

  /* Textura minimalista de tecnologia/fluxo para seções de fundo escuro (Serviços, Processo) */
  .tech-mesh { position: relative; }
  .tech-mesh::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 8% 12%, rgba(0, 212, 255, 0.10), transparent 40%),
      radial-gradient(circle at 92% 88%, rgba(37, 99, 235, 0.12), transparent 40%),
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 34px 34px, 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 35%, transparent 92%);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 35%, transparent 92%);
  }

  /* Pequenos nós pulsantes, remetendo a pontos de dados/fluxo tecnológico */
  .tech-node {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: #00D4FF;
    box-shadow: 0 0 12px 2px rgba(0, 212, 255, 0.55);
    animation: tech-node-pulse 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes tech-node-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.75); }
    50% { opacity: 1; transform: scale(1.35); }
  }

  /* Linha fina conectando dois nós no canto, sugerindo fluxo de dados */
  .tech-thread {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.35), transparent);
    pointer-events: none;
    z-index: 0;
  }

  /* Pontos flutuantes minimalistas (usados na seção Sobre) */
  .float-dot {
    position: absolute;
    border-radius: 9999px;
    background: #00D4FF;
    pointer-events: none;
    z-index: -1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  @keyframes dot-drift-a {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(12px, -16px); }
  }
  @keyframes dot-drift-b {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-14px, 10px); }
  }
  @keyframes dot-drift-c {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(9px, 14px); }
  }

  .diff-pop-icon {
    animation: diff-icon-in .6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .diff-pop-text {
    animation: diff-text-in .5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes diff-icon-in {
    0% { opacity: 0; transform: scale(.5) rotate(-10deg); }
    70% { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  @keyframes diff-text-in {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  #diff-progress { width: 0%; }
  #diff-progress.is-filling { animation: diff-progress-fill 5s linear forwards; }
  @keyframes diff-progress-fill {
    0% { width: 0%; }
    100% { width: 100%; }
  }

  /* Fio conectando as etapas (seção Como Trabalhamos) com brilho em movimento */
  .processo-line {
    background-image: linear-gradient(90deg, rgba(37,99,235,0.25), rgba(37,99,235,0.25)),
      linear-gradient(90deg, transparent, #00D4FF 45%, #ffffff 50%, #00D4FF 55%, transparent);
    background-size: 100% 100%, 45% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, -45% 0;
    animation: processo-line-flow 3.2s linear infinite;
  }
  @keyframes processo-line-flow {
    0% { background-position: 0 0, -45% 0; }
    100% { background-position: 0 0, 145% 0; }
  }

  /* Fio vertical conectando os pilares (seção Ideias em Movimento) com brilho em movimento */
  .pilar-line {
    background-image: linear-gradient(180deg, rgba(37,99,235,0.25), rgba(37,99,235,0.25)),
      linear-gradient(180deg, transparent, #00D4FF 45%, #ffffff 50%, #00D4FF 55%, transparent);
    background-size: 100% 100%, 100% 45%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 -45%;
    animation: pilar-line-flow 3.6s linear infinite;
  }
  @keyframes pilar-line-flow {
    0% { background-position: 0 0, 0 -45%; }
    100% { background-position: 0 0, 0 145%; }
  }
  .pilar-item {
    transition: transform .35s ease;
  }
  .pilar-item:hover {
    transform: translateX(4px);
  }
  .pilar-dot {
    transition: box-shadow .35s ease, background-color .35s ease;
  }
  .pilar-item:hover .pilar-dot {
    box-shadow: 0 0 12px 2px rgba(0, 212, 255, 0.7);
  }

  /* Fio no topo do rodapé com brilho em movimento */
  .footer-line {
    background-image: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(0,212,255,0.15)),
      linear-gradient(90deg, transparent, #00D4FF 45%, #ffffff 50%, #00D4FF 55%, transparent);
    background-size: 100% 100%, 35% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, -35% 0;
    animation: footer-line-flow 5s linear infinite;
  }
  @keyframes footer-line-flow {
    0% { background-position: 0 0, -35% 0; }
    100% { background-position: 0 0, 135% 0; }
  }

  .footer-social-icon {
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .footer-social-link:hover .footer-social-icon {
    transform: scale(1.15) rotate(-6deg);
  }

  @media (max-width: 768px) {
    #planet-canvas { touch-action: pan-y; }
  }