:root{
    --navy-900:#070b22; --navy-800:#0b102b; --field:#142046; --field-border:#2a3a6b;
    --gold:#d9a82b; --gold-bright:#fbbc05; --gold-soft:#e6c25a;
    --white:#fff; --muted:#9aa6c8; --green:#34c759; --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Inter',sans-serif;color:var(--white);
    background:radial-gradient(1200px 600px at 50% -10%, #16224d 0%, transparent 60%),
      linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 45%, #060918 100%);
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 18px;
  }
  .card{
    width:100%;max-width:420px;
    background:linear-gradient(180deg, rgba(20,28,62,.55), rgba(9,13,34,.55));
    border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:34px 28px 30px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(6px);position:relative;overflow:hidden;
  }
  .card::before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
    background:radial-gradient(400px 160px at 50% 0%, rgba(251,188,5,.10), transparent 70%);}
  .brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:6px}
  .crown{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 35%, #1d2a57, #0c1330);
    border:1px solid rgba(251,188,5,.35);box-shadow:0 0 24px rgba(251,188,5,.25);}
  .crown svg{width:30px;height:30px;fill:var(--gold-bright)}
  .brand h4{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:.5px}
  .brand span{font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
  .steps{display:flex;gap:8px;justify-content:center;margin:20px 0 24px}
  .steps .dot{height:5px;width:34px;border-radius:99px;background:rgba(255,255,255,.12);transition:.35s}
  .steps .dot.active{background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
  .steps .dot.done{background:rgba(251,188,5,.45)}
  h1{font-family:'Playfair Display',serif;font-weight:800;font-size:30px;text-align:center;line-height:1.15;margin-bottom:6px}
  .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:22px;line-height:1.5}
  .field{position:relative;margin-bottom:14px}
  .field input, .field select{
    width:100%;padding:15px 16px;font-size:15px;color:var(--white);background:var(--field);
    border:1px solid var(--field-border);border-radius:var(--radius);outline:none;
    transition:.2s;font-family:inherit;-webkit-appearance:none;appearance:none;}
  .field select{cursor:pointer}
  .field input::placeholder{color:#7e8bb3}
  .field input:focus, .field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,168,43,.18);background:#16224d;}
  .field .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:#7e8bb3}
  .btn{width:100%;padding:15px;border:none;border-radius:var(--radius);font-family:inherit;
    font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s, filter .2s;margin-top:6px;}
  .btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1a1305}
  .btn-gold:hover{filter:brightness(1.06)}
  .btn-gold:active{transform:translateY(1px)}
  .btn[disabled]{opacity:.55;cursor:not-allowed}
  .swap{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}
  .swap a{color:var(--gold-bright);text-decoration:none;font-weight:600}
  .tos{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:4px 2px 16px;line-height:1.4}
  .tos input{margin-top:2px;accent-color:var(--gold)}
  .tos a{color:var(--gold-bright);text-decoration:none}
  .msg{display:none;font-size:13px;border-radius:10px;padding:11px 13px;margin-bottom:14px;line-height:1.4}
  .msg.show{display:block}
  .msg.error{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4);color:#ffb4b4}
  .msg.info{background:rgba(52,199,89,.12);border:1px solid rgba(52,199,89,.4);color:#a7e7b9}
  .skip{text-align:center;margin-top:14px}
  .skip a{color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer}
  .price{font-family:'Playfair Display',serif;font-size:54px;font-weight:800;color:var(--gold-bright);text-align:center;line-height:1;margin:8px 0 2px}
  .price small{font-size:16px;color:var(--muted);font-weight:400;font-family:'Inter'}
  .perks{list-style:none;margin:22px auto;max-width:240px}
  .perks li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14.5px;color:#dbe2f5}
  .perks li svg{flex:0 0 auto;color:var(--gold-bright)}
  .step{display:none;animation:fade .35s ease both}
  .step.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .spinner{width:18px;height:18px;border:2px solid rgba(26,19,5,.35);border-top-color:#1a1305;border-radius:50%;display:inline-block;vertical-align:-3px;animation:spin .7s linear infinite;margin-right:8px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hint{font-size:11.5px;color:#6c79a3;text-align:center;margin-top:18px}