:root {
  --ink: #0B1220;
  --ink-2: #0F1828;
  --ink-3: #131C2E;
  --line: #20304A;
  --line-2: #2E3F5C;
  --bone: #E8EDF6;
  --bone-2: #B4C0D4;
  --bone-dim: #7E8CA3;
  --bone-dimmer: #55617A;
  --signal: #3B82F6;
  --signal-2: #38BDF8;
  --signal-text: #60A5FA; /* azul mais claro p/ texto pequeno (contraste AA confortável) */
  --signal-ink: #EAF2FF;
  --danger: #FB7185;
  --r-sm: 3px;
  --r: 7px;
  --maxw: 1180px;
  --content: 880px; /* medida dos blocos contidos (experimente, tour, download, faq) */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Sora", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Bloqueia seleção de texto no site (campos de formulário e <code> seguem selecionáveis —
   o segredo TOTP da seção experimente precisa de cópia manual quando o clipboard falha). */
html { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, [contenteditable], code { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; } /* compensa a nav sticky ao pular p/ âncoras */
/* As camadas decorativas fixed (grade/grão) cobrem o viewport INCLUINDO a goteira da
   scrollbar clássica → 15px de scroll horizontal fantasma. overflow-x: CLIP (não hidden!)
   corta o excesso sem criar scroll container — hidden aqui quebra o position:sticky da nav
   (verificado empiricamente). */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* hidden = fallback p/ browsers sem clip. CLIP (sobrescrito abaixo) corta o overflow
     lateral SEM criar scroll container — hidden no body matava o position:sticky da nav
     (verificado empiricamente). */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--bone-dim); }
em { font-style: normal; color: var(--bone); }
.accent { color: var(--signal-text); }

/* ── camadas de atmosfera ── */
.bg-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
}
/* tráfego de pontos lime na grade (canvas, igual à tela de bloqueio) */
#bg-dots { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.bg-grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.10), transparent 60%);
  transform: translate3d(var(--mx, -999px), var(--my, -999px), 0);
  transition: opacity .3s; opacity: 0;
}
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100;
  background: var(--signal); box-shadow: 0 0 12px rgba(59,130,246,.7);
}

/* ── mono helpers ── */
.sec-idx, .status, .nav-links a, .btn, .ticker, .stat-lbl, .spec-no, .step-n,
.sec-row-k, .tag, .dl-k, .tour-tab, .console-bar em, .cmp th,
.footer-bot { font-family: var(--font-mono); }

/* ── botões ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent;
  transition: transform .12s, background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { position: relative; overflow: hidden; background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 0 rgba(59,130,246,.5); }
.btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .55s ease; }
.btn-primary:hover { background: #5b9bf8; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(59,130,246,.28); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-line { background: transparent; color: var(--bone); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--signal-text); color: var(--signal-text); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 30px; font-size: .9rem; }

/* ── nav ── */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px clamp(18px, 5vw, 56px);
  background: rgba(11,12,14,.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 500; font-size: 1.15rem; letter-spacing: .06em; color: var(--bone); }
/* wordmark: "LOGONGUARD" — LOGON médio, GUARD extrabold (o peso é o separador) */
.brand-strong { font-weight: 800; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: .78rem; letter-spacing: .04em; color: var(--bone-2); text-transform: lowercase; transition: color .18s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--signal-text); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--signal); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-login { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--bone-2); text-transform: lowercase; transition: color .18s; }
.nav-login:hover { color: var(--signal-text); }
.nav-login-menu { display: none; } /* no desktop usamos o link em .nav-actions; no mobile, este entra no menu */
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--bone); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-only { display: none; }

/* ── hero ── */
.hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(22px, 3.4vw, 48px) clamp(18px, 5vw, 56px) clamp(34px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 12px; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: .7rem; letter-spacing: .16em; color: var(--bone-2); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 0%,70% { opacity: 1; } 71%,100% { opacity: .25; } }
.hero h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); font-weight: 800; margin: 22px 0; letter-spacing: -.03em; }
.hero h1 .l { display: block; overflow: hidden; padding: .05em 0; }
.hero h1 .li { display: block; transform: translateY(116%); animation: lineUp 1s cubic-bezier(.19,1,.22,1) both; animation-delay: var(--d, 0s); }
@keyframes lineUp { from { transform: translateY(116%); } to { transform: none; } }
.hero h1 .mark { background: var(--signal); color: var(--signal-ink); padding: 0 .14em; display: inline-block; transform: rotate(-1.4deg); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lead { font-size: 1.12rem; color: var(--bone-2); max-width: 40ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-meta { margin-top: 16px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--bone-dim); text-transform: uppercase; }

/* console (mockup janela) */
.console { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--ink-2); box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.console-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #0e0f12; border-bottom: 1px solid var(--line); }
.cd { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.cd:nth-child(1) { background: #ff5f57; } .cd:nth-child(2) { background: #febc2e; } .cd:nth-child(3) { background: #28c840; }
.console-bar em { margin-left: 8px; font-size: .64rem; letter-spacing: .14em; color: var(--bone-dim); text-transform: uppercase; }
.console-screen { position: relative; }
.console-screen img { display: block; width: 100%; height: auto; }
/* gatilho do lightbox: <button> sem chrome envolvendo a <picture> do tour (teclado-acessível) */
.tour-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.hero-console { position: relative; align-self: center; }
.hero-console::before { content: ""; position: absolute; inset: -18% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(59,130,246,.22), transparent 70%); filter: blur(24px); }
.hero-console .console { -webkit-box-reflect: below 10px linear-gradient(transparent 58%, rgba(11,12,14,.20)); }

/* chip de autenticador flutuante (segundo fator) */
.auth-chip {
  position: absolute; left: -30px; bottom: 4px; z-index: 4; width: 198px;
  padding: 14px 16px 15px; border-radius: 13px;
  background: linear-gradient(165deg, #181a1f, #0d0e11);
  border: 1px solid var(--line-2);
  box-shadow: 0 26px 54px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transform: rotate(-5deg); transform-origin: bottom left;
  font-family: var(--font-mono);
}
.ac-top { display: flex; align-items: center; gap: 7px; font-size: .56rem; letter-spacing: .14em; color: var(--bone-dim); }
.ac-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: blink 1.6s steps(1) infinite; }
.ac-code { font-size: 1.55rem; font-weight: 700; letter-spacing: .14em; color: var(--signal-text); margin: 9px 0 11px; font-variant-numeric: tabular-nums; }
.ac-bar { height: 4px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.ac-bar span { display: block; height: 100%; width: 100%; background: var(--signal); transform-origin: left; animation: acbar 30s linear infinite; }
@keyframes acbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ac-foot { font-size: .52rem; letter-spacing: .14em; color: var(--bone-dimmer); margin-top: 9px; }

/* ── console vivo: tela de bloqueio animada ── */
.lock-screen { position: relative; overflow: hidden; padding: 30px 28px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* fundo azul-escuro do app real (não o verde-CRT antigo): radial sutil + grade fina */
  background:
    linear-gradient(rgba(130,160,210,.025) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(130,160,210,.025) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(120% 120% at 50% 34%, #0e1626, #080b12 64%);
  min-height: 372px; }
/* vinheta (escurece as bordas), como o app — no lugar das scanlines de CRT */
.crt { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 125% at 50% 42%, transparent 50%, rgba(0,0,0,.55)); }
.lock-ui { position: relative; z-index: 2; text-align: center; transition: opacity .4s, filter .4s; }
/* card de vidro central (glass + hairline lime + sheen) — espelha o card do app */
.lock-card { position: relative; width: min(320px, 100%); padding: 16px 18px;
  border-radius: 16px; background: rgba(11,18,32,.40); border: 1px solid rgba(59,130,246,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45); overflow: hidden; }
.lock-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%); }
/* logo fraco no rodapé da tela (como no app) */
.lock-logo { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px; opacity: .22; }
.lock-logo-word { font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; font-size: .64rem; color: var(--bone); }
/* abas como segmented control (trilho recuado + pílula lime), abaixo do card de inputs */
.lock-tabs { display: inline-flex; gap: 3px; margin: 14px auto 0; padding: 4px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; }
.lt { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; padding: 6px 13px; border-radius: 999px; color: var(--bone-dim); border: 0; background: transparent; }
.lt:hover { color: var(--bone); }
.lt.active { background: var(--signal); color: var(--signal-ink); }
.lock-code { display: flex; gap: 8px; justify-content: center; }
.lock-code i { width: 36px; height: 46px; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-mono); font-size: 1.45rem; color: var(--bone);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 9px;
  transition: border-color .2s, color .2s, box-shadow .2s; }
.lock-code i.filled { border-color: var(--signal-text); color: var(--signal-text); }
.lock-code i.caret { border-color: var(--signal-text); box-shadow: 0 0 0 1px var(--signal), 0 0 16px rgba(59,130,246,.3); }
/* barra de progresso lime sob o módulo (avança conforme o fator valida) */
.lock-progress { position: relative; height: 3px; margin: 12px 2px 0; border-radius: 2px;
  background: rgba(255,255,255,.10); overflow: hidden; }
.lock-progress > span { display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--signal); transition: width .3s linear; }
/* sucesso 1:1 com o app: glow azul nas caixas (espelha o DropShadow 26px/0.9 do app real),
   depois o overlay "fecha" — o lock-ui some em fade, como a janela liberando o desktop */
.console.live.success .lock-code i { border-color: var(--signal-text); color: var(--signal-text);
  box-shadow: 0 0 6px rgba(59,130,246,.55), 0 0 26px rgba(59,130,246,.6); }
.console.live.success .lock-panels { border-color: rgba(59,130,246,.4); }
.console.live.success .lock-progress > span { box-shadow: 0 0 10px rgba(59,130,246,.75); }
.lock-logo { transition: opacity .45s; }
.console.live.unlocked .lock-ui,
.console.live.unlocked .lock-logo { opacity: 0; }
.lt { cursor: pointer; transition: all .18s; }
/* módulo recuado DENTRO do card (leitor de token) */
.lock-panels { position: relative; min-height: 70px; margin: 12px 0 0; padding: 12px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07); border-radius: 11px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35); }
.lock-panel[hidden] { display: none; }
.lock-panel { animation: fadePanel .3s ease; }
@keyframes fadePanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* aba Pendrive — espelho do app: pip de sonar + "Escaneando" + reticências em cascata.
   Cores reais do app: texto AccentSoft #93C5FD, pip AccentPrimary, status StatusWarning #EAB308. */
.usb-scan { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; color: #93C5FD; }
.usb-ping { position: relative; width: 13px; height: 13px; flex: none; }
.usb-ping::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4.5px; height: 4.5px;
  margin: -2.25px 0 0 -2.25px; border-radius: 50%; background: var(--signal); }
.usb-ping::after { content: ""; position: absolute; inset: 0; border: 1.1px solid var(--signal);
  border-radius: 50%; opacity: 0; animation: usbping 1.6s ease-out infinite; }
@keyframes usbping { 0% { transform: scale(.3); opacity: 0; } 5% { opacity: .85; } 62.5%, 100% { transform: scale(1); opacity: 0; } }
.usb-scan .ud { font-style: normal; display: inline-block; width: 7px; text-align: left; opacity: 0; }
.usb-scan .u1 { animation: udot1 1.6s linear infinite; }
.usb-scan .u2 { animation: udot2 1.6s linear infinite; }
.usb-scan .u3 { animation: udot3 1.6s linear infinite; }
@keyframes udot1 { 0% { opacity: 0; } 21.9%, 78.1% { opacity: 1; } 90.6%, 100% { opacity: 0; } }
@keyframes udot2 { 0% { opacity: 0; } 34.4%, 78.1% { opacity: 1; } 90.6%, 100% { opacity: 0; } }
@keyframes udot3 { 0% { opacity: 0; } 46.9%, 78.1% { opacity: 1; } 90.6%, 100% { opacity: 0; } }
/* feedback pontual ao detectar um drive (o UsbStatusText do app) */
.usb-status { margin-top: 10px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .02em; color: #EAB308; }
.usb-status[hidden] { display: none; }
/* campo único de código de backup — espelha o TextBox do app (mono 15px, h36, centrado,
   fundo translúcido). O demo "digita" um código no formato real XXXXX-XXXXX. */
.bk-input { display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: min(240px, 100%); height: 36px; padding: 0 14px;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; color: var(--bone);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 9px;
  transition: border-color .2s, box-shadow .2s; }
.bk-input::after { content: ""; width: 1.5px; height: 17px; background: var(--signal-text);
  animation: blink 1.1s steps(1) infinite; }
.bk-input.filled { border-color: var(--signal-text); }
.console.live.success .bk-input { border-color: var(--signal-text); color: var(--signal-text);
  box-shadow: 0 0 6px rgba(59,130,246,.55), 0 0 26px rgba(59,130,246,.6); }

/* figuras tabulares + seleção */
.stat-num, .lock-code i { font-variant-numeric: tabular-nums; }
::selection { background: var(--signal); color: var(--signal-ink); }

/* foco por teclado visível (acessibilidade) — regra única; havia uma duplicata conflitante no fim do arquivo */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

/* texto só para leitores de tela (ex.: "não" nas células negativas da tabela comparativa) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* link "pular para o conteúdo": fora da tela até receber foco por Tab */
.skip { position: fixed; left: 12px; top: -64px; z-index: 200; padding: 10px 16px;
  background: var(--signal); color: var(--signal-ink); border-radius: var(--r);
  font-family: var(--font-mono); font-size: .8rem; transition: top .15s; }
.skip:focus { top: 12px; }

/* CTA fixo no rodapé — só no mobile (regras de exibição no @media) */
.mobile-cta { display: none; }

/* páginas legais (privacidade / termos) */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(36px,6vw,72px) clamp(18px,5vw,56px) clamp(56px,8vw,100px); }
.legal .back { display: inline-block; margin-bottom: 18px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--bone-dim); }
.legal .back:hover { color: var(--signal-text); }
.legal h1 { font-size: clamp(2rem,4.6vw,3rem); }
.legal .upd { margin-top: 10px; color: var(--bone-dim); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; }
.legal h2 { font-size: 1.3rem; margin: 38px 0 10px; }
.legal p, .legal li { color: var(--bone-2); }
.legal ul { padding-left: 20px; display: grid; gap: 7px; margin: 12px 0; }
.legal a { color: var(--signal-text); }

/* ── ticker ── */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 14px 0; margin-top: 30px; }
.ticker-track { display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; font-size: .8rem; letter-spacing: .14em; color: var(--bone-2); animation: marquee 32s linear infinite; }
.ticker-track b { color: var(--signal-text); }
.ticker-track span { text-transform: uppercase; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── stats ── */
.stats {
  max-width: var(--maxw); margin: clamp(40px,6vw,72px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.stat { background: var(--ink); padding: 30px 24px; text-align: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3rem); font-weight: 800; color: var(--signal-text); letter-spacing: -.02em; }
.stat-num span { font-size: .4em; color: var(--bone-dim); margin-left: 3px; }
.stat-lbl { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); margin-top: 6px; }

/* ── faixa de confiança (sinais reais) ── */
.trust { max-width: var(--maxw); margin: clamp(28px,5vw,52px) auto 0; padding: 16px clamp(18px,5vw,56px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--bone-2); text-transform: uppercase; }
.trust span, .trust a { display: inline-flex; align-items: center; gap: 8px; }
.trust a { color: var(--bone-2); transition: color .18s; }
.trust a:hover { color: var(--signal-text); }
.trust i { color: var(--signal-text); font-style: normal; font-weight: 700; }

/* ── experimente: TOTP real (RFC 6238) no cliente, via Web Crypto — sem dependências ── */
.tryit-grid { max-width: var(--content); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tryit-card { background: var(--ink-2); padding: clamp(20px,3vw,30px); display: flex; flex-direction: column; gap: 12px; }
.tryit-step { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-text); }
.tryit-secret { display: flex; gap: 10px; flex-wrap: wrap; }
.tryit-secret code { flex: 1 1 180px; min-width: 0; font-family: var(--font-mono); font-size: .95rem; letter-spacing: .12em;
  color: var(--bone); background: rgba(0,0,0,.25); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 12px; word-break: break-all; }
.tryit-link { display: inline-block; font-family: var(--font-mono); font-size: .76rem; color: var(--signal-text); }
.tryit-link:hover { text-decoration: underline; }
.tryit-input { display: flex; gap: 10px; flex-wrap: wrap; } /* ≤340px: o botão desce de linha em vez de espremer o input */
.tryit-input input { flex: 1 1 150px; min-width: 0; font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: .3em;
  text-align: center; color: var(--bone); background: rgba(0,0,0,.25); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 10px 8px; }
.tryit-input input::placeholder { color: var(--bone-dimmer); }
.tryit-input input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.tryit-status { min-height: 1.3em; font-family: var(--font-mono); font-size: .82rem; color: var(--bone-dim); }
.tryit-status.ok { color: #34D399; }
.tryit-status.err { color: var(--danger); }
.tryit-fill { align-self: flex-start; background: none; border: 0; cursor: pointer;
  /* alvo de toque ≥44px sem mudar o visual (padding compensado pela margin negativa) */
  padding: 12px 0; margin: -6px 0; min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: .74rem; color: var(--bone-dim); text-decoration: underline; }
.tryit-fill:hover { color: var(--bone-2); }

/* ── manifesto: beat editorial full-bleed ── */
.manifesto { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(74px,13vw,170px) clamp(18px,5vw,56px);
  background: radial-gradient(70% 130% at 50% 50%, rgba(59,130,246,.06), transparent 70%); }
.manifesto::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 100%;
  -webkit-mask-image: radial-gradient(60% 100% at 50% 50%, #000, transparent 76%);
  mask-image: radial-gradient(60% 100% at 50% 50%, #000, transparent 76%); }
.manifesto-inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.mf-kicker { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .2em; color: var(--signal-text); margin-bottom: 26px; }
.mf-statement { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 6.6vw, 5.6rem); line-height: 1.0; letter-spacing: -.035em; margin: 0; }
.mf-statement > span { display: block; }
.mf-statement .mark { display: inline-block; background: var(--signal); color: var(--signal-ink); padding: 0 .12em; transform: rotate(-1.4deg); }
.mf-statement .punch { color: var(--signal-text); }
.manifesto.reveal { opacity: 1; transform: none; } /* a banda fica fixa; só as linhas animam */
.manifesto .mf-statement > span, .manifesto .mf-kicker { opacity: 0; transform: translateY(30px); transition: opacity .75s cubic-bezier(.19,1,.22,1), transform .75s cubic-bezier(.19,1,.22,1); }
.manifesto.in .mf-statement > span, .manifesto.in .mf-kicker { opacity: 1; transform: none; }
.manifesto.in .mf-kicker { transition-delay: 0s; }
.manifesto.in .mf-statement > span:nth-child(1) { transition-delay: .10s; }
.manifesto.in .mf-statement > span:nth-child(2) { transition-delay: .22s; }
.manifesto.in .mf-statement > span:nth-child(3) { transition-delay: .36s; }

/* ── sections ── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px,9vw,120px) clamp(18px,5vw,56px); }
.sec-head { margin-bottom: clamp(32px, 5vw, 50px); max-width: 70ch; border-top: 1px solid var(--line); padding-top: 24px; }
.sec-idx { display: inline-block; font-size: .72rem; letter-spacing: .2em; color: var(--signal-text); margin-bottom: 16px; }
.sec-idx::before { content: ""; display: inline-block; width: 20px; height: 1px; background: var(--signal); vertical-align: middle; margin: 0 9px 3px 0; }
.sec-head h2 { font-size: clamp(1.9rem,4.6vw,3.2rem); font-weight: 700; }
.sec-head p { margin-top: 16px; color: var(--bone-2); font-size: 1.08rem; }

/* spec grid (recursos) */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec { position: relative; background: var(--ink); padding: 32px 26px 30px; transition: background .2s; }
.spec:hover { background: var(--ink-3); }
.spec::before, .spec::after { content: ""; position: absolute; width: 13px; height: 13px; opacity: 0; transition: opacity .2s, transform .2s; }
.spec::before { top: 14px; left: 14px; border-top: 1px solid var(--signal); border-left: 1px solid var(--signal); transform: translate(4px,4px); }
.spec::after { bottom: 14px; right: 14px; border-bottom: 1px solid var(--signal); border-right: 1px solid var(--signal); transform: translate(-4px,-4px); }
.spec:hover::before, .spec:hover::after { opacity: 1; transform: none; }
.spec-no { position: absolute; top: 20px; right: 22px; font-size: .7rem; color: var(--bone-dimmer); letter-spacing: .1em; }
.spec-ico { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-bottom: 18px; }
.spec-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.spec h3 { font-size: 1.2rem; margin-bottom: 8px; }
.spec p { color: var(--bone-dim); font-size: .96rem; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { border-top: 2px solid var(--signal); padding-top: 22px; }
.step-n { font-size: .8rem; letter-spacing: .1em; color: var(--signal-text); }
.step h3 { font-size: 1.35rem; margin: 10px 0 8px; }
.step p { color: var(--bone-dim); }

/* tour */
.tour-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tour-tab { font-size: .72rem; letter-spacing: .06em; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--bone-2); cursor: pointer; transition: all .18s; }
.tour-tab:hover { border-color: var(--signal-text); color: var(--signal-text); }
.tour-tab.active { background: var(--signal); color: var(--signal-ink); border-color: var(--signal-text); }
.tour-console { max-width: var(--content); }
.tour-console .console-screen img { transition: opacity .25s; }
.tour-console .console-screen img.swapping { opacity: 0; }
.tour-console .console-screen img { cursor: zoom-in; }
.tour-cap { max-width: 720px; margin-top: 22px; color: var(--bone-2); }
.tour-cap strong { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--bone); margin-bottom: 5px; }

/* segurança */
.sec-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sec-row { background: var(--ink); display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 26px 28px; align-items: baseline; }
.sec-row-k { font-size: .74rem; letter-spacing: .08em; color: var(--signal-text); padding-top: 4px; }
.sec-row h3 { font-size: 1.2rem; margin-bottom: 6px; }
.sec-row p { color: var(--bone-dim); }

/* comparação */
.cmp { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp thead th { font-size: .72rem; letter-spacing: .08em; color: var(--bone-dim); text-transform: uppercase; font-weight: 600; }
.cmp tbody th[scope="row"], .cmp thead th:first-child { text-align: left; font-family: var(--font-body); font-weight: 600; color: var(--bone); }
.cmp .hl { background: rgba(59,130,246,.05); }
.cmp thead th.hl { color: var(--signal-text); border-bottom: 2px solid var(--signal); }
.cmp .yes { color: var(--signal-text); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; }
.cmp .no { color: var(--bone-dim); } /* bone-dimmer dava ~3.0:1 de contraste — abaixo de AA */
.cmp tbody tr:last-child td { border-bottom: none; }

/* tag (badge "recomendado" usada no card de download) — restou do bloco de preços */
.tag { position: absolute; top: 22px; right: 24px; font-size: .6rem; letter-spacing: .16em; color: var(--signal-text); border: 1px solid var(--signal); border-radius: 999px; padding: 4px 10px; }

/* download */
.dl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: var(--content); }
.dl { border: 1px solid var(--line); border-radius: var(--r); padding: 28px; background: var(--ink-2); transition: border-color .2s, transform .2s; }
.dl:hover { border-color: var(--line-2); transform: translateY(-3px); }
.dl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dl-k { font-size: 1.2rem; letter-spacing: .1em; color: var(--signal-text); }
.dl h3 { font-size: 1.3rem; margin-bottom: 8px; }
.dl p { margin-bottom: 20px; }
.note { max-width: var(--content); margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 18px; }
.note summary { cursor: pointer; font-family: var(--font-mono); font-size: .8rem; color: var(--bone-2); }
.note p { margin-top: 12px; color: var(--bone-dim); }
.note a { color: var(--signal-text); text-decoration: underline; text-underline-offset: 2px; }

/* faq */
.faq { display: grid; gap: 10px; max-width: var(--content); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 22px; background: var(--ink-2); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; color: var(--signal-text); font-family: var(--font-mono); font-size: 1.3em; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { margin-bottom: 12px; }
.faq p { color: var(--bone-dim); }

/* cta */
.cta-band { position: relative; overflow: hidden; max-width: var(--maxw); margin: 0 auto clamp(40px,7vw,90px); padding: clamp(48px,7vw,90px) clamp(24px,5vw,56px); text-align: center; border: 1px solid var(--signal); border-radius: var(--r); background: radial-gradient(120% 140% at 50% 0%, rgba(59,130,246,.10), transparent 60%); }
.cta-watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 22vw, 15rem); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(59,130,246,.12); white-space: nowrap; pointer-events: none; z-index: 0; }
.cta-band > .reveal { position: relative; z-index: 1; }
.cta-band .sec-idx { margin-bottom: 14px; }
.cta-band h2 { font-size: clamp(2rem,5vw,3.4rem); font-weight: 800; }
.cta-band p { color: var(--bone-2); margin: 16px auto 30px; max-width: 48ch; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 48px clamp(18px,5vw,56px); max-width: var(--maxw); margin: 0 auto; }
.footer-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-top .muted { font-size: .9rem; max-width: 48ch; }
.footer-bot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .72rem; letter-spacing: .04em; }
.footer a { color: var(--signal-text); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 4vw; background: rgba(6,7,8,.9); backdrop-filter: blur(6px); animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: 94vw; max-height: 90vh; max-height: 88dvh; /* dvh: não passa sob a barra do navegador mobile */ border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.lightbox-close { position: absolute; top: 18px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--bone); font-size: 1.6rem; cursor: pointer; }
.lightbox-close:hover { border-color: var(--signal-text); color: var(--signal-text); }

/* ── reveal + load anim ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
[data-anim] { opacity: 0; transform: translateY(20px); animation: rise .8s cubic-bezier(.2,.75,.2,1) forwards; }
[data-anim="1"] { animation-delay: .05s; } [data-anim="2"] { animation-delay: .14s; }
[data-anim="3"] { animation-delay: .24s; } [data-anim="4"] { animation-delay: .34s; }
[data-anim="5"] { animation-delay: .42s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── responsivo ── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-console { order: 1; }
  .auth-chip { display: none; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); } /* tablet: degrau de 2 colunas (1 só ≤640) */
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0,1fr): "1fr" cru deixa o min-content vencer e estourar o viewport (cards cortados) */
  .dl-cards, .tryit-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-row { grid-template-columns: 1fr; gap: 8px; }
  .nav-links { position: absolute; top: 100%; right: 14px; left: 14px; flex-direction: column; gap: 4px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 12px; }
  .nav-login { display: none; }                         /* o "entrar" do actions sai no mobile… */
  .nav-login-menu { display: block; color: var(--signal-text); } /* …e reaparece dentro do menu */
  .menu-only { display: grid; }
}

/* CTA fixo no rodapé (telefones) */
@media (max-width: 760px) {
  body { padding-bottom: 76px; }
  .mobile-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 90; padding: 14px 18px; border-radius: 999px;
    background: var(--signal); color: var(--signal-ink);
    font-family: var(--font-mono); font-size: .82rem; font-weight: 700; letter-spacing: .03em;
    box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.45);
    transition: opacity .25s ease, transform .25s ease;
  }
  .mobile-cta.hide { opacity: 0; transform: translateY(140%); pointer-events: none; }
}

/* degraus finos (auditoria de responsividade) */
@media (max-width: 640px) {
  .spec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* CTAs longos quebram linha em vez de serem cortados pelo overflow da cta-band */
  .hero-cta .btn, .cta-band .btn { white-space: normal; text-align: center; line-height: 1.35; }
}
@media (max-width: 420px) {
  /* demo do lock: caixas TOTP e abas cabem no card sem vazar dígito */
  .lock-screen { padding: 24px 12px 40px; }
  .lock-code { gap: 5px; }
  .lock-code i { width: 30px; height: 40px; font-size: 1.2rem; }
  .lt { padding: 6px 9px; letter-spacing: .06em; }
}
@media (max-width: 380px) {
  /* phones estreitos: nav não espreme o botão do menu; CTA fixo numa linha só */
  .nav { padding: 12px 14px; gap: 10px; }
  .nav-actions { gap: 8px; }
  .brand { font-size: 1rem; }
  .icon-btn { flex: none; }
  .mobile-cta { font-size: .74rem; padding: 13px 14px; }
  body { padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .manifesto .mf-statement > span, .manifesto .mf-kicker { opacity: 1 !important; transform: none !important; }
  [data-anim] { opacity: 1; transform: none; animation: none; }
  .hero h1 .li { animation: none; transform: none; }
  .lock-panel { animation: none; }
  .ticker-track, .status-dot, .ac-bar span, .ac-dot,
  .usb-ping::after, .usb-scan .ud, .bk-input::after { animation: none; }
  .cursor-glow { display: none; }
}