/* ====== Design tokens ====== */
:root{
  --brand-600:#0f6c87;      /* tom escuro do azul-petróleo */
  --brand-500:#0fa4b9;      /* ciano/teal médio */
  --brand-400:#34c5d4;      /* destaque */
  --ink-900:#0f1b2a;
  --ink-700:#2c3e50;
  --ink-500:#56677a;
  --muted:#6b7a90;
  --bg:#ffffff;
  --bg-alt:#f5fbfd;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 6px 24px rgba(15,108,135,.16);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink-700);
  background:var(--bg);
  line-height:1.6;
}

/* Acessibilidade */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff}

/* Container */
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* Header */
.header{
  position:sticky;top:0;z-index:10;
  background:#fff;box-shadow:0 1px 0 rgba(20,60,80,.08);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 0;
}
.brand__logo{height:54px;width:auto}

/* Nav */
.nav ul{
  display:flex;gap:1rem;align-items:center;margin:0;padding:0;list-style:none;
}
.nav a{color:var(--ink-700);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--brand-600)}

.nav__hamburger{display:none;cursor:pointer}
.nav__hamburger span{display:block;width:26px;height:2px;background:var(--ink-700);margin:6px 0}
.nav__toggle{display:none}

/* Hero */
.hero{
  background: radial-gradient(1200px 500px at 10% 0%, rgba(52,197,212,.16), transparent),
              linear-gradient(180deg,#ffffff, #f7fcfe 60%, #f3fbfd 100%);
  padding: clamp(2rem, 4vw + 1rem, 5rem) 0;
}
.hero__inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;
}
.hero__text h1{
  margin:0 0 .25rem 0;
  font-size: clamp(2rem, 3.2vw + 1rem, 3.4rem);
  color:var(--brand-600);
  letter-spacing:.2px;
}
.subtitle{color:var(--ink-500);font-weight:600;margin:.25rem 0 .75rem 0}
.lead{font-size: clamp(1rem, 1vw + .7rem, 1.14rem);color:var(--ink-700);max-width:56ch}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.hero__art img{
  width:min(460px, 90%);height:auto;filter:drop-shadow(var(--shadow));
}

/* Botões */
.btn{
  --btn-bg:#f0f6f8;--btn-fg:var(--brand-600);--btn-bd:transparent;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.15rem;border-radius:12px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:700;
  transition:.2s ease-in-out;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.btn--primary{--btn-bg:var(--brand-600);--btn-fg:#fff}
.btn--outline{--btn-bg:transparent;--btn-bd:var(--brand-400)}
.btn--xl{padding:1rem 1.25rem;font-size:1.05rem}
.btn--whats{--btn-bg:#25D366;--btn-fg:#fff}

/* Seções */
.section{padding: clamp(2rem, 4vw + 1rem, 4rem) 0}
.section--alt{background:var(--bg-alt)}
.section h2{
  margin:0 0 1.25rem 0;font-size: clamp(1.6rem, 2.2vw + 1rem, 2.2rem);color:var(--ink-900)
}

/* Grid Cards */
.grid{display:grid;gap:1.25rem}
.cards{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border:1px solid #e8f0f3;border-radius:var(--radius);
  padding:1.25rem;box-shadow:var(--shadow);
}
.card h3{margin-top:0;color:var(--brand-600)}
.card p{margin-bottom:0;color:var(--ink-700)}

/* Sobre */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.about__img img{width:100%;max-width:380px;height:auto;display:block;margin-inline:auto}
.list{padding-left:1rem}
.list li{margin:.4rem 0}

/* Depoimentos */
.testimonials{grid-template-columns:repeat(3,1fr)}
.testimonial{
  background:#fff;border:1px solid #e8f0f3;border-radius:var(--radius);padding:1.1rem;
  box-shadow:var(--shadow)
}
.testimonial blockquote{margin:0 0 .7rem 0;font-weight:600;color:var(--ink-700)}
.testimonial figcaption{color:var(--muted)}

/* Contato */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:start}
.contact__box{
  background:#fff;border:1px solid #e8f0f3;border-radius:var(--radius);padding:1.25rem;
  box-shadow:var(--shadow)
}
.contact__list{list-style:none;margin:0;padding:0}
.contact__list li{margin:.4rem 0}
.muted{color:var(--muted);margin-top:.75rem}

/* Rodapé */
.footer{border-top:1px solid #e6eef2;background:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.footer a{color:var(--ink-500);text-decoration:none;margin-left:1rem}
.footer a:hover{color:var(--brand-600)}

/* FAB WhatsApp */
.whats-fab{
  position:fixed;right:18px;bottom:18px;z-index:20;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 12px 28px rgba(37,211,102,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whats-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(37,211,102,.45)}

/* Responsividade */
@media (max-width: 992px){
  .hero__inner{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .nav ul{position:fixed;inset:64px 0 auto 0;background:#fff;padding:1rem 4%;
    box-shadow:0 12px 24px rgba(0,0,0,.06);display:none;flex-direction:column;align-items:flex-start}
  .nav__hamburger{display:block}
  .nav__toggle:checked ~ .nav ul{display:flex}
  .cards{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .brand__logo{height:46px}
}