*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --lime:   #c8ff00;
      --pink:   #ff3cac;
      --blue:   #00cfff;
      --ink:    #0a0a0f;
      --card:   #13131a;
      --border: rgba(255,255,255,0.08);
    }

    html, body {
      height: 100%;
    }

    body {
      background: var(--ink);
      font-family: 'Syne', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
    }

    /* ── BLOBS DE FUNDO ── */
    .bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: .55;
      animation: float 7s ease-in-out infinite alternate;
    }
    .b1 { width: 380px; height: 380px; background: var(--pink);   top: -10%; left: -8%;  animation-delay: 0s; }
    .b2 { width: 300px; height: 300px; background: var(--blue);   bottom: -5%; right: -5%; animation-delay: -3s; }
    .b3 { width: 200px; height: 200px; background: var(--lime);   top: 55%; left: 40%;   animation-delay: -5s; opacity: .3; }

    @keyframes float {
      from { transform: translate(0, 0)    scale(1); }
      to   { transform: translate(25px, -30px) scale(1.08); }
    }

    /* ── GRID DE PONTOS ── */
    .bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* ── CARD ── */
    .card {
      position: relative;
      z-index: 1;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 3rem 2.8rem 2.8rem;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 40px 80px rgba(0,0,0,.6);
      animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both;
    }

    @keyframes popIn {
      from { opacity: 0; transform: scale(.92) translateY(20px); }
      to   { opacity: 1; transform: scale(1)   translateY(0); }
    }

    /* ── BADGE TOPO ── */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: rgba(200,255,0,.1);
      border: 1px solid rgba(200,255,0,.25);
      color: var(--lime);
      font-family: 'Syne Mono', monospace;
      font-size: .65rem;
      letter-spacing: .1em;
      padding: .3rem .8rem;
      border-radius: 100px;
      margin-bottom: 2rem;
    }
    .badge::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--lime);
      border-radius: 50%;
      animation: blink 1.4s ease infinite;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; } 50% { opacity: .2; }
    }

    /* ── HEADLINE ── */
    .headline {
      font-size: 2.4rem;
      font-weight: 800;
      line-height: 1.05;
      color: #fff;
      margin-bottom: .6rem;
      letter-spacing: -.02em;
    }
    .headline span {
      background: linear-gradient(90deg, var(--pink), var(--blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .sub {
      font-size: .88rem;
      color: rgba(255,255,255,.38);
      margin-bottom: 2.2rem;
      font-weight: 400;
      line-height: 1.6;
    }

    /* ── BOTÃO GOOGLE ── */
    .btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      width: 100%;
      padding: .95rem 1.5rem;
      background: #fff;
      color: #1a1a1a;
      font-family: 'Syne', sans-serif;
      font-size: .92rem;
      font-weight: 700;
      letter-spacing: .01em;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      text-decoration: none;
      transition: transform .15s, box-shadow .15s, background .15s;
      position: relative;
      overflow: hidden;
    }
    .btn-google::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,60,172,.15), rgba(0,207,255,.15));
      opacity: 0;
      transition: opacity .2s;
    }
    .btn-google:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(255,60,172,.35), 0 0 0 2px var(--pink);
    }
    .btn-google:hover::after { opacity: 1; }
    .btn-google:active { transform: translateY(0); }

    .google-icon { width: 20px; height: 20px; flex-shrink: 0; }

    /* ── DIVIDER ── */
    .divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.6rem 0;
      color: rgba(255,255,255,.18);
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ── TERMOS ── */
    .terms {
      text-align: center;
      font-size: .72rem;
      color: rgba(255,255,255,.22);
      line-height: 1.7;
    }
    .terms a {
      color: rgba(255,255,255,.45);
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color .15s;
    }
    .terms a:hover { color: var(--lime); }

    /* ── FLOATERS DECORATIVOS ── */
    .floater {
      position: fixed;
      font-size: 1.1rem;
      opacity: .18;
      pointer-events: none;
      animation: drift 6s ease-in-out infinite alternate;
      z-index: 0;
      user-select: none;
    }
    .f1 { top: 12%; left: 10%;  animation-delay: 0s; }
    .f2 { top: 75%; left: 6%;   animation-delay: -2s; }
    .f3 { top: 20%; right: 8%;  animation-delay: -1s; }
    .f4 { bottom: 14%; right: 12%; animation-delay: -3.5s; }
    @keyframes drift {
      from { transform: translateY(0) rotate(0deg); }
      to   { transform: translateY(-14px) rotate(8deg); }
       }