/* =====================================================================
   IA Descomplicada — Landing de lançamento (alta conversão)
   Hero dramático + faixa + formulário colorido · Mobile First
   ===================================================================== */

:root {
    --roxo: #6C3BFF;
    --azul: #4F8CFF;
    --ciano: #22D3EE;
    --verde: #19C37D;
    --dark: #0E0A26;
    --dark2: #171036;
    --preto: #1F2937;
    --branco: #FFFFFF;
    --cinza: #F5F7FA;
    --muted: #6B7280;
    --line: #E8EBF2;

    --grad: linear-gradient(135deg, #6C3BFF 0%, #4F8CFF 100%);
    --grad-cyan: linear-gradient(135deg, #22D3EE 0%, #4F8CFF 100%);
    --grad-green: linear-gradient(135deg, #19C37D 0%, #12A567 100%);

    --maxw: 1180px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --head: "Plus Jakarta Sans", var(--font);
    --display: "Anton", "Arial Narrow", sans-serif;
    --cursive: "Caveat", cursive;

    --radius: 16px;
    --radius-lg: 24px;
    --pill: 999px;
    --shadow: 0 18px 44px rgba(31, 41, 55, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body { font-family: var(--font); color: var(--preto); background: var(--branco); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* ícones inline acompanham o texto */
.i { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; }

/* =========================== BOTÕES =========================== */
.btn {
    --py: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--head); font-weight: 800; font-size: 1rem;
    padding: var(--py) 26px; border: none; border-radius: var(--pill);
    cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; white-space: nowrap;
    line-height: 1.1; max-width: 100%;
}
.btn .i { width: 1.15em; height: 1.15em; }
.btn--sm { --py: 10px; padding-inline: 18px; font-size: .92rem; }
.btn--lg { --py: 18px; font-size: 1.1rem; padding-inline: 34px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 14px 30px rgba(108, 59, 255, .4); }
.btn--cyan    { background: var(--grad-cyan); color: #06283d; box-shadow: 0 14px 30px rgba(34, 211, 238, .4); }
.btn--success { background: var(--grad-green); color: #fff; box-shadow: 0 14px 30px rgba(25, 195, 125, .42); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.5);} 70%{ box-shadow: 0 0 0 14px rgba(255,255,255,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0);} }
.btn--pulse { animation: pulse 2.2s infinite; }

/* =========================== TOPBAR =========================== */
.topbar { background: var(--grad); color: #fff; text-align: center; font-size: .85rem; padding: 9px 16px; position: relative; z-index: 30; }
.topbar__text { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.topbar .i { color: #ffd76a; }
.topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 800; background: rgba(255,255,255,.2); padding: 2px 9px; border-radius: 6px; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* =========================== HERO =========================== */
.hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: 70% center; z-index: -2; transform: scale(1.02); }
.hero__bg--mobile { display: none; }
.hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 90% at 80% 10%, rgba(34,211,238,.18), transparent 55%),
        radial-gradient(120% 90% at 0% 100%, rgba(108,59,255,.55), transparent 60%),
        linear-gradient(100deg, rgba(14,10,38,.97) 0%, rgba(14,10,38,.86) 34%, rgba(20,14,58,.55) 62%, rgba(14,10,38,.25) 100%);
}

/* navbar dentro do hero */
.nav { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 10px; position: relative; z-index: 5; }
.brand { font-family: var(--head); font-weight: 800; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.brand__icon { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: var(--grad); color: #fff; }
.brand span { background: linear-gradient(90deg,#fff,#d9e4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.hero__content { position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 30px; padding-bottom: 60px; }

.badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(6px); font-weight: 600; font-size: .82rem; padding: 8px 15px; border-radius: var(--pill); }
.badge .i { color: var(--ciano); }

.display { display: flex; flex-direction: column; color: #fff; text-transform: uppercase; margin: 20px 0 18px; line-height: .9; }
.display__eyebrow { font-family: var(--head); font-weight: 800; font-size: clamp(.85rem, 2.4vw, 1.15rem); letter-spacing: .14em; color: var(--ciano); margin-bottom: 10px; text-shadow: 0 0 22px rgba(34,211,238,.5); }
.display__line { font-family: var(--display); font-weight: 400; font-size: clamp(2.9rem, 9vw, 5.6rem); letter-spacing: .01em; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.display .outline { color: transparent; -webkit-text-stroke: 2px var(--ciano); text-stroke: 2px var(--ciano); }

.hero__sub { color: rgba(255,255,255,.86); font-size: clamp(1rem, 2.6vw, 1.18rem); max-width: 560px; margin-bottom: 28px; }
.hero__sub strong { color: #fff; }

.hero__actions { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.proof { display: flex; align-items: center; gap: 12px; }
.proof__avatars { display: flex; }
.proof__avatars span {
    width: 38px; height: 38px; margin-left: -12px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--head); font-size: .9rem;
    border: 2px solid rgba(255,255,255,.85);
    background: linear-gradient(135deg, hsl(calc(255 - var(--i) * 30), 90%, 62%), hsl(calc(210 - var(--i) * 30), 90%, 60%));
}
.proof__avatars span:first-child { margin-left: 0; }
.proof__text { color: rgba(255,255,255,.9); font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.proof__text .i { color: var(--ciano); }
.proof__text strong { color: #fff; }

.hero__sign { position: absolute; right: 26px; bottom: 22px; z-index: 5; font-family: var(--cursive); font-size: 2rem; color: rgba(255,255,255,.92); transform: rotate(-6deg); text-shadow: 0 2px 16px rgba(0,0,0,.4); pointer-events: none; }

/* =========================== CONVERSÃO (pitch) =========================== */
.pitch { background: linear-gradient(160deg, #6C3BFF 0%, #5566ff 50%, #4F8CFF 100%); position: relative; }
.pitch__banner {
    background: rgba(0,0,0,.18); color: #fff; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(.78rem, 2.2vw, 1rem); padding: 16px 18px;
}
.pitch__banner span { display: inline-flex; align-items: center; gap: 7px; }
.pitch__banner .i { color: var(--ciano); }
.pitch__banner .hot { color: var(--ciano); text-shadow: 0 0 18px rgba(34,211,238,.6); }
.pitch__banner .sep { opacity: .4; }

.pitch__inner { padding: 48px 22px 64px; text-align: center; color: #fff; }
.pitch__title { font-family: var(--head); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.12; }
.pitch__sub { color: rgba(255,255,255,.9); font-size: 1.05rem; margin: 12px auto 30px; max-width: 520px; }
.pitch__sub strong { color: #fff; }

.form-shell { max-width: 540px; margin-inline: auto; text-align: left; }

.scarcity { margin-bottom: 18px; }
.scarcity__head { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: rgba(255,255,255,.9); margin-bottom: 8px; }
.scarcity__head span { display: inline-flex; align-items: center; gap: 6px; }
.scarcity__head strong { color: #fff; font-size: 1rem; }
.scarcity__bar { height: 10px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.scarcity__bar span { display: block; height: 100%; width: var(--p, 80%); border-radius: 999px; background: linear-gradient(90deg, #ffd76a, var(--ciano)); box-shadow: 0 0 14px rgba(34,211,238,.7); transition: width 1.2s ease; }

.lead-form { display: grid; gap: 13px; }
.field input {
    width: 100%; font-size: 1.05rem; font-family: var(--font);
    padding: 17px 20px; border: 2px solid transparent; border-radius: 14px;
    background: #fff; color: var(--preto); box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #9aa3b2; }
.field input:focus { outline: none; border-color: var(--ciano); box-shadow: 0 0 0 4px rgba(34,211,238,.3); }
.field input.invalid { border-color: #ff5a5a; box-shadow: 0 0 0 4px rgba(255,90,90,.28); }

.consent { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.92); font-size: .82rem; line-height: 1.45; cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ciano); cursor: pointer; }
.consent.invalid span { color: #ffe08a; }

.form-msg { font-size: .9rem; min-height: 0; text-align: center; color: #fff; font-weight: 600; }
.form-msg.error { color: #ffdada; }
.form-msg.success { color: #c7ffe6; }

.btn--success { margin-top: 4px; }

.trust { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; color: rgba(255,255,255,.85); font-size: .82rem; margin-top: 6px; }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust .i { color: var(--ciano); }

/* =========================== FEATURES =========================== */
.features { padding: 78px 0; background: var(--branco); text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--roxo); background: rgba(108,59,255,.1); padding: 7px 15px; border-radius: var(--pill); }
.eyebrow .i { color: var(--roxo); }
.section-title { font-family: var(--head); font-size: clamp(1.7rem, 4.6vw, 2.5rem); font-weight: 800; margin: 16px auto 44px; max-width: 640px; }

.features__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.feature-card { background: var(--branco); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 28px; text-align: left; box-shadow: 0 6px 18px rgba(31,41,55,.05); transition: transform .25s, box-shadow .25s, border-color .25s; }
.feature-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(108,59,255,.35); }
.feature-card__icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 18px; box-shadow: 0 10px 22px rgba(108,59,255,.35); }
.feature-card__icon svg { width: 30px; height: 30px; }
.feature-card h3 { font-family: var(--head); font-size: 1.22rem; margin-bottom: 9px; }
.feature-card p { color: var(--muted); font-size: .97rem; }

.checks { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 560px; margin: 44px auto 0; text-align: left; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.checks .i { color: #fff; background: var(--grad-green); border-radius: 50%; padding: 4px; width: 26px; height: 26px; flex: none; box-shadow: 0 4px 10px rgba(25,195,125,.4); }

.features__cta { margin-top: 40px; }

/* =========================== FOOTER =========================== */
.footer { background: var(--dark); color: #fff; padding: 34px 0; }
.footer__inner { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.brand--light span { -webkit-text-fill-color: #fff; color: #fff; background: none; }
.footer p { color: rgba(255,255,255,.55); font-size: .85rem; }

/* =========================== CTA FIXO (mobile) =========================== */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(14,10,38,.92); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.12); display: none; }

/* =========================== TOASTS =========================== */
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 35; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-right: 4px solid var(--verde); border-radius: 12px; padding: 11px 15px; box-shadow: var(--shadow); font-size: .85rem; max-width: 300px; animation: toastIn .4s ease, toastOut .4s ease 4.6s forwards; }
.toast__ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(25,195,125,.14); color: var(--verde); display: grid; place-items: center; flex: none; }
.toast__ic svg { width: 18px; height: 18px; }
.toast b { font-weight: 700; }
.toast small { color: var(--muted); display: block; font-size: .74rem; }
@keyframes toastIn { from{opacity:0; transform: translateX(110%);} to{opacity:1; transform: translateX(0);} }
@keyframes toastOut { to{opacity:0; transform: translateX(110%);} }

/* =========================== REVEAL =========================== */
[data-animate] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
[data-animate].is-visible { opacity: 1; transform: none; }

/* =========================== RESPONSIVO =========================== */
@media (min-width: 880px) {
    .features__grid { grid-template-columns: repeat(3, 1fr); }
    .checks { grid-template-columns: 1fr 1fr; }
    /* texto do hero alinhado à esquerda (estilo lançamento) */
    .hero__content { max-width: none; margin: 0; padding-left: clamp(44px, 7vw, 140px); padding-right: 40px; padding-bottom: 80px; }
    .hero__content > * { max-width: 600px; }
    .hero__content .display { max-width: 760px; }
}

@media (max-width: 879px) {
    .mobile-cta { display: block; }
    body { padding-bottom: 84px; }
    .nav .btn--cyan { display: none; }
    .hero { min-height: auto; }

    /* fundo dedicado para celular (imagem vertical) */
    .hero__bg--desktop { display: none; }
    .hero__bg--mobile { display: block; background-position: center 26%; }

    .hero__content { padding-top: 26px; padding-bottom: 54px; min-height: 76vh; }
    .hero__sign { font-size: 1.5rem; right: 16px; bottom: 12px; }

    /* botões ocupam a largura e quebram texto em vez de estourar */
    .hero__actions { align-self: stretch; }
    .hero__actions .btn, .features__cta .btn { width: 100%; }
    .btn--lg, .btn--block { white-space: normal; }

    /* toasts acima do CTA fixo, sem colidir */
    .toast-wrap { left: auto; right: 12px; bottom: 92px; }
    .toast { max-width: 88vw; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    [data-animate] { opacity: 1; transform: none; }
}