/* ============================================================================
   STATEMENT — seção minimalista (estilo Google Gemini / Google AI).
   ----------------------------------------------------------------------------
   Um único bloco de texto grande, peso 400, alinhado à esquerda, com muito
   espaço em branco e um cursor colorido (gradiente Google) piscando no fim.
   Sem cards, imagens, ícones, linhas ou sombras. Escopo 100% em .stmt*.
   ========================================================================== */

.stmt {
    width: 100%;
    box-sizing: border-box;
    background: var(--page-background);                 /* exatamente igual ao restante (Hero) */
    padding: clamp(112px, 17vh, 200px) clamp(24px, 4vw, 64px);    /* respiro; à ESQUERDA fica a margem do bloco */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.stmt-inner {
    max-width: 1360px;
    margin: 0;                                          /* ENCOSTADO à esquerda (não centralizado) */
    /* Duas colunas (estilo Antigravity): ESQUERDA = título · DIREITA = descrição. */
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 140px;                                        /* espaço horizontal entre as colunas (~3,7 cm) */
    align-items: start;
}

/* ------- coluna DIREITA: texto descritivo menor ------- */
.stmt-aside {
    margin: 0;
    /* posição vertical atual (~metade do título) + descida de 150px (~4 cm) */
    margin-top: calc(clamp(40px, 3.7vw, 56px) + 150px);
    max-width: 520px;
    font-weight: 400;
    font-size: clamp(24px, 2.1vw, 32px);               /* 28–32px no desktop */
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: #555555;
    text-align: left;
    overflow-wrap: break-word;
    /* deslocamento HORIZONTAL de 150px para a direita (não altera largura/quebra) */
    --shift: 150px;
    transform: translateX(var(--shift));
}

.stmt-text {
    margin: 0;
    font-weight: 400;                                   /* peso inalterado (light) */
    /* Título grande porém elegante (~54px no desktop, máx 56px), container estreito à esquerda. */
    font-size: clamp(40px, 3.75vw, 56px);
    line-height: 1.0;                                   /* linhas bem compactas (0.95–1.0) */
    letter-spacing: -0.02em;
    color: #171717;
    text-align: left;                                   /* alinhado à esquerda */
    overflow-wrap: break-word;
}

/* Cursor colorido (efeito Gemini) — gradiente azul/verde/amarelo/vermelho, glow, piscando. */
.stmt-cursor {
    display: inline-block;
    width: 4px;
    height: 0.84em;                                     /* ~altura da linha do texto */
    margin-left: 0.12em;
    vertical-align: -0.06em;
    border-radius: 2px;
    background: linear-gradient(180deg, #4285F4 0%, #34A853 36%, #FBBC05 68%, #EA4335 100%);
    box-shadow: 0 0 10px rgba(66, 133, 244, .55),
                0 0 18px rgba(52, 168, 83, .32),
                0 0 22px rgba(234, 67, 53, .22);        /* leve glow multicolor */
    animation: stmt-blink 1.15s ease-in-out infinite;  /* pisca suavemente, contínuo */
    will-change: opacity;
}
@keyframes stmt-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.12; }
}

/* ---- Entrada por scroll (fade + translateY 20px) ---- */
/* Só oculta quando o JS marca .stmt-ready → degrada sem JS e respeita reduced-motion. */
/* título: fade + translateY */
.stmt.stmt-ready .stmt-text { opacity: 0; transform: translateY(20px); }
.stmt.stmt-ready.is-in .stmt-text {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
/* descrição: reveal mantém o deslocamento horizontal (--shift) do bloco */
.stmt.stmt-ready .stmt-aside { opacity: 0; transform: translate(var(--shift), 20px); }
.stmt.stmt-ready.is-in .stmt-aside {
    opacity: 1;
    transform: translateX(var(--shift));
    transition: opacity .8s ease .08s, transform .8s cubic-bezier(.22, .61, .36, 1) .08s;
}

@media (prefers-reduced-motion: reduce) {
    .stmt.stmt-ready .stmt-text { opacity: 1; transform: none; }
    .stmt.stmt-ready .stmt-aside { opacity: 1; transform: translateX(var(--shift)); }
    .stmt-cursor { animation: none; }
}

/* =============================== RESPONSIVO ============================= */
/* Abaixo de ~1024px as colunas EMPILHAM (título em cima, descrição embaixo). */
@media (max-width: 1024px) {
    .stmt-inner { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 56px); max-width: 780px; }
    .stmt-aside { margin-top: 0; max-width: 640px; --shift: 0px; }  /* empilhado: sem descida e sem deslocamento H */
}
@media (max-width: 820px) {
    .stmt { padding: clamp(80px, 13vh, 140px) clamp(24px, 4vw, 40px); }
    .stmt-inner { max-width: 100%; }
    .stmt-text { font-size: clamp(32px, 5.4vw, 48px); }
    .stmt-aside { font-size: clamp(20px, 3.4vw, 26px); }
}
@media (max-width: 480px) {
    .stmt { padding: 64px 20px; }
    .stmt-text { font-size: clamp(28px, 8vw, 38px); }
}