/* =========================================================
   Luvison Software Solutions — luvison.dev
   Identidade visual v1 · violeta (dois tokens)
   ========================================================= */

:root{
  /* superfícies */
  --void:#0A0D13;
  --panel:#121722;
  --line:#1F2735;

  /* texto */
  --ink:#E8ECF4;
  --ink-2:#B7C0D0;
  --muted:#7E8A9E;

  /* destaque — par obrigatório:
     --accent NUNCA vira fundo de botão
     --accent-fill NUNCA vira texto */
  --accent:#A78BFA;
  --accent-fill:#6D28D9;
  --on-accent:#F5F3FF;
  --accent-press:#5B21B6;
  --accent-soft:rgba(167,139,250,.14);

  /* tipografia */
  --display:"Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* forma e espaço */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  --wrap:1060px;
  --pad:24px;
  --measure:62ch;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;   /* compensa o cabeçalho fixo */
}

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
ul[role="list"],ol[role="list"]{ list-style:none; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* pula direto pro conteúdo — só aparece na navegação por teclado */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--accent-fill); color:var(--on-accent);
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0; z-index:100;
}
.skip:focus{ left:0; }

/* ---------------- cabeçalho ---------------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,19,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topo-in{ display:flex; align-items:center; gap:28px; height:72px; }
.marca{ flex:0 0 auto; }
.marca svg{ height:26px; width:auto; }
.marca:hover{ text-decoration:none; }

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ color:var(--muted); font-size:.9375rem; }
.nav a:hover{ color:var(--ink); text-decoration:none; }

/* ---------------- botões ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:12px 20px;
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ text-decoration:none; }

/* A borda não é enfeite: --accent-fill tem 2,7:1 contra --void,
   abaixo do mínimo de 3:1 da WCAG para o limite de um componente.
   É a borda em --accent (7,2:1) que dá contorno visível ao botão. */
.btn-primario{
  background:var(--accent-fill);
  color:var(--on-accent);
  border:1px solid var(--accent);
}
.btn-primario:hover{ background:var(--accent-press); }

.btn-vazado{
  background:transparent; color:var(--ink);
  border:1px solid var(--line);
}
.btn-vazado:hover{ border-color:var(--muted); }

/* ---------------- hero ---------------- */
.hero{ position:relative; overflow:hidden; padding:clamp(64px,11vw,120px) 0 clamp(56px,9vw,96px); }
.halo{
  position:absolute; right:-14%; top:-42%;
  width:min(760px,110vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(167,139,250,.20) 0%, rgba(167,139,250,0) 62%);
  pointer-events:none;
}
.hero .wrap{ position:relative; }

.status{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.ponto{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px rgba(167,139,250,.16);
}

h1{
  font-family:var(--display);
  font-size:clamp(2.25rem,6.2vw,4rem);
  font-weight:800; letter-spacing:-.045em; line-height:1.02;
  margin-top:20px; max-width:16ch;
}
.ac{ color:var(--accent); }

.lead{ color:var(--ink-2); font-size:clamp(1rem,2.1vw,1.125rem); margin-top:20px; max-width:52ch; }
.acoes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* ---------------- seções ---------------- */
.secao{ padding:clamp(56px,8vw,88px) 0; border-top:1px solid var(--line); }

.rotulo{
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
h2{
  font-family:var(--display);
  font-size:clamp(1.6rem,3.6vw,2.3rem);
  font-weight:700; letter-spacing:-.035em; margin-top:12px;
}
h3{ font-size:1.1875rem; font-weight:600; letter-spacing:-.02em; }
.texto{ color:var(--ink-2); margin-top:16px; max-width:var(--measure); }

/* ---------------- cards de serviço ---------------- */
.cards{
  display:grid; gap:16px; margin-top:32px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:720px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px;
  transition:border-color .15s ease;
}
.card:hover{ border-color:var(--accent); }
.card p{ color:var(--muted); font-size:.9375rem; margin-top:10px; }

/* ---------------- etapas ---------------- */
.etapas{
  display:grid; gap:16px; margin-top:32px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.etapa{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.etapa .n{ font-family:var(--mono); font-size:.8125rem; color:var(--accent); }
.etapa h3{ margin-top:10px; }
.etapa p{ color:var(--muted); font-size:.9375rem; margin-top:8px; }

/* ---------------- etiquetas ---------------- */
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.tag{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em;
  color:var(--accent); background:var(--accent-soft);
  padding:7px 13px; border-radius:var(--r-pill);
}

/* ---------------- contato ---------------- */
.contato{
  display:grid; gap:36px;
  grid-template-columns:1.15fr .85fr;
  align-items:start;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(26px,4vw,42px);
}
.contato-t{ margin-top:12px; max-width:18ch; }

.canais{ display:flex; flex-direction:column; gap:18px; }
.canais li{ display:flex; flex-direction:column; gap:4px; }
.canais .k{
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.canais .v{ color:var(--ink); font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.canais .v.ac{ color:var(--accent); }

/* ---------------- rodapé ---------------- */
.rodape{ border-top:1px solid var(--line); padding:34px 0 44px; }
.rodape-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.rodape-marca{ display:flex; align-items:center; gap:12px; color:var(--ink); font-size:.9375rem; font-weight:600; }
.rodape-marca svg{ height:20px; width:auto; }
.rodape-txt{ font-family:var(--mono); font-size:.75rem; color:var(--muted); }

/* ---------------- responsivo ---------------- */
@media (max-width:860px){
  .contato{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  :root{ --pad:20px; }
  .nav{ display:none; }              /* no celular sobra a marca + o botão */
  .topo-in{ gap:16px; justify-content:space-between; }
  .topo-cta{ margin-left:auto; padding:10px 16px; font-size:.875rem; }
  h1{ max-width:none; }
  .rodape-in{ flex-direction:column; align-items:flex-start; gap:12px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}