/* ============================================================================
   HERO — Anthares 44 (Home) · reprodução fiel de Referencia.png
   Fundo branco acetinado (seda 3D via SVG) + brilhos azul/rosa perolados.
   Badge → título (cinza + trecho preto) → subtítulo → prompt box → 4 cards.
   Fonte arredondada (Poppins) no título, como na referência. Escopo 100% em .ah*.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.ah {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* altura = conteúdo (badge+título+subtítulo); sem min-height → nada de vão.
       O padding inferior dá o respiro natural até a próxima seção (~80–120px,
       já contando o encaixe da .agx que vem logo abaixo). */
    padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 56px) clamp(96px, 11vh, 132px);
    background: var(--page-background);          /* EXATAMENTE a cor da navbar → bloco contínuo, sem transição */
    color: #16171b;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

/* Fundo do Hero: 100% limpo e uniforme (cor da navbar). Sem camadas de fundo
   (seda/ondas/brilhos/gradientes/véu/etc.) — removidas por completo. */

/* ================================ CENTRO ================================= */
.ah__center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ------------------------------- título ---------------------------------- */
.ah__title {
    margin: 0 auto;                                 /* primeiro elemento do .ah__center */
    max-width: 820px;                               /* ~3 linhas equilibradas, "AI products." ao fim */
    font-family: 'Poppins', 'Inter', sans-serif;   /* arredondada, como a referência */
    font-weight: 500;
    font-size: clamp(2.2rem, 4.7vw, 3.7rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: ah-rise 1s cubic-bezier(.22,.61,.36,1) .16s forwards;
}
.ah__title-soft   { color: #6c6e75; }              /* trecho cinza */
.ah__title-strong { color: #101114; font-weight: 600; }   /* trecho preto (ênfase) */

/* ------------------------------ subtítulo -------------------------------- */
.ah__sub {
    margin: clamp(18px, 2.2vw, 28px) auto 0;
    max-width: 620px;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.004em;
    color: #6a6d76;
    opacity: 0;
    animation: ah-rise 1s cubic-bezier(.22,.61,.36,1) .28s forwards;
}

/* ============================== ANIMAÇÕES ================================= */
@keyframes ah-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =============================== RESPONSIVO ============================== */
@media (max-width: 600px) {
    .ah { padding-top: clamp(108px, 18vh, 150px); }
    .ah__title { font-size: clamp(2.1rem, 9vw, 3rem); }
    .ah__sub { font-size: 1rem; max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .ah__title, .ah__sub { opacity: 1 !important; animation: none !important; }
}