/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height:100vh;
  background:linear-gradient(145deg, rgba(6,13,31,0.7), rgba(10,30,74,0.8)), url('bg.png') center/cover no-repeat fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:30px 15px 60px;
  overflow-x:hidden;
}

/* Ambient glow orbs */
body::before{
  content:'';
  position:fixed;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(21,101,192,.25),transparent 70%);
  top:-150px;left:-150px;
  border-radius:50%;
  pointer-events:none;
  animation:orb 9s ease-in-out infinite;
}
body::after{
  content:'';
  position:fixed;
  width:450px;height:450px;
  background:radial-gradient(circle,rgba(66,165,245,.18),transparent 70%);
  bottom:-100px;right:-100px;
  border-radius:50%;
  pointer-events:none;
  animation:orb 12s ease-in-out infinite reverse;
}
@keyframes orb{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-25px)}}

/* ── Page wrap & header ── */
.page-wrap{width:100%;max-width:720px;z-index:1}

.site-header{text-align:center;margin-bottom:28px}
.logo-ring{
  width:76px;height:76px;
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  box-shadow:0 8px 32px rgba(21,101,192,.55);
  animation:pulse 2.5s ease-in-out infinite;
}
.logo-ring i{font-size:32px;color:#fff}
@keyframes pulse{0%,100%{box-shadow:0 8px 32px rgba(21,101,192,.55)}50%{box-shadow:0 8px 40px rgba(66,165,245,.8),0 0 0 12px rgba(66,165,245,.08)}}
.site-header h1{
  font-size:1.85rem;font-weight:800;color:#fff;
  letter-spacing:1.5px;text-transform:uppercase;
}
.tagline{font-size:.8rem;font-weight:600;color:#34d399;letter-spacing:1.5px;margin-top:4px}

/* ── Card ── */
.card{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  padding:40px 36px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  width:100%;
}

/* ── Tabs ── */
.tabs{
  display:flex;gap:6px;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  padding:5px;
  margin-bottom:28px;
}
.tab{
  flex:1;
  padding:11px 10px;
  border:none;border-radius:10px;
  background:transparent;
  color:rgba(255,255,255,.45);
  font-family:'Inter',sans-serif;
  font-size:.83rem;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .25s;
}
.tab--active{
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  color:#fff;
  box-shadow:0 4px 18px rgba(21,101,192,.45);
}
.tab:not(.tab--active):hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.06)}

/* ── Sections — controlled ONLY by the HTML hidden attribute ── */
section[role="tabpanel"]{}

/* ── Labels & Fields ── */
.section-label{
  font-size:.75rem;font-weight:700;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;letter-spacing:1.3px;
  margin-bottom:12px;
}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row-2{grid-template-columns:1fr}}
.field{margin-bottom:16px}
label:not(.radio-lbl){
  display:block;
  font-size:.8rem;font-weight:600;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
}

/* ── Input Wrap ── */
.input-wrap{position:relative}
.input-wrap>i:first-child{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.3);font-size:.88rem;pointer-events:none;
  transition:color .25s;
}
.input-wrap textarea~i:first-child{top:14px;transform:none}
.input-wrap input,
.input-wrap select,
.input-wrap textarea{
  width:100%;
  padding:12px 42px 12px 38px;
  border-radius:11px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.065);
  color:#fff;
  font-family:'Inter',sans-serif;font-size:.88rem;
  outline:none;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.input-wrap textarea{padding-top:12px;resize:vertical;min-height:88px}
.input-wrap select option{background:#0d2d6b;color:#fff}
.input-wrap input::placeholder,
.input-wrap textarea::placeholder{color:rgba(255,255,255,.25)}
.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus{
  border-color:#60a5fa;
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(96,165,250,.2);
}
.input-wrap:focus-within>i:first-child{color:#42a5f5}

/* Eye toggle */
.eye-btn{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  cursor:pointer;color:rgba(255,255,255,.4);font-size:1rem;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:all .2s;z-index:5;
}
.eye-btn:hover{color:#42a5f5;background:rgba(255,255,255,.08)}

/* Phone input override */
.tel-wrap input{padding-left:52px !important}
.iti{width:100%;display:block}
.iti__country-list{
  background:#0d2d6b !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
  z-index:99999 !important;
  box-shadow:0 12px 40px rgba(0,0,0,.5) !important;
  max-height:200px !important;
}
.iti--container{z-index:99999 !important}
.iti__search-input{
  background:rgba(255,255,255,.1) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.2) !important;
  padding:7px !important;margin:5px !important;
  width:calc(100% - 10px) !important;border-radius:6px !important;
}
.iti__country:hover,.iti__country.iti__highlight{background:#1565c0 !important}
.iti__country-name,.iti__dial-code,.iti__selected-dial-code{color:#fff !important}
.iti__flag-container{z-index:5 !important}

/* Flatpickr override */
.flatpickr-calendar.dark{
  background:#0d2d6b !important;
  border:1px solid rgba(255,255,255,.1) !important;
  z-index:99999 !important;
}
.flatpickr-day.selected{background:#1565c0 !important;border-color:#1565c0 !important}

/* ── Radio row ── */
.radio-row{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.radio-lbl{
  display:flex;align-items:center;gap:6px;
  cursor:pointer;color:rgba(255,255,255,.65);
  font-size:.83rem;font-weight:500;
}
.radio-lbl input[type=radio]{accent-color:#42a5f5;width:15px;height:15px}

/* ── Profession Grid ── */
.prof-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:9px;margin-bottom:24px;
}
@media(max-width:480px){.prof-grid{grid-template-columns:repeat(3,1fr)}}
.prof-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:13px 6px;
  border-radius:14px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  color:rgba(255,255,255,.55);
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
  text-align:center;line-height:1.2;
  transition:all .25s;
}
.prof-btn i{font-size:1.5rem;transition:transform .25s}
.prof-btn:hover{border-color:#42a5f5;background:rgba(66,165,245,.12);color:#fff}
.prof-btn:hover i{transform:scale(1.12)}
.prof-btn--active{
  border-color:#42a5f5;
  background:linear-gradient(135deg,rgba(21,101,192,.45),rgba(66,165,245,.25));
  color:#fff;
  box-shadow:0 4px 18px rgba(66,165,245,.25);
}

/* ── Password bar ── */
.pw-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;overflow:hidden}
#pwMeter{height:100%;width:0;transition:width .3s,background .3s;border-radius:2px}
.pw-text{font-size:.7rem;color:rgba(255,255,255,.38);font-weight:500;margin-top:3px;display:block}

/* ── CV Drop ── */
.cv-drop{
  border:2px dashed rgba(66,165,245,.35);
  border-radius:13px;
  padding:26px 18px;
  text-align:center;
  cursor:pointer;
  position:relative;
  background:rgba(255,255,255,.025);
  transition:all .25s;
}
.cv-drop:hover,.cv-drop.drag-over{border-color:#42a5f5;background:rgba(66,165,245,.07)}
.cv-drop input[type=file]{
  position:absolute;inset:0;
  opacity:0;cursor:pointer;width:100%;height:100%;
}
.cv-icon{font-size:2rem;color:#42a5f5;display:block;margin-bottom:8px}
.cv-drop p{color:rgba(255,255,255,.5);font-size:.83rem;line-height:1.5}
.cv-drop p strong{color:#64b5f6}
.cv-name{margin-top:8px;font-size:.78rem;color:#a5d6a7}
.cv-name i{margin-right:5px}

/* ── Terms ── */
.terms-row{
  display:flex;align-items:flex-start;gap:9px;
  margin-bottom:22px;
}
.terms-row input[type=checkbox]{accent-color:#42a5f5;margin-top:3px;width:15px;height:15px;flex-shrink:0}
.terms-row span{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.55}
.terms-row a{color:#64b5f6;text-decoration:none}

/* ── Primary Button ── */
.btn-primary{
  width:100%;padding:15px;
  border-radius:13px;border:none;
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  color:#fff;
  font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 6px 24px rgba(21,101,192,.45);
}
.btn-primary::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,#42a5f5,#1565c0);
  opacity:0;transition:opacity .25s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(21,101,192,.7)}
.btn-primary:hover::after{opacity:1}
.btn-primary span{position:relative;z-index:1}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Switch link ── */
.switch-link{text-align:center;margin-top:16px;font-size:.82rem;color:rgba(255,255,255,.4)}
.switch-link a{color:#64b5f6;font-weight:600;text-decoration:none}

/* ── Tracker ── */
.track-box{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:22px 18px;
  margin-bottom:16px;
}
.track-box-head{
  display:flex;align-items:center;gap:10px;
  font-size:.97rem;font-weight:700;color:#fff;
  margin-bottom:6px;
}
.track-box-head i{color:#42a5f5;font-size:1.1rem}
.track-box-sub{font-size:.78rem;color:rgba(255,255,255,.4);margin-bottom:16px;line-height:1.55}
.track-box-sub em{color:rgba(255,255,255,.6);font-style:normal;font-weight:600}
.track-field{margin-bottom:10px}
.track-or{
  display:flex;align-items:center;gap:10px;
  font-size:.68rem;color:rgba(255,255,255,.25);
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin:4px 0 10px;
}
.track-or::before,.track-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}

/* ── Track status message ── */
#trackMsg{
  padding:12px 15px;
  border-radius:12px;
  font-size:.82rem;
  margin-bottom:14px;
}
.msg-loading{background:rgba(66,165,245,.07);border:1px solid rgba(66,165,245,.2);color:rgba(255,255,255,.6)}
.msg-error{background:rgba(239,83,80,.07);border:1px solid rgba(239,83,80,.2);color:#ef9a9a}

/* ── Result Card ── */
.result-header{
  background:linear-gradient(135deg,rgba(21,101,192,.4),rgba(66,165,245,.1));
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px 18px 0 0;
  padding:18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.result-avatar{
  width:48px;height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;color:#fff;
  flex-shrink:0;
  box-shadow:0 4px 16px rgba(21,101,192,.4);
}
.result-info{flex:1;min-width:0}
.result-info h3{color:#fff;font-size:.97rem;font-weight:700;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;
  font-size:.68rem;font-weight:600;
}
.pill-ref{background:rgba(255,255,255,.07);color:rgba(255,255,255,.45)}
.pill-batch{background:rgba(165,214,167,.1);color:#a5d6a7;border:1px solid rgba(165,214,167,.15)}
.status-badge{
  padding:5px 13px;
  border-radius:20px;font-size:.69rem;font-weight:700;
  display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.sb-pending{background:rgba(255,152,0,.12);color:#ffb74d;border:1px solid rgba(255,152,0,.2)}
.sb-approved{background:rgba(76,175,80,.12);color:#81c784;border:1px solid rgba(76,175,80,.2)}
.sb-rejected{background:rgba(239,83,80,.12);color:#ef9a9a;border:1px solid rgba(239,83,80,.2)}

/* ── Timeline ── */
.timeline{
  border:1px solid rgba(255,255,255,.09);
  border-top:none;
  border-radius:0 0 18px 18px;
  padding:20px 18px 8px;
  display:flex;flex-direction:column;
}
.tl-step{display:flex;gap:13px;position:relative;margin-bottom:4px}
.tl-step:not(:last-child)::after{
  content:'';
  position:absolute;left:17px;top:38px;
  height:calc(100% - 18px);width:2px;
  background:rgba(255,255,255,.06);
}
.tl-step.done:not(:last-child)::after{
  background:linear-gradient(to bottom,rgba(66,165,245,.4),rgba(66,165,245,.08));
}
.tl-left{display:flex;flex-direction:column;align-items:center;z-index:1;padding-top:2px}
.tl-dot{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
}
.dot-wait{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.09);color:rgba(255,255,255,.2)}
.dot-current{background:rgba(66,165,245,.12);border:2px solid #42a5f5;color:#42a5f5;animation:pulse-dot 1.8s infinite}
.dot-done{background:linear-gradient(135deg,#1565c0,#42a5f5);border:2px solid rgba(66,165,245,.5);color:#fff;box-shadow:0 3px 14px rgba(66,165,245,.3)}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(66,165,245,.4)}50%{box-shadow:0 0 0 8px rgba(66,165,245,0)}}
.tl-body{padding-bottom:22px;flex:1;padding-top:4px}
.tl-step:last-child .tl-body{padding-bottom:12px}
.tl-label{font-size:.86rem;font-weight:700;margin-bottom:2px}
.label-done{color:#fff}.label-current{color:#64b5f6}.label-wait{color:rgba(255,255,255,.32)}
.tl-desc{font-size:.74rem;line-height:1.5;margin-bottom:5px}
.desc-done{color:rgba(255,255,255,.45)}.desc-current{color:rgba(255,255,255,.5)}.desc-wait{color:rgba(255,255,255,.2)}
.tl-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:20px;font-size:.65rem;font-weight:700;
}
.badge-done{background:rgba(66,165,245,.09);color:#64b5f6;border:1px solid rgba(66,165,245,.15)}
.badge-current{background:rgba(66,165,245,.14);color:#42a5f5;border:1px solid rgba(66,165,245,.28)}
.badge-wait{background:rgba(255,255,255,.03);color:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.06)}

/* Result note */
.result-note{
  margin-top:10px;
  padding:11px 14px;
  border-radius:11px;
  background:rgba(66,165,245,.06);
  border:1px solid rgba(66,165,245,.13);
  font-size:.76rem;color:rgba(255,255,255,.55);line-height:1.55;
}
.result-note i{color:#64b5f6;margin-right:6px}

/* ── Success Overlay ── */
.overlay{
  position:fixed;inset:0;
  background:rgba(6,13,31,.88);
  z-index:9990;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .3s both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.success-box{
  background:linear-gradient(145deg,#0d2d6b,#1565c0);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:44px 36px;
  text-align:center;
  max-width:370px;width:90%;
  box-shadow:0 24px 64px rgba(0,0,0,.55);
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.success-icon{font-size:3.5rem;color:#64b5f6;margin-bottom:14px}
.success-box h2{color:#fff;font-size:1.45rem;font-weight:800;margin-bottom:8px}
.success-box p{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.55}
.ref-box{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:10px 18px;
  font-size:1.3rem;font-weight:800;
  color:#64b5f6;letter-spacing:1.5px;
  margin:10px auto 0;display:inline-block;
}



/* ── Responsive ── */
@media(max-width:560px){
  .card{padding:24px 16px}
  .site-header h1{font-size:1.45rem}
  .logo-ring{width:62px;height:62px}
}

/* ── Services Section ── */
.services-section{
  width:100%;max-width:720px;
  margin-top:48px;
  z-index:1;
}

.services-header{
  text-align:center;
  margin-bottom:32px;
}
.services-icon-ring{
  width:64px;height:64px;
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 8px 28px rgba(21,101,192,.5);
}
.services-icon-ring i{font-size:26px;color:#fff}
.services-header h2{
  font-size:1.35rem;font-weight:800;color:#fff;
  margin-bottom:12px;letter-spacing:.5px;
}
.services-subtitle{
  font-size:.85rem;color:rgba(255,255,255,.55);
  line-height:1.7;max-width:560px;margin:0 auto;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:20px;
}
@media(max-width:560px){.services-grid{grid-template-columns:1fr 1fr}}

/* ── Nurse Qualification Assessment ── */
.qual-toggle{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;
  background:linear-gradient(135deg,rgba(21,101,192,.22),rgba(66,165,245,.12));
  border:1.5px solid rgba(66,165,245,.45);
  border-radius:13px;
  color:#90caf9;
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:700;
  cursor:pointer;
  transition:all .25s;
  animation:qual-pulse 2.5s ease-in-out 3; /* pulses 3 times on load to draw attention */
  box-shadow:0 0 0 0 rgba(66,165,245,.4);
}
.qual-toggle:hover{
  background:linear-gradient(135deg,rgba(21,101,192,.35),rgba(66,165,245,.2));
  border-color:#42a5f5;
  color:#fff;
  box-shadow:0 4px 20px rgba(66,165,245,.2);
  transform:translateY(-1px);
}
@keyframes qual-pulse{
  0%{box-shadow:0 0 0 0 rgba(66,165,245,.5)}
  50%{box-shadow:0 0 0 8px rgba(66,165,245,0)}
  100%{box-shadow:0 0 0 0 rgba(66,165,245,0)}
}
.qual-toggle span i{margin-right:6px}
.qual-toggle .fa-chevron-down{transition:transform .3s;font-size:.75rem}
.qual-toggle--open{
  border-radius:13px 13px 0 0;
  background:linear-gradient(135deg,rgba(21,101,192,.3),rgba(66,165,245,.18));
  border-color:#42a5f5;
  color:#fff;
}

.qual-toggle-right{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.qual-click-hint{
  font-size:.72rem;font-weight:500;
  color:rgba(255,255,255,.4);
  letter-spacing:.3px;
  transition:opacity .25s;
}
.qual-toggle--open .qual-click-hint{display:none}

.qual-required-badge{
  display:inline-flex;align-items:center;
  margin-left:8px;
  padding:2px 8px;
  background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.35);
  border-radius:20px;
  color:#f87171;
  font-size:.65rem;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;
  vertical-align:middle;
}

.qual-panel{
  border:1px solid rgba(66,165,245,.2);
  border-top:none;
  border-radius:0 0 13px 13px;
  background:rgba(255,255,255,.03);
  padding:18px 16px 12px;
  display:flex;flex-direction:column;gap:18px;
}

.qual-group{}
.qual-label{
  font-size:.75rem;font-weight:700;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.9px;
  margin-bottom:10px;
  display:flex;align-items:center;gap:7px;
}
.qual-label i{color:#42a5f5;font-size:.85rem}

.qual-checks{
  display:flex;flex-direction:column;gap:8px;
}
.qual-checks--inline{
  flex-direction:row;flex-wrap:wrap;gap:10px;
}

.qual-check{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.82rem;color:rgba(255,255,255,.65);
  cursor:pointer;line-height:1.45;
  transition:color .2s;
}
.qual-check:hover{color:rgba(255,255,255,.9)}
.qual-check input[type=checkbox]{
  accent-color:#42a5f5;
  width:15px;height:15px;
  flex-shrink:0;margin-top:2px;
}

.qual-other-row{align-items:center;}
.qual-other-input{
  flex:1;
  padding:4px 9px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  color:#fff;font-family:'Inter',sans-serif;font-size:.8rem;
  outline:none;
  transition:border-color .2s;
}
.qual-other-input:focus{border-color:#42a5f5}

.qual-declaration .qual-check{
  padding:8px 10px;
  background:rgba(255,255,255,.025);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.07);
}
.qual-declaration .qual-check:hover{background:rgba(66,165,245,.07);border-color:rgba(66,165,245,.2)}


.service-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:20px 16px;
  text-align:center;
  transition:all .25s;
}
.service-card:hover{
  background:rgba(66,165,245,.08);
  border-color:rgba(66,165,245,.25);
  transform:translateY(-3px);
}
.service-card i{
  font-size:1.6rem;color:#42a5f5;
  display:block;margin-bottom:10px;
}
.service-card h3{
  font-size:.85rem;font-weight:700;color:#fff;
  margin-bottom:6px;
}
.service-card p{
  font-size:.75rem;color:rgba(255,255,255,.45);
  line-height:1.55;
}

/* Fee Notice */
.fee-notice{
  background:linear-gradient(135deg,rgba(21,101,192,.12),rgba(66,165,245,.06));
  border:1px solid rgba(66,165,245,.22);
  border-radius:18px;
  padding:24px 22px;
  margin-bottom:18px;
}
.fee-notice-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.fee-notice-header i{font-size:1.15rem;color:#42a5f5}
.fee-notice-header h3{font-size:1rem;font-weight:700;color:#fff}
.fee-notice p{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.7}
.fee-notice strong{color:rgba(255,255,255,.85)}

/* Why Us */
.why-us{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:24px 22px;
  margin-bottom:18px;
}
.why-us h3{
  font-size:1rem;font-weight:700;color:#fff;
  margin-bottom:16px;
}
.why-us h3 i{color:#f59e0b}
.why-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.why-list li{
  font-size:.83rem;color:rgba(255,255,255,.65);
  display:flex;align-items:center;gap:9px;
}
.why-list li i{color:#34d399;flex-shrink:0}
.why-cta{
  margin-top:16px;
  font-size:.8rem;color:rgba(255,255,255,.4);
  line-height:1.7;font-style:italic;
}

/* ── Floating WhatsApp Button ── */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4);
  z-index: 100;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: wa-pulse 2s infinite;
}
.whatsapp-float:hover {
  background-color: #1ebe57;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.6);
  color: #fff;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102, 0.5); }
  70% { box-shadow: 0 0 0 15px rgba(37,211,102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102, 0); }
}

/* ── Extra Mobile Polish (under 400px) ── */
@media (max-width: 400px) {
  .prof-grid { grid-template-columns: 1fr; gap: 8px; }
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .qual-toggle { padding: 12px 14px; font-size: 0.82rem; }
  .qual-toggle-right { gap: 6px; }
  .qual-click-hint { display: none; /* Save space on small screens */ }
  .card { padding: 20px 14px; border-radius: 16px; }
  .input-wrap input, .input-wrap select, .input-wrap textarea { font-size: 16px; /* Prevents iOS zoom */ }
  .whatsapp-float { bottom: 16px; right: 16px; width: 54px; height: 54px; font-size: 28px; }
}
/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast-msg {
  background: #f44336;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100px);
  opacity: 0;
  animation: slideInUp 0.3s forwards;
}
.toast-msg.success { background: #4caf50; }
.toast-msg.error { background: #d32f2f; }
.toast-msg i { font-size: 18px; }
@keyframes slideInUp {
  to { transform: translateY(0); opacity: 1; }
}
.toast-msg.fadeOut {
  animation: fadeOutDown 0.3s forwards;
}
@keyframes fadeOutDown {
  to { transform: translateY(100px); opacity: 0; }
}
/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(13, 26, 45, 0.8);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}
.modal-header h2 {
  font-size: 1.2rem;
  color: #1e293b;
  margin: 0;
}
.close-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #64748b;
}
.close-modal:hover { color: #0f172a; }
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}