html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; }
  h1, h2, h3, h4, .font-heading { font-family: 'Poppins', sans-serif; }

  /* ---- Logo oficial Technotel embutida no proprio arquivo ----
     Fica em um unico lugar (variavel CSS) e e reaproveitada no menu,
     na secao Sobre e no rodape. Como esta embutida, a logo aparece
     mesmo abrindo o index.html solto, sem a pasta assets/. */
  :root { --logo-technotel: url("../img/logo-technotel.jpg"); }
  .logo-mark {
    display: inline-block;
    aspect-ratio: 530 / 377;
    background-image: var(--logo-technotel);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* a logo oficial tem fundo preto: 'lighten' funde esse preto com o fundo
       escuro do site, eliminando o retângulo em volta da marca */
    mix-blend-mode: lighten;
  }

  /* Animação de revelação ao rolar a página */
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal-visible { opacity: 1; transform: translateY(0); }

  /* Fundo com efeito de "fibra óptica" (pontos de luz) na Hero */
  .fiber-bg {
    background-image:
      radial-gradient(circle at 15% 20%, rgba(225,6,0,0.25) 0, transparent 35%),
      radial-gradient(circle at 85% 15%, rgba(255,59,48,0.18) 0, transparent 30%),
      radial-gradient(circle at 50% 85%, rgba(225,6,0,0.15) 0, transparent 40%);
  }

  /* Scrollbar customizada */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #0A0A0A; }
  ::-webkit-scrollbar-thumb { background: #E10600; border-radius: 10px; }

  /* ---- Camada de mídia da Hero (vídeo/imagem gerada na Higgsfield) ----
     O arquivo é opcional: enquanto não existir, a camada permanece invisível
     e a Hero mantém o fundo preto com as partículas. */
  .hero-media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .hero-media video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transform: scale(1.06);
    opacity: 0; transition: opacity 1.8s ease;
    filter: saturate(1.15) contrast(1.05);
  }
  .hero-media.is-ready video { opacity: .45; }
  /* Véu escuro por cima da mídia, para o texto continuar legível */
  .hero-media::after {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(10,10,10,.25) 0%, rgba(10,10,10,.78) 65%, rgba(10,10,10,.96) 100%),
      linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.35) 30%, rgba(10,10,10,.45) 65%, rgba(10,10,10,.95) 100%);
  }

  /* Palco onde a logo se materializa (transparente: apenas reserva o espaço) */
  #logoStage { position: relative; }
  #logoFallback { transition: opacity .8s ease; }
  #fiberCanvas { pointer-events: none; }

  .logo-hint { letter-spacing: .18em; }
  #replayLogo svg { transition: transform .6s ease; }
  #replayLogo:hover svg { transform: rotate(-180deg); }

  /* Linha decorativa sob títulos de seção */
  .title-underline::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: #E10600;
    margin-top: 14px;
    border-radius: 4px;
  }
  .title-underline.center::after { margin-left: auto; margin-right: auto; }