/* ==========================================================================
   Gradiente animado — bloco de primeira impressão (Hero + tira de confiança
   + Fundador). Independente do tema claro/escuro do resto do site: esses
   3 módulos sempre usam este fundo escuro em movimento, com texto claro por
   cima, pra garantir contraste alto e uma abertura de impacto — inspirado em
   https://spell.sh/docs/animated-gradient, recriado em CSS puro (sem WebGL/
   React) pra manter o site 100% estático, sem build.
   ========================================================================== */

.intro-gradient {
  position: relative;
  isolation: isolate;
  background: linear-gradient(
    120deg,
    #161F30 0%,
    #1D2A44 22%,
    #243252 45%,
    #2E3B5C 60%,
    #1D2A44 78%,
    #161F30 100%
  );
  background-size: 320% 320%;
  animation: introGradientMove 22s ease-in-out infinite;
}

@keyframes introGradientMove {
  0%   { background-position: 0% 45%; }
  50%  { background-position: 100% 55%; }
  100% { background-position: 0% 45%; }
}

/* Textura sutil por cima do gradiente (ruído leve + vinheta), só pra dar
   profundidade sem atrapalhar a legibilidade do texto. */
.intro-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(201,166,103,0.10), transparent 70%),
    radial-gradient(50% 45% at 85% 75%, rgba(247,245,240,0.06), transparent 70%);
}

.intro-gradient > * {
  position: relative;
  z-index: 1;
}

/* Contraste garantido independente do tema claro/escuro escolhido pelo
   visitante — dentro deste bloco o texto é sempre claro. */
.intro-gradient,
.intro-gradient h1,
.intro-gradient h2,
.intro-gradient h3,
.intro-gradient p,
.intro-gradient .name,
.intro-gradient .stat-label,
.intro-gradient .founder-credentials {
  color: #F7F5F0;
}

.intro-gradient .eyebrow,
.intro-gradient .lead,
.intro-gradient .role,
.intro-gradient .bio,
.intro-gradient .text-muted {
  color: #D7DCE8;
}

.intro-gradient .eyebrow {
  color: #C9A667;
}

.intro-gradient .btn-ghost {
  border-color: rgba(247,245,240,0.35);
  color: #F7F5F0;
}
.intro-gradient .btn-ghost:hover {
  border-color: #F7F5F0;
}

.intro-gradient .stat-num {
  color: #C9A667;
}

.intro-gradient .hero-star svg,
.intro-gradient .cursor-star svg {
  color: #C9A667;
}

/* Fundo do trust-strip fica transparente aqui dentro — herda o gradiente do
   wrapper em vez do fundo padrão do tema. */
.intro-gradient .trust-strip {
  background: transparent;
  border-top: 1px solid rgba(247,245,240,0.12);
  border-bottom: 1px solid rgba(247,245,240,0.12);
}
.intro-gradient .trust-track span {
  color: #D7DCE8;
}

/* Fallback da foto do fundador (ícone da marca) — mantém contraste sobre o
   gradiente mesmo se nenhuma foto for cadastrada. */
.intro-gradient .founder-photo-fallback {
  background: rgba(247,245,240,0.06);
  border: 1px solid rgba(247,245,240,0.14);
}

@media (prefers-reduced-motion: reduce) {
  .intro-gradient {
    animation: none;
    background-position: 30% 50%;
  }
}