/* CarHunter — landing institucional (tokens = branding default do produto) */
:root{--primary:#1565C0;--secondary:#0D47A1;--accent:#FFC107;
  --ink:#0B1220;--ink-2:#3C4657;--bg-alt:#F5F8FC;--radius:14px;--shadow:0 10px 30px rgba(13,71,161,.10)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);line-height:1.6}
.container{width:min(1120px,92%);margin-inline:auto}
section{padding:72px 0}
h1{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;letter-spacing:-.02em}
h1 .highlight{color:var(--accent)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.05rem;margin-bottom:8px}
.section-sub{color:var(--ink-2);margin-top:8px;max-width:640px}
.alt{background:var(--bg-alt)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{display:flex;align-items:center;gap:24px;height:64px}
.logo{color:#fff;font-weight:800;text-decoration:none;font-size:1.15rem}
.logo b{color:var(--accent)}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.92rem;font-weight:600}
.menu a:hover{color:#fff}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}

/* Botões */
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit;font-size:.95rem}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--secondary)}
.btn-lg{padding:15px 28px;font-size:1rem}
.btn-ghost{border-color:var(--primary);color:var(--primary);background:transparent}
.light{color:#fff;border-color:rgba(255,255,255,.45)}

/* Hero */
.hero{background:linear-gradient(160deg,var(--secondary),#082449 70%);color:#fff;padding:96px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.badge{display:inline-block;background:rgba(255,193,7,.14);color:var(--accent);border:1px solid rgba(255,193,7,.35);padding:6px 12px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px}
.lead{color:rgba(255,255,255,.78);font-size:1.1rem;margin:16px 0 28px;max-width:560px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-points{display:flex;gap:18px;list-style:none;margin-top:26px;flex-wrap:wrap;color:rgba(255,255,255,.75);font-size:.9rem}
.phone{width:280px;margin:auto;background:#111A2E;border-radius:28px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.screen{background:#0B1220;border-radius:18px;padding:18px;display:grid;gap:12px}
.scan{display:flex;justify-content:space-between;align-items:center;background:#16233F;border:1px solid #24365E;border-radius:10px;padding:10px 12px;font-weight:800;letter-spacing:.08em;color:#E8EEFC}
.tag{font-size:.6rem;font-weight:800;padding:3px 8px;border-radius:999px}
.tag-hot{background:var(--accent);color:#4A3400}
.tag-ok{background:#1E7D46;color:#fff}
.tag-warn{background:#B3261E;color:#fff}

/* Strip de segmentos */
.strip{background:var(--bg-alt);border-block:1px solid #E5ECF5;padding:18px 0}
.strip-inner{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.strip-inner span{color:var(--ink-2);font-size:.9rem;background:#fff;border:1px solid #E5ECF5;padding:8px 16px;border-radius:999px}

/* Cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px}
.card{background:#fff;border:1px solid #E7EDF6;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card p{color:var(--ink-2);font-size:.95rem}
.step{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#4A3400;font-weight:800;display:grid;place-items:center;margin-bottom:14px}

/* Mapa OpenStreetMap (sem API key) */
.map-frame{margin-top:32px}
.map-frame iframe{width:100%;height:380px;border:0;border-radius:var(--radius);box-shadow:var(--shadow)}

/* White-label */
.wl-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.checklist{list-style:none;margin:20px 0}
.checklist li{padding:8px 0 8px 30px;position:relative;color:var(--ink-2)}
.checklist li::before{content:'✔';position:absolute;left:0;color:var(--primary);font-weight:800}
.swatches{display:flex;gap:12px;margin-bottom:14px}
.sw{width:64px;height:64px;border-radius:14px;box-shadow:var(--shadow)}

/* Planos */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:32px}
.plan{background:#fff;border:1px solid #E7EDF6;border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:12px;position:relative}
.plan ul{list-style:none;flex:1}
.plan li{padding:6px 0;color:var(--ink-2);font-size:.95rem}
.plan li::before{content:'•';color:var(--primary);margin-right:8px;font-weight:800}
.price{font-size:1.3rem;font-weight:800;color:var(--secondary)}
.featured{border:2px solid var(--accent);transform:translateY(-6px)}
.plan-tag{position:absolute;top:-12px;left:24px;background:var(--accent);color:#4A3400;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.05em}

/* Contato */
.contact-box{max-width:760px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #D7E1EF;border-radius:10px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);border-color:transparent}

/* Footer */
.footer{background:var(--ink);color:#9FB0CC;padding:40px 0;font-size:.9rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}

/* Responsivo */
@media (max-width:900px){
  .hero-grid,.wl-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--secondary);flex-direction:column;padding:16px 5%}
  .menu.open{display:flex}
  .menu a{padding:12px 0}
  .menu-toggle{display:block;margin-left:auto}
  .nav .btn{display:none} /* CTA fica no menu e na hero */
}
@media (max-width:640px){
  section{padding:56px 0}
  .form-grid{grid-template-columns:1fr}
}