@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --navy:#0b1f3a; --blue:#1769e0; --teal:#13a899; --ink:#10213b; --muted:#607087; --line:#dce5f0; --surface:#fff; --canvas:#f5f8fc; --soft:#edf4ff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"DM Sans",Arial,sans-serif; }
header { max-width:1180px; margin:auto; min-height:68px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; color:#fff; }.site-header{max-width:none;margin:0;padding:0 max(28px,calc((100vw - 1124px)/2));background:var(--navy);} #header { background:var(--navy); } header h2 { margin:0; font:700 18px/1 "Manrope",sans-serif; letter-spacing:-.4px; } .no-link-style, nav a { color:inherit; text-decoration:none; } nav a { font-size:14px; font-weight:600; opacity:.9; } nav a:hover { opacity:1; }
.tools-menu { position:relative; } .tools-menu-trigger { color:#fff; background:transparent; border:1px solid rgba(255,255,255,.3); border-radius:7px; padding:8px 11px; cursor:pointer; font:600 13px "DM Sans",Arial,sans-serif; } .tools-menu-trigger span { margin-left:5px; } .tools-menu-panel { display:none; position:absolute; z-index:10; right:0; top:calc(100% + 9px); width:240px; padding:10px; background:#fff; border:1px solid #dce5f0; border-radius:10px; box-shadow:0 15px 35px rgba(8,31,58,.18); } .tools-menu.is-open .tools-menu-panel { display:block; } .tools-menu-group { padding:10px; } .tools-menu-group + .tools-menu-group { border-top:1px solid #e8eef5; } .tools-menu-group p { margin:0 0 6px; color:#607087; font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; } .tools-menu-group a { display:block; padding:7px 0; color:#173a61; font-size:13px; font-weight:600; } .tools-menu-group a:hover { color:#1769e0; opacity:1; }
.section-strip { display:none; }
.emi-container { max-width:1180px; margin:auto; padding:72px 28px 68px; }
.emi-hero { max-width:760px; text-align:center; margin:0 auto 42px; }
.eyebrow,.section-kicker { display:block; color:var(--blue); font-size:11px; letter-spacing:1.4px; font-weight:700; margin-bottom:13px; }
h1,h2 { font-family:"Manrope",sans-serif; letter-spacing:-1px; } h1 { font-size:clamp(34px,5vw,54px); line-height:1.08; margin:0; } .emi-hero p { max-width:610px; margin:19px auto 22px; color:var(--muted); line-height:1.7; font-size:17px; }
.trust-points { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; color:#35516f; font-size:13px; font-weight:600; } .trust-points span:first-child::first-letter,.trust-points span:nth-child(2)::first-letter,.trust-points span:nth-child(3)::first-letter { color:var(--teal); }
.emi-calculator { background:var(--surface); display:grid; grid-template-columns:1.27fr .73fr; border-radius:20px; overflow:hidden; box-shadow:0 22px 60px rgba(23,47,83,.13); }
.calculator-panel { padding:40px; } .section-heading { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; margin-bottom:30px; } .section-heading h2,.result-empty h2,.faq-section h2 { margin:0; font-size:25px; } .section-heading .section-kicker { margin-bottom:7px; } .secure-note { color:var(--teal); white-space:nowrap; font-size:12px; font-weight:700; background:#e9faf7; padding:8px 10px; border-radius:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .field-wide { grid-column:1/-1; } .field-group { display:flex; flex-direction:column; } label { font-size:14px; font-weight:700; margin-bottom:8px; } small { color:var(--muted); font-size:12px; margin-top:7px; }
.input-with-prefix,.input-with-suffix { display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; transition:.2s; background:#fff; } .input-with-prefix:focus-within,.input-with-suffix:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,105,224,.12); } .input-with-prefix span,.input-with-suffix span { color:#5a6d85; font-size:15px; font-weight:700; padding:0 13px; } .input-with-prefix span { padding-right:0; } input { min-width:0; width:100%; border:0; outline:0; padding:14px 13px; color:var(--ink); font:600 16px "DM Sans",sans-serif; background:transparent; } input::-webkit-inner-spin-button { opacity:.4; }
.calculate-button,.copy-button { border:0; cursor:pointer; font:700 14px "DM Sans",sans-serif; transition:transform .18s,box-shadow .18s; } .calculate-button { padding:15px 21px; margin-top:30px; color:#fff; background:var(--blue); border-radius:8px; box-shadow:0 8px 18px rgba(23,105,224,.25); } .calculate-button span { margin-left:7px; font-size:18px; line-height:0; } .calculate-button:hover,.copy-button:hover { transform:translateY(-2px); }
.form-error { color:#b42318; background:#fff1f0; border-radius:7px; padding:10px 12px; font-size:13px; margin:20px 0 -10px; }
.result-panel { padding:40px; background:linear-gradient(150deg,#0d3158,#0b1f3a); color:#fff; display:flex; flex-direction:column; justify-content:center; } .result-label { color:#a9caef; font-size:11px; letter-spacing:1.2px; font-weight:700; margin:0 0 10px; } .emi-amount { font:800 clamp(36px,4vw,49px)/1 "Manrope",sans-serif; margin:0; letter-spacing:-2px; } .result-subtext { margin:10px 0 30px; color:#b7cbe3; font-size:13px; } .payment-bar { height:8px; overflow:hidden; border-radius:20px; background:#31577c; margin-bottom:25px; } .payment-bar span { display:block; height:100%; border-radius:inherit; background:var(--teal); }
.result-breakdown { display:grid; gap:14px; } .result-breakdown div { display:flex; justify-content:space-between; gap:12px; color:#c2d2e4; font-size:13px; } .result-breakdown strong { color:#fff; font-size:14px; } .result-breakdown .total-row { border-top:1px solid rgba(194,210,228,.25); padding-top:15px; margin-top:3px; color:#fff; font-weight:700; } .copy-button { margin-top:27px; padding:11px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:7px; } .copy-msg { min-height:16px; color:#8df1db; font-size:12px; text-align:center; margin:8px 0 0; }
.result-empty { text-align:center; color:#b7cbe3; } .result-empty h2 { color:#fff; margin:18px 0 10px; font-size:24px; } .result-empty p { font-size:14px; line-height:1.6; margin:0; } .result-icon { display:grid; place-items:center; width:48px; height:48px; margin:auto; border:1px solid rgba(255,255,255,.3); color:#8df1db; border-radius:50%; font-weight:800; font-size:22px; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:48px 0; } .info-card { padding:22px; background:#fff; border:1px solid #e4ebf4; border-radius:12px; } .info-card>span { color:var(--blue); font-size:22px; } .info-card h2 { margin:14px 0 8px; font-size:16px; letter-spacing:-.3px; } .info-card p,.faq-copy p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.faq-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:50px; padding:38px 0; border-top:1px solid var(--line); } .faq-section h2 { font-size:28px; } .faq-copy { display:grid; gap:15px; }
footer { padding:25px; text-align:center; background:#eaf0f7; color:#5e7086; font-size:12px; line-height:1.8; } footer a { color:#345777; }
@media (max-width:760px) { header{padding:0 20px;} header h2{font-size:15px;} .tools-menu-panel{right:0;width:min(240px,calc(100vw - 40px));} .emi-container{padding:48px 18px;} .emi-hero{margin-bottom:30px;} .emi-hero p{font-size:15px;} .emi-calculator{grid-template-columns:1fr;} .calculator-panel,.result-panel{padding:28px 22px;} .result-panel{min-height:330px;} .form-grid,.faq-section{grid-template-columns:1fr;} .field-wide{grid-column:auto;} .info-grid{grid-template-columns:1fr; margin:32px 0;} .faq-section{gap:22px;} .secure-note{display:none;} .trust-points{gap:10px 14px;} }
@media (max-width:390px) { .form-grid{gap:17px;} .calculator-panel,.result-panel{padding:25px 18px;} }
.tool-page{max-width:960px;margin:auto;padding:56px 28px 70px}.tool-page .emi-hero{margin-bottom:32px}.tool-page .emi-hero h1{font-size:clamp(32px,4vw,45px)}.tool-page .emi-hero p{font-size:16px}.tool-shell{max-width:860px;margin:auto;background:#fff;border-radius:18px;box-shadow:0 16px 45px rgba(23,47,83,.1);overflow:hidden}.tool-form{padding:32px}.tool-form textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:14px;color:var(--ink);font:14px/1.55 "DM Sans",Arial,sans-serif;outline:0}.tool-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,224,.12)}.choice-row{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.choice-row label{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13px}.choice-row input{width:auto;padding:0}.tool-result{padding:28px 32px;background:linear-gradient(150deg,#0d3158,#0b1f3a);color:#fff}.tool-result .result-label{margin-bottom:10px}.tool-result pre{margin:0;white-space:pre-wrap;word-break:break-word;color:#edf6ff;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.tool-result .result-breakdown{margin-top:0}.tool-result .copy-button{margin-top:18px}.tool-result .copy-msg{margin-bottom:0}.tool-error{color:#b42318;background:#fff1f0;border-radius:7px;padding:11px 12px;font-size:13px;margin-top:18px}.tool-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}.tool-info article{background:#fff;border:1px solid #e4ebf4;border-radius:12px;padding:20px}.tool-info h2{font-size:16px;margin:0 0 8px}.tool-info p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}.result-large{font:800 clamp(30px,4vw,42px)/1 "Manrope",sans-serif;margin:0 0 8px}.result-note{color:#b7cbe3;font-size:13px;margin:0}.password-output{font:700 19px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;margin:0}.strength-meter{height:7px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.25);margin-top:15px}.strength-meter span{display:block;height:100%;background:#13a899}@media(max-width:760px){.tool-page{padding:42px 18px}.tool-form{padding:24px 20px}.tool-result{padding:24px 20px}.tool-info{grid-template-columns:1fr}}