/* ─── Variables & Reset ────────────────────────────────────────── */
    :root {
      --sky:      #45C8E8;
      --sky-lt:   #A8E8F5;
      --sky-dk:   #1EA3C8;
      --orange:   #F7931E;
      --orange-dk:#E07010;
      --white:    #FFFFFF;
      --off-wht:  #F0FAFD;
      --slate:    #2A4A55;
      --muted:    #6B8E9A;
      --err:      #E05050;
      --ok:       #3CC87A;
      --radius:   14px;
      --shadow:   0 8px 32px rgba(30,163,200,.18);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Nunito', sans-serif;
      background: radial-gradient(ellipse at 60% 0%, #87DDEF 0%, #3BBDE0 40%, #1CABD2 100%);
      min-height: 100vh;
      color: var(--slate);
      padding: 0 0 60px;
    }

    /* ─── Header / Hero ────────────────────────────────────────────── */
    header {
      background: linear-gradient(135deg, #ffffff22 0%, #ffffff08 100%);
      backdrop-filter: blur(10px);
      border-bottom: 2px solid #ffffff40;
      padding: 28px 24px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    header::before {
      content:'';
      position:absolute; inset:0;
      background: repeating-linear-gradient(45deg, transparent, transparent 18px, #ffffff08 18px, #ffffff08 19px);
      pointer-events: none;
    }
    .logo-wrap { position: relative; display: inline-block; margin-bottom: 10px; }
    .logo-wrap img {
      width: 120px; height: 120px;
      border-radius: 24px;
      border: 4px solid var(--orange);
      box-shadow: 0 6px 24px rgba(247,147,30,.45), 0 0 0 6px #ffffff30;
      object-fit: cover;
      display: block;
    }
    .logo-badge {
      position:absolute; bottom:-6px; right:-6px;
      background: var(--orange); color:#fff;
      font-family:'Fredoka One',sans-serif;
      font-size:11px; padding:3px 8px;
      border-radius:20px;
      box-shadow:0 2px 8px rgba(247,147,30,.5);
    }
    header h1 {
      font-family:'Fredoka One',sans-serif;
      font-size: clamp(1.6rem, 4vw, 2.6rem);
      color:#fff;
      text-shadow: 0 2px 10px rgba(0,0,0,.18);
      letter-spacing:.5px;
      line-height:1.1;
    }
    header p.tagline {
      color:#E8F8FD;
      font-size:1rem;
      font-weight:600;
      margin-top:6px;
      letter-spacing:.3px;
    }

    /* ─── Progress Bar ─────────────────────────────────────────────── */
    .progress-wrap {
      max-width: 820px; margin: 26px auto 0;
      padding: 0 20px;
    }
    .step-bar {
      display: flex; gap: 0;
      counter-reset: step;
    }
    .step-item {
      flex:1; text-align:center; position:relative; cursor:default;
    }
    .step-item::after {
      content:''; position:absolute;
      top:19px; left:50%; width:100%; height:3px;
      background:#ffffff35; z-index:0;
    }
    .step-item:last-child::after { display:none; }
    .step-dot {
      width:38px; height:38px; border-radius:50%;
      background:#ffffff35; border:3px solid #ffffff50;
      color:#fff; font-weight:800; font-size:.9rem;
      display:inline-flex; align-items:center; justify-content:center;
      position:relative; z-index:1; transition:all .3s;
    }
    .step-item.active .step-dot {
      background:var(--orange); border-color:var(--orange);
      box-shadow:0 0 0 5px #F7931E40;
    }
    .step-item.done .step-dot {
      background:var(--ok); border-color:var(--ok);
    }
    .step-item.done .step-dot::after { content:'✓'; }
    .step-label {
      display:block; font-size:.72rem; font-weight:700;
      color:#E0F6FF; margin-top:5px; letter-spacing:.3px;
    }

    /* ─── Card Container ───────────────────────────────────────────── */
    .form-card {
      max-width: 820px; margin: 28px auto 0;
      background: #fff;
      border-radius: 24px;
      box-shadow: var(--shadow), 0 2px 0 var(--orange);
      overflow: hidden;
    }
    .section-header {
      background: linear-gradient(90deg, var(--sky-dk), var(--sky));
      padding: 18px 32px;
      display: flex; align-items: center; gap: 12px;
    }
    .section-icon { font-size:1.5rem; }
    .section-header h2 {
      font-family:'Fredoka One',sans-serif;
      color:#fff; font-size:1.25rem;
      letter-spacing:.3px;
    }

    .form-body { padding: 32px 36px; }

    /* ─── Fieldsets / Sections ─────────────────────────────────────── */
    .form-section {
      display: none;
      animation: fadeIn .35s ease;
    }
    .form-section.active { display: block; }
    @keyframes fadeIn {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ─── Fields ───────────────────────────────────────────────────── */
    .field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 24px;
    }
    .field-grid.col3 { grid-template-columns: 1fr 1fr 1fr; }
    .field-grid.col1 { grid-template-columns: 1fr; }
    @media (max-width:600px) {
      .field-grid, .field-grid.col3 { grid-template-columns: 1fr; }
      .form-body { padding: 22px 18px; }
    }

    .field {
      display: flex; flex-direction: column; gap: 6px;
    }
    .field.span2 { grid-column: span 2; }
    @media (max-width:600px) { .field.span2 { grid-column: span 1; } }

    label {
      font-size:.82rem; font-weight:700;
      color: var(--sky-dk); letter-spacing:.3px;
      text-transform: uppercase;
    }
    label .req { color:var(--orange); margin-left:2px; }

    input[type=text], input[type=email], input[type=tel],
    input[type=date], input[type=number], input[type=url],
    select, textarea {
      border: 2px solid #D6EEF6;
      border-radius: var(--radius);
      padding: 11px 14px;
      font-family: 'Nunito', sans-serif;
      font-size: .95rem; font-weight:600;
      color: var(--slate);
      background: var(--off-wht);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      width:100%;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--sky);
      box-shadow: 0 0 0 4px #45C8E820;
      background:#fff;
    }
    input.error, select.error, textarea.error {
      border-color: var(--err);
      box-shadow: 0 0 0 4px #E0505020;
    }
    textarea { resize: vertical; min-height:90px; }
    select { appearance: none; cursor:pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231EA3C8' d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center; background-size:22px;
    }

    /* ─── Radio / Checkbox Groups ──────────────────────────────────── */
    .radio-group, .check-group {
      display: flex; flex-wrap: wrap; gap: 10px; margin-top:2px;
    }
    .radio-group label, .check-group label {
      display:flex; align-items:center; gap:7px;
      background: var(--off-wht); border:2px solid #D6EEF6;
      border-radius:10px; padding:8px 14px;
      font-size:.88rem; font-weight:700; text-transform:none; letter-spacing:0;
      color:var(--slate); cursor:pointer; transition:all .2s;
    }
    .radio-group input, .check-group input { accent-color: var(--sky-dk); width:16px; height:16px; }
    .radio-group label:has(input:checked), .check-group label:has(input:checked) {
      background:#E8F6FC; border-color:var(--sky); color:var(--sky-dk);
    }

    /* ─── File Upload ──────────────────────────────────────────────── */
    .upload-zone {
      border: 2.5px dashed #A8E8F5;
      border-radius: var(--radius);
      padding: 32px 20px;
      text-align: center;
      background: #F6FCFE;
      cursor: pointer;
      transition: all .25s;
      position: relative;
    }
    .upload-zone:hover, .upload-zone.drag-over {
      border-color: var(--orange);
      background: #FFF8F0;
    }
    .upload-zone input[type=file] {
      position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
    }
    .upload-icon { font-size:2.4rem; margin-bottom:8px; }
    .upload-zone p { font-size:.92rem; font-weight:700; color:var(--sky-dk); margin-bottom:4px; }
    .upload-zone small { color:var(--muted); font-size:.8rem; font-weight:600; }
    .file-preview {
      display:none; align-items:center; gap:12px;
      background:#EDF9F0; border:2px solid var(--ok);
      border-radius:12px; padding:12px 16px; margin-top:12px;
    }
    .file-preview.show { display:flex; }
    .file-preview .file-icon { font-size:1.8rem; }
    .file-preview .file-info { flex:1; }
    .file-preview .file-name { font-weight:800; font-size:.9rem; color:#2A6040; }
    .file-preview .file-size { font-size:.78rem; color:#3CC87A; font-weight:600; }
    .file-preview .remove-btn {
      background:none; border:none; cursor:pointer; font-size:1.2rem; color:var(--err);
      line-height:1;
    }

    /* ─── Divider ──────────────────────────────────────────────────── */
    .divider {
      height:2px; background:linear-gradient(90deg,transparent,#D6EEF6,transparent);
      margin:28px 0;
    }

    /* ─── Info Banner ──────────────────────────────────────────────── */
    .info-banner {
      background:linear-gradient(90deg,#EAF7FD,#F0FAFD);
      border-left:4px solid var(--sky);
      border-radius:12px; padding:14px 18px; margin-bottom:24px;
      font-size:.88rem; font-weight:600; color:var(--sky-dk);
      display:flex; align-items:flex-start; gap:10px;
    }
    .info-banner span { font-size:1.2rem; margin-top:-2px; }

    /* ─── Navigation Buttons ───────────────────────────────────────── */
    .nav-buttons {
      display:flex; justify-content:space-between; align-items:center;
      padding: 22px 36px 28px;
      border-top:2px solid #F0F8FC;
      gap:12px;
    }
    .btn {
      font-family:'Nunito',sans-serif;
      font-size:.95rem; font-weight:800;
      border:none; border-radius:50px;
      padding:13px 32px; cursor:pointer;
      transition:all .22s; letter-spacing:.3px;
      display:flex; align-items:center; gap:8px;
    }
    .btn-prev {
      background:#EDF5FA; color:var(--sky-dk);
      border:2px solid #C5E8F5;
    }
    .btn-prev:hover { background:#D6EEF6; transform:translateX(-3px); }
    .btn-next {
      background:linear-gradient(135deg,var(--sky),var(--sky-dk));
      color:#fff;
      box-shadow:0 5px 18px rgba(30,163,200,.38);
    }
    .btn-next:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(30,163,200,.5); }
    .btn-submit {
      background:linear-gradient(135deg,var(--orange),var(--orange-dk));
      color:#fff;
      box-shadow:0 5px 18px rgba(247,147,30,.4);
    }
    .btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(247,147,30,.55); }
    .btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

    /* ─── Error Message ────────────────────────────────────────────── */
    .field-error {
      font-size:.78rem; font-weight:700; color:var(--err);
      display:none; margin-top:2px;
    }
    .field-error.show { display:block; }

    /* ─── Status / Toast ───────────────────────────────────────────── */
    #toast {
      position:fixed; bottom:32px; right:32px;
      background:#2A4A55; color:#fff;
      border-radius:14px; padding:16px 22px;
      font-weight:700; font-size:.92rem;
      box-shadow:0 8px 30px rgba(0,0,0,.22);
      display:flex; align-items:center; gap:10px;
      transform:translateY(80px); opacity:0;
      transition:all .35s cubic-bezier(.4,0,.2,1);
      z-index:9999; max-width:360px;
    }
    #toast.show { transform:translateY(0); opacity:1; }
    #toast.success { background:linear-gradient(135deg,#2A7A50,#1E5C3C); }
    #toast.error   { background:linear-gradient(135deg,#9A2020,#C03030); }

    /* ─── Success Screen ───────────────────────────────────────────── */
    #success-screen {
      display:none; text-align:center; padding:60px 36px;
      animation: fadeIn .5s ease;
    }
    #success-screen.show { display:block; }
    .success-icon {
      width:90px; height:90px; border-radius:50%;
      background:linear-gradient(135deg,#3CC87A,#28A060);
      margin:0 auto 22px;
      display:flex; align-items:center; justify-content:center;
      font-size:2.8rem;
      box-shadow:0 8px 30px rgba(60,200,122,.4);
    }
    #success-screen h3 {
      font-family:'Fredoka One',sans-serif;
      font-size:1.8rem; color:var(--sky-dk); margin-bottom:10px;
    }
    #success-screen p { color:var(--muted); font-size:1rem; font-weight:600; line-height:1.6; }

    /* ─── Loading Spinner ──────────────────────────────────────────── */
    .spinner {
      display:none; width:22px; height:22px;
      border:3px solid #fff4;
      border-top-color:#fff;
      border-radius:50%;
      animation:spin .7s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .loading .spinner { display:inline-block; }
    .loading .btn-text { display:none; }

    /* ─── CAPTCHA Modal ────────────────────────────────────────────── */
    #captcha-overlay {
      position:fixed; inset:0; z-index:99998;
      background:rgba(10,40,55,.55);
      backdrop-filter:blur(6px);
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity .25s;
    }
    #captcha-overlay.show { opacity:1; pointer-events:all; }
    #captcha-modal {
      background:#fff; border-radius:22px;
      padding:36px 32px 28px;
      width:360px; max-width:92vw;
      box-shadow:0 20px 60px rgba(0,0,0,.25);
      border-top:5px solid var(--sky);
      transform:translateY(20px) scale(.97);
      transition:transform .28s cubic-bezier(.4,0,.2,1);
      text-align:center;
    }
    #captcha-overlay.show #captcha-modal { transform:translateY(0) scale(1); }
    .captcha-icon {
      width:68px; height:68px; border-radius:50%;
      background:linear-gradient(135deg,var(--sky),var(--sky-dk));
      display:flex; align-items:center; justify-content:center;
      font-size:1.9rem; margin:0 auto 18px;
      box-shadow:0 6px 20px rgba(30,163,200,.35);
    }
    #captcha-modal h3 {
      font-family:'Fredoka One',sans-serif;
      color:var(--slate); font-size:1.25rem; margin-bottom:6px;
    }
    #captcha-modal p {
      font-size:.82rem; color:var(--muted); font-weight:600; margin-bottom:22px;
    }
    #captcha-question {
      font-family:'Fredoka One',sans-serif;
      font-size:1.7rem; color:var(--sky-dk);
      background:linear-gradient(90deg,#EAF7FD,#F0FAFD);
      border:2px solid var(--sky-lt);
      border-radius:14px; padding:18px 24px;
      margin-bottom:18px; letter-spacing:.5px;
    }
    #captcha-input {
      width:100%; padding:14px 16px;
      border:2px solid #D6EEF6; border-radius:12px;
      font-family:'Nunito',sans-serif; font-size:1.3rem; font-weight:800;
      color:var(--slate); background:var(--off-wht); outline:none;
      text-align:center; letter-spacing:6px;
      transition:border-color .2s, box-shadow .2s;
      margin-bottom:8px;
    }
    #captcha-input:focus { border-color:var(--sky); box-shadow:0 0 0 4px #45C8E820; background:#fff; }
    #captcha-input.shake { border-color:var(--err); animation:shake .4s ease; }
    #captcha-error {
      font-size:.8rem; font-weight:700; color:var(--err);
      min-height:20px; margin-bottom:14px;
    }
    #btn-captcha-verify {
      width:100%; padding:14px;
      background:linear-gradient(135deg,var(--orange),var(--orange-dk));
      color:#fff; border:none; border-radius:50px;
      font-family:'Nunito',sans-serif; font-weight:800; font-size:.95rem;
      cursor:pointer; letter-spacing:.3px;
      box-shadow:0 5px 18px rgba(247,147,30,.38);
      transition:all .22s;
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    #btn-captcha-verify:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(247,147,30,.5); }
    #btn-captcha-verify:disabled { opacity:.5; cursor:not-allowed; transform:none; }
    #btn-cancel-captcha {
      margin-top:14px; background:none; border:none;
      color:var(--muted); font-family:'Nunito',sans-serif;
      font-size:.82rem; font-weight:700; cursor:pointer;
      text-decoration:underline; text-underline-offset:3px;
    }