*{box-sizing:border-box;margin:0;padding:0}
    html,body{width:100%;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

    :root{
      --blue:#1a4fa0;--blue-dark:#0d2b6b;--blue-mid:#3a6fd8;--blue-light:#e8f0fd;
      --gold-bg:#fdf6e3;--green:#2ecc71;--green-bg:#eafaf1;
      --text:#1a1a2e;--muted:#5a6580;--white:#fff;
      --r:20px;--rsm:12px;
    }

    body{
      background:#f0f4f8;
      display:flex;align-items:center;justify-content:center;
      min-height:100vh;
      padding:1rem;
    }

    .wrap{
      width:100%;max-width:480px;
      min-height:600px;
      background:#0d2b6b;
      border-radius:var(--r);
      position:relative;
      overflow:hidden;
      display:flex;flex-direction:column;
    }

    @media(min-width:900px){
      body{align-items:stretch;padding:0}
      .wrap{max-width:100%;min-height:100vh;border-radius:0}
    }

    .dots-bg{
      position:absolute;inset:0;pointer-events:none;
      background-image:radial-gradient(circle,rgba(255,255,255,0.07) 1px,transparent 1px);
      background-size:30px 30px;
    }



    /* PAGE 1 */
    .pg1{
      display:none;flex-direction:column;align-items:center;
      justify-content:center;flex:1;
      padding:3rem 2rem 3.5rem;
      text-align:center;color:#fff;gap:2rem;
      position:relative;z-index:1;
    }
    .pg1.active{display:flex}
    @media(min-width:600px){.pg1{padding:4rem 3rem 4.5rem;gap:2.5rem}}
    @media(min-width:900px){.pg1{padding:5rem 4rem;gap:3rem}}

    .pg1-org{display:flex;flex-direction:column;gap:4px}
    .pg1-org span{
      font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
      opacity:0.65;line-height:1.9;font-weight:400;
    }
    @media(min-width:600px){.pg1-org span{font-size:12px}}

    .lily-icon{
      width:88px;height:88px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      margin:0 auto;flex-shrink:0;
    }
    .lily-icon svg{width:44px;height:44px;opacity:0.9}
    @media(min-width:900px){
      .lily-icon{width:108px;height:108px}
      .lily-icon svg{width:56px;height:56px}
    }

    

    .pg1-body{display:flex;flex-direction:column;gap:14px}
    .pg1-body h1{font-size:clamp(22px,5vw,38px);font-weight:500;color:#fff;line-height:1.2}
    .pg1-body .verse{font-style:italic;font-size:clamp(13px,2vw,16px);opacity:0.72;line-height:1.75}
    .pg1-body p{font-size:clamp(13.5px,2vw,16px);opacity:0.83;line-height:1.8;max-width:540px;margin:0 auto}

    .btn-reg{
      background:#fff;color:var(--blue);
      border:none;border-radius:50px;
      padding:16px 52px;
      font-size:clamp(14px,2vw,16px);font-weight:500;letter-spacing:1px;
      cursor:pointer;transition:transform 0.18s,opacity 0.18s;
      max-width:340px;width:100%;
    }
    .btn-reg:hover{opacity:0.9;transform:translateY(-2px)}
    .btn-reg:active{transform:scale(0.97)}

    /* OVERLAY */
    .overlay{
      position:absolute;inset:0;
      background:rgba(8,20,60,0.55);
      display:none;z-index:10;
      border-radius:var(--r);
    }
    .overlay.open{display:block}

    /* BOTTOM SHEET */
    .sheet{
      position:absolute;left:0;right:0;bottom:0;z-index:20;
      background:#fff;border-radius:26px 26px 0 0;
      padding:0;
      transform:translateY(105%);
      transition:transform 0.44s cubic-bezier(0.3,0.72,0,1);
      max-height:90%;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    .sheet.open{transform:translateY(0)}
    .sheet-inner{padding:1.5rem 1.75rem 2.5rem}

    /* CENTERED MODAL on desktop */
    @media(min-width:900px){
      .overlay{border-radius:0}
      .overlay.open{display:flex;align-items:center;justify-content:center}
      .sheet{
        position:relative;left:auto;right:auto;bottom:auto;
        border-radius:20px;
        transform:none !important;
        max-height:none;overflow:visible;
        width:100%;max-width:540px;
        box-shadow:0 24px 64px rgba(0,0,0,0.22);
        transition:none;
      }
    }

    .drag-bar{
      width:44px;height:4px;border-radius:4px;
      background:rgba(0,0,0,0.1);
      margin:1rem auto 0;
    }
    @media(min-width:900px){.drag-bar{display:none}}

    /* step dots */
    .steps{display:flex;align-items:center;gap:7px;margin-bottom:1.5rem}
    .sd{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,0.1);transition:width 0.3s,background 0.3s,border-radius 0.3s}
    .sd.done{background:#3a6fd8}
    .sd.now{background:#1a4fa0;width:26px;border-radius:4px}

    .sh-title{font-size:clamp(16px,2.2vw,20px);font-weight:500;color:var(--text);margin-bottom:5px}
    .sh-sub{font-size:13.5px;color:var(--muted);margin-bottom:1.25rem;line-height:1.65}

    /* alerts */
    .alert{
      padding:11px 14px;border-radius:var(--rsm);
      font-size:13.5px;line-height:1.5;margin-bottom:1rem;
    }
    .alert-error{background:#fff0f0;border:1px solid rgba(220,53,69,0.25);color:#991b1b}
    .alert-success{background:var(--green-bg);border:1px solid rgba(46,204,113,0.3);color:#155724}

    /* form */
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}
    .field label{font-size:11.5px;font-weight:500;letter-spacing:0.7px;text-transform:uppercase;color:var(--muted)}
    .field input,.field textarea,.field select{
      border:1px solid rgba(0,0,0,0.14);border-radius:var(--rsm);
      padding:12px 15px;font-size:15px;font-family:inherit;
      color:var(--text);background:#fff;outline:none;resize:none;width:100%;
      transition:border-color 0.2s,box-shadow 0.2s;
    }
    .field input:focus,.field textarea:focus,.field select:focus{
      border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,79,160,0.09);
    }
    .field.has-error input,.field.has-error textarea,.field.has-error select{
      border-color:#dc3545;box-shadow:0 0 0 3px rgba(220,53,69,0.09);
    }
    .field-err{font-size:12px;color:#dc3545;margin-top:2px}
    .field select{
      appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%235a6580' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 15px center;
    }

    .btn-action{
      width:100%;padding:15px;border:none;border-radius:50px;
      background:var(--blue);color:#fff;
      font-size:15px;font-weight:500;letter-spacing:0.5px;
      cursor:pointer;margin-top:10px;
      transition:background 0.2s,transform 0.15s;
    }
    .btn-action:hover{background:#163d82}
    .btn-action:active{transform:scale(0.98)}
    .btn-action:disabled{opacity:0.65;cursor:not-allowed}

    .shake{animation:shk 0.35s ease}
    @keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

    /* bring list */
    .bring-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem}
    .bi{
      display:flex;align-items:flex-start;gap:13px;
      background:#f5f8ff;border:1px solid rgba(26,79,160,0.1);
      border-radius:var(--rsm);padding:13px 15px;
      font-size:14px;line-height:1.55;color:var(--text);
    }
    .bi-ico{
      width:34px;height:34px;border-radius:9px;flex-shrink:0;
      background:var(--blue-light);
      display:flex;align-items:center;justify-content:center;
      font-size:16px;
    }
    .bi-note{font-size:12px;color:var(--muted);margin-top:3px}

    /* success */
    .success-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0.5rem 0}
    .s-circle{
      width:80px;height:80px;border-radius:50%;
      background:var(--green-bg);border:2px solid var(--green);
      display:flex;align-items:center;justify-content:center;
    }
    .s-circle svg{width:38px;height:38px}
    .s-title{font-size:clamp(18px,3vw,23px);font-weight:500;color:var(--text);line-height:1.3}
    .s-body{font-size:14px;color:var(--muted);line-height:1.8;max-width:360px}
    .s-badge{
      background:var(--gold-bg);border:1px solid rgba(200,150,42,0.25);
      border-radius:50px;padding:9px 24px;
      font-size:13.5px;font-weight:500;color:#7a5a10;letter-spacing:0.3px;
    }
    .s-loc{font-size:12.5px;color:var(--muted);line-height:1.8}