:root{
      --primary:#0d6efd;
      --primary2:#4dabf7;
      --ink:#0b1220;
      --muted:#5b667a;
      --card:#ffffff;
      --bg:#f6f8fb;
      --border:rgba(15, 23, 42, .10);
      --shadow:0 12px 30px rgba(0,0,0,.08);
      --radius:18px;
    }
    body{
      font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
      background:var(--bg);
      color:var(--ink);
    }
    a{ text-decoration:none; }
    .container-narrow{ max-width: 1080px; }

    /* Top bar (simple) */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(246,248,251,.92);
      backdrop-filter: blur(8px);
      border-bottom:1px solid var(--border);
    }
    .brand{
      font-weight:700;
      letter-spacing:.2px;
    }
    .pill{
      border:1px solid var(--border);
      background:#fff;
      border-radius:999px;
      padding:8px 14px;
      font-size:14px;
      color:var(--ink);
    }
    .btn-booster{
      border-radius:12px;
      padding:12px 18px;
      font-weight:600;
    }
    .btn-outline{
      border:1px solid var(--border);
      background:#fff;
      border-radius:12px;
      padding:12px 18px;
      font-weight:600;
      color:var(--ink);
    }

    /* Hero */
.hero {
  position: relative; /* IMPORTANTE */
  overflow: hidden;   /* evita estourar no mobile */
  background:
    radial-gradient(600px circle at 80% 20%, rgba(66,133,244,0.25), transparent 60%),
    radial-gradient(500px circle at 20% 80%, rgba(251,188,5,0.18), transparent 60%),
    linear-gradient(135deg, #f1f5fb 0%, #d4e0f1 100%);
      padding: 84px 0 40px;
      border-bottom:1px solid var(--border);
}
.hero::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 200px;
  top: 40%;
  left: -20%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(66,133,244,0.08),
    transparent
  );
  transform: rotate(-8deg);
}
    .hero h1{
      font-size: clamp(34px, 3.4vw, 52px);
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -.7px;
    }
    .hero p.lead{
      color: var(--muted);
      font-size: 18px;
      line-height: 1.6;
    }
    .hero-card{
      background: var(--card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow:hidden;
    }
    .mini-badge{
      display:inline-flex;
      gap:8px;
      align-items:center;
      border:1px solid var(--border);
      background:#fff;
      border-radius:999px;
      padding:7px 12px;
      font-size:13px;
      color:var(--ink);
    }
    .mini-badge .dot{
      width:8px;height:8px;border-radius:999px;background:var(--primary);
    }

    /* Placeholder illustration (no external images required) */
    .illus{
      width:100%;
      aspect-ratio: 4 / 3;
      background:
        radial-gradient(120px 120px at 20% 30%, rgba(13,110,253,.25), transparent 70%),
        radial-gradient(160px 160px at 70% 20%, rgba(77,171,247,.25), transparent 70%),
        radial-gradient(200px 200px at 80% 70%, rgba(13,110,253,.18), transparent 70%),
        linear-gradient(135deg, rgba(15,23,42,.03), rgba(15,23,42,.00));
      border-bottom:1px solid var(--border);
      position:relative;
    }
    .illus .qr{
      position:absolute;
      left: 10%;
      top: 18%;
      width: 120px;
      height: 120px;
      border-radius: 16px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow: 0 14px 30px rgba(0,0,0,.10);
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .illus .qr::before{
      border-radius: 10px;
      opacity:.75;
      mix-blend-mode:multiply;
    }
    .illus .phone{
      position:absolute;
      right: 10%;
      top: 14%;
      width: 180px;
      height: 280px;
      border-radius: 26px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow: 0 14px 30px rgba(0,0,0,.10);
      overflow:hidden;
    }
    .illus .phone .bar{
      height:54px;
      background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(77,171,247,.08));
      border-bottom:1px solid var(--border);
      padding:12px 14px;
      font-weight:700;
      font-size:13px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .illus .phone .stars{
      padding:18px 16px;
    }
    .starline{
      display:flex;
      gap:6px;
      align-items:center;
      margin-top:10px;
    }
    .s{
      width:26px;
      height:26px;
      border-radius:8px;
      border:1px solid var(--border);
      background: linear-gradient(180deg, #fff, #f3f6ff);
      display:grid;
      place-items:center;
      font-size:14px;
    }
    .s.filled{
      background: linear-gradient(180deg, rgba(13,110,253,.18), rgba(77,171,247,.12));
      border-color: rgba(13,110,253,.35);
    }
    .illus .phone .cta{
      margin:0 16px 16px;
      height:42px;
      border-radius:12px;
      background: var(--primary);
      opacity:.9;
    }
    .illus .caption{
      position:absolute;
      left: 10%;
      bottom: 10%;
      right: 10%;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .chip{
      background:#fff;
      border:1px solid var(--border);
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      color:var(--muted);
    }

    /* Sections */
    .section{
      padding: 72px 0;
    }
    .section h2{
      font-weight:800;
      letter-spacing:-.4px;
      margin-bottom: 14px;
    }
    .section p.sub{
      color:var(--muted);
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 28px;
    }

    .cardx{
      background: var(--card);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
      height: 100%;
    }
    .icon{
      width:42px;height:42px;border-radius:14px;
      background: linear-gradient(135deg, rgba(13,110,253,.16), rgba(77,171,247,.12));
      border:1px solid rgba(13,110,253,.22);
      display:grid;place-items:center;
      font-weight:800;color:var(--primary);
      margin-bottom: 12px;
    }

    /* Flow diagram */
    .flow{
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .flow-grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 991px){
      .flow-grid{ grid-template-columns: 1fr; }
    }
    .flow-step{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      background: linear-gradient(180deg, #fff, #fbfcff);
      position:relative;
      overflow:hidden;
      min-height: 120px;
    }
    .flow-step::after{
      content:"";
      position:absolute;
      inset:auto -40px -40px auto;
      width:140px;height:140px;
      border-radius:999px;
      background: rgba(13,110,253,.10);
      filter: blur(0px);
    }
    .flow-step h5{ font-weight:800; margin-bottom: 8px; }
    .muted{ color:var(--muted); }

    /* Comparison */
    .compare{
      border:1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      background:#fff;
      box-shadow: var(--shadow);
    }
    .compare .head{
      padding: 18px 18px;
      border-bottom:1px solid var(--border);
      font-weight:800;
    }
    .compare .rowx{
      display:grid;
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 991px){
      .compare .rowx{ grid-template-columns: 1fr; }
    }
    .compare .colx{
      padding: 18px;
    }
    .compare .colx + .colx{
      border-left:1px solid var(--border);
    }
    @media (max-width: 991px){
      .compare .colx + .colx{
        border-left:none;
        border-top:1px solid var(--border);
      }
    }
    .compare ul{ margin:0; padding-left: 18px; }
    .compare li{ margin: 10px 0; color: var(--muted); }
    .tag-good{
      display:inline-flex; align-items:center; gap:8px;
      background: rgba(13,110,253,.10);
      border:1px solid rgba(13,110,253,.20);
      color: var(--primary);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight:700;
    }
    .tag-bad{
      display:inline-flex; align-items:center; gap:8px;
      background: rgba(15,23,42,.06);
      border:1px solid var(--border);
      color: var(--ink);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight:700;
    }

    /* Use cases */
    .usecase-img{
      width:100%;
      aspect-ratio: 16 / 10;
      border-radius: 16px;
      border: 1px solid var(--border);
      background-color: #fff;
    }

    /* FAQ */
    .accordion-button{
      font-weight:700;
    }
    .accordion-item{
      border-radius: 14px !important;
      overflow:hidden;
      border:1px solid var(--border);
      background:#fff;
      margin-bottom: 10px;
    }
    .accordion-button:not(.collapsed){
      color: var(--primary);
      background: rgba(13,110,253,.08);
    }

    /* CTA footer */
    .cta{
      background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(77,171,247,.08));
      border-top:1px solid var(--border);
      padding: 70px 0;
    }
    .cta-box{
      background:#fff;
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px;
    }
    .fine{
      color:var(--muted);
      font-size: 13px;
    }