@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;margin:0}

:root { --ink: #10253f; --muted: #68809b; --blue: #0b6ef3; --sky: #50c8f5; --pale: #effaff; --line: #d8edf8; --green: #22b573; --shadow: 0 24px 70px rgba(26,105,165,.12); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { background: rgb(255, 255, 255); color: var(--ink); }

button, input, select { font: inherit; }

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

.app-shell { overflow: hidden; }

.logo { display: flex; align-items: center; gap: 10px; font: 700 1.32rem / 1 Outfit, sans-serif; letter-spacing: -0.04em; color: var(--ink); }

.logo-accent { color: var(--blue); }

.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg,var(--sky),var(--blue)); color: rgb(255, 255, 255); font: 800 0.72rem Outfit; box-shadow: rgba(73, 185, 237, 0.4) 0px 8px 18px; }

.logo-compact { font-size: 1.16rem; }

.logo-compact .logo-mark { width: 30px; height: 30px; border-radius: 9px; }

.navbar { height: 78px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.867); backdrop-filter: blur(18px); position: sticky; top: 0px; z-index: 10; border-bottom: 1px solid rgb(223, 241, 250); }

.nav-inner { width: min(1180px, 100% - 48px); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }

.nav-links { display: flex; gap: 30px; margin-left: auto; }

.nav-links button, .text-button { border: 0px; background: transparent; color: var(--muted); font-size: 0.86rem; font-weight: 600; transition: color 0.2s, transform 0.2s; }

.nav-links button:hover, .text-button:hover { color: var(--blue); transform: translateX(2px); }

.nav-cta, .button { border: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; border-radius: 12px; transition: transform 0.22s, box-shadow 0.22s, background 0.22s; }

.nav-cta { padding: 12px 19px; background: var(--ink); color: rgb(255, 255, 255); font-size: 0.82rem; }

.nav-cta:hover, .button:hover { transform: translateY(-3px); box-shadow: rgba(19, 118, 213, 0.2) 0px 14px 28px; }

.menu-button { display: none; border: 0px; background: transparent; color: var(--ink); }

.hero { min-height: 620px; display: grid; grid-template-columns: 1.03fr 0.97fr; gap: 50px; align-items: center; width: min(1180px, 100% - 48px); margin: auto; padding: 80px 0px 92px; position: relative; }

.hero-orb { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; }

.orb-left { width: 360px; height: 360px; left: -220px; bottom: -190px; background: rgb(228, 247, 255); }

.orb-right { width: 540px; height: 540px; right: -260px; top: -250px; background: rgb(239, 250, 255); }

.hero-copy, .hero-visual { position: relative; z-index: 1; }

.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 0.7rem; letter-spacing: 0.16em; font-weight: 800; }

.hero h1 { font: 800 clamp(3.7rem, 7vw, 6.5rem) / 0.91 Outfit, sans-serif; letter-spacing: -0.075em; margin: 24px 0px; color: var(--ink); }

.hero h1 em { font-style: normal; color: var(--blue); }

.hero-copy > p { max-width: 520px; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }

.hero-actions { display: flex; gap: 20px; align-items: center; margin-top: 30px; }

.button { padding: 15px 21px; font-size: 0.9rem; }

.button-primary { color: rgb(255, 255, 255); background: linear-gradient(120deg,var(--blue),#2faeea); box-shadow: rgba(24, 135, 230, 0.23) 0px 13px 25px; }

.text-button { display: inline-flex; align-items: center; gap: 8px; }

.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 34px; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }

.hero-proof b { color: var(--ink); }

.avatar-stack { display: flex; }

.avatar-stack span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; margin-left: -7px; border: 2px solid rgb(255, 255, 255); background: rgb(185, 234, 250); color: rgb(22, 106, 164); font-size: 0.56rem; font-weight: 800; }

.avatar-stack span:first-child { margin-left: 0px; background: rgb(214, 245, 231); color: rgb(24, 140, 91); }

.avatar-stack span:nth-child(2) { background: rgb(217, 231, 255); color: rgb(36, 103, 194); }

.avatar-stack span:nth-child(3) { background: rgb(255, 226, 183); color: rgb(175, 109, 18); }

.avatar-stack span:last-child { background: var(--ink); color: rgb(255, 255, 255); }

.hero-visual { min-height: 460px; display: grid; place-items: center; }

.hero-visual::after { content: ""; position: absolute; width: 77%; height: 73%; border: 1px solid rgba(145, 217, 245, 0.5); border-radius: 42% 58% 53% 47%; transform: rotate(-17deg); z-index: -1; }

.visual-glow { position: absolute; width: 75%; height: 75%; border-radius: 50%; background: rgb(185, 234, 250); filter: blur(45px); opacity: 0.7; }

.hero-visual img { width: 78%; aspect-ratio: 0.86 / 1; object-fit: cover; border-radius: 44% 44% 22% 22%; box-shadow: rgba(19, 106, 165, 0.17) 22px 25px 60px; transform: rotate(5deg); }

.floating-stat { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.95); padding: 13px 17px; border: 1px solid rgb(214, 241, 251); border-radius: 14px; box-shadow: rgba(34, 111, 158, 0.12) 0px 12px 30px; animation: 4s ease-in-out 0s infinite normal none running float; }

.floating-stat b, .floating-stat small { display: block; }

.floating-stat b { font-size: 0.91rem; }

.floating-stat small { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }

.stat-top { right: 1%; top: 15%; }

.stat-bottom { left: 1%; bottom: 14%; animation-delay: -1.7s; }

.stat-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; }

.stat-icon.green { background: rgb(217, 248, 233); color: rgb(21, 162, 102); }

.stat-icon.blue { background: rgb(223, 243, 255); color: var(--blue); }

@keyframes float { 
  50% { transform: translateY(-8px); }
}

.trust-strip { width: min(1180px, 100% - 48px); margin: 0px auto 65px; padding: 20px 0px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--muted); font-size: 0.78rem; }

.trust-strip > span { letter-spacing: 0.12em; font-weight: 800; font-size: 0.62rem; }

.trust-strip div { font-size: 0.84rem; }

.trust-strip b { color: var(--ink); }

.trust-strip i { color: rgb(180, 221, 236); margin: 0px 10px; }

.section { width: min(1180px, 100% - 48px); margin: auto; padding: 72px 0px; }

.section-heading { max-width: 620px; margin-bottom: 36px; }

.section-kicker { margin-bottom: 12px; }

.section-heading h2, .form-intro h2, .apply-side h2, .final-cta h2 { font: 700 clamp(2.1rem, 4vw, 3.35rem) / 1.03 Outfit, sans-serif; letter-spacing: -0.06em; margin: 0px 0px 13px; }

.section-heading p, .form-intro p, .apply-side p { color: var(--muted); line-height: 1.7; margin: 0px; }

.heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; }

.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.offer-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: rgb(255, 255, 255); box-shadow: rgba(35, 125, 165, 0.08) 0px 15px 35px; transition: transform 0.2s, box-shadow 0.2s; }

.offer-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }

.offer-card-top { display: flex; align-items: center; justify-content: space-between; }

.lender-badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: rgb(255, 255, 255); font-size: 0.62rem; font-weight: 800; }

.offer-tag { background: rgb(235, 249, 255); color: rgb(19, 130, 180); border-radius: 20px; font-size: 0.62rem; font-weight: 800; padding: 5px 8px; }

.offer-card h3 { font: 600 1.04rem Outfit; margin: 22px 0px 16px; }

.offer-rate { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 16px; }

.offer-rate span { font-size: 0.7rem; color: var(--muted); }

.offer-rate strong { color: var(--blue); font: 700 1.45rem Outfit; }

.offer-details { display: grid; gap: 9px; padding: 15px 0px; color: var(--muted); font-size: 0.73rem; }

.offer-details span { display: flex; align-items: center; gap: 6px; }

.offer-link { border: 0px; background: transparent; color: var(--blue); font-size: 0.75rem; font-weight: 800; padding: 5px 0px; display: flex; gap: 6px; align-items: center; }

.how-section { background: var(--pale); max-width: none; width: 100%; padding-left: max(24px, 50% - 590px); padding-right: max(24px, 50% - 590px); margin-top: 40px; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }

.steps-grid article { position: relative; border-top: 1px solid rgb(183, 228, 246); padding-top: 22px; }

.step-number { color: rgb(140, 205, 232); font: 700 1rem Outfit; letter-spacing: 0.12em; }

.step-icon { width: 42px; height: 42px; margin: 26px 0px 17px; border-radius: 12px; background: rgb(255, 255, 255); display: grid; place-items: center; color: var(--blue); box-shadow: rgba(43, 140, 178, 0.1) 0px 9px 20px; }

.steps-grid h3 { font: 600 1.2rem Outfit; margin: 0px 0px 8px; }

.steps-grid p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; max-width: 250px; }

.calculator-section { padding-top: 105px; }

.calculator-card { display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }

.calculator-controls { padding: 40px; }

.control-head { display: flex; justify-content: space-between; align-items: center; margin: 0px 0px 13px; }

.control-head label { font-weight: 600; font-size: 0.87rem; }

.control-head strong { font: 700 1.16rem Outfit; color: var(--blue); }

input[type="range"] { width: 100%; height: 7px; appearance: none; background: linear-gradient(90deg,var(--blue) var(--fill),#dff3fb var(--fill)); border-radius: 99px; outline: none; margin: 5px 0px; }

input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: rgb(255, 255, 255); border: 5px solid var(--blue); box-shadow: rgba(28, 117, 185, 0.3) 0px 3px 9px; }

.range-labels { display: flex; justify-content: space-between; color: rgb(155, 177, 195); font-size: 0.68rem; margin-bottom: 33px; }

.calculator-result { background: linear-gradient(145deg, rgb(7, 88, 202), rgb(26, 155, 231)); color: rgb(255, 255, 255); padding: 40px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }

.calculator-result::after { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 50%; right: -110px; top: -90px; }

.result-label { font-size: 0.65rem; letter-spacing: 0.13em; opacity: 0.75; font-weight: 800; }

.emi-number { font: 700 clamp(2.6rem, 5vw, 4.1rem) Outfit; letter-spacing: -0.06em; margin: 9px 0px 28px; }

.result-pills { display: grid; gap: 13px; position: relative; z-index: 1; }

.result-pills span { display: flex; justify-content: space-between; font-size: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; }

.result-pills b { font-weight: 400; opacity: 0.72; }

.button-light { background: rgb(255, 255, 255); color: var(--blue); margin-top: 30px; align-self: flex-start; }

.apply-section { padding-top: 105px; padding-bottom: 110px; }

.apply-panel { display: grid; grid-template-columns: 0.78fr 1.22fr; border-radius: 26px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: var(--shadow); border: 1px solid var(--line); }

.apply-side { padding: 50px 40px; background: linear-gradient(155deg, rgb(7, 93, 203), rgb(54, 182, 238)); color: rgb(255, 255, 255); position: relative; }

.apply-side::after { content: ""; position: absolute; width: 300px; height: 300px; right: -170px; bottom: -140px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; }

.apply-side .logo { color: rgb(255, 255, 255); margin-bottom: 80px; }

.apply-side .logo-accent { color: rgb(201, 245, 255); }

.apply-side .logo-mark { background: rgba(255, 255, 255, 0.16); }

.apply-side .section-kicker { color: rgb(200, 243, 255); }

.apply-side h2 { color: rgb(255, 255, 255); margin-top: 13px; }

.apply-side p { color: rgb(216, 245, 255); margin-bottom: 30px; }

.side-points { display: grid; gap: 14px; position: relative; z-index: 1; }

.side-points span { display: flex; gap: 9px; align-items: center; font-size: 0.8rem; }

.side-points svg { background: rgba(255, 255, 255, 0.145); border-radius: 50%; padding: 3px; }

.application-form { padding: 44px 42px; }

.form-intro { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 27px; }

.form-intro h2 { font-size: 2.2rem; }

.form-trust { display: flex; gap: 7px; align-items: center; color: rgb(58, 155, 117); font-size: 0.68rem; white-space: nowrap; background: rgb(237, 251, 244); padding: 9px 11px; border-radius: 9px; }

.application-form label { display: grid; gap: 8px; color: var(--ink); font-size: 0.76rem; font-weight: 700; margin-bottom: 18px; }

.application-form input, .application-form select { width: 100%; border: 1px solid rgb(213, 231, 240); background: rgb(251, 254, 255); border-radius: 10px; padding: 13px 14px; color: var(--ink); outline: none; font-size: 0.86rem; transition: border-color 0.2s, box-shadow 0.2s; }

.application-form input:focus, .application-form select:focus { border-color: var(--blue); box-shadow: rgba(8, 120, 230, 0.09) 0px 0px 0px 3px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0px 16px; }

.consent { align-items: start; gap: 9px; line-height: 1.5; display: flex !important; grid-template-columns: auto 1fr !important; font-size: 0.68rem !important; color: var(--muted) !important; font-weight: 400 !important; }

.consent input { height: 17px; accent-color: var(--blue); width: 17px !important; padding: 0px !important; }

.submit-button { width: 100%; margin-top: 9px; }

.form-error { background: rgb(255, 240, 240); color: rgb(202, 71, 71); padding: 11px; border-radius: 9px; font-size: 0.76rem; margin-bottom: 15px; }

.success-card { grid-column: 1 / -1; text-align: center; padding: 85px 30px; }

.success-icon { width: 62px; height: 62px; border-radius: 50%; background: rgb(221, 248, 235); color: var(--green); display: grid; place-items: center; margin: 0px auto 22px; }

.success-card h3 { font: 700 2.3rem Outfit; margin: 10px 0px; }

.success-card p { color: var(--muted); max-width: 430px; margin: 0px auto 22px; line-height: 1.7; }

.success-card > strong { display: block; color: var(--blue); letter-spacing: 0.15em; margin-bottom: 28px; }

.final-cta { width: 100%; padding: 72px max(24px, 50% - 590px); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--pale); }

.final-cta h2 { margin: 0px; }

.button-white { color: var(--blue); background: rgb(255, 255, 255); box-shadow: rgba(45, 142, 178, 0.11) 0px 10px 25px; }

.footer { width: min(1180px, 100% - 48px); margin: auto; padding: 31px 0px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; color: var(--muted); font-size: 0.7rem; }

.footer-note { margin-left: auto; max-width: 360px; text-align: right; }

.splash { height: 100vh; background: linear-gradient(145deg, rgb(233, 251, 255), rgb(255, 255, 255) 56%, rgb(217, 245, 255)); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; color: var(--ink); }

.splash .logo { font-size: 2.1rem; position: relative; z-index: 2; }

.splash .logo-mark { width: 48px; height: 48px; font-size: 1rem; border-radius: 15px; }

.splash p { color: var(--muted); position: relative; z-index: 2; margin: 17px 0px 30px; font-size: 0.9rem; }

.splash-art { position: relative; width: 130px; height: 110px; margin-bottom: 25px; }

.splash-card { position: absolute; width: 85px; height: 58px; border-radius: 12px; transform: rotate(-15deg); left: 23px; top: 25px; background: linear-gradient(135deg,var(--blue),var(--sky)); color: rgb(255, 255, 255); font: 700 2rem Outfit; display: grid; place-items: center; box-shadow: rgba(20, 124, 186, 0.333) 0px 18px 27px; }

.splash-card::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); right: 10px; top: 8px; }

.spark { position: absolute; color: var(--blue); font-size: 1.6rem; animation: 2.5s ease-in-out 0s infinite normal none running float; }

.spark-a { left: 0px; top: 6px; }

.spark-b { right: 4px; bottom: 8px; animation-delay: -1s; }

.splash-orbit { position: absolute; border: 1px solid rgba(114, 209, 246, 0.24); border-radius: 50%; width: 600px; height: 600px; }

.orbit-one { top: -280px; right: -210px; }

.orbit-two { bottom: -340px; left: -230px; border-color: rgba(114, 209, 246, 0.133); }

.loading-line { height: 3px; width: 135px; background: rgb(204, 238, 248); border-radius: 10px; overflow: hidden; }

.loading-line span { display: block; height: 100%; width: 40%; background: var(--blue); animation: 3s linear 0s 1 normal forwards running loading; }

@keyframes loading { 
  100% { width: 100%; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-copy { max-width: 680px; }
  .hero-visual { min-height: 390px; max-width: 620px; margin: auto; width: 100%; }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .apply-panel { grid-template-columns: 1fr; }
  .apply-side { padding: 38px; }
  .apply-side .logo { margin-bottom: 45px; }
  .footer-note { margin-left: 0px; text-align: left; }
  .nav-links { gap: 16px; }
}

@media (max-width: 650px) {
  .navbar { height: 68px; }
  .nav-inner, .hero, .section, .trust-strip, .footer { width: calc(100% - 34px); }
  .nav-links { display: none; position: absolute; left: 17px; right: 17px; top: 67px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; padding: 15px; box-shadow: var(--shadow); flex-direction: column; gap: 4px; }
  .nav-links.nav-open { display: flex; }
  .nav-links button { text-align: left; padding: 12px; }
  .nav-cta { margin-left: auto; padding: 10px 13px; }
  .menu-button { display: block; }
  .hero { padding-top: 53px; min-height: auto; }
  .hero h1 { font-size: clamp(3.25rem, 17vw, 5rem); }
  .hero-copy > p { font-size: 0.95rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-button { justify-content: center; }
  .hero-visual { min-height: 350px; margin-top: 17px; }
  .hero-visual img { width: 74%; }
  .floating-stat { padding: 10px 12px; }
  .stat-top { right: 0px; }
  .stat-bottom { left: 0px; }
  .trust-strip { display: block; text-align: center; margin-bottom: 15px; }
  .trust-strip > span { display: block; margin-bottom: 13px; }
  .trust-strip i { margin: 0px 3px; }
  .trust-strip div { font-size: 0.7rem; }
  .section { padding: 63px 0px; }
  .heading-row { display: block; }
  .desktop-only { margin-top: 20px; }
  .offer-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .offer-card { padding: 15px; }
  .offer-card h3 { font-size: 0.9rem; margin: 15px 0px 11px; }
  .offer-rate { display: block; }
  .offer-rate strong { display: block; margin-top: 4px; }
  .offer-tag { font-size: 0.52rem; }
  .offer-details { font-size: 0.63rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 26px; }
  .steps-grid article { display: grid; grid-template-columns: 44px 1fr; column-gap: 15px; }
  .step-number { grid-row: span 2; }
  .step-icon { margin: 0px 0px 10px; }
  .steps-grid h3, .steps-grid p { grid-column: 2; }
  .calculator-section { padding-top: 75px; }
  .calculator-card { grid-template-columns: 1fr; }
  .calculator-controls, .calculator-result { padding: 27px 22px; }
  .result-pills span { font-size: 0.73rem; }
  .emi-number { font-size: 3.2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .application-form { padding: 30px 20px; }
  .form-intro { display: block; }
  .form-trust { display: inline-flex; margin-top: 18px; }
  .apply-side { padding: 32px 25px; }
  .final-cta { display: block; padding: 58px 17px; }
  .final-cta .button { margin-top: 25px; width: 100%; }
  .footer { display: grid; gap: 15px; }
  .footer-note { max-width: none; }
  .splash .logo { font-size: 1.8rem; }
}
.application-form { position: relative; z-index: 2; }

.consent { position: relative; z-index: 3; cursor: pointer; }

.consent input { cursor: pointer; }

.success-card { grid-area: 1 / 2; align-self: center; }

@media (max-width: 900px) {
  .success-card { grid-area: 2 / 1; }
}#splash{position:fixed;inset:0;z-index:50;transition:opacity .5s}
#splash.hide{opacity:0;pointer-events:none}
.logo-link{display:inline-flex}
.form-error{display:none}.form-error.show{display:block}
.faux-input-note{font-size:.68rem;color:var(--muted);margin:-8px 0 16px}
.application-form input.bad,.application-form select.bad{border-color:#ca4747}
.offer-card .offer-link{cursor:pointer}
.mobile-gap{margin-top:0}