/* Site público do Nexo Seller (sellernexo.com). Mesmas cores do app (app/dashboard.css): escuro por padrão,
   azul só para ações, verde-limão para lucro e Nexa, âmbar para atenção. Sem fontes externas: carrega rápido. */
:root{
  --bg:#0A0D14; --bg-deep:#080B11; --surface:#11161F; --surface-2:#171D29; --line:#1F2634; --line-2:#2B3345;
  --ink:#ECEFF5; --ink-2:#A0A9BB; --ink-3:#6A7489;
  --accent:#5E8FF3; --accent-strong:#80A7F7; --on-accent:#0A0F1C;
  --lime:#C6EF5E; --on-lime:#1A240A; --good-soft:rgba(182,227,90,.13); --warn:#EDB45F; --warn-soft:rgba(237,180,95,.14);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F3F5F9; --bg-deep:#E9EDF3; --surface:#FFFFFF; --surface-2:#F5F7FA; --line:#E3E8F0; --line-2:#D3DAE5;
    --ink:#101623; --ink-2:#566177; --ink-3:#8791A4;
    --accent:#2E63DD; --accent-strong:#224FB8; --on-accent:#FFFFFF;
    --good-soft:rgba(95,160,20,.12); --warn:#A8680F; --warn-soft:rgba(190,120,20,.12);
    color-scheme:light;
  }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:Geist, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ color:var(--accent-strong); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--surface); color:var(--ink); padding:8px 12px; border-radius:8px; z-index:10; }
.skip:focus{ left:8px; }

/* Topo: sempre escuro, como a barra lateral do app. */
.top{ background:#0A0D14; border-bottom:1px solid #1F2634; color:#ECEFF5; }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; color:#ECEFF5; text-decoration:none; font-weight:600; font-size:17px; letter-spacing:-.01em; }
.brand-mark{ width:32px; height:32px; border-radius:9px; background:var(--lime); color:var(--on-lime); display:grid; place-items:center; font-weight:700; font-size:16px; }
.top nav{ display:flex; gap:18px; font-size:14px; }
.top nav a{ color:#A0A9BB; text-decoration:none; }
.top nav a:hover, .top nav a[aria-current="page"]{ color:#ECEFF5; }

/* Página inicial */
.hero{ background:#0A0D14; color:#ECEFF5; padding:64px 0 72px; border-bottom:1px solid #1F2634; }
.hero h1{ font-size:clamp(32px, 5.5vw, 52px); line-height:1.1; letter-spacing:-.03em; margin:14px 0 18px; max-width:760px; }
.hero h1 em{ font-style:normal; color:var(--lime); }
.hero p.lead{ font-size:clamp(17px, 2.2vw, 20px); color:#A0A9BB; max-width:640px; margin:0 0 28px; }
.pill{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--lime); background:rgba(198,239,94,.12); border:1px solid rgba(198,239,94,.28); padding:4px 12px; border-radius:999px; }
.pill i{ width:7px; height:7px; border-radius:50%; background:var(--lime); }
.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{ display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 20px; border-radius:12px; font-weight:600; font-size:15px; text-decoration:none; }
.btn-primary{ background:#5E8FF3; color:#0A0F1C; }
.btn-primary:hover{ background:#80A7F7; color:#0A0F1C; }
.btn-ghost{ border:1px solid #2B3345; color:#ECEFF5; }
.btn-ghost:hover{ border-color:#5E8FF3; color:#ECEFF5; }
.hero .note{ font-size:14px; color:#6A7489; margin-top:14px; }

section.block{ padding:64px 0; }
section.block h2{ font-size:clamp(24px, 3.4vw, 32px); letter-spacing:-.02em; line-height:1.2; margin:0 0 10px; }
section.block > .wrap > p.sub{ color:var(--ink-2); margin:0 0 32px; max-width:680px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:16px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card h3{ font-size:17px; margin:12px 0 6px; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--ink-2); font-size:15px; }
.ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink); }
.ic.lime{ background:var(--good-soft); color:var(--lime); }
@media (prefers-color-scheme: light){ .ic.lime{ color:#3F7F0C; } }
.ic svg{ width:20px; height:20px; }
.story{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.story .wrap{ max-width:760px; }
.story p{ color:var(--ink-2); font-size:17px; }
.founder .pill{ justify-self:start; }
.founder{ border:1px solid var(--line-2); border-radius:18px; padding:28px; background:var(--surface); display:grid; gap:14px; }
.founder h2{ margin:0; }
.founder p{ margin:0; color:var(--ink-2); }
.founder .mail{ font-weight:600; font-size:17px; }

/* Páginas de texto (privacidade, termos) */
.doc{ padding:48px 0 72px; }
.doc .wrap{ max-width:780px; }
.doc h1{ font-size:clamp(28px, 4.5vw, 40px); letter-spacing:-.02em; line-height:1.15; margin:0 0 8px; }
.doc .updated{ color:var(--ink-3); font-size:14px; margin:0 0 28px; }
.doc h2{ font-size:21px; letter-spacing:-.01em; margin:40px 0 10px; padding-top:8px; border-top:1px solid var(--line); }
.doc h3{ font-size:17px; margin:24px 0 6px; }
.doc p, .doc li{ color:var(--ink-2); }
.doc strong{ color:var(--ink); }
.doc ul, .doc ol{ padding-left:22px; }
.doc li{ margin:6px 0; }
.doc .box{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:18px 0; }
.doc .box p{ margin:4px 0; }
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:0 0 8px; font-size:15px; }
.toc ol{ margin:6px 0 0; columns:2; column-gap:28px; }
@media (max-width:640px){ .toc ol{ columns:1; } }

/* Rodapé */
footer{ border-top:1px solid var(--line); padding:32px 0 40px; color:var(--ink-3); font-size:14px; }
footer .wrap{ display:grid; gap:10px; }
footer .links{ display:flex; flex-wrap:wrap; gap:18px; }
footer .links a{ color:var(--ink-2); text-decoration:none; }
footer .links a:hover{ color:var(--accent); }
footer p{ margin:0; }

@media (max-width:640px){
  .top nav{ gap:14px; font-size:13px; }
  .top nav .hide-sm{ display:none; }
  .hero{ padding:44px 0 52px; }
  section.block{ padding:48px 0; }
  .btn{ width:100%; justify-content:center; }
}