/* ========= TOKENS ========= */
:root{
  --bg:#0B0B0B;           /* fundo geral (preto) */
  --surface:#121415;      /* cartões/inputs */
  --muted:#0F1113;        /* faixas alternadas */
  --border:#1F2426;
  --text:#FFFFFF;
  --text-dim:#C7CFD6;

  --green:#16A34A;
  --green-2:#15803d;

  --radius-xl:28px;
  --radius-lg:18px;
  --radius-md:12px;

  --shadow-soft:0 10px 28px rgba(0,0,0,.25);
  --shadow-card:0 8px 22px rgba(0,0,0,.22);

  --w-container:1180px;
}

/* ========= BASE ========= */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font:400 16px/1.65 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
}
a{ color:var(--green); text-decoration:none }
a:hover{ text-decoration:underline }

/* Containers & bands */
.container{ width:100%; max-width:var(--w-container); margin:0 auto; padding:0 18px }
.band{ padding: clamp(28px, 6vw, 78px) 0 }
.band--alt{ background:var(--muted) }
.container--narrow{ max-width:900px }

/* ========= HEADER ========= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,11,.8); backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; color:var(--text) }
.brand__logo{ height:38px; width:auto; display:block }
.brand__name{ font-weight:700; font-size:clamp(18px, 2.2vw, 24px); letter-spacing:.2px }

.nav{ display:flex; flex-wrap:wrap; gap:10px }

/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px; font-weight:600;
  border:1px solid transparent; transition:.2s ease; color:#0B0B0B;
}
.btn--primary{ background:var(--green) }
.btn--primary:hover{ background:var(--green-2); color:#fff }
.btn--ghost{
  background:transparent; color:var(--text); border:1px solid var(--green-2)
}
.btn--ghost:hover{ background:#0E1A12 }
.btn-submit{
  background:transparent; color:var(--text); border:1px solid var(--green-2); cursor:pointer;
  padding:12px 16px; border-radius:12px;
}
.btn-submit:hover{ background:#0E1A12 }

/* ========= HERO ========= */
.grid-hero{ display:grid; gap: clamp(16px,3vw,42px); grid-template-columns:1fr; align-items:center }
@media (min-width:900px){ .grid-hero{ grid-template-columns: 1.05fr .95fr } }

.kicker{
  display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#A6F4C5; border:1px solid var(--green-2); border-radius:999px; padding:6px 10px;
  background:rgba(21,128,61,.08); margin-bottom:12px;
}
.h1{ margin:0; font-weight:800; letter-spacing:-.3px; font-size:clamp(28px,4.6vw,46px); line-height:1.15 }
.lead{ margin-top:12px; font-size:18px; color:var(--text-dim) }

.hero-photo{
  aspect-ratio:1/2; /* border:0; border:6px solid var(--green); border-radius:var(--radius-xl); */
  overflow:hidden; /*background:#000; box-shadow:var(--shadow-soft) */
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block }

/* CTA grid */
.cta-grid{ display:grid; gap:10px; grid-template-columns:1fr }
@media (min-width:640px){ .cta-grid{ grid-template-columns: 1fr 1fr } }
@media (min-width:960px){ .cta-grid{ grid-template-columns: 1fr 1fr 1fr } }

/* ========= CARDS / BLOCKS ========= */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card)
}
.grid-3{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:720px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }
.grid-4{ display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:900px){ .grid-4{ grid-template-columns:repeat(4,1fr) } }

.section-title{
  font-weight:800; letter-spacing:-.2px; font-size:clamp(24px,3.2vw,34px); margin:0; position:relative; padding-bottom:10px
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; background:var(--green); border-radius:3px
}
.benefit{ display:flex; align-items:center; gap:12px; padding:16px }
.icon{ width:36px; height:36px; border-radius:999px; background:#0E1A12; color:#A6F4C5; display:flex; align-items:center; justify-content:center; font-weight:800 }

/* Steps */
.step{ padding:18px }
.step__badge{ width:34px; height:34px; border-radius:999px; background:var(--green); color:#000; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:8px }

/* Testimonials */
.testis{ display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:900px){ .testis{ grid-template-columns:repeat(3,1fr) } }
.testi{ padding:18px }
.testi__head{ display:flex; align-items:center; gap:12px }
.avatar{ width:48px; height:48px; border-radius:999px; background:#161A1D; color:#A9B3BB; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:700 }

/* ========= FORM (Leads) ========= */
.form{ padding:16px }
.form-row{ display:flex; gap:12px; flex-direction:column }
@media (min-width:720px){ .form-row{ flex-direction:row } }

.input, .select, .textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:#0E1011; color:var(--text); outline:none; transition:border-color .15s ease, box-shadow .15s ease
}
.textarea{ min-height:54px; resize:vertical }
.input::placeholder, .textarea::placeholder{ color:#8EA3AF }
.input:focus, .select:focus, .textarea:focus{
  border-color:var(--green-2); box-shadow:0 0 0 3px rgba(22,163,74,.25)
}

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:#0A0A0A; text-align:center; padding:30px 0; color:#b9c3c9 }

/* Utils */
.mt8{ margin-top:8px } .mt12{ margin-top:12px } .mt16{ margin-top:16px } .mt24{ margin-top:24px } .mt32{ margin-top:32px }
.center{ text-align:center }