/* ===== RESET E CONFIGURAÇÕES BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --brand:#4CAF50;
  --brand-600:#45a049;
  --ink:#2c3e50;
  --muted:#6c757d;
  --bg:#fff;
  --bg-soft:#f8f9fa;
  --radius:14px;
  --shadow-sm:0 2px 10px rgba(0,0,0,0.08);
  --shadow-md:0 10px 25px rgba(0,0,0,0.12);
}

body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ink);
  line-height:1.6;
  background: var(--bg);
  scroll-behavior:smooth;
  padding-top:72px; /* compensa header fixo */
}

:where(h1,h2,h3){ letter-spacing:-0.015em; }

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* Links: foco visível (+ fallback) */
a, button{ outline:none; }
a:focus-visible, button:focus-visible{
  box-shadow:0 0 0 3px rgba(76,175,80,0.35);
  border-radius:8px;
}
@supports (color: oklab(0 0 0)) {
  a:focus-visible, button:focus-visible{
    box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 30%, white);
  }
}
/* Foco só ao usar teclado (UX) */
body:not(.using-keyboard) :focus { outline: none; }

/* ===== HEADER ===== */
.header{
  background:#fff;
  box-shadow: var(--shadow-sm);
  position:fixed; inset:0 0 auto 0; z-index:1000;
  transition: background .2s ease, transform .2s ease, backdrop-filter .2s ease;
}
.header.is-scrolled{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.header.is-hidden{ transform: translateY(-100%); }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;
}

.logo{ display:flex; align-items:center; gap:8px; }
.logo img{ height:40px; width:auto; display:block; } /* altura fixa, sem distorção */

/* ===== NAV LINKS ===== */
.nav-links{
  display:flex; list-style:none; gap:1.5rem; margin-left:auto;
}
.nav-links a{
  text-decoration:none; color:#333; font-weight:600;
  padding:10px 12px; border-radius:8px; transition:.25s;
}
.nav-links a:hover{ color:var(--brand); background:rgba(76,175,80,0.08); }
/* link ativo por seção (JS aplica .is-active) */
.nav-links a.is-active{ color:#fff; background:var(--brand); }

/* WhatsApp no header com destaque */
.link-whatsapp{
  border:2px solid var(--brand); color:var(--brand); border-radius:10px;
}
.link-whatsapp:hover{ background:var(--brand); color:#fff; }

/* ===== MOBILE MENU ===== */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #333;
}

@media (max-width: 980px) {
  .mobile-menu-toggle { display: block; }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px; /* logo abaixo do header, consistente com body padding-top */
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 1rem;
    border-top: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .nav-links.mobile-active { display: flex; }

  .nav-links a { padding: 10px; border-radius: 6px; }
}

/* ===== HERO SECTION ===== */
.hero{
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f3 100%);
  padding: clamp(80px, 10vw, 140px) 0 80px;
  text-align:center;
}
.hero h1{
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight:800; color: var(--ink); line-height:1.15; margin-bottom:14px;
  max-width: 900px; margin-left:auto; margin-right:auto;
}
.hero .subtitle{
  font-size: clamp(16px, 1.7vw, 20px); color: var(--muted);
  max-width: 720px; margin: 0 auto 28px;
}
.hero-buttons{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}

/* ===== BOTÕES ===== */
.btn-primary, .btn-secondary, .btn-white{
  display:inline-block; font-weight:800; text-decoration:none; transition:.25s;
  padding:14px 24px; border-radius:12px;
}
.btn-primary{ background: var(--brand); color:#fff; }
.btn-primary:hover{ background: var(--brand-600); transform: translateY(-2px); }

.btn-secondary{ color:var(--brand); border:2px solid var(--brand); background:transparent; }
.btn-secondary:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }

.btn-white{ background:#fff; color:var(--brand); }
.btn-white:hover{ transform:translateY(-2px); box-shadow: var(--shadow-md); }

/* ===== SEÇÕES PRINCIPAIS ===== */
.product{ padding: 80px 0; background: #fff; }
.benefits{ padding: 80px 0; background: #f8f9fa; }
.how-it-works{ padding: 80px 0; background: #fff; }

.cta-section{
  padding:80px 0; color:#fff; text-align:center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
}
.cta-section h2{ font-size:clamp(24px, 3vw, 36px); margin-bottom:10px; }
.cta-section p{ font-size:clamp(15px,1.6vw,18px); opacity:.95; margin-bottom:20px; }

/* ===== TÍTULOS E SUBTÍTULOS ===== */
.section-title{
  text-align:center; font-size:clamp(24px, 3vw, 40px); font-weight:800; color:var(--ink); margin-bottom:10px;
}
.section-subtitle{
  text-align:center; font-size:clamp(15px,1.6vw,18px); color:var(--muted);
  max-width:640px; margin:0 auto 36px;
}

/* ===== GRID DE FUNCIONALIDADES ===== */
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px; margin-top:32px;
}
.feature-card{
  background: #fff; border:1px solid #e9ecef; border-radius: var(--radius);
  padding:24px; text-align:center; transition:.25s; box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon{
  width:64px; height:64px; margin: 0 auto 14px;
  border-radius:50%; background: var(--brand); color:#fff; display:grid; place-items:center; font-size:26px;
}
.feature-card h3{ font-size:18px; margin-bottom:8px; }
.feature-card p{ color:var(--muted); }

/* ===== SEÇÃO DE BENEFÍCIOS ===== */
.benefits-intro{ text-align:center; margin-bottom:4rem; }
.benefits-intro h2{ font-size: 2.5rem; font-weight:700; color: var(--ink); margin-bottom:1rem; }
.benefits-intro p{ font-size:1.2rem; color: var(--muted); max-width:600px; margin:0 auto; }

.benefits-cards-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:2rem; margin-top:3rem;
}

.benefit-card{
  background:#fff; padding:2rem; border-radius: var(--radius);
  text-align:center; transition:.3s ease; border:1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.benefit-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(76, 175, 80, 0.15);
  border-color: var(--brand);
}
.benefit-icon{
  width:60px; height:60px;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin: 0 auto 1rem; color:#fff; font-size:24px;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.benefit-card h3{ font-size:1.3rem; font-weight:600; color: var(--ink); margin-bottom:.75rem; line-height:1.3; }
.benefit-card p{ color: var(--muted); line-height:1.6; font-size:.95rem; }

/* Benefícios técnicos */
.technical-benefits{ margin-top:4rem; padding-top:3rem; border-top:2px solid #e9ecef; }
.technical-benefits h3{
  text-align:center; font-size:1.8rem; color: var(--ink); margin-bottom:2rem; font-weight:600;
}
.tech-benefits-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:1.5rem;
}
.tech-benefit-item{
  background:#fff; padding:1.5rem; border-radius:8px; text-align:center;
  border-left:4px solid var(--brand); transition:.3s ease;
}
.tech-benefit-item:hover{ transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.tech-benefit-item::before{
  content:"✓"; color: var(--brand); font-weight:bold; font-size:1.2rem; display:block; margin-bottom:.5rem;
}
.tech-benefit-item p{ color:#495057; font-size:.95rem; margin:0; font-weight:500; }

/* ===== COMO FUNCIONA ===== */
.how-it-works-section{ margin-bottom:4rem; }
.how-it-works-section:last-child{ margin-bottom:0; }

.section-subtitle-empresa{
  text-align:center; font-size:1.8rem; font-weight:600; color: var(--ink);
  margin-bottom:3rem; padding:1rem 2rem; background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color:#fff; border-radius:10px; max-width:400px; margin-left:auto; margin-right:auto;
}
.section-subtitle-cliente{
  text-align:center; font-size:1.8rem; font-weight:600; color: var(--ink);
  margin-bottom:3rem; padding:1rem 2rem; background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border:2px solid var(--brand); border-radius:10px; max-width:400px; margin-left:auto; margin-right:auto;
}

.steps-empresa, .steps-cliente{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:2rem; margin-top:3rem; padding:2rem; border-radius: var(--radius);
}
.steps-empresa{
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.1);
}
.steps-cliente{
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border: 2px solid #e9ecef;
}

.step-empresa, .step-cliente{
  text-align:center; padding:1.5rem; background:#fff;
  border-radius: calc(var(--radius) - 2px);
  transition:.3s ease;
}
.step-empresa{
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.15);
}
.step-empresa:hover{ transform: translateY(-5px); box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2); }
.step-cliente{ border:1px solid #e9ecef; }
.step-cliente:hover{ transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--brand); }

.step-number-empresa, .step-number-cliente{
  width:55px; height:55px; margin: 0 auto 1rem; font-size:1.5rem; font-weight:bold; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.step-number-empresa{
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color:#fff; box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
}
.step-number-cliente{
  background:#fff; color: var(--brand); border:3px solid var(--brand);
}

.step-empresa h3, .step-cliente h3{
  font-size:1.3rem; color: var(--ink); margin-bottom:.5rem; font-weight:600;
}
.step-empresa p, .step-cliente p{ color: var(--muted); line-height:1.6; }

.section-separator{
  width:100px; height:4px; background: linear-gradient(90deg, var(--brand), var(--brand-600));
  margin:4rem auto; border-radius:2px;
}

/* ===== FOOTER ===== */
.footer{ background:#202833; color:#fff; padding:48px 0 24px; }
.footer-content{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; margin-bottom:2rem;
}
.footer-section{ text-align:center; }
.footer-section h3{ margin-bottom:1rem; color: var(--brand); font-size:1.2rem; font-weight:600; }
.footer-section p, .footer-section a{
  color:#bdc3c7; text-decoration:none; line-height:1.8; display:block; margin-bottom:.5rem; transition: color .3s ease;
}
.footer-section a:hover{ color: var(--brand); transform: translateY(-1px); }
.footer-section:last-child p{ margin-bottom:.75rem; }
.footer-bottom{
  text-align:center; padding-top:2rem; border-top:1px solid #34495e; color:#95a5a6; font-size:.9rem;
}

/* ===== Âncoras com header fixo ===== */
[id]{ scroll-margin-top: 92px; }

/* ===== RESPONSIVO ===== */
@media (max-width: 768px){
  .benefits-cards-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .tech-benefits-grid{ grid-template-columns:1fr; gap:1rem; }
  .benefit-card{ padding:1.5rem; }
  .benefit-icon{ width:50px; height:50px; font-size:20px; }
  .benefit-card h3{ font-size:1.2rem; }
  .benefits-intro h2{ font-size:2rem; }
  .technical-benefits h3{ font-size:1.5rem; }

  .steps-empresa, .steps-cliente{ grid-template-columns:1fr; gap:1.5rem; padding:1.5rem; }
  .section-subtitle-empresa, .section-subtitle-cliente{
    font-size:1.5rem; padding:.75rem 1.5rem; max-width:300px;
  }
  .step-empresa, .step-cliente{ padding:1.25rem; }
  .step-number-empresa, .step-number-cliente{ width:45px; height:45px; font-size:1.25rem; }
}

@media (max-width: 480px){
  .benefit-card{ padding:1.25rem; }
  .tech-benefit-item{ padding:1.25rem; }
}