/*
  Soluções Informática — Landing Page
  Tema leve e moderno, responsivo.
*/
:root{
  --bg:#0b1220;
  --card:#111827;
  --panel:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#0ea5e9; /* sky-500 */
  --brand-600:#0284c7; /* sky-600 */
  --brand-700:#0369a1; /* sky-700 */
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius:14px;
  --shadow:0 10px 30px rgba(2, 132, 199, .18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% -100px, rgba(14,165,233,.15), transparent 60%),
              radial-gradient(900px 500px at -10% 10%, rgba(3,105,161,.25), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block}

.container{width:min(1120px, 92%); margin:0 auto}
.btn{
  display:inline-block; padding:.9rem 1.15rem; border-radius:12px; text-decoration:none;
  background:var(--card); color:var(--text); border:1px solid rgba(255,255,255,.08);
  transition:.2s ease; font-weight:600; box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-700)); border:0}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.18)}
.btn.subtle{background:#0f172a; border:1px solid rgba(255,255,255,.08)}

/* Header */
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(6px); background:rgba(11,18,32,.65); border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700}
.logo{height:40px; width:auto; border-radius:8px}
.nav a{color:var(--text); text-decoration:none; margin-left:.9rem; font-weight:600}
.nav .btn.ml{margin-left:1.2rem}

/* Hamburger button (hidden on desktop) */
.hamburger-btn{display:none}
.hamburger-btn{cursor:pointer; width:42px; height:42px; display:none; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(15,23,42,.6)}
.hamburger-btn span{display:block; width:22px; height:2px; background:#e5e7eb; margin:3px 0; border-radius:2px}

/* Hero */
.hero{padding:5rem 0 3rem}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(1.8rem, 3vw, 3rem); line-height:1.2; margin:0 0 1rem}
.hero p{color:var(--muted); margin:0 0 1.25rem}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin:1rem 0}
.trust{list-style:none; padding:0; margin:1rem 0 0; display:flex; gap:1rem; flex-wrap:wrap; color:#cbd5e1}
.hero-art{position:relative; height:380px; border-radius:var(--radius); background:linear-gradient(160deg, rgba(14,165,233,.18), rgba(3,105,161,.05)); border:1px solid rgba(255,255,255,.06); overflow:hidden}
.hero-art .glow{position:absolute; inset:-40%; background:radial-gradient(closest-side, rgba(14,165,233,.25), transparent 60%)}
.hero-promo{position:absolute; inset:14px; display:flex; flex-direction:column; gap:.7rem; background:rgba(2,6,23,.35); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:1rem}
.hero-promo h3{margin:.2rem 0; font-size:1.15rem}
.hero-promo p{margin:0; color:#cbd5e1}
.thumb{display:block; text-decoration:none}
.thumb-media{position:relative; height:200px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg, rgba(14,165,233,.18), rgba(3,105,161,.12)); border:1px solid rgba(255,255,255,.08)}
.thumb-media img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px}
.thumb:hover .thumb-media{filter:brightness(1.02) saturate(1.05)}
.thumb-caption{display:block; margin-top:.5rem; color:#e5e7eb; font-weight:600}

/* Showcase */
.showcase{padding:3rem 0}
.section-header{margin:0 0 1.4rem}
.section-header h2{font-size:clamp(1.4rem,2.2vw,2rem); margin:.2rem 0}
.section-header p{color:var(--muted); margin:.3rem 0}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1.1rem}
.card h3{margin:.2rem 0 .6rem}
.card p{color:var(--muted)}
.card ul{margin:.6rem 0 1rem; padding-left:1rem}

/* Features */
.features{padding:3rem 0}
.features .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.feature{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:1rem}
.feature .icon{font-size:1.6rem; margin-bottom:.4rem}

/* Contact */
.contact{padding:3rem 0}
.contact-inner{display:flex; flex-direction:column; gap:1rem}
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.contact-card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1rem}
address{color:var(--muted); font-style:normal}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); background:#0a1222; padding:1.4rem 0; margin-top:2rem}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.foot-brand{display:flex; align-items:center; gap:.6rem}
.foot-brand img{height:34px; width:auto; border-radius:6px}
.foot-right small{display:block; color:var(--muted); margin-bottom:.4rem}
.foot-nav a{color:#cbd5e1; text-decoration:none; margin-left:1rem}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{height:auto; min-height:300px}
  .header-inner{position:relative}
  .hamburger-btn{display:flex}
  .nav{position:absolute; right:4%; left:4%; top:64px; display:none; flex-direction:column; gap:.4rem; background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.7rem; z-index:50}
  .nav a{margin:0; padding:.5rem .6rem; border-radius:8px}
  .nav a:hover{background:rgba(255,255,255,.06)}
  .nav .btn.ml{margin:0}
  body.menu-open .nav{display:flex}
  .cards{grid-template-columns:repeat(2,1fr)}
  .features .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  /* margin-left removed for stacked mobile menu */
  .cards{grid-template-columns:1fr}
  .features .grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* WhatsApp Floating Button */
.whatsapp-fab{
  position:fixed; right:18px; bottom:18px; z-index:40; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #25D366 0%, #1ebe5d 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.whatsapp-fab:hover{transform:translateY(-2px); box-shadow:0 14px 26px rgba(0,0,0,.32)}
.whatsapp-fab svg{width:28px; height:28px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.12))}