:root{
    /* brand “perpeal” vibe — tweak as you like */
    --brand-500:#6f42c1;  /* primary */
    --brand-600:#5e37a5;
    --brand-100:#e9ddff;
    --brand-indigo:#4e54c8;
    --brand-teal:#0cbaba;
    --brand-navy:#1a1a2e;
    --text:#1f2937; --muted:#6b7280; --bg-soft:#f8fafc; --ring:rgba(78,84,200,.25);
    --muted:#6b7280;
    --bg-soft:#f8fafc;
  }
  .btn-brand{
    background: var(--brand-500);
    border-color: var(--brand-500);
    color:#fff;
  }
  .btn-brand:hover{ background: var(--brand-600); border-color: var(--brand-600); color:#fff; }
  .btn-outline-brand{
    border-color: var(--brand-500); color: var(--brand-500); background: transparent;
  }
  .btn-outline-brand:hover{
    background: var(--brand-500); border-color: var(--brand-500); color:#fff;
  }

  /* Hero spacing & image sizing */
  #hero{ padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 5rem; }
  @media (min-width:992px){ #hero{ padding-bottom: 6rem; } }
  .hero-img{ max-height: 480px; object-fit: cover; }

.top-bar{
    background-color: #6f42c1;
}

.navbar-nav .nav-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #212529; /* dark gray text */
}

.dropdown-menu {
      --fade-distance: 10px;
      opacity: 0; transform: translateY(var(--fade-distance));
      visibility: hidden;
      transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
      display: block; margin-top: 0; border-radius: .75rem;
    }
    .dropdown-menu.show { opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s; }

    .navbar .nav-link { font-weight: 600; letter-spacing: .3px; padding: .75rem 0; }
    @media (min-width: 992px) {
      .navbar .nav-link { padding: 1rem .25rem; }
      .navbar .nav-item.mx-lg-2 { margin: 0 .6rem; }
    }
    .offcanvas { width: min(85vw, 360px); }
    .offcanvas .list-group-item { border: 0; }
    .offcanvas .list-group-item + .list-group-item { border-top: 1px solid rgba(0,0,0,.05); }

    .hero-animated-bg {
    pointer-events: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #4e54c8, #0cbaba, #4e54c8);
    background-size: 400% 400%;
    opacity: 0.6;
    animation: gradientShift 15s ease infinite;
    z-index: 0; /* stays behind content */
  }

  @keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Premium gradient button */
.btn-gradient-wel{
  background: linear-gradient(135deg,#6f42c1,#0d6efd);
  border: none; color:#fff!important; font-weight:600;
  border-radius: 50px; padding:.75rem 2rem;
  font-family:'Poppins',sans-serif;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.btn-gradient-wel:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  background: linear-gradient(135deg,#5a32a4,#0b5ed7);
}

  /* Gradient Fill Button */
.btn-gradient {
  background: linear-gradient(135deg, #6f42c1, #0d6efd);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  background: linear-gradient(135deg, #5a32a4, #0b5ed7);
}

/* Gradient Outline Button */
.btn-outline-gradient {
  border: 2px solid transparent;
  border-radius: 50px;
  font-weight: 600;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #6f42c1, #0d6efd) border-box;
  color: #0d6efd;
  transition: transform .2s ease, box-shadow .2s ease, color .3s ease;
}
.btn-outline-gradient:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  color: #fff;
  background: linear-gradient(135deg, #6f42c1, #0d6efd) border-box;
}

/* Shared CTA styles */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cta-btn {
  flex: 1 1 auto;
}


/* Gradient buttons (reusable from before) */
.btn-gradient {
  background: linear-gradient(135deg,#6f42c1,#0d6efd);
  border: none; color:#fff!important; font-weight:600;
  border-radius: 50px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Outline gradient */
.btn-outline-gradient {
  border: 2px solid transparent;
  border-radius: 50px;
  font-weight:600;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#6f42c1,#0d6efd) border-box;
  color:#0d6efd;
  transition: transform .2s ease, box-shadow .2s ease, color .3s ease, background .3s ease;
}
.btn-outline-gradient:hover {
  color:#fff;
  background: linear-gradient(135deg,#6f42c1,#0d6efd) border-box;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

/* Premium hover glow stays */
.service-card { transition: transform .25s ease, box-shadow .25s ease; }

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.15), 0 0 20px rgba(255,215,0,.35);
}

/* Services slider: prevent full-width stretch */
#services .services-swiper { overflow: visible; }
#services .services-swiper .swiper-wrapper { display: flex !important; }
#services .services-swiper .swiper-slide { flex: 0 0 auto; height: auto; }

/* Fallback widths if JS not yet applied */
@media (min-width: 1200px){
  #services .services-swiper .swiper-slide { width: calc((100% - 72px)/4); } /* 4 cards */
}
@media (min-width: 992px) and (max-width:1199.98px){
  #services .services-swiper .swiper-slide { width: calc((100% - 60px)/3); } /* 3 cards */
}
@media (min-width: 768px) and (max-width:991.98px){
  #services .services-swiper .swiper-slide { width: calc((100% - 22px)/2); } /* 2 cards */
}
@media (max-width: 767.98px){
  #services .services-swiper .swiper-slide { width: 100%; } /* 1 card */
}

.service-bg{
  background-color: #ffffff;
}

/* Gradient badges for steps */
.bg-gradient-emi {
  background: linear-gradient(135deg, #6f42c1, #0d6efd);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 18px;
  border-radius: 50%;
  display: inline-block;
  min-width: 44px;
  text-align: center;
}

/* Step icons spacing */
.step-icon .badge {
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* Partner logos: tidy, premium, responsive */
.partner-logo{
  height: 28px;          /* mobile base */
  filter: grayscale(100%) contrast(1.05);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.partner-logo:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}
@media (min-width: 576px){ .partner-logo{ height: 32px; } }
@media (min-width: 992px){ .partner-logo{ height: 38px; } }

/* Image sizing */
.welcome-hero-img{ max-height: 520px; object-fit: cover; }

/* Subtle lift on highlight cards */
.feature-card{ transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover{ transform: translateY(-3px); box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.12); }

/* Mobile: stack buttons full width */
@media (max-width: 991.98px) {
  .cta-buttons { flex-direction: column; }
  .cta-btn { width: 100%; }
  #welcome h2{ font-size:1.9rem; }
  .welcome-hero-img{ max-height: 380px; }
}

.section-animated-bg-blob{ position: relative; overflow: hidden; isolation:isolate; }
.section-animated-bg-blob::before,
.section-animated-bg-blob::after{
  content:"";
  position:absolute; border-radius:50%;
  filter: blur(60px);
  opacity:.18;
  z-index:-1;
}

/* Blob 1 (perpeal) */
.section-animated-bg-blob::before{
  width: 38rem; height: 38rem;
  left: -12rem; top: -8rem;
  background: radial-gradient(circle at 30% 30%, #6f42c1 0%, transparent 60%);
  animation: blobFloat1 22s ease-in-out infinite;
}

/* Blob 2 (teal) */
.section-animated-bg-blob::after{
  width: 42rem; height: 42rem;
  right: -14rem; bottom: -10rem;
  background: radial-gradient(circle at 70% 70%, #0cbaba 0%, transparent 65%);
  animation: blobFloat2 26s ease-in-out infinite;
}

@keyframes blobFloat1{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px, -12px) scale(1.05); }
}
@keyframes blobFloat2{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-24px, 16px) scale(1.07); }
}

@media (max-width: 991.98px){
  .section-animated-bg-blob::before{ width:28rem; height:28rem; left:-10rem; top:-10rem; }
  .section-animated-bg-blob::after { width:30rem; height:30rem; right:-12rem; bottom:-12rem; }
}
@media (prefers-reduced-motion: reduce){
  .section-animated-bg-blob::before,
  .section-animated-bg-blob::after{ animation:none; }
}

.footer .btn-sm-square { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
.footer-links li { margin-bottom:.4rem; }
.footer-links a {
  color:#cfd2e2; text-decoration:none; font-family:'Roboto',sans-serif;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover { color:#ffffff; transform: translateX(2px); }
.footer .newsletter .form-control { background:#0b0e1b; border:1px solid #2a2f4a; color:#e8ebff; }
.footer .newsletter .form-control::placeholder { color:#8c90ad; }
.footer .newsletter .form-control:focus { box-shadow:none; border-color:#6f42c1; }

/* Testimonials: prevent full-width stretch */
#testimonials .testimonials-swiper { overflow: visible; }
#testimonials .testimonials-swiper .swiper-wrapper { display: flex !important; }
#testimonials .testimonials-swiper .swiper-slide { flex: 0 0 auto; height: auto; }

/* Fallback widths if JS delays */
@media (min-width: 1200px){ #testimonials .testimonials-swiper .swiper-slide { width: calc((100% - 48px)/3); } }
@media (min-width: 768px) and (max-width:1199.98px){ #testimonials .testimonials-swiper .swiper-slide { width: calc((100% - 22px)/2); } }
@media (max-width: 767.98px){ #testimonials .testimonials-swiper .swiper-slide { width: 100%; } }

  /* Neutralize any global animate.css on dropdowns (safety) */
  .dropdown-menu { animation: none !important; }

  /* Desktop hover behavior with subtle fade/slide */
  @media (min-width: 992px) {
    .navbar .dropdown .dropdown-menu {
      display: block;            /* keep measurable for animation */
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s linear .18s; /* hide after animation ends */
    }
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:focus-within > .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s;
    }
    /* caret rotate for a crisp cue */
    .navbar .dropdown-toggle::after { transition: transform .18s ease; }
    .navbar .dropdown:hover .dropdown-toggle::after,
    .navbar .dropdown:focus-within .dropdown-toggle::after { transform: rotate(180deg); }
  }

  body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
  h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;color:var(--brand-navy);}
  .lead{color:var(--muted);}
  /* HERO with personal-loan image + ~50% overlay */
  .hero-ploan{
    position:relative; min-height:300px; display:grid; place-items:center; text-align:center; color:#fff;
   background:
  linear-gradient(135deg, rgba(26,32,60,.60), rgba(12,186,186,.50)),
  url('/assets/images/personal-loan.jpg') center/cover no-repeat; /* <- use your PL image */
  }
  .hero-ploan .inner{padding:4rem 1rem;}
  @media (max-width: 576px){ .hero-ploan{ background-position:center 30%; } } /* show faces/subject on mobile */

  .bank-card{background:#fff;border:1px solid #eef2ff;border-radius:1rem;box-shadow:0 8px 20px rgba(17,24,39,.06);}
  .bank-card:hover{box-shadow:0 14px 28px rgba(17,24,39,.08);}
  .bank-chip{display:inline-block;font:600 .75rem/1 Inter,sans-serif;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));padding:.4rem .6rem;border-radius:999px;}
  .tick-list li{margin:.4rem 0;padding-left:1.6rem;position:relative;}
  .tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;font-weight:700;color:var(--brand-teal);}
  .btn-primary{background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));border:0;}
  .btn-primary:focus{box-shadow:0 0 0 .25rem var(--ring);}

  .section-divider {
  height: 2px;
  background: linear-gradient(90deg, #4e54c8, #0cbaba);
  opacity: .6;
  margin: 2rem auto;
  max-width: 200px; /* short line, centered */
  border-radius: 2px;
}


 .hero-bloan{
    position:relative; min-height:300px; display:grid; place-items:center; text-align:center; color:#fff;
    background:
       linear-gradient(135deg, rgba(4, 13, 190, 0.8), rgba(6, 194, 137, 0.8)), 
      url("../images/personal-loan.jpg") center/cover no-repeat;
  }
  .hero-bloan .inner{padding:4rem 1rem;}
  .bank-card{background:#fff;border:1px solid #eef2ff;border-radius:1rem;box-shadow:0 8px 20px rgba(17,24,39,.06);}
  .bank-card:hover{box-shadow:0 14px 28px rgba(17,24,39,.08);}
  .bank-chip{display:inline-block;font:600 .75rem/1 Inter,sans-serif;color:#fff;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));padding:.4rem .6rem;border-radius:999px;}
  .tick-list li{margin:.4rem 0;padding-left:1.6rem;position:relative;}
  .tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;font-weight:700;color:var(--brand-teal);}

   .hero-hloan{
    position:relative; min-height:300px; display:grid; place-items:center; text-align:center; color:#fff;
    background:
      linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), /* 50% black overlay */
      url("../images/personal-loan.jpg") center/cover no-repeat;
  }
  .hero-hloan .inner{padding:4rem 1rem;}
  .bank-card{background:#fff;border:1px solid #eef2ff;border-radius:1rem;box-shadow:0 8px 20px rgba(17,24,39,.06);}
  .bank-card:hover{box-shadow:0 14px 28px rgba(17,24,39,.08);}
  .bank-chip{display:inline-block;font:600 .75rem/1 Inter,sans-serif;color:#fff;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));padding:.4rem .6rem;border-radius:999px;}
  .tick-list li{margin:.4rem 0;padding-left:1.6rem;position:relative;}
  .tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;font-weight:700;color:var(--brand-teal);}

  .bank-card.overview {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--brand-indigo), var(--brand-teal)) 1;
}

 /* Hero: 50% dark overlay for readability */
  .hero-mloan{
    position:relative; min-height:320px; display:grid; place-items:center; text-align:center; color:#fff;
    background:
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
      url("../images/personal-loan.jpg") center/cover no-repeat;
  }
  .hero-mloan .inner{padding:4rem 1rem;}

  /* Card styles consistent with site */
  .bank-card{background:#fff;border:1px solid #eef2ff;border-radius:1rem;box-shadow:0 8px 20px rgba(17,24,39,.06);}
  .bank-card:hover{box-shadow:0 14px 28px rgba(17,24,39,.08);}
  .bank-chip{display:inline-block;font:600 .75rem/1 Inter,sans-serif;color:#fff;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));padding:.4rem .6rem;border-radius:999px;}
  .tick-list li{margin:.45rem 0;padding-left:1.6rem;position:relative;}
  .tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;font-weight:700;color:var(--brand-teal);}

  /* subtle section separator for clarity */
  section { padding-bottom:2.5rem; }
  .section-divider { height:2px; max-width:140px;margin:2rem auto; background:linear-gradient(90deg,var(--brand-indigo),var(--brand-teal)); border-radius:2px; opacity:.7; }

.hero-ins{
  position:relative; min-height:300px; display:grid; place-items:center; text-align:center; color:#fff;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("../images/health-insurance.jpg") center/cover no-repeat;
}
.bank-card{background:#fff;border:1px solid #eef2ff;border-radius:1rem;box-shadow:0 8px 20px rgba(17,24,39,.06);}
.bank-chip{display:inline-block;font:600 .75rem/1 Inter,sans-serif;color:#fff;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));padding:.4rem .6rem;border-radius:999px;}
.tick-list li{margin:.45rem 0;padding-left:1.6rem;position:relative;}
.tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--brand-teal);font-weight:700;}
.section-divider { height:2px; max-width:140px;margin:2rem auto; background:linear-gradient(90deg,var(--brand-indigo),var(--brand-teal)); border-radius:2px; opacity:.7; }

.lead{color:var(--muted);}
.hero-ins{position:relative;min-height:300px;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url("../images/vehicle-insurance.jpg") center/cover no-repeat;}
.bank-card{background:#fff;border:1px solid #eef2ff;border-radius:1rem;box-shadow:0 8px 20px rgba(17,24,39,.06);}
.bank-chip{display:inline-block;font:600 .75rem/1 Inter,sans-serif;color:#fff;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-teal));padding:.4rem .6rem;border-radius:999px;}
.tick-list li{margin:.45rem 0;padding-left:1.6rem;position:relative;}
.tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--brand-teal);font-weight:700;}
.section-divider { height:2px; max-width:140px;margin:2rem auto; background:linear-gradient(90deg,var(--brand-indigo),var(--brand-teal)); border-radius:2px; opacity:.7; }

.apply-wrap{background:linear-gradient(180deg,var(--bg) 0%, #ffffff 40%);}
  .loan-card{
    background:#fff; border:none; border-radius:18px;
    box-shadow:0 12px 28px rgba(78,84,200,0.12);
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #222;
  }
  label.form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #333;
  }
  input.form-control,
  select.form-select,
  textarea.form-control {
    font-size: 0.70rem;
    border-radius: 6px;
    border: 1px solid #cdd0d3;
  }
  .form-control:focus, .form-select:focus {
    border-color: #4e54c8;
    box-shadow: 0 0 0 0.2rem rgba(78, 84, 200, 0.1);
  }
  .btn-primary {
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    background-color: #4e54c8;
    border: none;
  }
  .btn-primary:hover {
    background-color: #3e44b8;
  }
  .hint { font-size: 0.85rem; color: #6c757d; }

   /* --- Responsive, clean UI (visual-only) --- */
    :root {
      --page-bg: #f6f7fb;
      --card-bg: #ffffff;
      --muted: #6c757d;
      --ink: #1f2430;
      --brand: #2f3ab2;
      --brand-2: #6f42c1;
      --input-border: #dfe7ff;
    }

    html,body {
      height: 100%;
      background: var(--page-bg);
      font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.45;
      margin: 0;
      padding: 0;
    }

    .container-emi {
      padding: 28px 12px; /* less horizontal padding for small screens */
      min-height: 100vh;
    }

    .calculator-card {
      background: var(--card-bg);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(31,36,48,0.06);
      border: 1px solid rgba(15,23,42,0.03);
      overflow: hidden;
      max-width: 1100px;
      margin: 0 auto;
    }

    .calculator-header {
      padding: 18px 20px;
      border-bottom: 1px solid rgba(15,23,42,0.03);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      background: linear-gradient(90deg, rgba(78,84,200,0.03), rgba(111,66,193,0.01));
    }

    .calculator-header h2 {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--brand-2);
    }

    .calculator-body {
      padding: 18px;
    }

    .form-section { padding-right: 8px; }
    .result-section { padding-left: 8px; }

    label.form-label {
      font-size: .95rem;
      font-weight: 600;
      margin-bottom: .35rem;
      color: #222;
    }

    input.form-control, select.form-select {
      font-size: .95rem;
      border-radius: 8px;
      border: 1px solid var(--input-border);
      padding: .55rem .75rem;
      background: #fff;
      width: 100%;
      box-sizing: border-box;
    }

    input.form-control:focus, select.form-select:focus {
      outline: none;
      border-color: rgba(78,84,200,0.9);
      box-shadow: 0 8px 24px rgba(78,84,200,0.06);
    }

    .input-group-text {
      background: #f3f4ff;
      border: 1px solid var(--input-border);
      color: var(--brand);
      font-weight: 700;
      border-radius: 8px 0 0 8px;
    }

    .btn-primary {
      background: linear-gradient(90deg,var(--brand),var(--brand-2));
      border: none;
      font-weight: 700;
      border-radius: 8px;
      padding: .6rem 1rem;
      box-shadow: 0 10px 24px rgba(78,84,200,0.12);
    }

    .btn-outline-secondary {
      border-radius: 8px;
      padding: .55rem .9rem;
    }

    .result-box {
      background: linear-gradient(180deg,#ffffff,#fbfcff);
      border-radius: 10px;
      padding: 16px;
      border: 1px solid rgba(15,23,42,0.03);
    }

    .result-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:10px;
    }

    .result-row strong { font-weight:700; font-size:.98rem; color:#333; }
    .result-row .value { font-size:1rem; color:var(--brand-2); font-weight:700; }

    .muted { color: var(--muted); font-size: .92rem; }

    .hint { font-size: .88rem; color: var(--muted); margin-top: .35rem; display:block; }

    /* Canvas responsiveness */
    #emiChart {
      width: 100% !important;
      height: auto !important;
      display: block;
    }

    /* ----- Mobile first stacking ----- */
    @media (max-width: 767px) {
      .calculator-card { margin: 0 8px; } /* give small margins on mobile */
      .calculator-header { padding: 14px; }
      .calculator-body { padding: 14px; }
      .form-section, .result-section { padding: 8px 0; }
      .result-row { flex-direction: column; align-items:flex-start; gap: .3rem; }
      .btn-primary, .btn-outline-secondary { width: 100%; } /* full width buttons on mobile */
      .col-md-6 { width: 100%; display: block; } /* force stacking */
    }

    /* larger screens keep two-column layout */
    @media (min-width: 768px) {
      .calculator-body { padding: 22px; }
      .form-section { padding-right: 20px; }
      .result-section { padding-left: 20px; }
    }