/* ==========================================================================
   Kontaê — Landing de lançamento
   Direção visual v3 ("do escuro pra luz"), alinhada aos tokens do sistema.
   ========================================================================== */

/* Fontes self-hosted (subset latino, cobre acentos do pt-BR) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plusjakarta-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plusjakarta-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plusjakarta-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plusjakarta-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/plusjakarta-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibmplex-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibmplex-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibmplex-600.woff2) format('woff2')}

:root{
  /* MARCA */
  --brand:#1D6FA4; --brand-deep:#195F8C; --brand-tint:rgba(29,111,164,.10); --gold:#F5AB18;
  /* ESCURO — tokens exatos do dark mode do app (slate) */
  --d-bg:#020617; --d-surface:#0F172A; --d-surface2:#162236; --d-line:#1E293B; --d-line2:#2B3B53;
  --d-ink:#F1F5F9; --d-muted:#94A3B8; --d-faint:#7C8A9C; --d-pos:#34D399; --d-neg:#FB7185;
  /* CLARO — tokens exatos do light mode do app */
  --l-canvas:#F6F8FB; --l-surface:#FFFFFF; --l-surface2:#F1F5F9; --l-line:#E6EBF1;
  --l-ink:#0F172A; --l-muted:#475569; --l-faint:#8A97A6; --l-pos:#047857; --l-neg:#E11D48;
  --feature-grad:linear-gradient(160deg,#E0EDF7,#F2F8FC); --feature-border:rgba(29,111,164,.34);
  /* fontes */
  --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* ritmo */
  --sec:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--l-ink);background:var(--d-bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em;line-height:1.05}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* revelação ao rolar — só esconde quando o JS está presente (sem JS, tudo aparece) */
.reveal{transition:opacity .5s ease,transform .5s ease}
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* foco de teclado visível (acessibilidade) */
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.dark a:focus-visible,.dark button:focus-visible,.turn a:focus-visible,
.invite a:focus-visible,.foot a:focus-visible{outline-color:var(--gold)}

/* temas por seção — componentes usam vars genéricas */
.dark{--bg:var(--d-bg);--surface:var(--d-surface);--surface2:var(--d-surface2);--line:var(--d-line);--ink:var(--d-ink);--muted:var(--d-muted);--faint:var(--d-faint);--pos:var(--d-pos);--neg:var(--d-neg);background:var(--bg);color:var(--ink)}
.light{--bg:var(--l-canvas);--surface:var(--l-surface);--surface2:var(--l-surface2);--line:var(--l-line);--ink:var(--l-ink);--muted:var(--l-muted);--faint:var(--l-faint);--pos:var(--l-pos);--neg:var(--l-neg);background:var(--bg);color:var(--ink)}

.eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.dark .eyebrow{color:var(--gold)}
.sec{padding:var(--sec) 0}
.sec h2{font-size:clamp(28px,6vw,44px);color:var(--ink);max-width:22ch;margin-top:16px}
.sec .lead{font-size:clamp(17px,2.4vw,19px);color:var(--muted);max-width:52ch;margin-top:20px}

/* CTA whatsapp */
.wa{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#3a2500;font-weight:800;font-size:17px;padding:17px 28px;border-radius:14px;text-decoration:none;box-shadow:0 16px 34px -14px rgba(245,171,24,.55);transition:transform .15s}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:20px;height:20px;fill:#3a2500}
.wa.lg{font-size:18px;padding:19px 34px}

/* NAV */
.nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:26px 24px;max-width:1120px;margin:0 auto}
.nav img{height:40px;display:block}

/* HERO */
.hero{position:relative;padding:170px 0 110px;background:
    radial-gradient(70% 55% at 82% -5%, rgba(245,171,24,.10), transparent 55%),
    radial-gradient(70% 60% at 5% 0%, rgba(29,111,164,.22), transparent 55%),
    var(--d-bg)}
.hero .eyebrow{margin-bottom:24px}
.hero h1{font-size:clamp(36px,8.5vw,68px);color:var(--d-ink);max-width:15ch}
.hero h1 .lit{color:var(--gold)}
.hero .sub{color:var(--d-muted);font-size:clamp(17px,2.6vw,20px);max-width:46ch;margin:24px 0 36px}
.hero .micro{font-family:var(--mono);color:var(--d-faint);font-size:13px;margin-top:16px}
.hero .hint{margin-top:76px;color:var(--d-faint);font-family:var(--mono);font-size:12px;letter-spacing:.1em;display:flex;align-items:center;gap:12px}
.hero .hint .ln{width:48px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* BAGUNÇA — collage de formatos reais */
.mess h2{font-size:clamp(26px,6vw,40px);color:var(--d-ink);max-width:20ch}
.collage{margin-top:48px;max-width:900px;columns:2;column-gap:22px}
@media(max-width:700px){.collage{columns:1}}
.frag{break-inside:avoid;margin-bottom:22px}
.frag .src{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-faint);margin-bottom:10px;display:block}
.wpp{background:#0b3b2f;border:1px solid #1a5544;border-radius:16px 16px 16px 5px;padding:16px 18px;color:#d7efe4;font-size:16px;line-height:1.45}
.wpp .t{font-family:var(--mono);font-size:11px;color:#5fa88f;margin-top:10px;text-align:right}
.paper{background:#f4eeda;border-radius:10px;padding:20px 22px;color:#4a4326;font-size:17px;line-height:1.9;font-style:italic;transform:rotate(1.2deg);box-shadow:0 24px 44px -22px rgba(0,0,0,.6);background-image:repeating-linear-gradient(180deg,#f4eeda 0,#f4eeda 30px,#e4d9b4 31px)}
.extrato{background:var(--d-surface);border:1px solid var(--d-line);border-radius:14px;padding:16px 18px;font-family:var(--mono);font-size:13px;color:var(--d-muted)}
.extrato .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--d-line)}
.extrato .r:last-of-type{border-bottom:none}
.extrato .pos{color:var(--d-pos)} .extrato .neg{color:var(--d-neg)}
.extrato .note{font-family:var(--sans);font-size:14px;color:var(--d-faint);margin-top:12px;font-style:italic}
.planilha{background:var(--d-surface);border:1px solid var(--d-line);border-radius:12px;overflow:hidden;transform:rotate(-1.2deg);font-family:var(--mono);font-size:13px}
.planilha .g{display:grid;grid-template-columns:40px 1fr 1fr}
.planilha .c{padding:9px 11px;border-right:1px solid var(--d-line);border-bottom:1px solid var(--d-line);color:var(--d-muted)}
.planilha .h{background:rgba(148,163,184,.08);color:var(--d-faint);font-weight:600}
.planilha .err{color:var(--d-neg);font-weight:600}
.thought{background:transparent;border:1px dashed var(--d-line2);border-radius:16px;padding:18px 20px;color:var(--gold);font-size:19px;font-style:italic;line-height:1.5}
.mess .punch{margin-top:48px;font-size:clamp(18px,3vw,22px);color:var(--d-ink);max-width:38ch;font-weight:600;line-height:1.5}
.mess .punch .soft{color:var(--d-muted);font-weight:400}

/* VIRADA */
.turn{position:relative;overflow:hidden;padding:110px 0 130px;background:linear-gradient(180deg,var(--d-bg) 0%,#0a1e33 55%,#12314c 100%)}
.turn .halo{position:absolute;left:50%;top:34%;width:120vw;height:78vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(245,171,24,.20),transparent 70%);pointer-events:none}
.turn .inner{position:relative;text-align:center;max-width:760px;margin:0 auto;padding:0 12px}
.turn h2{font-size:clamp(30px,7.5vw,56px);color:#fff;max-width:16ch;margin:0 auto}
.turn h2 .lit{color:var(--gold)}
.turn .reframe{font-family:var(--mono);font-size:clamp(15px,3.4vw,19px);color:var(--gold);margin:32px auto 0;max-width:34ch}
.turn .stat{margin:56px auto 0;max-width:40ch;font-size:clamp(16px,2.6vw,20px);color:var(--d-muted);line-height:1.6}
.turn .stat b{color:#fff;font-weight:700}
.turn .hope{margin-top:40px;color:var(--d-muted);font-size:17px}

/* A LUZ — spectrum */
.spectrum{margin-top:44px;display:grid;grid-template-columns:1fr;gap:16px;max-width:860px}
@media(min-width:840px){.spectrum{grid-template-columns:1fr 1.15fr 1fr;align-items:stretch}}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.spec.mid{border:2px solid var(--brand);box-shadow:0 24px 48px -28px rgba(29,111,164,.4)}
.spec .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.spec.mid .lbl{color:var(--brand)}
.spec .t{font-weight:700;font-size:19px;margin:8px 0 6px}
.spec .d{color:var(--muted);font-size:16px}

/* PRODUTO */
.product{background:linear-gradient(180deg,#F6F8FB,#EAF1F8)}
.center{text-align:center;max-width:640px;margin:0 auto}
.center h2,.center .lead{margin-left:auto;margin-right:auto}
.shot{margin:48px auto 0;max-width:960px}
.browser{border-radius:14px;overflow:hidden;box-shadow:0 44px 90px -34px rgba(2,6,23,.5);border:1px solid #d5e0ea;background:#fff}
.browser .bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:#eef3f8;border-bottom:1px solid #e6ebf1}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#c8d3df}
.browser .bar .u{margin-left:12px;font-family:var(--mono);font-size:12px;color:#8194a5;background:#fff;border-radius:6px;padding:5px 14px}
.browser img{display:block;width:100%;height:auto}
.proofs{max-width:920px;margin:56px auto 0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media(min-width:720px){.proofs{grid-template-columns:1fr 1fr}}
.proof{background:var(--surface);padding:28px}
.proof .n{font-family:var(--mono);font-size:13px;color:var(--brand);letter-spacing:.06em}
.proof h3{font-size:18px;font-weight:700;margin:12px 0 8px;letter-spacing:-.01em}
.proof p{color:var(--muted);font-size:16px}

/* CONTADOR — a ponte */
.bridge{margin:44px auto 0;max-width:900px;display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media(min-width:760px){.bridge{grid-template-columns:1fr auto 1fr}}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.bcard .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.bcard .t{font-weight:700;font-size:18px;margin-bottom:6px}
.bcard p{color:var(--muted);font-size:16px}
.bcard.you{border-color:var(--feature-border);background:var(--feature-grad)}
.barrow{display:flex;align-items:center;justify-content:center;color:var(--brand);font-family:var(--mono);font-size:12px;letter-spacing:.08em;gap:8px}
.barrow svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.75}
@media(max-width:760px){.barrow{transform:rotate(90deg);margin:2px 0}}
.legal-inline{font-size:14px;color:var(--faint);margin-top:24px;max-width:60ch}

/* NOSSA HISTÓRIA */
.story{background:var(--l-surface)}
.storycard{max-width:900px;margin:0 auto;background:var(--feature-grad);border:1px solid var(--feature-border);border-radius:24px;padding:clamp(28px,5vw,52px)}
.faces{display:flex;gap:18px;margin-bottom:28px}
.face{display:flex;flex-direction:column;align-items:center;gap:8px}
.face .ph{width:72px;height:72px;border-radius:50%;background:var(--brand-tint);border:2px solid var(--brand);display:grid;place-items:center;font-weight:800;font-size:26px;color:var(--brand);overflow:hidden}
.face .ph img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.face .nm{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.story h2{max-width:22ch}
.story p{color:var(--muted);font-size:17px;max-width:60ch;margin-top:18px}
.story .sig{font-family:var(--mono);font-size:13px;color:var(--brand);margin-top:24px}
.story .conta{font-weight:800;color:var(--gold);font-style:normal}

/* PRA QUEM É */
.ramos{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;max-width:760px}
.ramo{font-family:var(--mono);font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:11px 18px}
.safe{display:flex;align-items:center;gap:12px;margin-top:36px;color:var(--muted);font-size:16px;max-width:52ch}
.safe svg{width:22px;height:22px;stroke:var(--pos);fill:none;stroke-width:1.75;flex:none}

/* PLANOS */
.plans .toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:5px;margin:28px auto 0;gap:4px}
.plans .toggle button{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;border:none;background:transparent;color:var(--muted);padding:12px 22px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;transition:.15s}
.plans .toggle button.on{background:var(--brand);color:#fff}
.cards{margin:48px auto 0;max-width:960px;display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:800px){.cards{grid-template-columns:repeat(3,1fr)}.plan{max-width:none;margin-inline:0}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;width:100%;max-width:460px;margin-inline:auto}
.plan.feat{border:2px solid var(--brand);box-shadow:0 30px 60px -34px rgba(29,111,164,.4);position:relative}
.plan.feat .flag{position:absolute;top:-13px;left:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:#3a2500;font-weight:600;padding:5px 13px;border-radius:999px}
.plan .who{font-weight:700;font-size:20px}
.plan .price{margin:16px 0 2px;display:flex;align-items:baseline;gap:6px}
.plan .price .cur{font-family:var(--mono);font-size:17px;color:var(--muted)}
.plan .price .val{font-family:var(--mono);font-weight:600;font-size:40px;letter-spacing:-.02em;color:var(--ink)}
.plan .per{font-family:var(--mono);font-size:14px;color:var(--faint)}
.plan .eq{font-family:var(--mono);font-size:13px;color:var(--pos);margin-top:8px;min-height:18px}
.plan .wa{margin-top:24px;justify-content:center;background:var(--surface2);color:var(--brand);box-shadow:none;border:1px solid var(--line)}
.plan.feat .wa{background:var(--gold);color:#3a2500;border:none;box-shadow:0 14px 28px -12px rgba(245,171,24,.55)}
.plan .wa svg{fill:currentColor}
.plans .honest{text-align:center;font-family:var(--mono);font-size:14px;color:var(--faint);margin-top:28px}
.plans .trial{margin:28px auto 0;max-width:540px;background:rgba(245,171,24,.12);border:1px solid rgba(245,171,24,.55);border-radius:16px;padding:18px 24px;text-align:center}
.plans .trial .big{display:block;font-weight:800;font-size:clamp(19px,3vw,22px);color:var(--ink);letter-spacing:-.01em}
.plans .trial .sm{display:block;font-size:15px;color:var(--muted);margin-top:6px}

/* CONVITE */
.invite{text-align:center;padding:110px 0;background:radial-gradient(80% 60% at 50% 0%,rgba(245,171,24,.10),transparent 60%),var(--d-bg)}
.invite .eyebrow{margin-bottom:20px}
.invite h2{font-size:clamp(30px,7vw,52px);color:#fff;max-width:18ch;margin:0 auto}
.invite p{color:var(--d-muted);font-size:clamp(17px,2.6vw,19px);max-width:46ch;margin:22px auto 36px}
.invite .trialline{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--gold);border:1px solid rgba(245,171,24,.5);border-radius:999px;padding:9px 18px;margin-bottom:26px}
.invite .micro{font-family:var(--mono);color:var(--d-faint);font-size:13px;margin-top:20px}

/* FOOTER */
.foot{background:#020a14;color:var(--d-faint);padding:48px 0;border-top:1px solid var(--d-line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.foot a{color:var(--d-muted);text-decoration:none;font-size:15px}
.foot a:hover{color:var(--d-ink)}
.foot .legal{font-family:var(--mono);font-size:12px;line-height:1.7;color:#4b6379;max-width:54ch}
.foot .conta{font-family:var(--mono);font-size:13px;color:var(--d-faint);margin-top:10px}

/* Polimento mobile: ritmo vertical mais apertado + rodapé empilhado */
@media(max-width:640px){
  :root{--sec:64px}
  .hero{padding:118px 0 76px}
  .turn{padding:74px 0 84px}
  .invite{padding:78px 0}
  .foot .wrap{flex-direction:column;gap:22px}
}