:root {
  --primary: #165dff;
  --dark: #101828;
  --muted: #667085;
  --light: #f6f8fc;
  --border: #e4e7ec;
}
html { scroll-behavior: smooth; }
body { color: var(--dark); background: #fff; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.navbar { min-height: 76px; }
.navbar-brand { font-size: 1.25rem; color: var(--dark) !important; }
.brand-mark {
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:9px; background:var(--primary); color:#fff; margin-right:8px;
}
.nav-link { font-weight: 500; margin: 0 5px; }
.btn-primary { background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px rgba(22,93,255,.16); }
.btn-primary:hover { background:#0d4ddd; border-color:#0d4ddd; }
.hero-section { background:linear-gradient(135deg,#f7faff 0%,#fff 65%); }
.eyebrow { color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.14em; }
.hero-section h1 { line-height:1.08; }
.hero-card,.form-card,.contact-card { background:#fff; border:1px solid var(--border); border-radius:18px; }
.hero-card { padding:32px; }
.amount-display { font-size:2.3rem; font-weight:700; }
.status-dot { color:#12b76a; font-size:.8rem; }
.mini-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #f0f2f5; }
.mini-row:last-child { border-bottom:0; }
.mini-row span:first-child { color:var(--muted); }
.hero-section .col-4 strong,.hero-section .col-4 small { display:block; }
.hero-section .col-4 small { color:var(--muted); margin-top:3px; }
.section-light { background:var(--light); }
.form-card { padding:32px; max-width:920px; }
.form-control { min-height:48px; border-color:#d0d5dd; border-radius:9px; }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(22,93,255,.1); }
label { font-weight:600; font-size:.9rem; }
.page-hero { padding:90px 0; background:linear-gradient(135deg,#f7faff,#fff); }
.page-hero p { max-width:680px; }
.feature-card { border:1px solid var(--border); border-radius:15px; padding:22px; margin-bottom:16px; }
.feature-icon { color:var(--primary); font-weight:800; margin-bottom:12px; }
.contact-card { padding:28px; }
.max-text { max-width:760px; }
.footer { border-top:1px solid var(--border); font-size:.85rem; }
.processing-modal { border:0; border-radius:20px; }
.progress-ring {
  width:150px; height:150px; margin:0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--primary) 0deg,#e8edf5 0deg);
  position:relative;
}
.progress-ring:before { content:""; position:absolute; width:120px; height:120px; background:#fff; border-radius:50%; }
.progress-ring div { position:relative; font-size:1.7rem; font-weight:800; }
.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.review-item { background:#f8fafc; border:1px solid #eef0f3; padding:14px; border-radius:10px; }
.review-item small { display:block; color:var(--muted); margin-bottom:4px; }
.review-total { display:flex; justify-content:space-between; background:#eef4ff; padding:18px; border-radius:12px; }
@media (max-width:767.98px) {
  .hero-section .display-4 { font-size:2.55rem; }
  .hero-card { margin-top:30px; }
  .form-card { padding:22px; }
  .page-hero { padding:60px 0; }
  .review-grid { grid-template-columns:1fr; }
}

/* =========================================================
   OTP PROGRESS RING
========================================================= */

.otp-progress-ring,
.fee-progress-ring {

    width: 150px;
    height: 150px;

    margin: 0 auto;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    background:
        conic-gradient(
            #D71E28 0deg,
            #e8edf5 0deg
        );
}


/* Inner circle */

.otp-progress-ring::before,
.fee-progress-ring::before {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    background: #fff;

    border-radius: 50%;
}


/* Percentage */

.otp-progress-ring div,
.fee-progress-ring div {

    position: relative;

    z-index: 2;

    font-size: 1.7rem;

    font-weight: 800;

}


/* OTP input */

#otp {

    letter-spacing: 8px;

    font-weight: 700;

    font-size: 1.5rem;

}


/* Optional modal styling */

#otpModal .modal-content,
#feeModal .modal-content {

    border: 0;

    border-radius: 20px;

}


/* Mobile */

@media (max-width: 575.98px) {

    .otp-progress-ring,
    .fee-progress-ring {

        width: 130px;
        height: 130px;

    }

    .otp-progress-ring::before,
    .fee-progress-ring::before {

        width: 104px;
        height: 104px;

    }

}