/* Konduti — public site. Tokens copied from servidor/konduti/static/konduti.css (light, and dark by the system). */
:root {
  --fundo: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #f8f9fb;
  --texto: #0f1420;
  --texto-2: #5b6474;
  --texto-3: #8a93a3;
  --borda: #e6e8ec;
  --tinta: #0b0f19;
  --acento: #ff4d4f;
  --sombra: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --raio: 16px;
  --botao-fundo: #0b0f19; --botao-texto: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b0e14; --superficie: #131722; --superficie-2: #181d2a;
    --texto: #eef1f6; --texto-2: #a3abba; --texto-3: #6f788a; --borda: #232938; --tinta: #05070b;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --botao-fundo: #ffffff; --botao-texto: #0b0f19;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased;
  font-size: 16px; line-height: 1.55; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; overflow-x: hidden;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
p { margin: 0; }
.miolo { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.miolo.estreito { max-width: 560px; }
.suave { color: var(--texto-2); }

.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca b { font-size: 22px; letter-spacing: -.02em; }
.logo { flex: none; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px;
  background: var(--botao-fundo); color: var(--botao-texto); font-weight: 600; font-size: 15px; min-height: 44px;
}
.botao:hover { opacity: .88; }
.botao.grande { padding: 12px 28px; font-size: 16px; }
a:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: 6px; }


.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }

.central { display: flex; align-items: center; padding: 32px 0; }
.voltar { margin-bottom: 16px; font-weight: 500; color: var(--texto-2); }
.voltar a:hover { color: var(--texto); }
.entrada { text-align: center; padding: 32px 20px; }
.entrada h1 { font-size: 26px; margin-bottom: 20px; }
.entrada p + p { margin-top: 16px; }

.rodape { border-top: 1px solid var(--borda); padding: 20px 0; color: var(--texto-3); font-size: 14px; }

/* Public home: translucent header, hero, device frames, features, cards. */
:root {
  --raio-grande: 20px;
  --vidro: rgba(255,255,255,.72);
  --moldura: #1d1d1f; --moldura-brilho: #3a3a3d;
  --janela-barra: #eceef2; --janela-borda: #d9dce3;
  --sombra-grande: 0 30px 80px -20px rgba(16,24,40,.35), 0 12px 28px -12px rgba(16,24,40,.25);
}
@media (prefers-color-scheme: dark) {
  :root {
    --vidro: rgba(11,14,20,.72);
    --moldura: #2b2e38; --moldura-brilho: #4a4f5e;
    --janela-barra: #232938; --janela-borda: #323a4d;
    --sombra-grande: 0 30px 80px -20px rgba(0,0,0,.8), 0 12px 28px -12px rgba(0,0,0,.6);
  }
}
.topo {
  position: sticky; top: 0; z-index: 10; background: var(--vidro); border-bottom: 1px solid var(--borda);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
}

.heroi { padding: 72px 0 56px; text-align: center; }
.heroi h1 { font-size: clamp(34px, 7vw, 64px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; max-width: 18ch; margin: 0 auto; }
.lead { margin-top: 20px; font-size: clamp(17px, 2.2vw, 21px); color: var(--texto-2); max-width: 56ch; }
.heroi .lead { margin-left: auto; margin-right: auto; }
.sobretitulo { margin-top: 72px; margin-bottom: 20px; font-size: 15px; font-weight: 600; color: var(--texto-2); letter-spacing: .01em; }

/* Laptop drawn in CSS */
.notebook { width: 100%; max-width: 980px; margin: 0 auto; }
.notebook-tela {
  background: var(--moldura); border-radius: 18px 18px 4px 4px; padding: 10px 10px 12px;
  box-shadow: inset 0 0 0 1px var(--moldura-brilho), var(--sombra-grande);
}
.notebook-tela img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9.6; object-fit: cover; object-position: top;
  border-radius: 6px; background: var(--superficie);
}
.notebook-base {
  width: 108%; margin: 0 -4%; height: 14px; background: linear-gradient(var(--moldura-brilho), var(--moldura));
  border-radius: 2px 2px 16px 16px / 2px 2px 14px 14px; position: relative;
}
.notebook-base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%);
  background: rgba(0,0,0,.35); border-radius: 0 0 8px 8px;
}

/* Feature sections */
.destaque { padding: 72px 0; }
.destaque-in { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.destaque-texto { text-align: center; }
.destaque-texto h2 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.destaque-texto p { margin-top: 16px; font-size: clamp(17px, 2vw, 20px); color: var(--texto-2); max-width: 36ch; margin-left: auto; margin-right: auto; }
.destaque-tela { display: flex; justify-content: center; min-width: 0; }
@media (min-width: 860px) {
  .destaque-in { grid-template-columns: 1fr 1.25fr; gap: 64px; }
  .destaque.inverso .destaque-in { grid-template-columns: 1.25fr 1fr; }
  .destaque.inverso .destaque-texto { order: 2; }
  .destaque-texto { text-align: left; }
  .destaque-texto p { margin-left: 0; margin-right: 0; }
}

/* Browser window drawn in CSS */
.janela {
  width: 100%; max-width: 640px; background: var(--superficie); border: 1px solid var(--janela-borda);
  border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-grande);
}
.janela-barra { display: flex; gap: 7px; padding: 11px 14px; background: var(--janela-barra); border-bottom: 1px solid var(--janela-borda); }
.janela-barra span { width: 11px; height: 11px; border-radius: 50%; background: var(--texto-3); opacity: .55; }
.janela img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Phone drawn in CSS */
.celular {
  position: relative; width: 240px; padding: 9px; background: var(--moldura); border-radius: 40px;
  box-shadow: inset 0 0 0 1px var(--moldura-brilho), var(--sombra-grande);
}
.celular::before {
  content: ""; position: absolute; z-index: 1; top: 19px; left: 50%; width: 30%; height: 9px; transform: translateX(-50%);
  background: #000; border-radius: 99px;
}
/* The top padding is a status-bar strip, so the island does not cover the app header; the
   ratio comes from the width/height attributes ("auto" ratio applies to the content box). */
.celular img { display: block; width: 100%; height: auto; padding-top: 28px; background: #ffffff; border-radius: 32px; }
@media (min-width: 600px) { .celular { width: 280px; padding: 10px; border-radius: 44px; } .celular img { border-radius: 35px; } .celular::before { top: 21px; height: 10px; } }

.legenda { text-align: center; font-size: 13px; color: var(--texto-3); padding-bottom: 16px; }

/* Cards and bands */
.secao { padding: 56px 0 64px; }
.secao h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.03em; margin-bottom: 28px; }
.cartao { background: var(--superficie); border-radius: var(--raio-grande); padding: 24px; box-shadow: var(--sombra); }
.cartao h3 { font-size: 18px; margin-bottom: 8px; }
.cartao p { color: var(--texto-2); font-size: 15px; }
.faixa { background: var(--superficie-2); }
.faixa h2 { margin-bottom: 0; }
.faixa .lead { margin-top: 16px; }

/* "Como funciona": numbered steps drawn from the list counter. */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos .cartao { counter-increment: passo; }
.passos .cartao::before {
  content: counter(passo); display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%;
  background: var(--acento); color: #ffffff; font-weight: 700; font-size: 19px;
}

/* Closing line */
.fecho { padding: 72px 0 96px; text-align: center; }
.fecho-frase { font-size: clamp(28px, 5vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
.fecho-texto { margin-top: 20px; font-size: clamp(17px, 2vw, 20px); color: var(--texto-2); }
.fecho-acao { margin-top: 28px; }
.rodape-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -11px; border-radius: 50%; }
.rodape-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.rodape a:hover { color: var(--texto); }

/* Reveal on scroll: CSS only, never hidden without support or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes aparecer { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    .notebook, .destaque-texto, .destaque-tela, .secao h2, .cartao, .faixa .miolo, .fecho-frase {
      animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
  }
}