/* ============================================================
   APOLLO SISTEMAS — sistema de design compartilhado
   Um arquivo para todas as páginas. Cores e tipografia saem
   da logo oficial. Dark-only por decisão: a marca vive sobre
   preto, então não há tema claro — mas tudo é pintado
   explicitamente, nada herda o fundo do navegador.
   ============================================================ */
:root{
  color-scheme: dark;

  --ink:      #030A14;
  --ink-2:    #05101D;
  --surface:  #071627;
  --raised:   #0B2136;
  --line:     rgba(147,175,198,.14);
  --line-hot: rgba(23,193,235,.34);

  --cyan:     #17C1EB;
  --cyan-lt:  #5BDCF7;
  --mint:     #2FDCA4;
  --mint-lt:  #6BEEC1;
  --grad:     linear-gradient(112deg, var(--cyan-lt) 0%, var(--cyan) 42%, var(--mint) 100%);

  --white:    #EDF6FB;
  --fog:      #93AFC6;
  --fog-dim:  #5E7A91;

  /* semânticas — separadas do acento da marca */
  --ok:   #2FDCA4;
  --warn: #F2B85C;
  --risk: #FF7A6B;

  --display: 'Saira', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --s1: .78rem; --s2: .92rem; --s3: 1.05rem; --s4: 1.3rem;
  --s5: 1.75rem; --s6: 2.4rem; --s7: 3.4rem; --s8: 4.6rem;

  --pad:  clamp(20px, 5vw, 48px);
  --wrap: 1200px;
  --r: 14px;
}
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background: var(--ink); color: var(--white);
  font-family: var(--body); font-size: var(--s3); line-height:1.65;
  -webkit-font-smoothing: antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family: var(--display); font-stretch:112%; font-weight:800;
  line-height:1.04; letter-spacing:-.015em; text-wrap:balance; margin:0;
}
h1{ font-size: clamp(2.1rem, 5.2vw, 3.8rem); }
h2{ font-size: clamp(1.8rem, 4.1vw, var(--s7)); }
h3{ font-size: clamp(1.2rem, 2.1vw, var(--s5)); font-weight:700; }
p{ margin:0; } ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- utilitários ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }
.band{ padding-block: clamp(60px, 8vw, 116px); }
.band--lift{ background: var(--ink-2); border-block:1px solid var(--line); }

.eyebrow{
  font-family:var(--mono); font-size:var(--s1); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; flex:none; }
.eyebrow.warn{ color:var(--warn); }

.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lead{ color:var(--fog); font-size:clamp(1.02rem,1.5vw,var(--s4)); max-width:62ch; }

.chip-todo{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--warn); border:1px dashed rgba(242,184,92,.45);
  border-radius:999px; padding:3px 9px;
}

/* halos de marca — dão volume sem competir com o conteúdo */
.aura{ position:relative; overflow:hidden; isolation:isolate; }
.aura::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:min(780px,95vw); aspect-ratio:1; border-radius:50%; filter:blur(120px); opacity:.55;
}
.aura-a::before{ background:radial-gradient(circle, rgba(23,193,235,.34), transparent 68%); top:-26%; left:-16%; }
.aura-b::before{ background:radial-gradient(circle, rgba(47,220,164,.30), transparent 68%); bottom:-30%; right:-14%; }
.aura-c::before{ background:radial-gradient(circle, rgba(91,220,247,.26), transparent 68%); top:-30%; right:-18%; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-stretch:105%; font-weight:700; font-size:var(--s2);
  padding:14px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  white-space:nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--grad); color:#02121B; box-shadow:0 6px 26px -8px rgba(23,193,235,.6); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(47,220,164,.6); }
.btn-ghost{ background:rgba(147,175,198,.06); border-color:var(--line); color:var(--white); }
.btn-ghost:hover{ border-color:var(--line-hot); background:rgba(23,193,235,.1); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:var(--s1); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  border-bottom:1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.hdr.stuck{
  background:rgba(3,10,20,.82);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
.hdr-in{ display:flex; align-items:center; gap:22px; height:76px; }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand-mark{ width:38px; height:38px; flex:none; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-txt b{
  font-family:var(--display); font-stretch:120%; font-weight:800;
  font-size:1.16rem; letter-spacing:.055em; color:var(--white);
}
.brand-txt span{ font-family:var(--mono); font-size:.53rem; font-weight:500; letter-spacing:.42em; margin-top:3px; }

.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{
  font-size:var(--s2); font-weight:500; color:var(--fog);
  padding:9px 13px; border-radius:999px;
  transition: color .18s ease, background .18s ease;
}
.nav a:hover{ color:var(--white); background:rgba(147,175,198,.07); }
.nav a[aria-current="page"]{ color:var(--cyan-lt); background:rgba(23,193,235,.11); }
.hdr .btn{ flex:none; }

.burger{
  display:none; margin-left:auto; cursor:pointer;
  background:rgba(147,175,198,.06); border:1px solid var(--line);
  border-radius:11px; width:44px; height:44px;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--white); position:relative; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--white);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

.mobnav{
  position:fixed; inset:76px 0 auto 0; z-index:89;
  background:rgba(3,10,20,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad) 26px;
  display:none; flex-direction:column; gap:2px;
}
.mobnav.open{ display:flex; }
.mobnav a{
  padding:13px 4px; font-size:var(--s4); font-family:var(--display);
  font-weight:600; border-bottom:1px solid var(--line);
}
.mobnav .btn{ margin-top:16px; }

/* barra de urgência (Reforma Tributária) */
.topbar{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:9px var(--pad); min-height:38px; text-align:center; line-height:1.4;
  background:linear-gradient(90deg, rgba(242,184,92,.15), rgba(23,193,235,.13));
  border-bottom:1px solid rgba(242,184,92,.24);
  font-size:var(--s2); color:var(--fog);
  transition: background .2s ease;
}
.topbar:hover{ background:linear-gradient(90deg, rgba(242,184,92,.24), rgba(23,193,235,.2)); }
.topbar b{ color:var(--white); font-weight:600; }
.tb-tag{
  font-family:var(--mono); font-size:.58rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--warn);
  border:1px solid rgba(242,184,92,.45); border-radius:999px; padding:3px 10px; flex:none;
}
.tb-cta{ font-family:var(--display); font-weight:700; font-size:var(--s2); color:var(--cyan-lt); flex:none; white-space:nowrap; }

/* páginas internas abrem abaixo do header fixo */
.page-top{ padding-top:152px; }

/* ============================================================
   CÓDIGO DE BARRAS — divisor estrutural, do mundo do caixa
   ============================================================ */
.barcode{
  height:20px; display:flex; align-items:stretch; gap:3px; overflow:hidden; opacity:.34;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.barcode i{ flex:none; background:var(--fog-dim); border-radius:1px; }
.bc-wrap{ margin-block: clamp(-60px, -5vw, -28px); }

/* ============================================================
   MARQUEE
   ============================================================ */
.mq{
  border-block:1px solid var(--line); background:var(--ink-2); padding-block:17px; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.mq:hover .mq-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.mq-track span{
  font-family:var(--mono); font-size:var(--s2); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fog);
  padding-inline:26px; display:flex; align-items:center; gap:26px; white-space:nowrap;
}
.mq-track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan); opacity:.8; flex:none; }
.mq-track span:nth-child(even){ color:var(--fog-dim); }
.mq-track span:nth-child(even)::after{ background:var(--mint); }

/* ============================================================
   MOCKS DE TELA
   ============================================================ */
.mock{
  background:#020810; border:1px solid var(--line-hot); border-radius:13px; overflow:hidden;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(23,193,235,.06);
  font-family:var(--mono); font-size:.72rem;
}
.mock-bar{
  display:flex; align-items:center; gap:7px; padding:9px 13px;
  border-bottom:1px solid var(--line); background:rgba(147,175,198,.04);
  color:var(--fog-dim); letter-spacing:.09em; text-transform:uppercase; font-size:.6rem;
}
.mock-bar i{ width:7px; height:7px; border-radius:50%; background:var(--fog-dim); opacity:.45; flex:none; }
.mock-bar .live{ margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--mint); }
.mock-bar .live b{ width:6px; height:6px; border-radius:50%; background:var(--mint); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.7); } }
.mock-body{ padding:15px 16px 17px; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; }
.row + .row{ border-top:1px solid rgba(147,175,198,.07); }
.row .k{ color:var(--fog); }
.row .v{ color:var(--white); font-variant-numeric:tabular-nums; }
.row .v.up{ color:var(--mint); } .row .v.dn{ color:var(--warn); }

/* ============================================================
   RODAPÉ
   ============================================================ */
.ft{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:clamp(48px,6vw,80px); }
.ft-grid{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(28px,4vw,60px); }
.ft-about p{ color:var(--fog); font-size:var(--s2); margin-top:18px; max-width:38ch; }
.ft-h{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fog-dim); margin-bottom:18px; }
.ft-links li{ border-bottom:1px solid var(--line); }
.ft-links a{
  display:flex; align-items:baseline; gap:12px; padding:11px 0; font-size:var(--s2); color:var(--fog);
  transition: color .16s ease, padding-left .16s ease;
}
.ft-links a:hover{ color:var(--white); padding-left:5px; }
.ft-links .n{ font-family:var(--mono); font-size:.62rem; color:var(--cyan); opacity:.8; flex:none; }
.ft-links .ext{ margin-left:auto; color:var(--fog-dim); font-size:.7rem; }
.ft-bot{
  margin-top:clamp(40px,5vw,64px); padding-block:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog-dim);
}
.ft-bot b{ color:var(--fog); }

/* whatsapp flutuante */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(150deg,#34D97A,#1FA855);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(31,168,85,.6); transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:29px; height:29px; color:#fff; }

/* ============================================================
   CELULAR COM PRINT REAL
   A tela tem 160px de CSS de propósito: os prints são 320×640
   nativos, então em retina o pixel bate exatamente 2:1 e a
   imagem sai nítida sem precisar de reexportação.
   ============================================================ */
.ph-real{
  width:176px; flex:none; position:relative;
  padding:7px; border:1px solid var(--line-hot); border-radius:24px;
  background:#020810;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(23,193,235,.06);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease;
}
.ph-real img{
  display:block; width:160px; height:320px; border-radius:18px;
  border:1px solid rgba(147,175,198,.16);
}
.ph-real figcaption{
  margin-top:11px; text-align:center;
  font-family:var(--mono); font-size:.55rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fog-dim);
}

/* leque: o do meio à frente e elevado */
.ph-fan{ display:flex; justify-content:center; align-items:flex-start; margin:0; }
.ph-fan .ph-real{ margin:0; }
.ph-fan .ph-real + .ph-real{ margin-left:-22px; }
.ph-fan .ph-real:nth-child(1),
.ph-fan .ph-real:nth-child(3){ margin-top:26px; }
.ph-fan .ph-real:nth-child(2){ z-index:2; }
.ph-fan .ph-real:hover{ transform:translateY(-10px); border-color:var(--cyan); z-index:3; }

/* par, dentro do painel de soluções */
.ph-pair{ display:flex; justify-content:center; align-items:flex-start; margin:0; }
.ph-pair .ph-real + .ph-real{ margin-left:-22px; margin-top:26px; }
.ph-pair .ph-real:hover{ transform:translateY(-10px); border-color:var(--cyan); z-index:3; }

@media (max-width:480px){
  .ph-fan .ph-real:nth-child(3){ display:none; }
  .ph-fan .ph-real + .ph-real,
  .ph-pair .ph-real + .ph-real{ margin-left:-30px; }
}

/* ============================================================
   PRINT DENTRO DA MOLDURA
   As telas do Apollo BI já são escuras e encaixam direto.
   As do ERP desktop e do PDV são claras: ganham margem interna,
   borda e um leve corte de brilho para o branco não ofuscar.
   ============================================================ */
.mock-shot .mock-body{ padding:9px; }
.mock-shot img{
  display:block; width:100%; height:auto; border-radius:7px;
  border:1px solid rgba(147,175,198,.20);
}
.mock-shot.claro img{ filter:brightness(.96) contrast(1.03); }
.shot-img{
  display:block; width:100%; height:auto; border-radius:7px;
  border:1px solid rgba(147,175,198,.20);
  filter:brightness(.96) contrast(1.03);
}

/* ---------- reveal ---------- */
.rv{
  opacity:0; transform:translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.rv.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1020px){
  .ft-grid{ grid-template-columns:1fr 1fr; }
  .ft-about{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .nav{ display:none; }
  .hdr .btn{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:760px){
  .topbar{ font-size:var(--s1); gap:9px; padding-inline:14px; }
  .tb-txt .long{ display:none; }
}
@media (max-width:560px){
  .ft-grid{ grid-template-columns:1fr; }
  .bc-wrap{ margin-block:-20px; }
  .page-top{ padding-top:128px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  .mq-track{ animation:none; }
}