<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="AdvLoc — Plataforma gratuita de geolocalização jurídica. Encontre advogados no seu município ou cadastre-se para acesso antecipado.">
<title>AdvLoc — Seu próximo cliente precisa te encontrar</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --azul:   #1B3A6B;
    --azulm:  #2E75B6;
    --azulc:  #D5E8F0;
    --verm:   #E63946;
    --ouro:   #FFD700;
    --cinza:  #F2F2F2;
    --cinzam: #CCCCCC;
    --branco: #FFFFFF;
    --preto:  #1A1A1A;
    --texto:  #444444;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Open Sans', sans-serif;
    color: var(--preto);
    background: var(--branco);
    overflow-x: hidden;
  }

  /* ── HEADER ─────────────────────────────────────────────────────── */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--branco);
    border-bottom: 2px solid var(--azulc);
    padding: 0 5%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(27,58,107,0.08);
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .logo-icon {
    width: 44px;
    height: 44px;
  }

  .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
  }

  .logo-text .adv { color: var(--azul); }
  .logo-text .loc { color: var(--verm); }

  nav { display: flex; align-items: center; gap: 32px; }

  nav a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--azul);
    text-decoration: none;
    transition: color .2s;
  }

  nav a:hover { color: var(--verm); }

  .nav-divider {
    width: 1px;
    height: 18px;
    background: var(--cinzam);
  }

  .btn-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--verm);
    color: var(--branco);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .1s;
  }

  .btn-header:hover { background: #c0313d; transform: translateY(-1px); }

  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
  }

  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--azul);
    border-radius: 2px;
    transition: .3s;
  }

  /* ── HERO ────────────────────────────────────────────────────────── */
  .hero {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    padding: 60px 5% 40px;
    background: linear-gradient(135deg, var(--branco) 55%, var(--azulc) 100%);
    gap: 40px;
  }

  .hero-left {
    flex: 1;
    max-width: 540px;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--azulc);
    color: var(--azul);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--verm);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
  }

  .hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.2;
    color: var(--azul);
    margin-bottom: 16px;
  }

  .hero h1 em {
    color: var(--verm);
    font-style: normal;
  }

  .hero-sub {
    font-size: 1.05rem;
    color: var(--texto);
    line-height: 1.6;
    margin-bottom: 32px;
  }

  /* Formulário */
  .form-wrap {
    background: var(--branco);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 8px 32px rgba(27,58,107,0.12);
    border: 1px solid var(--azulc);
  }

  .form-wrap h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--azul);
    margin-bottom: 16px;
  }

  .input-group {
    position: relative;
    margin-bottom: 12px;
  }

  .input-group svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--cinzam);
  }

  .input-group input {
    width: 100%;
    padding: 14px 14px 14px 42px;
    border: 1.5px solid var(--cinzam);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
    color: var(--preto);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
  }

  .input-group input:focus {
    border-color: var(--azulm);
    box-shadow: 0 0 0 3px rgba(46,117,182,0.15);
  }

  .btn-cta {
    width: 100%;
    padding: 16px;
    background: var(--verm);
    color: var(--branco);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
    margin-top: 4px;
    box-shadow: 0 4px 16px rgba(230,57,70,0.3);
  }

  .btn-cta:hover {
    background: #c0313d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230,57,70,0.4);
  }

  .btn-cta:active { transform: translateY(0); }

  .form-footer {
    text-align: center;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #888;
  }

  /* Prova social */
  .social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--cinza);
    border-radius: 10px;
  }

  .avatares {
    display: flex;
  }

  .avatares img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--branco);
    margin-left: -8px;
    object-fit: cover;
  }

  .avatares img:first-child { margin-left: 0; }

  .social-text {
    font-size: 0.85rem;
    color: var(--texto);
    line-height: 1.4;
  }

  .social-text strong {
    color: var(--verm);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
  }

  /* Hero direita — mapa */
  .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .phone-mock {
    width: 280px;
    background: var(--branco);
    border-radius: 36px;
    box-shadow: 0 20px 60px rgba(27,58,107,0.2);
    overflow: hidden;
    border: 8px solid #1a1a1a;
    position: relative;
  }

  .phone-notch {
    background: #1a1a1a;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phone-notch::after {
    content: '';
    width: 80px;
    height: 14px;
    background: #000;
    border-radius: 0 0 12px 12px;
  }

  .map-container {
    position: relative;
    height: 460px;
    background: #e8f4e8;
    overflow: hidden;
  }

  .map-bg {
    width: 100%;
    height: 100%;
    background:
      linear-gradient(180deg, #c8e6c9 0%, #a5d6a7 40%, #81c784 70%, #66bb6a 100%);
    position: relative;
  }

  /* Brasil estilizado */
  .brasil-shape {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 360px;
  }

  .brasil-svg {
    width: 100%;
    height: 100%;
    fill: #4CAF50;
    opacity: 0.6;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  }

  /* Pins no mapa */
  .map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bounce 2s ease-in-out infinite;
  }

  .map-pin:nth-child(2) { animation-delay: 0.3s; }
  .map-pin:nth-child(3) { animation-delay: 0.6s; }
  .map-pin:nth-child(4) { animation-delay: 0.9s; }
  .map-pin:nth-child(5) { animation-delay: 1.2s; }
  .map-pin:nth-child(6) { animation-delay: 0.15s; }
  .map-pin:nth-child(7) { animation-delay: 0.75s; }
  .map-pin:nth-child(8) { animation-delay: 1.0s; }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .pin-icon {
    width: 28px;
    height: 28px;
    background: var(--verm);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(230,57,70,0.4);
    border: 2px solid var(--branco);
  }

  .pin-inner {
    transform: rotate(45deg);
    color: white;
    font-size: 10px;
  }

  .pin-shadow {
    width: 10px;
    height: 4px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    margin-top: 2px;
  }

  /* Label cidades */
  .city-label {
    position: absolute;
    background: var(--branco);
    color: var(--azul);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    white-space: nowrap;
  }

  /* Phone status bar */
  .map-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--branco);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--cinzam);
    z-index: 10;
  }

  .map-header-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
  }

  .map-header-logo .adv { color: var(--azul); }
  .map-header-logo .loc { color: var(--verm); }

  .map-search {
    flex: 1;
    background: var(--cinza);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 9px;
    color: #888;
    font-family: 'Open Sans', sans-serif;
  }

  /* ── COMO FUNCIONA ───────────────────────────────────────────────── */
  #como-funciona {
    padding: 80px 5%;
    background: var(--branco);
  }

  .section-title {
    text-align: center;
    margin-bottom: 50px;
  }

  .section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--azul);
    margin-bottom: 10px;
  }

  .section-title p {
    color: var(--texto);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
  }

  .step {
    background: var(--branco);
    border: 1.5px solid var(--azulc);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
  }

  .step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(27,58,107,0.1);
  }

  .step-num {
    width: 48px;
    height: 48px;
    background: var(--azul);
    color: var(--branco);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    margin: 0 auto 16px;
  }

  .step h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--azul);
    margin-bottom: 8px;
  }

  .step p {
    font-size: 0.88rem;
    color: var(--texto);
    line-height: 1.5;
  }

  /* ── PARA ADVOGADOS ──────────────────────────────────────────────── */
  #para-advogados {
    padding: 80px 5%;
    background: var(--azul);
  }

  .adv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
  }

  .adv-left h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--branco);
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .adv-left h2 em {
    color: var(--ouro);
    font-style: normal;
  }

  .adv-left p {
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .beneficios {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--verm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }

  .check::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: 700;
  }

  /* Planos */
  .planos {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .plano {
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: background .2s;
  }

  .plano:hover { background: rgba(255,255,255,0.12); }

  .plano.destaque {
    border-color: var(--ouro);
    background: rgba(255,215,0,0.08);
  }

  .plano-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--ouro);
    color: var(--azul);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
  }

  .plano-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .plano-nome {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--branco);
    font-size: 1rem;
  }

  .plano-preco {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--ouro);
    font-size: 1.1rem;
  }

  .plano-preco span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    font-weight: 400;
  }

  .plano p {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0;
  }

  .plano-gratis {
    text-align: center;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
  }

  /* ── CTA FINAL ───────────────────────────────────────────────────── */
  #cta-final {
    padding: 80px 5%;
    background: linear-gradient(135deg, var(--azulc), var(--branco));
    text-align: center;
  }

  #cta-final h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--azul);
    margin-bottom: 12px;
  }

  #cta-final p {
    color: var(--texto);
    font-size: 1rem;
    margin-bottom: 32px;
    line-height: 1.6;
  }

  .cta-form {
    display: flex;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cta-form input {
    flex: 1;
    min-width: 200px;
    padding: 14px 18px;
    border: 1.5px solid var(--cinzam);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
    outline: none;
    transition: border-color .2s;
  }

  .cta-form input:focus { border-color: var(--azulm); }

  .cta-form button {
    padding: 14px 28px;
    background: var(--verm);
    color: var(--branco);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
  }

  .cta-form button:hover { background: #c0313d; }

  /* ── FOOTER ──────────────────────────────────────────────────────── */
  footer {
    background: var(--azul);
    padding: 40px 5% 20px;
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .footer-brand .logo-text {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 8px;
  }

  .footer-brand p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 240px;
  }

  .footer-links h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--branco);
    margin-bottom: 12px;
    font-size: 0.9rem;
  }

  .footer-links a {
    display: block;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 6px;
    transition: color .2s;
  }

  .footer-links a:hover { color: var(--branco); }

  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .footer-bottom p {
    color: rgba(255,255,255,0.4);
    font-size: 0.78rem;
  }

  /* ── TOAST ───────────────────────────────────────────────────────── */
  .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--azul);
    color: var(--branco);
    padding: 14px 20px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transform: translateY(80px);
    opacity: 0;
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
    z-index: 999;
    border-left: 4px solid var(--verm);
  }

  .toast.show {
    transform: translateY(0);
    opacity: 1;
  }

  /* ── RESPONSIVO ──────────────────────────────────────────────────── */
  @media (max-width: 900px) {
    .hero { flex-direction: column; padding: 40px 5%; text-align: center; }
    .hero-left { max-width: 100%; }
    .social-proof { justify-content: center; }
    .adv-grid { grid-template-columns: 1fr; }
    nav { display: none; }
    nav.open {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      background: var(--branco);
      padding: 20px 5%;
      border-bottom: 2px solid var(--azulc);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      gap: 16px;
    }
    .nav-divider { display: none; }
    .hamburger { display: flex; }
    .phone-mock { width: 220px; }
    .map-container { height: 360px; }
  }

  @media (max-width: 480px) {
    .hero h1 { font-size: 1.6rem; }
    .phone-mock { display: none; }
    .hero-right { display: none; }
    .cta-form { flex-direction: column; }
    .cta-form input, .cta-form button { width: 100%; }
  }
</style>
</head>
<body>

<!-- HEADER -->
<header>
  <a href="#" class="logo">
    <svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="45" fill="none" stroke="#1B3A6B" stroke-width="4"/>
      <circle cx="20" cy="50" r="5" fill="#FFD700"/>
      <circle cx="80" cy="50" r="5" fill="#FFD700"/>
      <path d="M50 10 C50 10 70 30 70 52 C70 63 61 72 50 72 C39 72 30 63 30 52 C30 30 50 10 50 10Z" fill="#E63946"/>
      <g transform="translate(35,28) scale(0.3)">
        <line x1="50" y1="10" x2="50" y2="90" stroke="white" stroke-width="8"/>
        <line x1="10" y1="30" x2="90" y2="30" stroke="white" stroke-width="6"/>
        <circle cx="10" cy="45" r="12" fill="none" stroke="white" stroke-width="5"/>
        <circle cx="90" cy="45" r="12" fill="none" stroke="white" stroke-width="5"/>
        <line x1="10" y1="30" x2="10" y2="45" stroke="white" stroke-width="5"/>
        <line x1="90" y1="30" x2="90" y2="45" stroke="white" stroke-width="5"/>
        <line x1="30" y1="90" x2="70" y2="90" stroke="white" stroke-width="5"/>
      </g>
    </svg>
    <span class="logo-text"><span class="adv">ADV</span><span class="loc">LOC</span></span>
  </a>

  <nav id="nav">
    <a href="#como-funciona">Como funciona</a>
    <div class="nav-divider"></div>
    <a href="#para-advogados">Para advogados</a>
    <div class="nav-divider"></div>
    <a href="#contato">Contato</a>
    <a href="#hero-form" class="btn-header">Cadastre-se grátis</a>
  </nav>

  <div class="hamburger" id="hamburger" onclick="toggleMenu()">
    <span></span><span></span><span></span>
  </div>
</header>

<!-- HERO -->
<section class="hero" id="hero-form">
  <div class="hero-left">
    <div class="badge">Acesso antecipado aberto</div>

    <h1>Seu próximo cliente está procurando um advogado no seu município.<br><em>Ele precisa te encontrar.</em></h1>

    <p class="hero-sub">Plataforma gratuita de geolocalização jurídica.<br>Primeiro mês por nossa conta.</p>

    <div class="form-wrap">
      <h3>Garanta seu acesso antecipado</h3>
      <form id="form-cadastro" onsubmit="handleSubmit(event)">
        <div class="input-group">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          <input type="email" name="email" placeholder="Digite seu e-mail" required autocomplete="email">
        </div>
        <div class="input-group">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
          <input type="text" name="oab" placeholder="Número OAB (ex: RJ123456)" autocomplete="off">
        </div>
        <button type="submit" class="btn-cta">QUERO MEU ACESSO ANTECIPADO</button>
      </form>
      <p class="form-footer">Gratuito. Sem cartão. Sem compromisso.</p>
    </div>

    <div class="social-proof">
      <div class="avatares">
        <img src="https://i.pravatar.cc/36?img=47" alt="Advogado">
        <img src="https://i.pravatar.cc/36?img=12" alt="Advogado">
        <img src="https://i.pravatar.cc/36?img=33" alt="Advogado">
        <img src="https://i.pravatar.cc/36?img=5" alt="Advogado">
        <img src="https://i.pravatar.cc/36?img=28" alt="Advogado">
      </div>
      <div class="social-text">
        <strong>+247</strong> advogados<br>aguardando o lançamento
      </div>
    </div>
  </div>

  <div class="hero-right">
    <div class="phone-mock">
      <div class="phone-notch"></div>
      <div class="map-container">
        <div class="map-header">
          <span class="map-header-logo"><span class="adv">ADV</span><span class="loc">LOC</span></span>
          <div class="map-search">🔍 Buscar advogado...</div>
        </div>
        <div class="map-bg">
          <!-- Pins das cidades -->
          <div class="map-pin" style="top:15%;left:58%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:10%;left:61%">Fortaleza</div>

          <div class="map-pin" style="top:22%;left:72%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:17%;left:75%">Recife</div>

          <div class="map-pin" style="top:32%;left:68%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:27%;left:71%">Salvador</div>

          <div class="map-pin" style="top:45%;left:38%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:40%;left:20%">Brasília</div>

          <div class="map-pin" style="top:55%;left:55%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:50%;left:38%">Belo Horizonte</div>

          <div class="map-pin" style="top:63%;left:62%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:58%;left:64%">Rio de Janeiro</div>

          <div class="map-pin" style="top:72%;left:52%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:75%;left:34%">Curitiba</div>

          <div class="map-pin" style="top:83%;left:50%">
            <div class="pin-icon"><span class="pin-inner">⚖</span></div>
            <div class="pin-shadow"></div>
          </div>
          <div class="city-label" style="top:86%;left:32%">Porto Alegre</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- COMO FUNCIONA -->
<section id="como-funciona">
  <div class="section-title">
    <h2>Como funciona</h2>
    <p>Simples, rápido e gratuito. Em três passos você está no mapa do seu município.</p>
  </div>

  <div class="steps">
    <div class="step">
      <div class="step-num">1</div>
      <h3>Cadastre-se grátis</h3>
      <p>Crie seu perfil com nome, número OAB, especialidade e geolocalização. Sem cartão de crédito.</p>
    </div>
    <div class="step">
      <div class="step-num">2</div>
      <h3>Apareça no mapa</h3>
      <p>Seu escritório aparece no mapa do seu município para clientes que precisam de um advogado agora.</p>
    </div>
    <div class="step">
      <div class="step-num">3</div>
      <h3>Receba clientes</h3>
      <p>Clientes entram em contato diretamente pelo app. Você decide se aceita e como cobra os honorários.</p>
    </div>
    <div class="step">
      <div class="step-num">4</div>
      <h3>Faça consultas online</h3>
      <p>Ofereça consultas por telefone ou vídeo com preços definidos por você. Pagamento direto e seguro.</p>
    </div>
  </div>
</section>

<!-- PARA ADVOGADOS -->
<section id="para-advogados">
  <div class="adv-grid">
    <div class="adv-left">
      <h2>Para advogados que querem <em>crescer de forma ética</em></h2>
      <p>Em conformidade com o Provimento 205/2021 da OAB. Sem comissão sobre honorários. Apenas uma assinatura acessível pelo uso da plataforma.</p>
      <ul class="beneficios">
        <li><div class="check"></div>Apareça para clientes do seu município sem precisar de indicação</li>
        <li><div class="check"></div>Receba consultas por telefone e vídeo com pagamento garantido</li>
        <li><div class="check"></div>Ofereça-se como correspondente com tabela de deslocamento transparente</li>
        <li><div class="check"></div>Atenda urgências em tempo real e receba no ato</li>
        <li><div class="check"></div>Gerencie clientes sem expor seu número pessoal</li>
      </ul>
    </div>

    <div class="planos">
      <div class="plano-gratis">
        <strong style="color:rgba(255,255,255,0.8);">GRATUITO</strong> — Perfil no mapa + contato direto.<br>Sem cartão. Para sempre.
      </div>
      <div class="plano">
        <div class="plano-header">
          <span class="plano-nome">Plano Básico</span>
          <span class="plano-preco">R$ 49,90<span>/mês</span></span>
        </div>
        <p>Destaque no mapa, menu de consultas com seus preços, agendamento integrado e avaliações verificadas.</p>
      </div>
      <div class="plano destaque">
        <div class="plano-badge">Mais popular</div>
        <div class="plano-header">
          <span class="plano-nome">Plano Premium ★</span>
          <span class="plano-preco">R$ 99,90<span>/mês</span></span>
        </div>
        <p>Tudo do Básico + status online para urgências, perfil de correspondente, preposto e repositório de documentos.</p>
      </div>
      <p style="color:rgba(255,255,255,0.5);font-size:0.8rem;text-align:center;margin-top:4px;">
        Uma consulta de vídeo (R$ 100) já paga o Premium do mês inteiro.
      </p>
    </div>
  </div>
</section>

<!-- CTA FINAL -->
<section id="cta-final">
  <h2>Pronto para aparecer no mapa?</h2>
  <p>Cadastre-se agora e garanta o primeiro mês gratuito.<br>Sem cartão. Sem compromisso. Cancele quando quiser.</p>
  <form class="cta-form" onsubmit="handleSubmit(event)">
    <input type="email" placeholder="Seu melhor e-mail" required>
    <button type="submit">QUERO ACESSO ANTECIPADO</button>
  </form>
</section>

<!-- FOOTER -->
<footer id="contato">
  <div class="footer-top">
    <div class="footer-brand">
      <span class="logo-text"><span class="adv">ADV</span><span class="loc">LOC</span></span>
      <p>Plataforma de geolocalização jurídica. Conectando pessoas ao direito mais perto de você.</p>
    </div>
    <div class="footer-links">
      <h4>Plataforma</h4>
      <a href="#como-funciona">Como funciona</a>
      <a href="#para-advogados">Para advogados</a>
      <a href="#hero-form">Cadastro antecipado</a>
    </div>
    <div class="footer-links">
      <h4>Legal</h4>
      <a href="#">Termos de uso</a>
      <a href="#">Política de privacidade</a>
      <a href="#">Conformidade OAB</a>
    </div>
    <div class="footer-links">
      <h4>Contato</h4>
      <a href="mailto:contato@advloc.com.br">contato@advloc.com.br</a>
      <a href="https://advloc.com.br">advloc.com.br</a>
      <a href="https://advloc.com">advloc.com</a>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2026 AdvLoc — Mindset Serviços Digitais. Todos os direitos reservados.</p>
    <p>Em conformidade com o Provimento 205/2021 da OAB e a LGPD.</p>
  </div>
</footer>

<!-- TOAST -->
<div class="toast" id="toast">✓ Cadastro realizado! Você será notificado no lançamento.</div>

<script>
  function toggleMenu() {
    const nav = document.getElementById('nav');
    nav.classList.toggle('open');
  }

  function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const email = form.querySelector('[type="email"]').value;
    if (!email) return;

    // Aqui você conecta ao Mailchimp, RD Station ou qualquer serviço
    // Por enquanto exibe o toast de confirmação
    showToast();
    form.reset();
  }

  function showToast() {
    const toast = document.getElementById('toast');
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 4000);
  }

  // Smooth scroll
  document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', e => {
      const target = document.querySelector(a.getAttribute('href'));
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth' });
        document.getElementById('nav').classList.remove('open');
      }
    });
  });
</script>

</body>
</html>
