:root{
      --bg:#F9FAFB;
      --card:#FFFFFF;
      --muted:#6b7280;
      --accent-1: #6B4EFF; /* primary */
      --accent-2: #4F46E5;
      --glass: rgba(255,255,255,0.6);
      --success: #10B981;
      --danger: #EF4444;
      --shadow: 0 8px 30px rgba(28,27,31,0.06);
      --radius: 14px;
    }

    /* Reset & base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, #FBFBFD 0%, #F5F7FB 100%);
      color:#0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      -webkit-tap-highlight-color: transparent;
    }

    /* container */
    .wrap{max-width:1100px;margin:0 auto;padding:28px 20px;}

    /* Top stats bar */
    .stats{
      display:flex;gap:12px;justify-content:center;align-items:center;
      margin:12px auto 18px;flex-wrap:wrap;
      font-weight:600;color:var(--accent-2);
    }
    .stats .pill{
      background: linear-gradient(90deg, rgba(111,66,255,0.12), rgba(79,70,229,0.07));
      padding:8px 12px;border-radius:999px;font-size:14px;
      display:flex;gap:8px;align-items:center;
      box-shadow: 0 2px 10px rgba(79,70,229,0.06);
    }

    /* HERO */
    header.hero{
      border-radius:18px;
      margin:0 auto 22px;
      padding:56px 28px;
      background: linear-gradient(135deg, #6B4EFF 0%, #4F46E5 100%);
      color:white;
      box-shadow: 0 10px 40px rgba(79,70,229,0.14);
      position:relative;
      overflow:hidden;
    }
    .hero-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center;max-width:1100px;margin:0 auto}
    .brand{
      display:flex;gap:16px;align-items:center;
      margin-bottom:18px;
    }
    .logo{
      width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,0.14);
      display:flex;align-items:center;justify-content:center;backdrop-filter: blur(4px);
    }
    .logo svg{width:28px;height:28px;fill:white}
    h1.title{
      font-family:'Poppins', sans-serif;
      font-size:28px;margin:0;line-height:1;color:white;
      letter-spacing:-0.02em;
    }
    p.lead{margin:12px 0 20px;color:rgba(255,255,255,0.95);font-size:18px;max-width:56ch}

    .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
    .btn{
      display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;
      font-weight:600;transition:all .18s ease;
      box-shadow: 0 6px 18px rgba(20,20,50,0.08);
    }
    .btn-success {
      background: var(--success);
      color: white;
    }

    .btn-primary{
      background: linear-gradient(90deg,#fff 0%, rgba(255,255,255,0.18) 100%);
      color: var(--accent-2); padding-left:20px;padding-right:20px;
    }
    .btn-ghost{
      background: transparent;color: rgba(255,255,255,0.92);border:1px solid rgba(255,255,255,0.12);
    }
    .btn-primary:hover{transform:translateY(-4px); box-shadow: 0 14px 40px rgba(79,70,229,0.16)}
    .btn-ghost:hover{transform:translateY(-2px);opacity:0.98}

    /* Hero visual card */
    .hero-card{
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border-radius:14px;padding:18px;backdrop-filter: blur(6px);
      box-shadow: var(--shadow);color:white;
    }
    .hero-card h4{margin:0 0 8px;font-size:16px;font-weight:700}
    .hero-card p{margin:0;color:rgba(255,255,255,0.92)}

    /* Sections */
    section{margin:28px auto;background:transparent;padding:0 0}
    .card{
      background:var(--card);border-radius:12px;padding:18px;box-shadow: 0 8px 28px rgba(16,24,40,0.04);
    }

    /* Benefits grid */
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .feature{padding:20px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#fbfbff);border:1px solid rgba(15,23,42,0.03)}
    .feature h3{margin:12px 0 6px;font-size:18px;color:var(--accent-2)}
    .feature p{margin:0;color:var(--muted)}

    /* Explanatory block */
    .explain{display:flex;gap:18px;align-items:flex-start}
    .explain .dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));margin-top:8px}

    /* Form area */
    .form-wrap{margin-top:12px;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
    .form-card{flex:1;min-width:320px;border-radius:14px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,255,0.95));box-shadow:0 12px 30px rgba(2,6,23,0.04)}
    label{display:block;font-size:13px;color:var(--muted);margin:8px 0 6px}
    input[type="text"], input[type="email"], input[type="url"]{
      width:100%;padding:12px;border-radius:10px;border:1px solid #e6e9ef;font-size:15px;outline:none;
      transition:box-shadow .15s, border-color .15s;
    }
    input:focus{border-color:rgba(107,78,255,0.85);box-shadow:0 6px 20px rgba(107,78,255,0.08)}

    .form-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
    .btn-submit{
      background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
      color:white;padding:12px 16px;border-radius:12px;border:0;font-weight:700;cursor:pointer;
      box-shadow:0 12px 30px rgba(79,70,229,0.16)
    }
    .btn-submit:active{transform:translateY(1px)}
    .small-muted{font-size:13px;color:var(--muted);margin-top:8px}

    /* LGPD pills */
    .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .pill-btn{background:rgba(15,23,42,0.04);border-radius:999px;padding:8px 12px;border:1px solid rgba(15,23,42,0.03);cursor:pointer;font-weight:600}

    /* testimonials */
    .testimonials{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .testimonial{padding:14px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfbff);border-left:4px solid rgba(79,70,229,0.06)}
    .testimonial p{margin:0;color:var(--muted);font-style:italic}
    .testimonial span{display:block;margin-top:8px;font-weight:700;color:#111827}

    /* Cost box */
    .cost{padding:14px;border-radius:12px;background:linear-gradient(180deg,#fff8e7,#fff);border-left:4px solid #ffb86b}

    /* Modal (glass) */
    .modal{
      display:none;position:fixed;inset:0;z-index:60;
      background:rgba(2,6,23,0.4);backdrop-filter: blur(6px);
      align-items:center;justify-content:center;padding:28px;
    }
    .modal.show{display:flex}
    .modal-card{
      width:100%;max-width:720px;border-radius:16px;padding:20px;background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.66));
      box-shadow: 0 18px 60px rgba(2,6,23,0.2);backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.4)
    }
    .modal-close{float:right;background:transparent;border:0;font-size:22px;color:var(--muted);cursor:pointer}

    /* messages */
    .msg{
      display:none;padding:12px;border-radius:10px;margin-top:12px;font-weight:600;
    }
    .msg.success{background:linear-gradient(180deg, rgba(16,185,129,0.12), rgba(16,185,129,0.06));color:var(--success);display:none}
    .msg.error{background:linear-gradient(180deg, rgba(239,68,68,0.08), rgba(255,235,238,0.04));color:var(--danger);display:none}

    /* check animation */
    .checkmark{width:64px;height:64px;border-radius:999px;background:linear-gradient(90deg,#ECFDF5,#D1FAE5);display:flex;align-items:center;justify-content:center;margin:12px auto}
    .checkmark svg{width:36px;height:36px;stroke:var(--success);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}

    /* footer */
    footer{
      margin-top:40px;padding:22px 18px;text-align:center;color:var(--muted);font-size:14px;
      border-top:1px solid rgba(15,23,42,0.03);
    }

    /* responsive */
    @media(max-width:980px){
      .hero-grid{grid-template-columns:1fr}
      .grid-3{grid-template-columns:repeat(2,1fr)}
      .testimonials{grid-template-columns:1fr}
    }
    @media(max-width:600px){
      .grid-3{grid-template-columns:1fr}
      .brand{flex-direction:row;gap:12px}
      .hero{padding:36px 16px}
    }