:root{
      --bg:#0a0a0a; --txt:#fff; --muted:#a1a1aa; --tile:rgba(255,255,255,.06); --tile2:rgba(255,255,255,.1); --border:rgba(255,255,255,.12);
      --accent1:rgba(236,72,153,.22); --accent2:rgba(244,114,182,.22); --accent3:rgba(250,204,21,.22);
      --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family: 'Muli', sans-serif;background:var(--bg);color:var(--txt);}
    .page{position:relative;min-height:100dvh;overflow:hidden}

    /* background */
    .bg{position:absolute;inset:0;pointer-events:none}
    .bg::before{content:"";position:absolute;inset:0;mask-image:radial-gradient(#fff,transparent 85%);
      background:
        radial-gradient(1200px 600px at 80% -10%, var(--accent1), transparent 60%),
        radial-gradient(1000px 500px at -10% 10%, var(--accent2), transparent 60%),
        radial-gradient(800px 400px at 50% 120%, var(--accent3), transparent 60%);
    }
    .blob{position:absolute;border-radius:999px;filter:blur(36px);opacity:.9}
    .b1{left:-140px;top:90px;width:18rem;height:18rem;background:rgba(217,70,239,.22);animation:float1 12s ease-in-out infinite}
    .b2{right:-120px;top:180px;width:18rem;height:18rem;background:rgba(251,191,36,.22);animation:float2 13s ease-in-out infinite .5s}
    .b3{left:50%;bottom:-80px;transform:translateX(-50%);width:20rem;height:20rem;background:rgba(244,63,94,.22);animation:float3 14s ease-in-out infinite .8s}
    .shine{position:absolute;inset:0;inset-block-end:auto;height:33%;background:linear-gradient(to bottom,rgba(255,255,255,.08),transparent);animation:glimmer 6s linear infinite}
    @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
    @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,20px)}}
    @keyframes float3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-25px)}}
    @keyframes glimmer{0%,100%{opacity:.15}50%{opacity:.30}}

    /* container */
    .container{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:56px 24px;display:grid;gap:22px;align-content:start;min-height:100dvh;animation:fadeInUp .6s ease-out both}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

    header{text-align:center}
    .title{font-size:clamp(28px,5vw,40px);font-weight:900;letter-spacing:-.01em;margin:12px 0 0}
    .subtitle{color:var(--muted);max-width:62ch;margin:8px auto 0;font-size:clamp(15px,2.4vw,18px)}

    /* card/form */
    .card{margin:10px auto 0;width:100%;max-width:680px;background:var(--tile);border:1px solid var(--border);backdrop-filter:blur(10px);border-radius:20px;padding:18px}
    form{display:grid;grid-template-columns:1fr;gap:12px}
    @media (min-width:640px){form{grid-template-columns:1fr 1fr}}
    .field{display:grid;gap:6px}
    .label{font-size:12px;color:#e5e5e5}
    .input{width:100%;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);color:#fff;outline:none;transition:border .15s ease, box-shadow .15s ease}
    .input::placeholder{color:#9ca3af}
    .input:focus{border-color:#fff1;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
    .error{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(239,68,68,.25)!important}

    .full{grid-column:1 / -1}

    .cta{margin-top:4px;display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:13px 18px;border-radius:999px;background:var(--tile2);border:1px solid var(--border);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease}
    .cta:hover{transform:translateY(-2px) scale(1.03);background:rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.25)}
    .cta svg{width:20px;height:20px}
    .cta:hover svg{animation:quick .5s ease-out}
    @keyframes quick{0%{transform:translateX(0) rotate(0)}20%{transform:translateX(2px) rotate(3deg)}50%{transform:translateX(-1px) rotate(-2deg)}80%{transform:translateX(1px) rotate(1deg)}100%{transform:translateX(0) rotate(0)}}

    .note{display:none;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(34,197,94,.12);color:#dcfce7}
    .note.show{display:block}

    /* pós-envio */
    .thanks{display:none;place-items:center;text-align:center;gap:16px;margin:18px auto 0;padding:28px;border-radius:18px;background:var(--tile);border:1px solid var(--border)}
    .thanks.show{display:grid}
    .wpp{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:rgba(52,211,153,.15);border:1px solid rgba(34,197,94,.45);color:#ecfdf5;text-decoration:none;font-weight:700}
    .wpp svg{width:20px;height:20px}

    footer{margin-top:auto;text-align:center;color:#a1a1aa;font-size:12px;padding:36px 0}

    @media (prefers-reduced-motion: reduce){
      .container,.cta,.input{animation:none;transition:none}
      .b1,.b2,.b3,.shine{animation:none}
    }