/* ===========================
   HORIZON TECNOLOGIA — BASE
   =========================== */
:root{
  --bg:#0a0d12; --surface:#0e131b; --card:#0f1623; --line:#1f2937;
  --fg:#e5efff; --muted:#a6b3c6;
  --brand:#31f58a; --brand-2:#22c55e; --accent:#7dd3fc; --danger:#ef4444;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%, rgba(49,245,138,.15), transparent 60%), var(--bg);
  color:var(--fg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* ===========================
   HEADER / NAV
   =========================== */
.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(10px);background:rgba(10,13,18,.65);border-bottom:1px solid var(--line);z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:72px}
.brand-col{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:Poppins,Inter,sans-serif;font-weight:700;letter-spacing:.2px}
.brand-name span{color:var(--brand)}
.brand-tag{color:var(--muted);font-size:12px;margin-top:2px}

.nav{display:flex;gap:18px;align-items:center}
.nav a{opacity:.95}
.nav a:hover{color:var(--brand)}
.btn{padding:10px 16px;border-radius:12px;border:1px solid var(--line);display:inline-block;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#03210f}
.btn-light{background:#fff;color:#0b1220;border-color:transparent}
.btn-outline{background:transparent;color:var(--fg);border:1px solid var(--line)}

.hamburger{display:none;background:none;border:0;cursor:pointer;width:36px;height:28px;position:relative}
.hamburger span{position:absolute;left:0;right:0;height:2px;background:#c9d4ea;transition:.25s}
.hamburger span:nth-child(1){top:4px}.hamburger span:nth-child(2){top:13px}.hamburger span:nth-child(3){bottom:4px}
.hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ===========================
   MAIN
   =========================== */
.content{padding:28px 0}

/* HERO padrão (dark) */
.hero{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:linear-gradient(135deg,#0e131b,#0b1b13);
}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;padding:42px}
.hero h1{font-family:Poppins,Inter,sans-serif;font-size:52px;line-height:1.05;margin:0}
.hero p{color:var(--muted);font-size:18px;margin-top:10px}
.ctas{display:flex;gap:12px;margin-top:18px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.kpi{background:linear-gradient(180deg,rgba(49,245,138,.18),transparent 60%);border:1px solid #1f4733;padding:14px;border-radius:14px;text-align:center}
.kpi b{font-size:22px}

/* HERO com imagem (ativar adicionando .hero--image e definindo --hero-img inline) */
.hero--image{
  background:
    linear-gradient(180deg,rgba(5,8,12,.65),rgba(5,8,12,.85)),
    var(--hero-img) center/cover no-repeat;
  border:0;
}

/* ===========================
   SEÇÕES E GRIDS
   =========================== */
.section{margin-top:36px; padding:0} /* unificado para evitar conflito */
.section h2{font-family:Poppins,Inter,sans-serif;font-size:28px;margin:0 0 12px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.card{background:linear-gradient(180deg,rgba(125,211,252,.06),transparent 80%), var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{margin:0 0 8px}

/* Produtos */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.product-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;transition:transform .15s ease, box-shadow .15s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.price{font-weight:800}

/* Depoimentos */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;font-style:italic}

/* FAQ (details) */
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary{color:var(--brand)}

/* ===========================
   FOOTER
   =========================== */
.site-footer{border-top:1px solid var(--line);padding:20px 0;margin-top:40px;background:rgba(8,10,14,.6)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.footer-brand{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:20px}
.list{list-style:none;margin:8px 0 0;padding:0}.list li{margin:6px 0}

/* ===========================
   FORMULÁRIOS
   =========================== */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;padding:12px;border-radius:12px;background:#0f1420;border:1px solid var(--line);color:var(--fg)}
textarea{min-height:140px}
form .actions{margin-top:12px}
.alert{padding:10px 12px;border-radius:12px;margin-bottom:10px}
.alert.success{background:#0d2a19;border:1px solid #134e2e}
.alert.error{background:#2a1111;border:1px solid #4e1313}

/* ===========================
   RESPONSIVO
   =========================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;right:16px;top:70px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;flex-direction:column;gap:10px}
  .hamburger{display:block}
  .grid-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr}
}