/* =====================================================================
   A página de vendas do Vnt (site.php) — a única tela que alguém vê sem
   conta. Prefixo `st-` em tudo (armadilha nº 9: classe global nova é
   conferida com grep antes de nascer). Não carrega portal.css: aqui não
   tem barra lateral, não tem caixa alta no corpo — é texto pra ler.

   Identidade: o azul do logo (#031026), o verde (#84BC25), Inter pesada
   com letras apertadas nos títulos e a Instrument Serif itálica nos
   detalhes — a mesma do login. O fundo do hero é o "snow grid" do login.
   ===================================================================== */
:root{
  --st-navy:#031026; --st-verde:#84BC25; --st-verde-esc:#5C951C; --st-azul:#1F5FA8;
  --st-tinta:#0b1223; --st-tinta-2:#3c4358; --st-tinta-3:#6b7280;
  --st-linha:#d9deea; --st-fundo:#f6f8fc; --st-laranja:#e0871e;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', system-ui, sans-serif; color:var(--st-tinta); background:#fff;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; }
.st-wrap{ width:min(1120px, calc(100% - 48px)); margin:0 auto; }

/* ---------------- barra de cima ---------------- */
.st-nav{
  position:sticky; top:0; z-index:10;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:rgba(255,255,255,.72); border-bottom:1px solid rgba(3,16,38,.06);
}
.st-nav-in{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.st-logo{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:800; font-size:26px; letter-spacing:-.04em; color:var(--st-navy); line-height:1;
}
.st-logo img{ width:30px; height:30px; }
.st-nav-acoes{ display:flex; align-items:center; gap:10px; }

/* ---------------- botões (o verde é o mesmo do login) ---------------- */
.st-btn{
  display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px;
  border-radius:999px; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; white-space:nowrap; cursor:pointer;
  font-family:inherit; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.st-btn:active{ transform:translateY(1px); }
.st-btn-verde{
  color:#16250a; border-color:rgba(255,255,255,.75);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #b9e174, #8ec737 55%, #a4d858);
  box-shadow:0 8px 22px rgba(132,188,37,.35), inset 0 2px 5px rgba(255,255,255,.75), inset 0 -5px 10px rgba(60,110,10,.22);
}
.st-btn-verde:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(132,188,37,.45), 0 0 0 5px rgba(132,188,37,.16), inset 0 2px 5px rgba(255,255,255,.75), inset 0 -5px 10px rgba(60,110,10,.22);
}
.st-btn-quiet{ color:var(--st-navy); border-color:rgba(3,16,38,.18); background:rgba(255,255,255,.6); }
.st-btn-quiet:hover{ border-color:var(--st-navy); }
.st-btn-claro{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08); }
.st-btn-claro:hover{ border-color:#fff; }
.st-btn-grande{ height:60px; padding:0 34px; font-size:15px; }

/* ---------------- hero ---------------- */
.st-hero{
  position:relative; overflow:hidden; padding:84px 0 72px;
  background:radial-gradient(130% 115% at 68% 38%, #ffffff 0px, #f6f8ff 22%, #edf1fb 42%, #e2e6f2 62%, #d7dbe8 82%, #cfd3e0 100%);
}
.st-hero-grid{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(15,19,37,.05), rgba(15,19,37,.02) 2px, rgba(15,19,37,0) 9px, rgba(15,19,37,.05) 30px, rgba(15,19,37,.09) 39px, rgba(15,19,37,.03) 40px);
}
.st-hero-vinheta{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 68% 38%, rgba(0,0,0,0) 48%, rgba(170,180,202,.28) 80%, rgba(150,161,186,.42) 100%),
    linear-gradient(to top, #edf3ff 0px, rgba(237,243,255,0) 26%);
}
.st-hero-luz{
  position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  animation:st-varre 9s ease-in-out infinite;
}
@keyframes st-varre{
  0%, 12%{ transform:translateX(-55%); }
  55%, 100%{ transform:translateX(55%); }
}
.st-hero-in{ position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; }
.st-eyebrow{
  font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
  font-size:clamp(20px, 2.2vw, 28px); color:var(--st-tinta); margin-bottom:18px;
}
.st-h1{
  font-weight:800; font-size:clamp(38px, 6vw, 78px); line-height:1.02; letter-spacing:-.045em; color:var(--st-navy);
}
.st-h1 em{ font-style:normal; color:var(--st-verde-esc); }
.st-lead{
  font-size:clamp(16px, 1.5vw, 20px); color:var(--st-tinta-2); font-weight:500;
  max-width:700px; margin:24px auto 0;
}
.st-hero-acoes{ display:flex; gap:12px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.st-hero-nota{
  margin-top:18px; font-size:11.5px; color:var(--st-tinta-3); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.st-hero-nota span + span::before{ content:'·'; margin:0 10px; }

/* ---------------- a "janela" com o escritório ---------------- */
.st-demo{
  position:relative; z-index:1; margin:56px auto 0; width:min(1040px, 100%);
  border-radius:24px; overflow:hidden;
  background:rgba(255,255,255,.72); border:1.5px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 34px 70px rgba(15,20,35,.22), inset 0 2px 7px rgba(255,255,255,.9);
}
.st-demo-barra{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(3,16,38,.08); }
.st-demo-barra i{ width:10px; height:10px; border-radius:50%; background:#d5dae6; }
.st-demo-url{
  margin-left:10px; flex:1; height:28px; border-radius:999px; background:rgba(3,16,38,.05);
  display:flex; align-items:center; padding:0 14px; font-size:12px; color:var(--st-tinta-3); font-weight:600;
}
.st-demo-corpo{ display:grid; grid-template-columns:1fr 256px; }
.st-demo-sala{ padding:14px; }
.st-demo-lado{ border-left:1px solid rgba(3,16,38,.08); padding:18px; text-align:left; background:rgba(255,255,255,.5); }
.st-demo-lado h4{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--st-tinta-3); margin-bottom:12px; }
.st-chips{ margin-bottom:14px; }
.st-chip{
  display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:rgba(132,188,37,.15); color:var(--st-verde-esc); margin:0 6px 6px 0;
}
.st-chip-laranja{ background:rgba(224,135,30,.14); color:#b45f0e; }
.st-evento{ display:flex; gap:10px; font-size:12.5px; padding:9px 0; border-top:1px dashed rgba(3,16,38,.12); color:var(--st-tinta-2); line-height:1.35; }
.st-evento b{ color:var(--st-tinta); }
.st-evento time{ color:var(--st-tinta-3); font-variant-numeric:tabular-nums; flex:none; font-weight:600; }

/* O desenho da sala mora em assets/sala.css desde 09/09/2026: o
   Escritório mostra a MESMA sala e carrega portal.css, não este arquivo.
   As duas páginas incluem a folha da sala além da sua. */

/* ---------------- seções ---------------- */
.st-secao{ padding:96px 0; }
.st-secao-cabeca{ text-align:center; max-width:740px; margin:0 auto 52px; }
.st-kicker{
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-verde-esc); margin-bottom:14px;
}
.st-h2{ font-weight:800; font-size:clamp(30px, 4vw, 48px); line-height:1.05; letter-spacing:-.04em; color:var(--st-navy); }
.st-h2 i{ font-family:'Instrument Serif', serif; font-weight:400; font-style:italic; letter-spacing:0; }
.st-p{ color:var(--st-tinta-2); font-size:17px; margin-top:16px; }

/* a equipe */
.st-equipe{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.st-pessoa{
  background:#fff; border:1px solid var(--st-linha); border-radius:22px; padding:24px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.st-pessoa:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,20,35,.10); }
.st-avatar{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:20px; margin-bottom:16px;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.18), 0 6px 14px rgba(3,16,38,.15);
}
.st-avatar.com{ background:var(--st-azul); }
.st-avatar.mkt{ background:var(--st-verde-esc); }
.st-avatar.dono{ background:var(--st-navy); }
.st-pessoa h3{ font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--st-navy); }
.st-papel{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--st-tinta-3); margin:4px 0 12px; }
.st-pessoa p{ font-size:14.5px; color:var(--st-tinta-2); }
.st-pessoa-voce{ background:var(--st-navy); border-color:var(--st-navy); }
.st-pessoa-voce h3{ color:#fff; }
.st-pessoa-voce .st-papel{ color:var(--st-verde); }
.st-pessoa-voce p{ color:rgba(255,255,255,.78); }
.st-pessoa-voce .st-avatar{ background:var(--st-verde); color:var(--st-navy); }

/* como funciona (fundo escuro) */
.st-escuro{ background:var(--st-navy); color:#fff; position:relative; overflow:hidden; }
.st-escuro::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%, rgba(132,188,37,.28), transparent 70%);
}
.st-escuro .st-wrap{ position:relative; }
.st-escuro .st-h2{ color:#fff; }
.st-escuro .st-p{ color:rgba(255,255,255,.72); }
.st-escuro .st-kicker{ color:var(--st-verde); }
.st-passos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.st-passo{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:28px; }
.st-num{
  font-family:'Instrument Serif', serif; font-style:italic; font-size:46px; line-height:1;
  color:var(--st-verde); margin-bottom:14px;
}
.st-passo h3{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; }
.st-passo p{ color:rgba(255,255,255,.75); font-size:15px; }
.st-balao{
  margin-top:18px; background:#fff; color:var(--st-tinta); border-radius:18px 18px 18px 4px;
  padding:14px 16px; font-size:14px; font-weight:500; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.st-balao small{
  display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--st-tinta-3); margin-bottom:4px; font-weight:800;
}
.st-fila{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.st-fila span{
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06); border-radius:12px; padding:9px 12px;
}
.st-fila i{ width:9px; height:9px; border-radius:50%; background:var(--st-verde); flex:none; }
.st-fila i.andando{ background:var(--st-laranja); box-shadow:0 0 0 4px rgba(224,135,30,.25); }
.st-fila i.depois{ background:rgba(255,255,255,.3); }

/* o que vem dentro */
.st-recursos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.st-recurso{ background:var(--st-fundo); border-radius:22px; padding:26px; border:1px solid var(--st-linha); }
.st-recurso svg{
  width:28px; height:28px; stroke:var(--st-verde-esc); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:16px;
}
.st-recurso h3{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--st-navy); margin-bottom:6px; }
.st-recurso p{ font-size:14.5px; color:var(--st-tinta-2); }

/* chamada final */
.st-final{ text-align:center; padding:110px 0; border-top:1px solid var(--st-linha); }
.st-final .st-h2{ font-size:clamp(34px, 5vw, 62px); }
.st-final-acoes{ margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* rodapé */
.st-rodape{ border-top:1px solid var(--st-linha); padding:26px 0; font-size:12.5px; color:var(--st-tinta-3); }
.st-rodape-in{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.st-rodape a{ text-decoration:none; font-weight:600; color:var(--st-tinta-2); margin-left:18px; }
.st-rodape a:hover{ color:var(--st-verde-esc); }

/* ---------------- telas menores ---------------- */
@media (max-width:1000px){
  .st-equipe{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:900px){
  .st-passos{ grid-template-columns:1fr; }
  .st-recursos{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:820px){
  .st-demo-corpo{ grid-template-columns:1fr; }
  .st-demo-lado{ border-left:0; border-top:1px solid rgba(3,16,38,.08); }
}
@media (max-width:640px){
  .st-wrap{ width:calc(100% - 32px); }
  .st-nav-in{ height:60px; }
  .st-logo{ font-size:22px; }
  .st-logo img{ width:26px; height:26px; }
  .st-btn{ height:40px; padding:0 16px; font-size:12px; }
  .st-hero{ padding:56px 0 48px; }
  .st-secao{ padding:64px 0; }
  .st-final{ padding:72px 0; }
  .st-btn-grande, .st-hero-acoes .st-btn, .st-final-acoes .st-btn{ height:54px; padding:0 26px; font-size:14px; width:100%; }
  .st-demo{ border-radius:18px; }
}
@media (max-width:560px){
  .st-equipe, .st-recursos{ grid-template-columns:1fr; }
}