:root{
  --bg:#0b1220;--panel:#101b2b;--panel2:#0e1826;--text:#e7f0ff;--muted:#b6c7de;
  --accent:#00e6ff;--accent2:#16ffd0;--cta:#1bd67b;--cta2:#51ffbc;--border:rgba(255,255,255,.07);
  --radius:26px; --green:#25D366; --green2:#17ffb6; --blue:#1E6FFF; --blue2:#3AA0FF;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:#cfe3ff;text-decoration:none}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:radial-gradient(1200px 600px at 10% 10%, rgba(31,163,255,.08), transparent 60%),linear-gradient(180deg,#0a1320,#07121d);
  color:var(--text)
}
.container{max-width:1180px;margin:0 auto;padding:0 32px}
.section{padding:52px 0}
h2{font-size:34px;margin:0 0 22px}

/* ===== HERO ===== */
.hero{
  position:relative;
  background-image:url('../img/hero/casal-mobile-wide.jpg');
  background-size:cover;background-repeat:no-repeat;background-position:72% 24%;
}
.topbar{padding-top:16px;position:relative;}
.toprow{display:flex;align-items:center;justify-content:space-between}
.toprow .nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.toprow .nav a{font-size:18px;font-weight:600}
.toprow .top-meta{font-size:18px;color:#cfe3ff;opacity:.9;text-wrap:nowrap}

.logo-center{display:flex;justify-content:flex-start;margin:6px 0 2px}
.brand-large{height:180px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}

/* Traz título mais perto da logo e alinha a segunda linha entre 1 e 3 */
.hero .content{
  max-width:720px;margin:0 auto 0 0;text-align:left;
  padding:2px 96px 54px 32px; /* topo menor */
}
.hero-title{margin:8px 0 6px 0}
.h1-line1,.h1-line2,.h1-line3{display:inline;margin:0;padding:0;line-height:1.02}
.h1-line1{font-weight:800;font-size:clamp(56px,7.2vw,90px)}
.h1-line2{font-weight:800;font-size:clamp(40px,5.5vw,66px); position:relative; top:-6px;}
.h1-line3{font-weight:900;font-size:clamp(44px,5.6vw,76px);}

.lead{font-size:clamp(14px,1.5vw,18px);font-weight:400;opacity:.9;margin-top:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:#15263b;color:#d7e8ff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn:hover{filter:brightness(1.08)}
.btn.cta{background:linear-gradient(90deg,#0dbb60,var(--cta));color:#032916;border:none}

/* ===== CARDS SaaS ===== */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border-radius:var(--radius);padding:26px 24px;border:1px solid var(--border);box-shadow:0 12px 28px rgba(0,0,0,.35);text-align:center;position:relative;overflow:hidden}
.card .logo{height:92px;margin:6px auto 14px;display:flex;align-items:center;justify-content:center}
.card .logo img{height:100%;width:auto}
.card .desc{color:var(--muted);margin:0 0 16px;font-size:15px}

/* Neon/glow por produto */
.card.vitrinyon::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:0 0 38px 8px rgba(37,211,102,.28) inset, 0 0 62px rgba(37,211,102,.18);
  pointer-events:none;
}
.card.piscinacalc::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:0 0 38px 8px rgba(30,111,255,.24) inset, 0 0 62px rgba(58,160,255,.16);
  pointer-events:none;
}

/* Botões por paleta */
.btn-vitrinyon{background:linear-gradient(90deg,#1aa555,var(--green));color:#051d0f;border:none}
.btn-vitrinyon:hover{filter:brightness(1.1)}
.btn-piscinacalc{background:linear-gradient(90deg,var(--blue),var(--blue2));color:#06142b;border:none}
.btn-piscinacalc:hover{filter:brightness(1.08)}

/* ===== SOBRE + FOOTER ===== */
.section-sobre .back-home{margin-top:12px}
.footer{border-top:1px solid var(--border);margin-top:32px;padding:24px 0 44px}
.footer .copy{color:#a7bad6;font-size:13px;opacity:.85;text-align:center;margin-top:12px}

/* ===== RESPONSIVO ===== */
@media (min-width:1200px){
  .hero{background-position:72% 24%}
}
@media (max-width:991px){
  .cards{grid-template-columns:1fr}
}
@media (max-width:767px){
  .toprow .nav{gap:14px}
  .toprow .nav a{font-size:16px}
  .toprow .top-meta{font-size:14px}
  .brand-large{height:148px;margin-bottom:2px}
  .hero{background-position:50% 18%}
  .hero .content{padding:0 24px 40px 32px;margin-top:6px}
  .h1-line2{top:-4px}
}