/* Fontes auto-hospedadas (subset latin). Antes vinham do Google Fonts —
   a landing publica uma Politica de Privacidade, entao nao faz sentido
   entregar o IP de cada visitante a um terceiro so para carregar fonte.
   Um arquivo por familia: sao fontes VARIAVEIS, e os 8 arquivos por peso
   que o css2 do Google devolve sao byte a byte identicos. Como o cache HTTP
   e indexado por URL, o browser baixava o mesmo arquivo 5x (Inter) e 3x
   (JetBrains) — ~250 KB no caminho critico do LCP. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   DET Monitor — Landing de apresentação
   Sistema de marca: verde-petróleo + menta + ponto coral
   Inter (produto) + JetBrains Mono (sigla/números)
   ============================================================ */

:root{
  --bg:#f6f7f7; --bg-2:#f1f3f2; --surface:#ffffff; --surface-2:#fafbfb;
  --border:#e3e6e5; --border-strong:#d3d8d6;
  --text:#14201f; --text-2:#4a5957; --text-3:#7a8b89; --text-4:#a8b3b1;
  --petrol:#2c5e54; --petrol-deep:#1d3a3a; --petrol-ink:#122927;
  --mint:#4eb88a; --mint-bright:#5fc89c; --coral:#e0533c;
  --success:#16a060; --warning:#b47808; --danger:#b42318;
  --accent-soft:#e9f0ee;
  --dark-bg:#121516;
  --r:14px; --r-lg:20px; --r-sm:9px;
  --maxw:1180px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow-sm:0 1px 2px rgba(18,32,31,.05), 0 1px 1px rgba(18,32,31,.03);
  --shadow-md:0 12px 34px -14px rgba(18,32,31,.22), 0 4px 10px -6px rgba(18,32,31,.10);
  --shadow-lg:0 40px 90px -40px rgba(18,32,31,.45), 0 12px 30px -14px rgba(18,32,31,.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--petrol); text-decoration:none;}
a:hover{color:var(--petrol-deep);}
img{max-width:100%; display:block;}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; line-height:1.08;}
p{margin:0;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.section{padding:110px 0;}
.section-tight{padding:84px 0;}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--petrol);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--petrol);}
.eyebrow.on-dark{color:var(--mint-bright);}
.eyebrow.on-dark::before{background:var(--mint-bright);}

.sec-head{max-width:60ch; margin-bottom:52px;}
.sec-head h2{font-size:42px; font-weight:700; margin:18px 0 0;}
.sec-head p{font-size:18px; color:var(--text-2); margin-top:16px; text-wrap:pretty;}

/* ============================================================
   LOGO — Sonar / Pulso
   ============================================================ */
.logo{display:inline-flex; align-items:center; gap:11px; white-space:nowrap;}
.logo-wm{display:flex; align-items:baseline; gap:.01em; letter-spacing:-.01em;}
.logo-wm .det{font-family:var(--mono); font-weight:700; color:var(--petrol);}
.logo-wm .mon{font-family:var(--sans); font-weight:600; color:var(--text);}
.on-dark .logo-wm .det, .logo.on-dark .logo-wm .det{color:var(--mint-bright);}
.on-dark .logo-wm .mon, .logo.on-dark .logo-wm .mon{color:#eaf1ef;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,247,247,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
.nav.is-scrolled{border-bottom-color:var(--border); background:rgba(246,247,247,.94);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:16px 32px; display:flex; align-items:center; gap:34px;}
.nav-links{display:flex; align-items:center; gap:30px; margin-left:14px;}
.nav-links a{font-size:14.5px; color:var(--text-2); font-weight:500;}
.nav-links a:hover{color:var(--text);}
.nav-spacer{flex:1;}
.nav-actions{display:flex; align-items:center; gap:14px;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1;
  padding:13px 20px; border-radius:11px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s, box-shadow .2s, background .2s, border-color .2s;
  white-space:nowrap; text-decoration:none;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--petrol); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-sm);}
.btn-primary:hover{background:#255049; color:#fff; box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--text-3); color:var(--text); background:var(--surface);}
.btn-link{background:transparent; color:var(--text-2); padding:13px 8px;}
.btn-link:hover{color:var(--text);}
.btn-lg{font-size:16.5px; padding:16px 26px; border-radius:12px;}
.btn-ondark{background:var(--mint-bright); color:var(--petrol-ink);}
.btn-ondark:hover{background:#7ad6ae; color:var(--petrol-ink);}
.btn-ondark-ghost{background:transparent; color:#eaf1ef; border-color:rgba(234,241,239,.28);}
.btn-ondark-ghost:hover{border-color:rgba(234,241,239,.6); color:#fff;}
.btn .arrow{transition:transform .15s;}
.btn:hover .arrow{transform:translateX(3px);}

/* ============================================================
   HERO — variantes via [data-hero]
   ============================================================ */
.hero{position:relative; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-bg::before{
  content:''; position:absolute; width:900px; height:900px; border-radius:50%;
  top:-420px; right:-260px;
  background:radial-gradient(circle, rgba(94,184,138,.16), rgba(94,184,138,0) 62%);
}
.hero-bg::after{
  content:''; position:absolute; width:620px; height:620px; border-radius:50%;
  bottom:-360px; left:-200px;
  background:radial-gradient(circle, rgba(44,94,84,.10), rgba(44,94,84,0) 64%);
}
.hero-inner{position:relative; z-index:1; padding-top:76px; padding-bottom:96px;}

.hero-badge{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  color:var(--petrol); background:var(--accent-soft); border:1px solid #d5e4df;
  padding:7px 14px 7px 11px; border-radius:100px; margin-bottom:26px;
}
.hero-badge .pulse{width:8px; height:8px; border-radius:50%; background:var(--coral); position:relative;}
.hero-badge .pulse::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--coral); opacity:.5; animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(.7); opacity:.6;} 80%,100%{transform:scale(1.9); opacity:0;}}

.hero h1{
  font-size:60px; font-weight:750; letter-spacing:-.028em; max-width:16ch;
  text-wrap:balance;
}
.hero h1 .mk{color:var(--petrol); position:relative; white-space:nowrap;}
.hero h1 .mk .dot{display:inline-block; width:.13em; height:.13em; border-radius:50%; background:var(--coral); vertical-align:baseline; margin-left:.05em;}
.hero-sub{font-size:20px; color:var(--text-2); max-width:52ch; margin-top:26px; text-wrap:pretty;}
.hero-cta{display:flex; align-items:center; gap:14px; margin-top:38px; flex-wrap:wrap;}
.hero-note{display:flex; align-items:center; gap:18px; margin-top:22px; font-size:13.5px; color:var(--text-3); flex-wrap:wrap;}
.hero-note .chk{display:inline-flex; align-items:center; gap:7px;}
.hero-note .chk svg{color:var(--success); flex:none;}

/* layout: A = split */
.hero-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:40px; align-items:center;}
/* O print do hero e um recorte so da area de conteudo do painel (1220px, sem o
   sidebar do app), nao a tela inteira de 1460px — cabe mais legivel em menos
   largura. Por isso ele nao precisa sangrar para fora do .wrap: uma versao
   anterior avancava ate 32px da borda da viewport e a assimetria contra a
   margem da esquerda lia como desalinho, nao como intencao. Contido, o hero
   fica alinhado com a nav e com o resto das secoes. */
.hero-visual{position:relative;}

/* layout B = centered */
[data-hero="b"] .hero-grid{grid-template-columns:1fr; text-align:center; gap:52px; justify-items:center;}
[data-hero="b"] .hero h1{max-width:20ch; font-size:64px;}
[data-hero="b"] .hero-sub{margin-left:auto; margin-right:auto;}
[data-hero="b"] .hero-cta,[data-hero="b"] .hero-note{justify-content:center;}
[data-hero="b"] .hero-visual{width:100%; max-width:1000px; margin-top:8px;}
[data-hero="b"] .hero-badge{margin-left:auto; margin-right:auto;}

/* layout C = statement (dark) */
[data-hero="c"] .hero{background:var(--petrol-ink);}
[data-hero="c"] .hero-bg::before{background:radial-gradient(circle, rgba(94,184,138,.22), rgba(94,184,138,0) 62%);}
[data-hero="c"] .hero-bg::after{background:radial-gradient(circle, rgba(94,184,138,.10), rgba(94,184,138,0) 64%);}
[data-hero="c"] .hero-grid{grid-template-columns:1.02fr .98fr;}
[data-hero="c"] .hero h1{color:#f2f7f5;}
[data-hero="c"] .hero h1 .mk{color:var(--mint-bright);}
[data-hero="c"] .hero-sub{color:#b6c7c2;}
[data-hero="c"] .hero-badge{background:rgba(94,184,138,.12); border-color:rgba(94,184,138,.28); color:var(--mint-bright);}
[data-hero="c"] .hero-note{color:#8fa7a1;}
[data-hero="c"] .hero .btn-primary{background:var(--mint-bright); color:var(--petrol-ink);}
[data-hero="c"] .hero .btn-primary:hover{background:#7ad6ae;}
[data-hero="c"] .hero .btn-ghost{color:#eaf1ef; border-color:rgba(234,241,239,.28);}
[data-hero="c"] .hero .btn-ghost:hover{border-color:rgba(234,241,239,.6); color:#fff;}

/* ============================================================
   PRODUCT MOCKUP (shared "browser" frame)
   ============================================================ */
.mock{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); overflow:hidden; font-size:13px;
}
.mock-bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
.mock-dots{display:flex; gap:6px;}
.mock-dots span{width:10px; height:10px; border-radius:50%; background:#dfe4e2;}
.mock-url{
  flex:1; margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--text-3);
  background:var(--surface); border:1px solid var(--border); border-radius:7px;
  padding:5px 12px; max-width:320px;
}
.mock-body{position:relative;}

/* live screen embed (iframe scaled to fit) */
/* Prints das telas reais em WebP 2x. Antes eram iframes das telas em HTML
   (~1,4 MB gzipado) escalados por JS; a imagem carrega mais rapido, nao depende
   de script e nao arrasta o markup das telas para dentro da landing. */
.screen-embed{position:relative; width:100%; overflow:hidden; background:#f7f8f7;}
.screen-embed picture{display:block;}
.screen-embed img{width:100%; height:auto; display:block;}

/* -- app chrome inside mockup -- */
.app{display:grid; grid-template-columns:186px 1fr; min-height:396px;}
.app-side{border-right:1px solid var(--border); background:var(--surface-2); padding:16px 12px;}
.app-brand{display:flex; align-items:center; gap:8px; padding:2px 6px 14px;}
.app-glyph{
  width:26px; height:26px; border-radius:7px; flex:none;
  background:linear-gradient(150deg,#356a5f,#23463f); position:relative; display:grid; place-items:center;
}
.app-glyph svg{display:block;}
.app-glyph .nd{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--coral); right:4px; top:4px; border:1.5px solid var(--surface-2);}
.app-brand b{font-size:13.5px; font-weight:650;}
.app-navlabel{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-4); padding:8px 8px 6px;}
.app-nav{display:flex; flex-direction:column; gap:1px;}
.app-nav-item{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; color:var(--text-2); font-size:12.5px; font-weight:500;}
.app-nav-item .ni{width:15px; color:var(--text-3); display:inline-flex;}
.app-nav-item .nc{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text-4);}
.app-nav-item.is-active{background:var(--accent-soft); color:var(--petrol); font-weight:600;}
.app-nav-item.is-active .ni{color:var(--petrol);}
.app-nav-item.is-active .nc{color:var(--petrol);}
.app-main{padding:18px 20px; overflow:hidden;}

/* dashboard mockup */
.dsh-greet{font-size:16px; font-weight:650; margin-bottom:2px;}
.dsh-meta{font-size:11.5px; color:var(--text-3); margin-bottom:16px;}
.dsh-meta b{color:var(--text); font-family:var(--mono);}
.dsh-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:16px;}
.kpi{border:1px solid var(--border); border-radius:11px; padding:13px 14px; background:var(--surface);}
.kpi.is-crit{border-left:3px solid var(--coral);}
.kpi-h{display:flex; align-items:center; gap:7px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-bottom:8px;}
.kpi-h .ki{color:var(--text-4);}
.kpi.is-crit .kpi-h .ki{color:var(--coral);}
.kpi-n{font-size:30px; font-weight:700; font-family:var(--mono); letter-spacing:-.02em; line-height:1;}
.kpi-n small{font-family:var(--sans); font-size:12px; font-weight:500; color:var(--text-3); margin-left:6px;}
.kpi-delta{font-size:10.5px; margin-top:7px; color:var(--text-3);}
.kpi-delta .up{color:var(--danger);}
.kpi-delta .down{color:var(--success);}

.dsh-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;}
.dsh-cal-head b{font-size:12.5px;}
.dsh-cal-head span{font-size:10.5px; color:var(--text-3);}
.dsh-cal{display:grid; grid-template-columns:repeat(8,1fr); gap:5px;}
.cal-cell{border:1px solid var(--border); border-radius:7px; padding:6px 4px 8px; min-height:44px; position:relative;}
.cal-cell .cd{font-family:var(--mono); font-size:9px; color:var(--text-4);}
.cal-cell .cn{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--text-2); line-height:1.1;}
.cal-pin{position:absolute; bottom:6px; left:5px; right:5px; height:4px; border-radius:3px;}
.cal-pin.crit{background:var(--coral);}
.cal-pin.warn{background:var(--warning);}
.cal-pin.ok{background:var(--mint);}
.cal-cell.hot{background:rgba(224,83,60,.06); border-color:rgba(224,83,60,.32);}

/* inbox mockup */
.inb{display:grid; grid-template-columns:1fr; gap:0;}
.inb-tabs{display:flex; gap:16px; border-bottom:1px solid var(--border); padding:0 0 0; margin-bottom:12px;}
.inb-tab{font-size:12px; font-weight:600; color:var(--text-3); padding:0 0 10px; border-bottom:2px solid transparent; display:flex; gap:6px; align-items:center;}
.inb-tab .tc{font-family:var(--mono); font-size:10px; color:var(--text-4); background:var(--bg-2); border-radius:20px; padding:1px 6px;}
.inb-tab.is-active{color:var(--petrol); border-bottom-color:var(--petrol);}
.inb-tab.is-active .tc{background:var(--accent-soft); color:var(--petrol);}
.inb-split{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.inb-split > *{min-width:0;}
.inb-item{display:flex; gap:10px; padding:10px 11px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px;}
.inb-item.is-sel{border-color:var(--petrol); background:var(--accent-soft);}
.inb-pill{width:6px; align-self:stretch; border-radius:6px; flex:none;}
.inb-pill.crit{background:var(--coral);}
.inb-pill.warn{background:var(--warning);}
.inb-pill.ok{background:var(--mint);}
.inb-item-body{min-width:0; flex:1;}
.inb-badge{font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:5px; display:inline-block;}
.inb-badge.fisc{background:#fbeae6; color:var(--danger);}
.inb-badge.msg{background:var(--accent-soft); color:var(--petrol);}
.inb-org{font-size:10.5px; color:var(--text-3); font-family:var(--mono); margin-top:6px;}
.inb-title{font-size:12.5px; font-weight:600; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.inb-prev{font-size:11px; color:var(--text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.inb-days{margin-left:auto; text-align:right; flex:none;}
.inb-days b{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--coral);}
.inb-days span{display:block; font-size:9px; color:var(--text-3);}

.inb-detail{border:1px solid var(--border); border-radius:11px; padding:14px; background:var(--surface-2);}
.inb-det-head{display:flex; align-items:center; gap:8px; margin-bottom:11px;}
.inb-det-head b{font-size:13px;}
.inb-ruler{margin:10px 0 12px;}
.inb-ruler-track{height:7px; border-radius:5px; background:linear-gradient(90deg,var(--mint) 0%,var(--warning) 62%,var(--coral) 100%); position:relative;}
.inb-ruler-track .mark{position:absolute; top:-3px; width:13px; height:13px; border-radius:50%; background:#fff; border:3px solid var(--coral); left:82%;}
.inb-ruler-scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--text-4); margin-top:6px;}
.inb-meta-row{display:flex; justify-content:space-between; font-size:11px; padding:6px 0; border-top:1px solid var(--border);}
.inb-meta-row span:first-child{color:var(--text-3);}
.inb-meta-row span:last-child{font-weight:600; font-family:var(--mono); font-size:10.5px;}
.inb-det-actions{display:flex; gap:8px; margin-top:12px;}
.inb-det-btn{font-size:11px; font-weight:600; padding:8px 12px; border-radius:8px;}
.inb-det-btn.pri{background:var(--petrol); color:#fff;}
.inb-det-btn.sec{background:var(--surface); border:1px solid var(--border); color:var(--text-2);}

/* empregadores table mockup */
.emp{width:100%; border-collapse:collapse; font-size:12px;}
.emp thead th{text-align:left; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:600; padding:0 10px 9px; border-bottom:1px solid var(--border);}
.emp tbody td{padding:11px 10px; border-bottom:1px solid var(--border);}
.emp .e-type{font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); background:var(--bg-2); padding:2px 7px; border-radius:5px;}
.emp .e-name{font-weight:600;}
.emp .e-cnpj{font-family:var(--mono); font-size:11px; color:var(--text-2);}
.emp .e-sync{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-2);}
.emp .sd{width:8px; height:8px; border-radius:50%; flex:none;}
.emp .sd.ok{background:var(--success);} .emp .sd.warn{background:var(--warning);} .emp .sd.err{background:var(--danger);}
.emp .e-when{font-family:var(--mono); font-size:10.5px; color:var(--text-3);}

.mock-tag{
  position:absolute; z-index:3; background:var(--surface); border:1px solid var(--border);
  border-radius:100px; box-shadow:var(--shadow-md); padding:9px 15px 9px 12px;
  display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600;
}
.mock-tag .mt-ico{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:14px;}
.mock-tag .mt-ico.coral{background:#fbeae6; color:var(--coral);}
.mock-tag .mt-ico.green{background:var(--accent-soft); color:var(--petrol);}
.mock-tag small{display:block; font-weight:500; color:var(--text-3); font-size:10.5px;}
/* Posicao por classe (antes era style inline), para o breakpoint poder puxar as
   etiquetas para dentro do mock no celular sem !important. */
.mock-tag.tag-tr{top:-18px; right:-14px;}
.mock-tag.tag-bl{bottom:-20px; left:-16px;}

/* ============================================================
   LOGOS / TRUST STRIP
   ============================================================ */
.trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface);}
.trust-inner{display:flex; align-items:center; gap:34px; padding:26px 0; flex-wrap:wrap; justify-content:center;}
.trust-inner .tl{font-size:13px; color:var(--text-3); font-weight:500;}
.trust-item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-2); font-weight:600;}
.trust-item svg{color:var(--petrol); flex:none;}

/* ============================================================
   PROBLEM (dark)
   ============================================================ */
.problem{background:var(--petrol-ink); color:#e7efec;}
.problem .sec-head h2{color:#f2f7f5; font-size:44px;}
.problem .sec-head p{color:#b0c2bd;}
.prob-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;}
.prob-points{display:flex; flex-direction:column; gap:22px; margin-top:8px;}
.prob-point{display:flex; gap:16px;}
.prob-point .pn{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--mint-bright); flex:none; width:26px; padding-top:2px;}
.prob-point h4{font-size:18px; color:#f2f7f5; margin-bottom:5px;}
.prob-point p{font-size:14.5px; color:#a9bdb8; text-wrap:pretty;}

/* 15-day mechanic card */
.tacit{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:var(--r-lg); padding:30px;}
.tacit-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.tacit-h .tt{font-size:13px; font-weight:600; color:#cdddd8;}
.tacit-h .tflag{font-family:var(--mono); font-size:11px; color:var(--coral); background:rgba(224,83,60,.14); border:1px solid rgba(224,83,60,.32); padding:4px 10px; border-radius:100px; font-weight:600;}
.tacit-days{display:flex; gap:5px; margin-bottom:8px;}
.td{flex:1; height:38px; border-radius:6px; background:rgba(255,255,255,.06); position:relative; display:grid; place-items:center; font-family:var(--mono); font-size:10px; color:#7f958f;}
.td.seen{background:rgba(94,184,138,.16); color:var(--mint-bright);}
.td.warn{background:rgba(180,120,8,.24); color:#e6b95a;}
.td.crit{background:var(--coral); color:#fff; font-weight:700;}
.tacit-scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:#7f958f; margin-bottom:20px;}
.tacit-verdict{display:flex; gap:12px; align-items:flex-start; border-top:1px solid rgba(255,255,255,.10); padding-top:18px;}
.tacit-verdict .tv-ico{font-size:20px;}
.tacit-verdict p{font-size:14px; color:#cdddd8;}
.tacit-verdict b{color:#fff;}

/* ============================================================
   STEPS (how it works)
   ============================================================ */
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.step{position:relative; padding-top:26px;}
.step-n{font-family:var(--mono); font-size:13px; font-weight:700; color:#fff; background:var(--petrol); width:34px; height:34px; border-radius:9px; display:grid; place-items:center; margin-bottom:20px;}
.step h4{font-size:19px; margin-bottom:10px;}
.step p{font-size:15px; color:var(--text-2); text-wrap:pretty;}
.step::after{content:''; position:absolute; top:16px; left:46px; right:-11px; height:2px; background:repeating-linear-gradient(90deg,var(--border-strong) 0 6px, transparent 6px 12px);}
.step:last-child::after{display:none;}

/* ============================================================
   DIFFERENTIALS
   ============================================================ */
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.diff{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:28px; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s;}
.diff:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.diff-ico{width:44px; height:44px; border-radius:11px; background:var(--accent-soft); color:var(--petrol); display:grid; place-items:center; margin-bottom:18px;}
.diff h4{font-size:18px; margin-bottom:9px;}
.diff p{font-size:14.5px; color:var(--text-2); text-wrap:pretty;}
.diff.wide{grid-column:span 1;}

/* ============================================================
   SCREENS (prints)
   ============================================================ */
.screens{background:var(--bg-2);}
.screens-tabs{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.screen-tab{
  font-size:14px; font-weight:600; color:var(--text-2); background:var(--surface);
  border:1px solid var(--border); border-radius:100px; padding:10px 18px; cursor:pointer;
  transition:all .16s; display:flex; align-items:center; gap:9px;
}
.screen-tab:hover{border-color:var(--text-3);}
.screen-tab.is-active{background:var(--petrol); color:#fff; border-color:var(--petrol);}
.screen-panel{display:none;}
.screen-panel.is-active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.screen-layout{display:grid; grid-template-columns:.82fr 1.18fr; gap:44px; align-items:center;}
.screen-layout.wide-mock{grid-template-columns:.64fr 1.36fr;}
.screen-layout.stack{grid-template-columns:1fr; gap:30px; align-items:stretch;}
.screen-layout.stack .screen-copy{max-width:72ch;}
.screen-layout.stack .screen-copy h3{margin-bottom:10px;}
.screen-layout.stack .screen-copy ul{flex-direction:row; flex-wrap:wrap; gap:12px 30px; margin-top:20px;}
.screen-layout > *{min-width:0;}
.app,.app-main{min-width:0;}
.screen-copy h3{font-size:28px; margin-bottom:14px;}
.screen-copy p{font-size:16px; color:var(--text-2); margin-bottom:20px; text-wrap:pretty;}
.screen-copy ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.screen-copy li{display:flex; gap:11px; font-size:14.5px; color:var(--text); align-items:flex-start;}
.screen-copy li svg{color:var(--petrol); flex:none; margin-top:3px;}

/* ============================================================
   PERSONAS
   ============================================================ */
.persona-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.persona{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px 28px; display:flex; gap:20px; box-shadow:var(--shadow-sm);}
.persona-badge{
  flex:none; width:52px; height:52px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:17px; color:#fff;
  background:linear-gradient(150deg,#356a5f,#23463f);
}
.persona h4{font-size:17px; margin-bottom:4px;}
.persona .p-role{font-size:12.5px; color:var(--text-3); font-weight:500; margin-bottom:12px;}
.persona .p-want{font-size:14px; color:var(--text-2); text-wrap:pretty;}

/* ============================================================
   SECURITY
   ============================================================ */
.security{background:var(--petrol-deep); color:#e7efec;}
.security .sec-head h2{color:#f2f7f5;}
.security .sec-head p{color:#b0c2bd;}
.sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.sec-card{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); border-radius:var(--r); padding:26px;}
.sec-card .sc-ico{width:42px; height:42px; border-radius:11px; background:rgba(94,184,138,.14); color:var(--mint-bright); display:grid; place-items:center; margin-bottom:16px;}
.sec-card h4{font-size:17px; color:#f2f7f5; margin-bottom:8px;}
.sec-card p{font-size:14px; color:#a9bdb8; text-wrap:pretty;}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:0;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:18px; font-weight:600; color:var(--text); padding:24px 44px 24px 0; position:relative; display:block;}
.faq-q::after{content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--text-3); transition:transform .2s;}
.faq-item.is-open .faq-q::after{content:'−';}
.faq-a{max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a-inner{font-size:15.5px; color:var(--text-2); padding:0 44px 24px 0; text-wrap:pretty;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--surface); border-top:1px solid var(--border);}
.contact-layout{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
.contact-copy h2{font-size:38px; margin-bottom:18px;}
.contact-copy p{font-size:17px; color:var(--text-2); margin-bottom:28px; text-wrap:pretty;}
.contact-perks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px;}
.contact-perks li{display:flex; gap:13px; align-items:center;}
.contact-perks .cp-ico{width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--petrol); display:grid; place-items:center; flex:none;}
.contact-perks h5{font-size:15px; margin-bottom:2px;}
.contact-perks span{font-size:13.5px; color:var(--text-3);}

.form{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-md);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{margin-bottom:16px; display:flex; flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:7px;}
.field label .opt{color:var(--text-4); font-weight:400;}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:14.5px; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:9px; padding:11px 13px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{resize:vertical; min-height:92px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--petrol); box-shadow:0 0 0 3px var(--accent-soft);}
.field input::placeholder,.field textarea::placeholder{color:var(--text-4);}
.form-foot{display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap;}
.form-foot .fine{font-size:12px; color:var(--text-3); flex:1; min-width:180px;}
.form-foot .fine a{color:var(--petrol); font-weight:600;}
/* honeypot anti-bot: fora da tela e fora do foco, nunca visto por humano */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-error{margin:4px 0 0; padding:11px 14px; border-radius:var(--r-sm); background:#fdecea; color:var(--danger); font-size:13.5px; font-weight:500;}
.form-ok{display:none; text-align:center; padding:30px 10px;}
.form-ok.show{display:block;}
.form-ok .ok-ico{width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--success); display:grid; place-items:center; margin:0 auto 18px;}
.form-ok h3{font-size:22px; margin-bottom:8px;}
.form-ok p{font-size:15px; color:var(--text-2);}

/* ============================================================
   FINAL CTA (dark)
   ============================================================ */
.cta{background:var(--petrol-ink); color:#fff; text-align:center;}
.cta-inner{max-width:760px; margin:0 auto; text-align:center;}
.cta h2{font-size:46px; color:#f2f7f5; margin-bottom:20px; text-wrap:balance;}
.cta h2 .dot{display:inline-block; width:.12em; height:.12em; border-radius:50%; background:var(--coral); margin-left:.04em; vertical-align:baseline;}
.cta p{font-size:19px; color:#b0c2bd; margin-bottom:36px; text-wrap:pretty;}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.cta-fine{margin-top:22px; font-size:13.5px; color:#8fa7a1;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--petrol-ink); color:#9fb3ad; border-top:1px solid rgba(255,255,255,.08); padding:48px 0 40px;}
.footer-inner{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start;}
.footer-brand{max-width:34ch;}
.footer-brand p{font-size:13.5px; margin-top:14px; color:#8fa7a1;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h5{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7f958f; margin-bottom:14px;}
.footer-col a{display:block; color:#c2d2cd; font-size:13.5px; margin-bottom:9px;}
.footer-col a:hover{color:#fff;}
.footer-bot{border-top:1px solid rgba(255,255,255,.08); margin-top:38px; padding-top:22px; font-size:12.5px; color:#7f958f; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Faixa entre o hero empilhado (<=1000) e a largura cheia: as duas colunas ainda
   convivem, mas a do texto fica estreita o bastante para o h1 quebrar em 7
   linhas. Equilibra a divisao e desce um degrau na fonte. */
@media (max-width:1280px){
  .hero-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .hero h1{font-size:52px;}
}
@media (max-width:1000px){
  .hero-grid,.prob-grid,.screen-layout,.contact-layout{grid-template-columns:1fr;}
  /* Empilhado, o mock ocupa a largura toda: sem sangria e com as etiquetas por
     dentro, senao elas furam a viewport. */
  .hero-visual{margin-top:10px; margin-right:0;}
  .mock-tag.tag-tr{top:-14px; right:0;}
  .mock-tag.tag-bl{bottom:-14px; left:0;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .step::after{display:none;}
  .diff-grid,.sec-grid{grid-template-columns:repeat(2,1fr);}
  .persona-grid{grid-template-columns:1fr;}
  .hero h1{font-size:46px;} .cta h2{font-size:36px;}
  .nav-links{display:none;}
}
@media (max-width:640px){
  .section{padding:70px 0;} .wrap{padding:0 20px;}
  .dsh-kpis{grid-template-columns:1fr;} .inb-split{grid-template-columns:1fr;}
  .diff-grid,.sec-grid,.steps-grid,.form-row{grid-template-columns:1fr;}
  .hero h1{font-size:38px;} .sec-head h2{font-size:32px;}
  .app{grid-template-columns:1fr;} .app-side{display:none;}
  /* Sem os nav-links, sobra logo + Entrar + Comece gratis: nessa largura os tres
     estouravam a viewport (scroll horizontal). Compacta em vez de esconder o
     "Entrar" — e o unico caminho de login a partir do site. */
  .nav-inner{padding:14px 20px; gap:12px;}
  .nav-actions{gap:6px;}
  .nav-actions .btn{font-size:13.5px; padding:9px 13px;}
  .nav-actions .btn-link{padding:9px 4px;}

  /* Hero: as etiquetas flutuantes saem para fora do mock (top/right e
     bottom/left negativos). No desktop sobra margem; no celular elas vazavam a
     viewport e a de baixo invadia a faixa de confianca. Aqui elas encostam por
     dentro e o hero ganha respiro embaixo. */
  .hero-inner{padding-top:46px; padding-bottom:64px;}
  .hero-cta{margin-top:30px;}
  .hero-cta .btn{width:100%;}
  .hero-note{gap:10px; flex-direction:column; align-items:flex-start;}
  .hero-visual{margin-top:34px;}
  .mock-tag{font-size:11.5px; padding:7px 12px 7px 9px; gap:7px;}
  .mock-tag .mt-ico{width:22px; height:22px; font-size:12px;}
  .mock-tag small{font-size:9.5px;}
  .mock-tag.tag-tr{top:-13px; right:0;}
  .mock-tag.tag-bl{bottom:-13px; left:0;}
}