:root{
      --bg-0:#06060a;
      --bg-1:#0b0b12;
      --card:#0f1120cc;
      --txt:#e7e7f0;
      --muted:#a7a7c1;
      --primary:#7c3aed;  /* roxo neon */
      --primary-2:#22d3ee;/* ciano neon */
      --danger:#ef4444;
      --ok:#22c55e;
      --ring: 0 0 0 2px color-mix(in oklab, var(--primary) 65%, transparent);
      --radius: 16px;
      --shadow: 0 10px 40px -10px rgba(0,0,0,.6), 0 0 60px -30px var(--primary);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--txt); background:radial-gradient(1200px 1200px at 10% -10%, #1a1037 0%, transparent 60%),
                                   radial-gradient(1000px 1000px at 110% 20%, #0a3a5d 0%, transparent 55%),
                                   linear-gradient(180deg, var(--bg-0), var(--bg-1));
      font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
      overflow:hidden;
    }

    /* Partículas / orbes no fundo */
    .orbs { position:fixed; inset:0; pointer-events:none; filter: blur(40px) saturate(150%); opacity:.8; }
    .orb {
      position:absolute; width:44vmin; aspect-ratio:1;
      background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 90%, #fff 6%), transparent 60%),
                  radial-gradient(circle at 70% 70%, var(--primary-2), transparent 55%);
      border-radius:50%;
      mix-blend-mode:screen; animation: float 14s ease-in-out infinite;
    }
    .orb.one{ left:-8vmin; top:-6vmin; animation-duration:18s;}
    .orb.two{ right:-10vmin; bottom:-14vmin; animation-delay:-4s;}
    @keyframes float{
      0%,100%{ transform: translate3d(0,0,0) scale(1); }
      50%{ transform: translate3d(2vmin,-2vmin,0) scale(1.06); }
    }

    /* Grid shell */
    .wrap{
      position:relative; z-index:2; height:100%; display:grid; place-items:center; padding:24px;
    }

    /* Card */
    .card{
      width:min(960px, 96vw);
      display:grid; grid-template-columns: 1.1fr .9fr;
      gap:0; background:linear-gradient(180deg, #121429cc, #0a0c1ecc);
      border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);
      backdrop-filter: blur(10px) saturate(140%);
      border-radius: clamp(16px, 2vw, 24px);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      isolation:isolate;
    }

    /* Decor lateral */
    .side{
      position:relative; padding:42px;
      background:
        conic-gradient(from 180deg at 50% 50%, color-mix(in oklab, var(--primary) 30%, transparent) 0 25%, transparent 25% 50%, color-mix(in oklab, var(--primary-2) 25%, transparent) 50% 75%, transparent 75% 100%);
      mask: linear-gradient(#000, transparent 60%) top/100% 220% no-repeat;
      border-right:1px solid color-mix(in oklab, var(--primary) 20%, transparent);
    }
    .brand{
      display:flex; align-items:center; gap:12px; letter-spacing:.6px;
      font-weight:800; font-size:1.2rem;
      text-transform:uppercase;
    }
    .brand .ph{font-size:1.6rem; color:var(--primary-2)}
    .hero{
      margin-top:48px;
    }
    .hero h2{
      font-size: clamp(1.6rem, 2.4vw, 2.4rem);
      line-height:1.1; margin:0 0 12px;
      background: linear-gradient(90deg, #fff, var(--primary-2) 60%, var(--primary));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow: 0 4px 20px rgba(124,58,237,.25);
    }
    .bullets{
      margin:22px 0 0; display:grid; gap:10px; color:var(--muted);
    }
    .bullets li{display:flex; align-items:center; gap:10px; font-weight:400}
    .bullets .ph{color:var(--primary-2)}

    /* Form */
    .panel{
      position:relative; padding:42px;
      display:grid; align-content:center; gap:22px;
    }
    .title{
      display:flex; align-items:center; gap:10px; margin:0 0 6px;
      font-weight:700; letter-spacing:.3px;
    }
    .title .tag{
      font-size:.72rem; color:#0d1325; background: linear-gradient(90deg, var(--primary-2), var(--primary));
      padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.4px;
    }
    .subtitle{color:var(--muted); margin-top:-6px}

    form{ display:grid; gap:18px; }

    .field{
      position:relative;
    }
    .input{
      width:100%; padding:14px 44px 14px 44px;
      border-radius:12px; border:1px solid color-mix(in oklab, var(--primary) 26%, #1b1d3a);
      background: linear-gradient(180deg, #0a0c1e 0%, #0a0c1e 60%, #0d1030 100%);
      color:var(--txt); outline:none;
      transition: .2s border, .2s box-shadow, .2s transform;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .input:hover{ transform: translateY(-1px); }
    .input:focus{ box-shadow: var(--ring), 0 0 0 6px color-mix(in oklab, var(--primary) 20%, transparent); }

    .field .ph{
      position:absolute; left:12px; top:50%; transform:translateY(-50%);
      color:var(--muted); font-size:20px; pointer-events:none;
    }
    .field .trailing{
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      display:grid; place-items:center; width:36px; height:36px; cursor:pointer;
      color:var(--muted);
    }

    .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .check{
      display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; color:var(--muted);
    }
    .check input{appearance:none; width:18px; height:18px; border-radius:4px; border:1px solid #2a2d55; display:grid; place-items:center; }
    .check input:checked{ background:linear-gradient(90deg, var(--primary-2), var(--primary)); border-color:transparent; }
    .check input:checked::after{content:""; width:9px; height:9px; background:white; border-radius:2px; }

    .btn{
      --bg: linear-gradient(90deg, color-mix(in oklab, var(--primary) 82%, #ffffff00), var(--primary-2));
      border:0; color:#0b1021; font-weight:800; letter-spacing:.4px;
      padding:14px 18px; border-radius:12px; cursor:pointer;
      background: var(--bg);
      box-shadow: 0 12px 30px -10px color-mix(in oklab, var(--primary) 65%, transparent);
      transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
    }
    .btn:hover{ transform: translateY(-2px); filter:saturate(110%); }
    .btn:active{ transform: translateY(0); }
    .btn .ph{font-size:20px; vertical-align:-3px;}

    .btn.ghost{
      background:transparent; color:var(--txt); border:1px solid #2b2f63; box-shadow:none;
    }
    .btn.ghost:hover{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent); }

    .alert{
      padding:12px 14px; border-radius:12px; font-size:.95rem; display:flex; align-items:center; gap:10px;
      border:1px solid #39245b; background:#140f25;
    }
    .alert.error{ border-color: color-mix(in oklab, var(--danger) 45%, #000); background:#220b12; color:#ffd7d7; }
    .alert.ok{ border-color: color-mix(in oklab, var(--ok) 45%, #000); background:#0e2a1a; color:#d8ffe6; }

    /* Bordas brilhantes dinâmicas */
    .glow {
      position:absolute; inset:-2px; border-radius:inherit;
      background: conic-gradient(from 90deg at 50% 50%, transparent 0 30%, color-mix(in oklab, var(--primary) 55%, transparent) 30% 40%, transparent 40% 65%, color-mix(in oklab, var(--primary-2) 55%, transparent) 65% 75%, transparent 75% 100%);
      filter: blur(18px) opacity(.55);
      z-index:-1; animation: spin 12s linear infinite;
      mask: radial-gradient(closest-side, #000 65%, transparent 70%);
    }
    @keyframes spin{ to{ transform: rotate(1turn); } }

    /* Responsivo */
    @media (max-width: 900px){
      .card{ grid-template-columns: 1fr; }
      .side{ display:none; }
      .panel{ padding:26px; }
    }