/* Landing da Torre (beta fechado). Tokens e linguagem da prancheta Main.dc.html (prototipo/canvas/project): fundo claro,
   texto em preto com alfa, chips semânticos, janelas de terminal escuras e a aurora do hero (estática).
   Mobile-first (375 px); duas colunas a partir de 860 px. Sem estilo inline: o CSP da página só aceita este arquivo. */
:root {
  --bg: #ffffff; --bg-card: #fafafa; --card: #ffffff; --hover: rgba(0,0,0,.04); --inset: rgba(0,0,0,.035);
  --bd: #e8e8e8; --bd-card: #efefef; --bd-strong: #d0d0d0; --divider: #f0f0f0;
  --t-heading: #000; --t-title: rgba(0,0,0,.92); --t-strong: rgba(0,0,0,.82);
  --t-body: rgba(0,0,0,.62); --t-secondary: rgba(0,0,0,.64); --t-label: rgba(0,0,0,.58);
  --btn: rgba(0,0,0,.92); --btn-hover: rgba(0,0,0,.8); --btn-text: #fff;
  --ghost-bd: #d9d9d9; --ghost-bd-hover: #bdbdbd; --ghost-text: rgba(0,0,0,.72);
  --contrato: #6c5ce7; --contrato-bg: rgba(108,92,231,.08); --contrato-bd: rgba(108,92,231,.18); --contrato-tx: #5240d4;
  --colisao: #e05874; --colisao-bg: rgba(224,88,116,.08); --colisao-bd: rgba(224,88,116,.18); --colisao-tx: #b3304d;
  --duplicata: #f5b301; --duplicata-bg: rgba(253,224,71,.16); --duplicata-bd: rgba(245,179,1,.30); --duplicata-tx: #8a5a00;
  --pousou: #00b894; --pousou-bg: rgba(0,184,148,.08); --pousou-bd: rgba(0,184,148,.18); --pousou-tx: #007a63;
  --term-bg: #0a0a0a; --term-bar: #0f0f10; --term-bd: rgba(255,255,255,.08);
  --term-text: rgba(255,255,255,.86); --term-muted: rgba(255,255,255,.58);
  --term-green: #4ade80; --term-yellow: #facc15; --term-red: #f87171; --term-violet: #a78bfa;
  --aur-peach: rgba(251,191,36,.30); --aur-amber: rgba(253,224,71,.14); --aur-lav: rgba(167,139,250,.38); --aur-violet: rgba(124,58,237,.22);
  --r-pill: 999px; --r-card: 16px; --r-win: 14px; --r-input: 10px;
  --sh-card: 0 1px 3px rgba(0,0,0,.04);
  --sh-win: 0 0 0 1px rgba(0,0,0,.06), 0 24px 60px -24px rgba(0,0,0,.22);
  --f-sans: "Albert Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-sans); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--t-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--contrato); outline-offset: 2px; }
code, .mono { font-family: var(--f-mono); }
p code, li code, dd code, td code { padding: 1px 6px; border-radius: 6px; background: var(--inset); font-size: .88em; color: var(--t-strong); white-space: nowrap; }

.pular { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 10px 16px; border-radius: var(--r-pill); background: var(--btn); color: var(--btn-text); }
.pular:focus { top: 12px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.sec { padding-top: 72px; }
.eyebrow { font: 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-label); }
.h2 { margin-top: 12px; max-width: 22em; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.1; letter-spacing: -.02em; font-weight: 500; color: var(--t-heading); text-wrap: balance; }
.h2 em { display: block; font-style: italic; font-weight: 300; color: rgba(0,0,0,.5); }
.lead { margin-top: 16px; max-width: 64ch; }

/* botões e chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 24px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease); }
.btn-pri { background: var(--btn); color: var(--btn-text); }
.btn-pri:hover { background: var(--btn-hover); }
.btn-sec { border-color: var(--ghost-bd); color: var(--ghost-text); }
.btn-sec:hover { border-color: var(--ghost-bd-hover); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--bd); border-radius: var(--r-pill); background: var(--bg-card); font: 11px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t-secondary); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
.chip.colisao { background: var(--colisao-bg); border-color: var(--colisao-bd); color: var(--colisao-tx); }
.chip.contrato { background: var(--contrato-bg); border-color: var(--contrato-bd); color: var(--contrato-tx); }
.chip.duplicata { background: var(--duplicata-bg); border-color: var(--duplicata-bd); color: var(--duplicata-tx); }
.chip.pousou { background: var(--pousou-bg); border-color: var(--pousou-bd); color: var(--pousou-tx); }
.chip.colisao::before { background: var(--colisao); opacity: 1; }
.chip.contrato::before { background: var(--contrato); opacity: 1; }
.chip.duplicata::before { background: var(--duplicata); opacity: 1; }
.chip.pousou::before { background: var(--pousou); opacity: 1; }

/* navegação */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 16px; padding-bottom: 8px; }
.logo { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--t-heading); text-decoration: none; }
.logo svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.logo .ponto { fill: currentColor; stroke: none; }
.nav nav { order: 3; width: 100%; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14px; color: var(--t-secondary); text-decoration: none; }
.nav ul a:hover { background: var(--hover); color: var(--t-title); }

/* hero */
.hero { position: relative; overflow: hidden; padding: 40px 0 72px; }
.aur { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.aur i { position: absolute; border-radius: 50%; filter: blur(70px); }
.aur .u1 { left: -12%; bottom: 8%; width: 420px; height: 320px; background: radial-gradient(closest-side, var(--aur-peach), transparent); }
.aur .u2 { right: -10%; bottom: 18%; width: 460px; height: 340px; background: radial-gradient(closest-side, var(--aur-lav), transparent); }
.aur .u3 { right: 28%; bottom: 0; width: 420px; height: 260px; background: radial-gradient(closest-side, var(--aur-violet), transparent); }
.hero .wrap { position: relative; }
.h1 { margin-top: 20px; max-width: 14em; font-size: clamp(36px, 7vw, 64px); line-height: 1.04; letter-spacing: -.025em; font-weight: 500; color: var(--t-heading); text-wrap: balance; }
.h1 em { display: block; font-style: italic; font-weight: 300; color: rgba(0,0,0,.5); }
.hbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.aviso-beta { margin-top: 20px; max-width: 62ch; font-size: 14px; color: var(--t-strong); }

/* problema */
.grade { display: grid; gap: 12px; margin-top: 28px; }
.card { padding: 20px; border: 1px solid var(--bd-card); border-radius: var(--r-card); background: var(--card); box-shadow: var(--sh-card); }
.card h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--t-title); }
.card p { margin-top: 8px; font-size: 15px; }
.card .chip { margin-bottom: 12px; }
.nota { margin-top: 16px; font-size: 14px; color: var(--t-label); }

/* os 3 passos */
.passos { display: flex; flex-direction: column; gap: 48px; margin-top: 36px; }
.passo { display: grid; gap: 20px; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 12px; border: 1px solid var(--bd-strong); border-radius: 50%; font: 500 14px var(--f-mono); color: var(--t-title); }
.passo h3 { font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; color: var(--t-heading); }
.passo p { margin-top: 10px; }
.terms { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.win { overflow: hidden; border-radius: var(--r-win); background: var(--term-bg); box-shadow: var(--sh-win); }
.wbar { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--term-bar); border-bottom: 1px solid var(--term-bd); }
.wbar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.wbar span { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--term-muted); }
.tl { padding: 14px 16px; font: 13px/1.65 var(--f-mono); color: var(--term-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl .p { color: var(--term-muted); user-select: none; }
.mu { color: var(--term-muted); }
.vi { color: var(--term-violet); }
.gr { color: var(--term-green); }
.yl { color: var(--term-yellow); }
.legenda { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--t-label); }

/* resultados */
.destaque { display: grid; gap: 12px; margin-top: 28px; }
.destaque .card { display: flex; flex-direction: column; gap: 4px; }
.numero { font: 500 40px/1.1 var(--f-mono); letter-spacing: -.03em; color: var(--t-heading); }
.numero small { font-size: 16px; font-weight: 400; color: var(--t-label); }
.destaque .card p { margin-top: 0; }
.tabela-rolagem { margin-top: 28px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { padding-bottom: 8px; text-align: left; font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-label); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
th { font-weight: 500; color: var(--t-title); }
thead th { font: 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t-label); font-weight: 400; }
td { color: var(--t-strong); }
.sub { margin-top: 36px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--t-title); }
.lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lista li { position: relative; padding-left: 20px; }
.lista li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--bd-strong); }
.lista b { font-weight: 600; color: var(--t-title); }

/* como experimentar */
.etapas { counter-reset: e; display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }
.etapas > li { position: relative; padding-left: 48px; counter-increment: e; }
.etapas > li::before { content: counter(e); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--bd-strong); border-radius: 50%; font: 500 14px var(--f-mono); color: var(--t-title); }
.etapas h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--t-title); }
.etapas p { margin-top: 6px; }
.cmd { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: var(--r-input); background: var(--bg-card); font: 13px/1.65 var(--f-mono); color: var(--t-title); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd code { padding: 0; background: none; font-size: inherit; white-space: inherit; overflow-wrap: inherit; color: inherit; }

/* limites e contato */
.limites { display: grid; gap: 12px; margin-top: 28px; }
.limites .card { border-left: 3px solid var(--duplicata); }
.contato { margin-top: 28px; }
.rodape { margin-top: 80px; padding: 28px 0 48px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--t-label); }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

@media (min-width: 640px) {
  .grade, .limites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destaque { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .wrap { padding: 0 40px; }
  .sec { padding-top: 96px; }
  .nav { flex-wrap: nowrap; }
  .nav nav { order: 0; width: auto; margin: 0 auto; }
  .logo { margin-right: 0; }
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .limites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .passo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }