/* ============================================================================
   Landing pública do BiT — servida em "/" (index.html).
   NÃO carregar junto com styles.css/styles2.css do dashboard: aqueles têm
   seletores amplos (body, h1..h4, input) e vazariam aqui. O isolamento é por
   arquivo separado + escopo em body.landing.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens da landing — paleta BlueShift v1.0 (Deep Night + Primary Blue).

   ⚠️ Bloco PRÓPRIO, e não `blueshift-tokens.css`, de propósito:
   aquele arquivo declara em `:root` e traz regras de base (body, h1..h5,
   scrollbar, .ms) que vazariam por cima da landing — exatamente o
   isolamento que o comentário do topo protege.

   DOIS TEMAS, como no console — o alternador fica na navbar e grava na
   MESMA chave (`bit.theme`), então a escolha atravessa landing, console e
   Fazendinha.

   ⚠️ O ESCURO é o default da landing (o console usa claro como default).
   O herói é um vídeo escuro em tela cheia: sem preferência gravada, escuro
   é a cara da página. O bloco abaixo é o escuro; o claro vem depois, em
   `[data-theme="light"]`.

   ⚠️ No tema CLARO o herói continua com véu ESCURO sobre o vídeo — ver o
   comentário do `.veil`. O vídeo não muda de tema, então o texto sobre ele
   precisa continuar claro nos dois casos.
   --------------------------------------------------------------------------- */
body.landing{
  --font-sans:"Rubik",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --accent:#006EFF;--accent-bright:#8DBDFF;--accent-deep:#1A46FF;
  /* Gradiente de azuis: permitido AQUI (marketing/institucional), proibido
     nas telas de produto. */
  --accent-grad:linear-gradient(135deg,#3C70FF 0%,#006EFF 55%,#1031C3 100%);
  --accent-soft:rgba(0,110,255,.18);--accent-glow:rgba(60,112,255,.45);
  --ok:#4ECF95;--warn:#F6A609;--crit:#FF7B7F;
  --bg:#050A20;--bg-2:#080D22;--panel:#0B1230;--panel-2:#101838;
  --border:rgba(197,210,228,.14);--border-strong:rgba(197,210,228,.28);
  --text:#E9F4FF;--text-2:#B4C6DC;--text-3:#758EBC;
  --radius:16px;--radius-sm:10px;--shadow:0 18px 40px -14px rgba(0,0,0,.60);

  /* vidro (ver o bloco GLASS no fim do arquivo) */
  --glass-blur:16px;--glass-sat:130%;--glass-fill:70%;
  --glass-edge:rgba(197,210,228,.22);--glass-border:rgba(197,210,228,.18);
  --glass-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  --nav-bg:rgba(5,10,32,.72);

  margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;
}

/* ---------------------------------------------------------- TEMA CLARO
   Espelha o `:root` claro do console (blueshift-tokens.css), para landing e
   dashboard serem a mesma marca no mesmo tema.
   ⚠️ `--text-2`/`--text-3` usam os mesmos valores escurecidos do console:
   os nominais do DS (#758EBC/#A2ABBE) não passam AA como texto sobre branco.
   -------------------------------------------------------------------- */
html[data-theme="light"] body.landing{
  --accent:#006EFF;--accent-bright:#0057DB;--accent-deep:#0048B5;
  --accent-grad:linear-gradient(135deg,#3C70FF 0%,#006EFF 55%,#1031C3 100%);
  --accent-soft:#EAF1FF;--accent-glow:rgba(0,110,255,.30);
  --ok:#1B9E62;--warn:#C77700;--crit:#E5484D;
  --bg:#F4F9FF;--bg-2:#FFFFFF;--panel:#FFFFFF;--panel-2:#FAFCFF;
  --border:#DCE4F0;--border-strong:#B4C6DC;
  --text:#050A20;--text-2:#5A6E96;--text-3:#6B7794;
  --shadow:0 10px 18px -8px rgba(5,10,32,.15);

  --glass-fill:72%;
  --glass-edge:rgba(255,255,255,.85);--glass-border:rgba(180,198,220,.55);
  --glass-shadow:0 10px 30px -12px rgba(5,10,32,.18);
  --nav-bg:rgba(255,255,255,.72);
}

body.landing *{box-sizing:border-box}
html.landing-html{scroll-behavior:smooth}

/* ------------------------------------------------------ alternador de tema */
body.landing .themesw{
  display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--border);border-radius:999px;background:none;
  cursor:pointer;transition:background .18s,border-color .18s;
}
body.landing .themesw:hover{background:var(--accent-soft);border-color:var(--accent)}
/* O glifo é CSS puro: a landing não carrega webfont de ícone (é marketing,
   não deve baixar a fonte inteira do Material Symbols por um botão). */
/* No tema CLARO é um sol: disco cheio com raios curtos em volta (os raios
   saem de um box-shadow de 4 pontos). No ESCURO vira lua: o mesmo disco com
   uma "mordida", feita por um inset shadow na cor do fundo da navbar.
   ⚠️ A mordida precisa de uma cor OPACA — um token translúcido deixaria o
   disco aparecer por baixo e a lua viraria um borrão. */
body.landing .themesw-ico{
  width:14px;height:14px;border-radius:50%;
  background:var(--text-2);
  transition:background .18s,box-shadow .18s;
  box-shadow:
    0 -6px 0 -5px var(--text-2), 0 6px 0 -5px var(--text-2),
    -6px 0 0 -5px var(--text-2), 6px 0 0 -5px var(--text-2);
}
html[data-theme="dark"] body.landing .themesw-ico{
  box-shadow:inset -5px -3px 0 -1px #050A20;
}
body.landing .themesw:hover .themesw-ico{background:var(--accent)}

body.landing a{color:var(--accent-bright);text-decoration:none}
body.landing a:hover{color:var(--accent-deep)}
html[data-theme="dark"] body.landing a:hover{color:#B8D8FF}
body.landing img{max-width:100%;display:block}
body.landing .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
body.landing .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-bright);margin:0 0 14px}
body.landing h1,body.landing h2,body.landing h3,body.landing h4{margin:0;letter-spacing:-.02em;text-wrap:pretty}
body.landing h2{font-size:clamp(27px,3.2vw,42px);line-height:1.14}
body.landing h3{font-size:18px}
body.landing p{text-wrap:pretty}
body.landing .lede{color:var(--text-2);font-size:clamp(16px,1.3vw,18.5px);max-width:64ch;margin:18px 0 0}
body.landing .note{color:var(--text-3);font-size:13px;max-width:70ch;margin:22px 0 0;font-family:var(--font-mono);line-height:1.7}

/* Toggle PT/EN: puramente CSS para o texto estático. Atributos (placeholder,
   option) e strings geradas por JS são tratados no landing.js — CSS não
   alcança nem valor de atributo nem texto criado dinamicamente. */
body.landing span[lang],body.landing b[lang]{display:none}
html[data-lang="pt"] body.landing span[lang="pt"],
html[data-lang="pt"] body.landing b[lang="pt"],
html[data-lang="en"] body.landing span[lang="en"],
html[data-lang="en"] body.landing b[lang="en"]{display:revert}

body.landing header.nav{position:fixed;inset:0 0 auto;z-index:50;backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid transparent;transition:border-color .3s}
body.landing header.nav.solid{border-bottom-color:var(--border)}
body.landing .nav-in{display:flex;align-items:center;gap:26px;height:68px}
/* Logo da marca ao dobro do tamanho original (26px → 52px), a pedido do
   produto. A navbar tem 68px de altura, então 52px cabe com folga. */
body.landing .nav-in>img{height:52px;width:auto}
body.landing .nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px}
body.landing .nav-links a{color:var(--text-2)}
body.landing .nav-links a:hover{color:var(--text)}
body.landing .langsw{display:flex;gap:2px;border:1px solid var(--border);border-radius:99px;padding:3px;font-family:var(--font-mono);font-size:11px}
body.landing .langsw button{background:none;border:0;color:var(--text-3);font:inherit;padding:4px 9px;border-radius:99px;cursor:pointer;letter-spacing:.08em}
body.landing .langsw button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-bright)}

body.landing .btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:12px 22px;border-radius:99px;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;font-family:inherit}
body.landing .btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 10px 30px -12px var(--accent-glow)}
body.landing .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px -12px var(--accent-glow);color:#fff}
body.landing .btn-ghost{border-color:var(--border-strong);color:var(--text);background:none}
body.landing .btn-ghost:hover{background:var(--accent-soft);color:var(--text)}
body.landing .btn-sm{padding:9px 18px;font-size:13px}
body.landing .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

body.landing .hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:center;padding:130px 0 90px;overflow:hidden}
body.landing .hero video,body.landing .hero .vfallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.landing .hero .vfallback{background:radial-gradient(1000px 600px at 72% 22%,rgba(0,110,255,.26),transparent 65%),var(--bg-2)}
/* Véu do herói: escurece o vídeo à ESQUERDA (onde vive o texto) e o deixa
   aparecer à direita. As três paradas têm alfas diferentes de propósito —
   achatá-las num valor só cobre o vídeo inteiro e mata o efeito. */
body.landing .hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,32,.95) 0%,rgba(5,10,32,.84) 44%,rgba(5,10,32,.42) 100%),linear-gradient(to top,var(--bg) 2%,transparent 46%)}
/* ⚠️ O conteúdo do herói fica CLARO nos dois temas — não herda `--text`.
   O vídeo de fundo é escuro e não muda com o tema; no tema claro o `--text`
   é quase preto e a chamada principal sumiria sobre o vídeo. O véu escuro
   acima existe justamente para garantir esse contraste. */
body.landing .hero .wrap{position:relative;z-index:2;color:#E9F4FF}
body.landing .hero .lede{color:#B4C6DC}
body.landing .hero .eyebrow{color:#8DBDFF}
body.landing .hero h1{font-size:clamp(36px,5.2vw,68px);line-height:1.04;max-width:22ch}
body.landing .hero h1 em{font-style:normal;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
body.landing .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

body.landing section{padding:100px 0;position:relative}
body.landing .tone{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 22%,var(--bg-2) 78%,var(--bg) 100%)}
body.landing .sec-head{max-width:72ch}
body.landing .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:48px}
body.landing .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:48px}
body.landing .card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:border-color .2s,transform .2s}
body.landing .card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
body.landing .card h3{margin-bottom:9px}
body.landing .card p{color:var(--text-2);font-size:15px;margin:0}
body.landing .tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-bright);background:var(--accent-soft);border-radius:99px;padding:5px 11px;margin-bottom:15px}

body.landing .bens{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:46px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.landing .ben{background:var(--bg);padding:26px 24px;display:flex;gap:16px;align-items:baseline;transition:background .2s}
body.landing .ben:hover{background:var(--panel)}
body.landing .ben b{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--accent-bright);font-weight:500}
body.landing .ben p{margin:0;font-size:16.5px;color:var(--text);letter-spacing:-.01em}

body.landing .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
body.landing .vplayer{margin-top:44px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}
body.landing .vplayer video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}

body.landing .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:52px;border-top:1px solid var(--border)}
body.landing .step{padding:26px 22px 0;border-right:1px solid var(--border);position:relative}
body.landing .step:last-child{border-right:0}
body.landing .step:before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent-grad);opacity:0;transition:opacity .25s}
body.landing .step:hover:before{opacity:1}
body.landing .step b{display:block;font-family:var(--font-mono);font-size:12px;color:var(--accent-bright);letter-spacing:.14em;margin-bottom:14px}
body.landing .step h3{font-size:16.5px;margin-bottom:8px}
body.landing .step p{color:var(--text-2);font-size:14px;margin:0}
body.landing .mono{font-family:var(--font-mono);font-size:13px;color:var(--accent-bright)}

body.landing .shots{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-top:48px}
body.landing .shot{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow);margin:0}
body.landing .shot figcaption{flex:0 0 auto;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:12px 16px;border-top:1px solid var(--border)}
body.landing .shot img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top left}
body.landing .shots .stack{display:grid;gap:20px}

body.landing .clouds{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:38px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.landing .clouds span{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--text-2);background:var(--bg);padding:26px 18px;transition:background .2s,color .2s}
body.landing .clouds span:hover{background:var(--panel);color:var(--text)}

/* ---------------------------------------------------------------- wizard  */
body.landing .wizard{margin-top:42px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:30px;max-width:840px}
body.landing .wz-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:8px}
body.landing .wz-head h3{font-size:20px}
body.landing .wz-step{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);margin-left:auto}
body.landing .wz-bar{height:3px;border-radius:99px;background:var(--border);overflow:hidden;margin:18px 0 26px}
body.landing .wz-bar i{display:block;height:100%;background:var(--accent-grad);transition:width .3s}
body.landing .wz-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:0;padding:0;margin:0}
body.landing .wz-fields[hidden]{display:none}
body.landing .wizard label{display:grid;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
body.landing .wizard label.full{grid-column:1/-1}
body.landing .wizard input,body.landing .wizard textarea,body.landing .wizard select{font-family:var(--font-sans);font-size:15px;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 14px;outline:none;transition:border-color .18s,box-shadow .18s;width:100%}
body.landing .wizard input:focus,body.landing .wizard textarea:focus,body.landing .wizard select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body.landing .wizard textarea{min-height:120px;resize:vertical}
body.landing .wizard .err{border-color:var(--crit)}
body.landing .wizard .msg{font-family:var(--font-sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--crit);min-height:1em}
body.landing .wz-terms{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--text-2);line-height:1.6}
body.landing .wz-terms input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
body.landing .wz-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:8px}
body.landing .wz-foot small{color:var(--text-3);font-size:12.5px;max-width:44ch}
body.landing .wz-actions{display:flex;gap:12px;margin-left:auto}
body.landing .wz-done{text-align:center;padding:34px 10px}
body.landing .wz-done .tick{font-size:40px;line-height:1;margin-bottom:14px}
body.landing .wz-done h3{color:var(--ok);font-size:22px;margin-bottom:10px}
body.landing .wz-done p{color:var(--text-2);margin:0 auto;max-width:46ch}

body.landing footer{border-top:1px solid var(--border);padding:52px 0 40px;color:var(--text-3);font-size:14px}
body.landing .foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
body.landing .foot-grid img{height:22px;opacity:.85;margin-bottom:16px}
body.landing .foot-grid h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px}
body.landing .foot-grid p{margin:0 0 6px;line-height:1.7}
body.landing .foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--border);font-size:12.5px}

@media(max-width:980px){
  body.landing .steps{grid-template-columns:1fr 1fr}
  body.landing .step{border-bottom:1px solid var(--border);padding-bottom:24px}
}
@media(max-width:900px){
  body.landing .split,body.landing .shots,body.landing .wz-fields,body.landing .foot-grid{grid-template-columns:1fr;gap:28px}
  body.landing .wz-fields{gap:16px}
  body.landing .clouds{grid-template-columns:1fr 1fr}
  body.landing .nav-links{display:none}
  /* O logo dobrado (52px) divide a barra com PT/EN, o botão de tema e o CTA.
     Em tela estreita isso aperta, então ele volta a um tamanho intermediário. */
  body.landing .nav-in>img{height:40px}
  body.landing section{padding:74px 0}
  body.landing .wrap{padding:0 22px}
  body.landing .steps{grid-template-columns:1fr}
  body.landing .step{border-right:0}
  body.landing .wizard{padding:22px}
  body.landing .wz-actions{margin-left:0;width:100%}
  body.landing .wz-actions .btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  body.landing *{transition:none!important;animation:none!important}
  html.landing-html{scroll-behavior:auto}
}

/* ============================================================================
   ▼▼▼ GLASS — EFEITO VIDRO (REVERSÍVEL) ▼▼▼
   PARA REVERTER: apague deste marcador até o FIM DO ARQUIVO. Bloco contíguo e
   aditivo — nada acima foi alterado.

   Os cards da landing passam a ser translúcidos com blur, deixando o fundo da
   seção vazar por trás. ⚠️ Precisa de algo ATRÁS para borrar: as seções
   ganham auras suaves na cor da marca, senão o backdrop-filter não teria o
   que fazer sobre um fundo chapado e o efeito seria invisível.
   ========================================================================== */

body.landing section{
  background-image:
    radial-gradient(720px 420px at 88% 0%, var(--glass-aura-1,rgba(0,110,255,.10)), transparent 62%),
    radial-gradient(620px 380px at -4% 12%, var(--glass-aura-2,rgba(60,112,255,.07)), transparent 58%);
}
body.landing{--glass-aura-1:rgba(0,110,255,.14);--glass-aura-2:rgba(60,112,255,.09)}
html[data-theme="light"] body.landing{--glass-aura-1:rgba(0,110,255,.10);--glass-aura-2:rgba(60,112,255,.07)}

body.landing .card,
body.landing .ben,
body.landing .form-card{
  background:color-mix(in srgb, var(--panel) var(--glass-fill), transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  position:relative;
}

/* Aresta superior iluminada: o que faz parecer vidro, não plástico fosco. */
body.landing .card::after,
body.landing .form-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-edge) 22%,var(--glass-edge) 78%,transparent);
  pointer-events:none;border-radius:inherit;
}

/* Acessibilidade / fallback: sem blur o translúcido vira sujeira ilegível. */
@media (prefers-reduced-transparency: reduce){
  body.landing .card,body.landing .ben,body.landing .form-card{
    background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.landing .card,body.landing .ben,body.landing .form-card{background:var(--panel)}
}
/* ▲▲▲ FIM DO BLOCO GLASS ▲▲▲ */