/* ============================================================
   QuickLending — style.css  (single source of truth)
   All 40 pages. Edit only this file for any design change.
   ============================================================
   00  Fonts & Variables
   01  Reset
   02  Typography
   03  Layout Utilities
   04  Header & Navigation
   05  Buttons
   06  Hero (Homepage)
   07  Cards & Grids
   08  Product Inner Pages
   09  Calculators
   10  Contact Page
   11  FAQ Page
   12  Market Updates Page
   13  Secure Upload Page
   14  Process Section
   15  CTA Band
   16  Footer
   17  Floating Elements
   18  Animations
   19  Responsive
   ============================================================ */
/* ============================================================ 00 FONTS & VARIABLES ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root {
  /* Brand primitives — premium finance */
  --color-blue-600: #0B3CC1;
  --color-blue-700: #082A8A;
  --color-orange-500: #E85D04;

  /* Semantic colour roles */
  --brand-primary: var(--color-blue-600);
  --brand-primary-hover: var(--color-blue-700);
  --brand-primary-glow: color-mix(in srgb, var(--color-blue-600) 12%, transparent);
  --brand-accent: var(--color-orange-500);

  /* Surfaces */
  --surface: #FFFFFF;
  --surface-subtle: #F8FAFC;
  --surface-warm: #FFF9F5;
  --surface-frost: #EEF4FF;
  --surface-frost-deep: #D6E4FF;

  /* Text */
  --text: #334155;
  --text-strong: #1E293B;
  --text-muted: #64748B;
  --text-steel: #3D5A73;
  --text-steel-soft: #4A6078;
  --text-footer: #5A7184;
  --text-footer-muted: #829AB1;
  --text-on-brand: #FFFFFF;

  /* Legacy aliases (keeps existing HTML/CSS working) */
  --navy: var(--text-strong);
  --text-main: var(--text);
  --line: #E2E8F0;
  --white: var(--surface);
  --paper: var(--surface);
  --paper-dim: var(--surface-subtle);
  --paper-warm: var(--surface-warm);
  --muted: var(--text-muted);

  /* Borders & shadows */
  --border: #E2E8F0;
  --border-frost: #D6E4FF;
  --shadow-card: 0 6px 16px rgba(15, 23, 42, 0.05);
  --shadow-card-hover:
    0 30px 50px rgba(0, 82, 231, 0.12),
    0 10px 20px rgba(255, 107, 0, 0.08);
  --shadow-form: 0 20px 40px -12px rgba(0, 82, 231, 0.12);
  --shadow-calc: 0 12px 32px rgba(15, 23, 42, 0.06);
  /* Older shadow scale — still referenced in a few places below */
  --shadow-sm: 0 4px 6px -1px rgba(15,23,42,0.05);
  --shadow-md: 0 10px 15px -3px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 40px -10px rgba(15,23,42,0.15);

  /* Shape & motion */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 0.5s;
  --duration-fast: 0.4s;
}
/* ============================================================ 01 RESET ============================================================ */ *,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ============================================================ 02 TYPOGRAPHY ============================================================ */ h1,h2,h3,h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.mono { font-family: 'Plus Jakarta Sans', sans-serif; }
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-accent);
  margin-bottom: 12px;
}
.lede {
  font-size: 17px;
  color: var(--text-main);
  line-height: 1.75;
  max-width: 56ch;
}
.sub {
  color: var(--text-muted); font-size: 14px; margin-bottom: 20px;
}
.section-title {
  font-size: clamp(26px,3vw,36px); color: var(--brand-primary); margin-bottom: 12px;
  text-align: center;
}
.advisory-heading {
  font-size: clamp(26px,3.2vw,36px);
  font-weight: 800;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.advisory-body {
  font-size: 17px; color: var(--text-main); line-height: 1.8; margin-bottom: 24px;
}
/* Utility */ .text-center { text-align: center; }
.color-primary { color: var(--brand-primary); }
.color-white { color: var(--white); }
.mt-16 { margin-top: 16px; }
.mb-56 { margin-bottom: 56px; }
.max-w-900 { max-width: 900px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.vis-hidden { visibility: hidden; }
.inline-link {
  color: var(--brand-primary); text-decoration: underline; font-weight: 600;
}
.skip-link {
  position: absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ============================================================ 03 LAYOUT UTILITIES ============================================================ */ .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 700px !important; }
section { padding: 96px 0; }
/* Section background variants */ .section-dim {
  background: var(--paper-dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section-min-vh { min-height: 50vh; }
.section-compact { padding: 60px 0; }
.section-tight { padding: 40px 0 100px; }
.section-white-border {
  background: var(--white); padding: 60px 0; border-top: 1px solid var(--line);
}
.advisory-section { background: var(--paper); padding: 96px 0; }
/* ============================================================ 04 HEADER & NAVIGATION ============================================================ */ header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  gap: 40px;
}
/* Logo — image */
.logo-img{display:flex;align-items:center;margin-right:auto;flex-shrink:0;}
.logo-img img{display:block;height:64px;width:auto;max-width:220px;object-fit:contain;}
.footer-logo-img img{display:block;height:38px;width:auto;filter:brightness(0) invert(1);}
@media(max-width:480px){.logo-img img{height:48px;}}

/* Logo */ .logo {
  margin-right: auto;
  flex-shrink: 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.logo .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--brand-primary);
  border-radius: 50%;
}
/* Nav links */ .nav-links { height: 100%; display: flex; align-items: center; }
.nav-links ul {
  display: flex;
  gap: 32px;
  list-style: none;
  height: 100%;
  align-items: center;
}
.nav-item {
  height: auto;
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-direction: column;
}
.nav-item > a {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  height: auto;
  white-space: nowrap;
  padding: 10px 0;
  width: 100%;
}
.nav-item > a:hover { color: var(--brand-primary); }
/* Dropdowns — modern compact */
.dropdown, .mega-menu {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--white);
  box-shadow: 0 20px 60px -10px rgba(0,28,75,0.18), 0 4px 16px -4px rgba(0,28,75,0.08);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.dropdown {
  left: 0;
  min-width: 220px;
  padding: 8px 0;
}
.mega-menu {
  left: 0;
  right: auto;
  width: 580px;
  max-width: calc(100vw - 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-item:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); display: grid; }
.dropdown a {
  display: block; padding: 8px 16px;
  color: var(--text-main); font-size: 13px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.dropdown a:hover {
  background: var(--paper-dim); color: var(--brand-primary); padding-left: 28px;
}
.mega-group h4 {
  font-size: 11px;
  color: var(--brand-accent);
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
}
.mega-group ul { display: flex; flex-direction: column; gap: 2px; }
.mega-group a {
  display: block; padding: 5px 6px;
  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
  transition: background 0.15s, color 0.15s; border-radius: 6px;
}
.mega-group a:hover {
  background: var(--brand-primary-glow); color: var(--brand-primary);
}
/* Header action buttons */ .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  flex-shrink: 0;
}
.header-actions .btn{padding:8px 16px;font-size:12px;font-weight:700;letter-spacing:0.3px;}
.header-actions .btn-primary{background:var(--brand-primary);color:#fff!important;box-shadow:0 3px 10px var(--brand-primary-glow);}
.header-actions .btn-ghost{border-color:var(--line);color:var(--text-muted)!important;background:transparent;}
.header-actions .btn-ghost:hover{border-color:var(--brand-primary);color:var(--brand-primary)!important;}
/* Mobile toggle */ .menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--navy);
  cursor: pointer;
  padding: 4px 8px;
}
/* Inline page nav (sticky, inner pages) */ .page-nav-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky;
  top: 72px;
  z-index: 100;
}
.page-nav-wrapper::-webkit-scrollbar { display: none; }
.page-nav { display: flex; width: max-content; padding: 0 24px; }
.nav-anchor {
  display: block;
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-anchor:hover, .nav-anchor.active {
  color: var(--brand-primary); border-bottom-color: var(--brand-primary);
}
/* Breadcrumb */ .breadcrumb {
  font-size: 12px; color: var(--text-muted); margin-bottom: 16px;
}
.breadcrumb a { color: var(--brand-primary); font-weight: 600; }
/* ============================================================ 05 BUTTONS ============================================================ */ .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  text-align: center;
  text-decoration: none;
}
.btn-primary {
  background: var(--brand-primary);
  color: var(--white) !important;
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px var(--brand-primary-glow);
}
.btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.28);
}
.btn-ghost {
  background: transparent;
  color: var(--navy) !important;
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--brand-primary); color: var(--brand-primary) !important; background: var(--brand-primary-glow);
}
.btn-wa {
  background: rgba(16,185,129,0.1);
  color: #10B981 !important;
  border-color: #10B981;
}
.btn-wa:hover {
  background: #10B981; color: var(--white) !important; transform: translateY(-2px);
}
.form-submit-btn {
  width: 100%; border: none; font-size: 1rem; padding: 16px; font-weight: 700; cursor: pointer;
}
/* ============================================================ 06 HERO (Homepage only) ============================================================ */ .hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 50%, #EFF6FF 100%);
  padding: 80px 0 60px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: flex-start;
}
/* Slider */ .hero-slider-wrapper { position: relative; }
.hero-slide { display: none; }
.hero-slide.active { display: block; }
.slide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.slide-text h1, .slide-text h2{color:var(--navy)!important;
  font-size: clamp(28px,3.8vw,46px); margin: 12px 0 20px; line-height: 1.15;
}
.slide-text h1 em, .slide-text h2 em { font-style: normal; color: var(--brand-accent); }
.slide-vector { width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.cta-flex {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
/* Dots */ .hero-dots { display: flex; gap: 8px; margin-top: 32px; }
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.dot.active { background: var(--brand-primary); transform: scale(1.3); }
/* Eligibility card */ .elig-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
  position: sticky;
  top: 92px;
}
.elig-card h3 { font-size: 22px; margin-bottom: 6px; }
.elig-field { margin-bottom: 16px; }
.elig-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.elig-field select, .elig-field input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  background: var(--paper-dim);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.elig-field select:focus, .elig-field input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-glow);
  background: var(--white);
}
.elig-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; cursor: pointer;
}
.elig-consent input[type="checkbox"] {
  width: 16px; height: 16px;
  flex-shrink: 0; margin-top: 3px;
  accent-color: var(--brand-primary); cursor: pointer;
}
.elig-consent span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.elig-submit { width: 100%; margin-top: 4px; }
/* Success state */ .elig-success { display: none; text-align: center; padding: 40px 24px; }
.elig-success .check {
  width: 64px; height: 64px;
  background: var(--brand-primary);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800;
  margin: 0 auto 20px;
}
.elig-success h4 { font-size: 20px; color: var(--navy); margin-bottom: 12px; }
.elig-success p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
/* Trust badges */ .trust-badge-container, .trust-badge-row, .trust-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.trust-icon {
  display: inline-flex;
  vertical-align: -3px;
  color: var(--brand-primary);
  margin-right: 2px;
}
.trust-badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  background: var(--brand-primary-glow);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 50px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  cursor: default;
}
.trust-badge-icon:hover {
  background: var(--brand-primary); color: var(--white); transform: translateY(-2px);
}
/* ============================================================ 07 CARDS & GRIDS ============================================================ */ /* Grid layouts */ .why-grid, .features-grid, .compare-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.doc-grid, .related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (min-width: 1025px) {
  .info-wrap .doc-grid { grid-template-columns: 1fr; }
  .doc-grid.doc-grid-wide { grid-template-columns: repeat(2, 1fr) !important; }
}
.contact-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Card base */ .why-item, .feature-card, .doc-card, .contact-info-card, .related-card, .data-list li {
  background: var(--white);
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
/* Top shimmer line */ .why-item::before, .feature-card::before, .doc-card::before, .data-list li::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  border-radius: 4px 4px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
  z-index: 2;
}
.why-item:hover::before, .feature-card:hover::before, .doc-card:hover::before, .data-list li:hover::before { transform: scaleX(1); }
/* Hover lift */ .why-item:hover, .feature-card:hover, .doc-card:hover, .contact-info-card:hover, .related-card:hover, .data-list li:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px -12px rgba(37,99,235,0.16), 0 4px 12px rgba(37,99,235,0.06);
  border-color: var(--brand-primary);
}
/* Text stays dark on hover — only h3 pops to brand */ .why-item:hover h3, .why-item:hover p, .feature-card:hover h3, .feature-card:hover p, .doc-card:hover h3, .doc-card:hover p, .doc-card:hover li, .contact-info-card:hover h3, .contact-info-card:hover p, .contact-info-card:hover a, .related-card:hover h3, .related-card:hover p { color: inherit !important; }
.why-item:hover > h3, .feature-card:hover > h3 { color: var(--brand-accent) !important; }
/* Card typography */ .card-h3, .why-item h3, .feature-card h3 {
  font-size: 17px; font-weight: 800; color: var(--brand-primary); margin-bottom: 10px; line-height: 1.4; transition: color 0.25s;
}
.card-p, .why-item p, .feature-card p {
  font-size: 14px; color: var(--text-muted); line-height: 1.65; flex-grow: 1; margin: 0;
}
/* Explore link */ .card-explore, .explore-link {
  color: var(--brand-primary);
  font-weight: 600;
  margin-top: 16px;
  display: inline-block;
  font-size: 14px;
}
/* Feature-card icon — SVG */
.feature-card .icon,.why-item .icon{display:flex;align-items:center;width:48px;height:48px;margin-bottom:20px;color:var(--brand-primary);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),color 0.2s;}
.feature-card .icon svg,.why-item .icon svg{width:100%;height:100%;stroke:currentColor;}
.feature-card:hover .icon{transform:scale(1.15) rotate(-4deg);color:var(--brand-primary-hover);}
/* Mark dot */ .mark {
  width: 36px; height: 36px;
  background: var(--brand-primary-glow);
  border-radius: 8px;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.why-item:hover .mark { background: var(--brand-primary); }
/* Callout box */ .callout-box {
  background: linear-gradient(135deg, var(--brand-primary-glow) 0%, var(--paper-dim) 100%);
  border: 1px solid rgba(37,99,235,0.16);
  border-left: 4px solid var(--brand-primary);
  padding: 20px 24px;
  margin-top: 24px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  max-width: 700px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.callout-box::before {
  content: '';
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230052E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.callout-box > div { flex: 1; }
.callout-box strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 8px; }
.callout-box .inline-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 16px;
  background: var(--white); border: 1px solid var(--brand-primary);
  border-radius: 50px; font-weight: 700; font-size: 0.88rem;
  color: var(--brand-primary) !important; text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}
.callout-box .inline-link:hover { background: var(--brand-primary); color: var(--white) !important; }
/* Data list — two-column table */
/* Data list — card grid */
.data-list { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.data-list li {
  display:flex; flex-direction:column; gap:8px;
  padding: 24px 22px;
}
.data-list .label {
  display: flex; align-items: center; gap: 8px;
  font-size:15px; font-weight:800; color:var(--navy);
  text-transform:none; letter-spacing:0;
  margin-bottom:2px;
}
.data-list .label::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  background: var(--brand-accent); transform: rotate(45deg);
}
.data-list .value { font-size:14px; color:var(--text-main); line-height:1.7; }
@media(max-width:500px){ .data-list { grid-template-columns:1fr; } }
.icon-lg { font-size: 1.5rem; display: inline-flex; vertical-align: -5px; color: var(--brand-primary); }
h3.color-white .icon-lg { color: #10B981; }
/* ============================================================ 08 PRODUCT INNER PAGES ============================================================ */ .product-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%);
  padding: 60px 0 80px;
}
.product-hero-sm { padding-bottom: 40px; }
.product-hero-md { padding-bottom: 60px; }
.product-hero h1{font-size:clamp(28px,4vw,48px);margin:12px 0 20px;}
/* Product hero: keep heading dark */
.product-hero h1,.faq-page-hero h1{color:var(--navy)!important;}
.product-hero p+.btn,.product-hero p+a.btn{margin-top:28px;display:inline-block;}
.cta-band p+.btn,.cta-band p+a.btn{margin-top:8px;}
.faq-page-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%); padding: 60px 0 20px;
}
/* Two-col layout: content + sidebar */ .info-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: flex-start;
}
/* Doc card */ .doc-subhead{margin-top:16px;}
.doc-card h4{font-size:16px;font-weight:700;margin-bottom:14px;}
.doc-card ul{padding-left:0;}
.doc-card ul li{font-size:14px;color:var(--text-muted);padding:6px 0 6px 26px;line-height:1.5;position:relative;}
.doc-card ul li::before{content:'\2713';position:absolute;left:0;top:6px;color:var(--brand-accent);font-weight:800;font-size:14px;}
/* Lead form sidebar */ .lead-form-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 92px;
}
.lead-form-box h3 { font-size: 20px; margin-bottom: 20px; }
/* Related cards */ .related-card { padding: 28px; }
.related-card h3 { font-size: 16px; margin-bottom: 8px; }
.related-card p { font-size: 13px; }
/* Mobile sticky CTA bar */ .mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 500;
  gap: 10px;
}
.m-call {
  flex:1; text-align:center; padding:12px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; text-transform:uppercase; background:var(--navy); color:var(--white) !important;
}
.m-wa {
  flex:1; text-align:center; padding:12px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; text-transform:uppercase; background:#10B981; color:var(--white) !important;
}
/* Border helpers */ .border-left-primary { border-left: 4px solid var(--brand-primary); }
.border-left-navy { border-left: 4px solid var(--navy); }
.border-top-line { border-top: 1px solid var(--line); }
/* ============================================================ 09 CALCULATORS ============================================================ */ .calc-section { padding: 60px 0; }
.calc-section-notop { padding-top: 0; }
.calc-section-title { margin-bottom: 12px; }
.calc-section-lead {
  color: var(--text-muted); max-width: 60ch; margin-bottom: 48px; font-size: 15px; line-height: 1.7;
}
.calc-tools-heading { text-align: center; margin-bottom: 32px; font-size: 1.8rem; }
/* Shell */ .calc-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 4px 32px rgba(15,23,42,0.07);
  overflow: hidden;
}
.calc-wrap-full {
  grid-template-columns: 1fr;
  padding: 24px;
  box-shadow: 0 4px 32px rgba(15,23,42,0.07);
}
/* Left panel */ .calc-wrap > div:first-child {
  padding: 44px;
  border-right: 1px solid var(--line);
  background: var(--white);
}
.calc-wrap-full > div:first-child { border-right: none; border-bottom: none; padding: 0; }
/* Input field */ .field { margin-bottom: 28px; }
.field:last-of-type { margin-bottom: 0; }
.field > label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.field-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-primary);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  border-bottom: 1.5px dashed rgba(0,82,231,0.4);
  padding-bottom: 1px;
  transition: background 0.15s;
  border-radius: 4px;
}
.field-val:hover { background: var(--brand-primary-glow); }
.field-val-edit {
  width: 110px;
  font: inherit;
  color: var(--navy);
  border: 1.5px solid var(--brand-primary);
  border-radius: 6px;
  padding: 2px 8px;
  text-align: right;
  background: var(--white);
}
.field-val-edit::-webkit-outer-spin-button, .field-val-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Number + range row */ .input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-dim);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-row:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-glow);
  background: var(--white);
}
.input-row span {
  font-size: 15px; font-weight: 700; color: var(--text-muted); flex-shrink: 0;
}
.input-row input[type="number"] {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800; color: var(--navy); outline: none;
  -moz-appearance: textfield;
}
.input-row input[type="number"]::-webkit-outer-spin-button, .input-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Comma-formatted number overlay (see script.js) */
.num-fmt-wrap { position: relative; display: block; flex: 1; min-width: 0; }
.num-fmt-wrap input[type="number"] { width: 100%; position: relative; z-index: 2; }
.num-fmt-wrap:not(.is-focused) input[type="number"] { color: transparent; caret-color: transparent; }
.num-fmt-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800; color: var(--navy);
  pointer-events: none; white-space: nowrap; overflow: hidden;
}
.num-fmt-wrap.is-focused .num-fmt-overlay { visibility: hidden; }
/* Select inside input-row */ .input-row-select {
  width: 100%; padding: 10px 4px; border: none; background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 500; color: var(--brand-primary); outline: none; cursor: pointer;
}
/* Range slider */ input[type="range"] {
  -webkit-appearance: none;
  width: 100%; height: 6px;
  background: var(--line);
  border-radius: 4px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--brand-primary);
  box-shadow: 0 2px 8px rgba(37,99,235,0.28);
  cursor: pointer; margin-top: -8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow: 0 4px 16px rgba(37,99,235,0.42);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--brand-primary);
  box-shadow: 0 2px 8px rgba(37,99,235,0.28); cursor: pointer;
}
/* Unit labels */ .input-unit-navy { color: var(--navy); font-weight: 600; }
.input-unit-sm { color: var(--navy); font-size: 0.9rem; font-weight: 600; }
.calc-shared-field { max-width: 520px; margin-bottom: 32px; }
/* Right panel */ .calc-result {
  padding: 44px 40px;
  background: var(--navy);
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  color: var(--white);
}
.calc-result .eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: rgba(255,255,255,0.55); margin-bottom: 4px;
}
.emi-figure {
  font-size: clamp(32px,4.5vw,46px); font-weight: 800;
  color: var(--white); letter-spacing: -1.5px; line-height: 1;
}
.emi-breakdown {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.emi-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.emi-line:last-child { border-bottom: none; background: rgba(255,255,255,0.05); }
.emi-line .val { color: var(--white); font-weight: 800; font-size: 14px; }
.emi-line-note {
  font-size: 0.78rem; color: rgba(255,255,255,0.5); display: block; line-height: 1.5; padding-top: 10px;
}
.calc-disclaimer {
  font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.6; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1);
}
.calc-result-note {
  font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 12px; line-height: 1.5;
}
.calc-result-list {
  margin-left: 18px; color: rgba(255,255,255,0.65); font-size: 0.88rem; line-height: 1.8;
}
.calc-result ul {
  margin-left: 18px; color: rgba(255,255,255,0.65); font-size: 0.88rem; line-height: 1.8;
}
.calc-actions {
  display: flex; flex-direction: column; gap: 10px; margin-top: 20px;
}
.calc-btn-outline {
  display: block; width: 100%; text-align: center;
  padding: 13px 20px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--radius-sm);
  background: transparent; color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.calc-btn-outline:hover {
  background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white);
}
.calc-btn-cta {
  display: block; width: 100%; text-align: center;
  padding: 13px 20px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; border-radius: var(--radius-sm);
  background: var(--brand-primary); color: var(--white); border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.calc-btn-cta:hover {
  background: var(--brand-primary-hover); transform: translateY(-1px);
}
/* Value colours */ .val-green { color: #4ADE80; }
.val-red { color: #F87171; }
/* Comparison panels */ .input-panels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-bottom: 24px;
}
.input-panel {
  background: var(--paper-dim); border: 1px solid var(--line); padding: 28px; border-radius: var(--radius-md);
}
.input-panel h3, .comp-panel h3 {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--brand-primary);
  padding-bottom: 14px; border-bottom: 2px solid var(--brand-primary-glow); margin-bottom: 20px;
}
.comp-panel {
  background: var(--paper-dim); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column;
}
.comp-box {
  background: var(--white); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--line); margin-top: 20px;
}
.comp-emi-out {
  font-size: 1.9rem; font-weight: 800; color: var(--brand-primary); letter-spacing: -0.5px; margin: 4px 0 8px;
}
.comp-int-note { font-size: 12px; color: var(--text-muted); }
.comp-int-note span { font-weight: 800; color: var(--navy); }
/* Summary banner */ .calc-summary-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3560 100%);
  color: var(--white); padding: 28px 32px; border-radius: var(--radius-md);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px; margin-top: 24px;
}
.calc-summary-banner .eyebrow { color: #10B981; display: block; margin-bottom: 8px; }
.calc-summary-banner .summary-text {
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.85); max-width: 56ch; line-height: 1.55;
}
.btn-assess {
  background: var(--brand-primary); color: var(--white) !important;
  font-weight: 800; white-space: nowrap; flex-shrink: 0;
  padding: 12px 24px; border-radius: var(--radius-sm); font-size: 13px;
  text-transform: uppercase; transition: background 0.2s, transform 0.2s;
}
.btn-assess:hover {
  background: var(--brand-primary-hover); transform: translateY(-2px);
}
.diff-out {
  font-size: 1.15rem; font-weight: 600; color: rgba(255,255,255,0.9); margin-top: 4px; line-height: 1.5;
}
/* Verdict panel */ .verdict-panel {
  background: var(--navy); color: var(--white); padding: 32px; border-radius: var(--radius-md); margin-top: 24px;
}
.verdict-text {
  font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; color: var(--white); line-height: 1.4;
}
.verdict-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
}
.stat-label { font-size: 0.88rem; color: #9CA3AF; margin-bottom: 4px; }
.stat-note {
  font-size: 0.78rem; color: #9CA3AF; margin-top: 4px; line-height: 1.4;
}
.stat-value { font-size: 1.2rem; font-weight: 600; }
.stat-red { color: #F87171; }
.stat-green { color: #4ADE80; }
/* Amortization table */ .amort-wrapper {
  display: none; margin-top: 40px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 24px; box-shadow: var(--shadow-sm);
  max-height: 500px; overflow-y: auto;
}
.amort-title { color: var(--navy); margin-bottom: 16px; }
.amort-table {
  width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem;
}
.amort-thead { background: var(--paper-dim); position: sticky; top: 0; }
.amort-th {
  padding: 12px; border-bottom: 2px solid var(--line); font-weight: 700; color: var(--navy);
}
.amort-td {
  padding: 12px; border-bottom: 1px solid var(--line); color: var(--text-main);
}
.amort-td-prin {
  padding: 12px; border-bottom: 1px solid var(--line); color: #4ADE80; font-weight: 600;
}
.amort-td-int {
  padding: 12px; border-bottom: 1px solid var(--line); color: #F87171; font-weight: 600;
}
.amort-td-bold {
  padding: 12px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--navy);
}
/* ============================================================ 10 CONTACT PAGE ============================================================ */ .contact-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: flex-start;
}
.contact-lead { text-align: center; max-width: 600px; margin: 0 auto; }
.contact-h2 { color: var(--brand-primary); margin-bottom: 8px; font-size: 2rem; }
.contact-sub { color: var(--text-muted); margin-bottom: 32px; }
.contact-phone { font-size: 1.2rem; color: var(--navy); font-weight: 700; }
.contact-email { color: var(--brand-primary); font-weight: 600; }
.contact-info { font-size: 14px; color: var(--text-muted); }
.contact-info-card { padding: 28px; }
.contact-info-card h3 { font-size: 17px; margin-bottom: 12px; }
.contact-wa-card { background: var(--navy) !important; border: none !important; }
.contact-wa-card h3 { color: var(--white) !important; }
.contact-wa-p { color: #cbd5e1 !important; margin-bottom: 20px; }
.contact-wa-btn {
  background: #25D366 !important; color: var(--white) !important; border: none !important; width: 100%; font-weight: 700; text-align: center;
}
/* Forms (contact + upload) */ .form-group { margin-bottom: 24px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px;
}
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea, #loan-type {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 500; color: var(--navy);
  background: var(--paper-dim);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.form-group input[type="checkbox"], .form-group input[type="radio"] {
  width: 18px; height: 18px; flex-shrink: 0;
}
.form-group input:focus:not([type="checkbox"]):not([type="radio"]), .form-group select:focus, .form-group textarea:focus, #loan-type:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-glow); background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 120px; }
/* Contact form JS-injected success */ .form-success { text-align: center; padding: 30px 10px; }
.form-success-icon {
  font-size: 48px; color: #4ADE80; margin-bottom: 12px; display: block;
}
.form-success-title { color: var(--navy); font-size: 24px; margin-bottom: 8px; }
.form-success-msg { color: var(--text-muted); font-size: 16px; }
/* ============================================================ 11 FAQ PAGE ============================================================ */ .faq-container { max-width: 800px; margin: 0 auto; }
.faq-category-title {
  margin-top: 56px; margin-bottom: 24px; font-size: 1.5rem; color: var(--navy);
}
.faq-category-title:first-of-type { margin-top: 0; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 20px 24px; background: none; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--navy); text-align: left; gap: 16px; transition: background 0.2s;
}
.faq-q:hover { background: var(--paper-dim); }
.faq-q .icon {
  flex-shrink: 0; font-size: 20px; color: var(--brand-primary); font-weight: 400; transition: transform 0.3s;
}
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
}
.faq-a p {
  padding: 0 24px 20px; font-size: 14px; color: var(--text-muted); line-height: 1.7;
}
.faq-inline-link {
  color: var(--brand-primary); font-weight: 600; font-size: 0.95rem; margin-top: 12px; display: inline-block;
}
.faq-inline-link:hover { color: var(--brand-primary-hover); }
.faq-cta-box {
  text-align: center; margin-top: 60px; padding: 40px; background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--line);
}
/* ============================================================ 12 MARKET UPDATES PAGE ============================================================ */ .market-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;
}
.market-card {
  background: var(--white); padding: 32px; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.market-card-title {
  font-size: 1.8rem; color: var(--navy); margin-bottom: 24px; border-bottom: 2px solid var(--brand-primary); padding-bottom: 12px;
}
.market-loading { color: var(--text-muted); }
.market-item {
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.market-item:last-child { border-bottom: none; margin-bottom: 0; }
.market-item-date {
  font-size: 0.78rem; color: var(--brand-primary); font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 6px;
}
.market-item-title { margin: 6px 0; font-size: 1rem; line-height: 1.4; }
.market-item-link { color: var(--navy); transition: color 0.2s; }
.market-item-link:hover { color: var(--brand-primary); }
.market-error { color: #F87171; }
/* ============================================================ 13 SECURE UPLOAD PAGE ============================================================ */ .upload-card {
  background: var(--white); padding: 40px; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(15,23,42,0.08);
}
.upload-card .form-group label { text-transform: none; font-size: 14px; font-weight: 600; }
.upload-dropzone {
  border: 2px dashed var(--brand-primary); border-radius: var(--radius-sm);
  padding: 40px 20px; text-align: center; background: var(--brand-primary-glow);
  position: relative; transition: background 0.2s;
}
.upload-dropzone:hover { background: rgba(37,99,235,0.08); }
.upload-file-input {
  opacity: 0; position: absolute; top:0; left:0; width:100%; height:100%; cursor: pointer;
}
.upload-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.upload-cta-text { color: var(--navy); font-weight: 600; margin-top: 12px; }
.upload-count {
  color: var(--text-muted); font-size: 0.85rem; margin-top: 4px;
}
.upload-status {
  text-align: center; margin-top: 16px; font-weight: 600; color: #4ADE80; display: none;
}
/* ============================================================ 14 PROCESS SECTION ============================================================ */ .process {
  background: var(--paper-dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.step { display: flex; flex-direction: column; }
.num {
  font-size: 48px; font-weight: 800; color: var(--brand-primary-glow); line-height: 1; margin-bottom: 16px; display: block;
}
.step h3 { font-size: 17px; margin-bottom: 10px; }
.step p {
  font-size: 14px; color: var(--text-muted); line-height: 1.65;
}
/* ============================================================ 15 CTA BAND ============================================================ */ .cta-band {
  background: var(--navy); padding: 80px 0; text-align: center;
}
.cta-band h2 {
  color: var(--white); font-size: clamp(28px,3.5vw,42px); margin-bottom: 16px;
}
.cta-band p {
  color: rgba(255,255,255,0.7); font-size: 17px; margin-bottom: 36px;
}
/* ============================================================ 16 FOOTER ============================================================ */ footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 32px;
}
.disclaimer-box {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); padding: 16px 20px; font-size: 12px;
  line-height: 1.7; margin-bottom: 48px; color: rgba(255,255,255,0.5);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.footer-logo {
  font-size: 20px; font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 16px;
}
.footer-p {
  max-width: 32ch; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5);
}
footer h4 {
  font-size: 12px; font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px;
}
footer ul { display: flex; flex-direction: column; gap: 8px; }
footer ul li a {
  font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.2s;
}
footer ul li a:hover { color: var(--brand-primary); }
.seo-links-row {
  margin-bottom: 24px; text-align: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px;
}
.seo-links-label {
  color: var(--text-footer-muted); font-weight: 600; margin-right: 8px;
}
.seo-link-item {
  font-size: 12px; color: rgba(255,255,255,0.4); margin: 0 4px;
}
.seo-link-item:hover { color: var(--brand-primary); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 8px;
  flex-direction: column;
  text-align: center;
}
.footer-privacy { cursor: not-allowed; color: rgba(255,255,255,0.3); }
/* ============================================================ 17 FLOATING ELEMENTS ============================================================ */ .phone-float, .whatsapp-float {
  position: fixed; right: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: var(--shadow-md); z-index: 900;
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.whatsapp-float {
  bottom: 80px;  background: #25D366; color: var(--white) !important;
}
.phone-float {
  bottom: 140px; background: linear-gradient(135deg, var(--brand-primary) 0%, #0038A8 100%); color: var(--white) !important;
}
.whatsapp-float:hover, .phone-float:hover { transform: scale(1.12); box-shadow: var(--shadow-lg); }
/* ============================================================ 18 ANIMATIONS ============================================================ */ @keyframes fadeUp { from { opacity:0; transform:translateY(24px); }
to { opacity:1; transform:translateY(0); }

}
.hero-slide.active .slide-text > * { animation: fadeUp 0.5s ease both; }
.hero-slide.active .slide-text > *:nth-child(2) { animation-delay: 0.08s; }
.hero-slide.active .slide-text > *:nth-child(3) { animation-delay: 0.16s; }
.hero-slide.active .slide-text > *:nth-child(4) { animation-delay: 0.24s; }
/* ============================================================ 19 RESPONSIVE ============================================================ */ /* ≤1100: footer compress */ @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.footer-grid > div:first-child { grid-column: span 1; }

}
/* ≤1024: cards 3→2 col */ @media (max-width: 1024px) {
  .why-grid,
  .features-grid,
  .compare-grid,
  .doc-grid,
  .related-grid    { grid-template-columns: repeat(2, 1fr);
}
.info-wrap { grid-template-columns: 1fr; }
.contact-wrapper { grid-template-columns: 1fr; }

}
/* ≤900: hero & calc stack */ @media (max-width: 900px) { .hero-grid    { grid-template-columns: 1fr; }
.slide-media { display: none; }
.calc-wrap { grid-template-columns: 1fr; }
.calc-wrap > div:first-child {
  border-right: none;
  border-bottom: 1px solid var(--line);
  padding: 24px;
}
.calc-result { padding: 24px; }
.input-panels-grid { grid-template-columns: 1fr; }

}
/* ≤860: mobile nav */ @media (max-width: 860px) { .header-actions { display: none; }
.menu-toggle { display: block; }
.nav-links > ul { display: none; }
.nav-links.active > ul {
  display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 16px 24px 24px; box-shadow: var(--shadow-md);
    gap: 0; height: auto; z-index: 999;
}
.dropdown, .mega-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 0 16px;
    margin-top: 4px; display: none; width: 100%; background: transparent;
}
.nav-item.has-submenu > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-item.has-submenu > a::after {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.2s; margin-top: -4px;
}
.nav-item.mobile-open > a::after { transform: rotate(-135deg); margin-top: 4px; }
.nav-item.mobile-open > .mega-menu, .nav-item.mobile-open > .dropdown { display: flex; flex-direction: column; gap: 20px; }
.mega-menu { flex-direction: column; }
.mega-menu .mega-group ul { display: flex; flex-direction: column; }
.mega-menu-who .mega-group:last-child ul { display: flex !important; grid-template-columns: none !important; }
.mobile-sticky-cta { display: flex; }

}
/* ≤640: single column */ @media (max-width: 640px) { section { padding: 64px 0; }
.why-grid, .features-grid, .compare-grid, .doc-grid, .related-grid, .process-grid, .contact-grid-2 { grid-template-columns: 1fr; }
.elig-card { padding: 24px 20px; }
.upload-card { padding: 24px; }

}
/* ≤480: footer single col */ @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; }

}


/* ============================================================
   20  PIE CHART & NEW CALCULATORS
   ============================================================ */

/* Chart wrapper — sits below the calc-wrap shell */
.chart-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 32px 44px;
}
@media (max-width: 900px) {
  .chart-wrap { grid-template-columns: 1fr; padding: 24px; }
}
.chart-canvas-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 260px;
  height: 260px;
  margin: 0 auto;
  position: relative;
}
.chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 260px;
  max-height: 260px;
}

.chart-summary { display: flex; flex-direction: column; gap: 16px; }
.chart-summary-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.chart-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper-dim);
}
.chart-stat-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.chart-stat-value { font-size: 15px; font-weight: 800; color: var(--navy); }
.chart-stat-value.green { color: #10B981; }
.chart-stat-value.blue  { color: var(--brand-primary); }
.chart-stat-value.red   { color: #EF4444; }

/* Mega-menu wider for more items */
.mega-menu { width: min(860px, calc(100vw - 40px)); }

/* Calc-wrap top border radius only (bottom handled by chart-wrap) */
.calc-wrap.has-chart {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* New calc page-specific styles */
.rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--brand-primary-glow);
  color: var(--brand-primary);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(37,99,235,0.2);
  margin-bottom: 16px;
}
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.area-btn {
  padding: 10px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.area-btn:hover, .area-btn.active {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-primary-glow);
}
.area-rate { display: block; font-size: 11px; font-weight: 600; color: var(--brand-accent); margin-top: 2px; }

.verdict-banner {
  padding: 20px 24px;
  border-radius: var(--radius-md);
  margin-top: 20px;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.verdict-banner.good { background: rgba(16,185,129,0.1); color: #065f46; border: 1px solid rgba(16,185,129,0.3); }
.verdict-banner.warn { background: rgba(245,158,11,0.1); color: #92400e; border: 1px solid rgba(245,158,11,0.3); }
.verdict-banner.bad  { background: rgba(239,68,68,0.1);  color: #7f1d1d; border: 1px solid rgba(239,68,68,0.3); }

.regime-toggle {
  display: flex;
  background: var(--paper-dim);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}
.regime-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.regime-btn.active {
  background: var(--brand-primary);
  color: var(--white);
}

.stage-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 4px;
}
.stage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.stage-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }

.currency-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: var(--paper-dim);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.currency-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-glow); }

.dscr-gauge {
  text-align: center;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--paper-dim);
  border: 1px solid var(--line);
  margin-top: 8px;
}
.dscr-number { font-size: 3rem; font-weight: 800; color: var(--navy); line-height: 1; }
.dscr-label  { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

.stamp-breakdown { margin-top: 16px; }
.stamp-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.stamp-row:last-child { border-bottom: none; font-weight: 800; color: var(--navy); font-size: 15px; }
.stamp-row span:last-child { font-weight: 700; color: var(--brand-primary); }
.stamp-row:last-child span:last-child { color: var(--navy); }

.stage-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.emi-unit { font-size: 1rem; font-weight: 600; }


/* ============================================================
   21  RESPONSIVE CALC FIXES & CHART LAYOUT
   ============================================================ */

/* Ensure calc-wrap always stacks on mobile regardless of page */
@media (max-width: 768px) {
  .calc-wrap {
    grid-template-columns: 1fr !important;
    border-radius: var(--radius-lg) !important;
  }
  .calc-wrap.has-chart {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  .calc-wrap > div:first-child {
    padding: 24px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .calc-result {
    padding: 24px !important;
  }
  .calc-wrap-full {
    padding: 24px !important;
  }
  .chart-wrap {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  }
  .area-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stage-input-grid {
    grid-template-columns: 1fr !important;
  }
  .verdict-stats {
    grid-template-columns: 1fr !important;
  }
  .input-panels-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .calc-wrap > div:first-child {
    padding: 20px !important;
  }
  .calc-result {
    padding: 20px !important;
  }
  .chart-wrap {
    padding: 20px !important;
  }
  .area-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .emi-figure {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
  .dscr-number {
    font-size: 2.5rem !important;
  }
}

/* Inner page calc-wrap — product pages with calc embedded */
.calc-section .calc-wrap {
  margin-top: 0;
}

/* LAS page specific — input-row with select shouldn't need border */
.input-row:has(.input-row-select) {
  background: var(--paper-dim);
}



/* ============================================================
   22  BUG FIXES — cta-band, charts, range sliders, responsiveness
   ============================================================ */

/* ── Force cta-band navy regardless of section position ── */
section.cta-band,
.cta-band {
  background: var(--navy) !important;
  padding: 80px 0 !important;
  text-align: center !important;
  border: none !important;
}
section.cta-band h2,
.cta-band h2 {
  color: var(--white) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  margin-bottom: 16px !important;
}
section.cta-band p,
.cta-band p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 17px !important;
  margin-bottom: 36px !important;
}

/* ── Force product-hero background regardless of position ── */
section.product-hero,
.product-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%) !important;
  border: none !important;
}

/* ── Range slider — fix dragging across all browsers ── */
input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: var(--line) !important;
  border-radius: 4px !important;
  outline: none !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
  margin: 8px 0 !important;
  /* Critical for touch/mobile dragging */
  touch-action: none !important;
  -ms-touch-action: none !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}
input[type="range"]::-webkit-slider-container { background: transparent; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px !important;
  background: linear-gradient(to right, var(--brand-primary) var(--range-progress, 0%), var(--line) var(--range-progress, 0%)) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  border: 3px solid var(--brand-primary) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.30) !important;
  cursor: grab !important;
  margin-top: -8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.45) !important;
  cursor: grabbing !important;
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.3) !important;
  cursor: grabbing !important;
}
input[type="range"]::-moz-range-track {
  height: 6px !important;
  background: var(--line) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  border: none !important;
}
input[type="range"]::-moz-range-progress {
  background: var(--brand-primary) !important;
  height: 6px !important;
  border-radius: 4px !important;
}
input[type="range"]::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  border: 3px solid var(--brand-primary) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.28) !important;
  cursor: grab !important;
}
input[type="range"]::-ms-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  border: 3px solid var(--brand-primary) !important;
  cursor: grab !important;
}
input[type="range"]::-ms-track {
  height: 6px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
}
input[type="range"]::-ms-fill-lower {
  background: var(--brand-primary) !important;
  border-radius: 4px !important;
}
input[type="range"]::-ms-fill-upper {
  background: var(--line) !important;
  border-radius: 4px !important;
}

/* Ensure input-row never overlaps the range slider below it */
.input-row { position: relative; z-index: 1; }
.field      { position: relative; isolation: isolate; }

/* Chart wrapper: extra padding reduction on very small screens */
@media (max-width: 480px) {
  .chart-wrap { padding: 20px; }
}

/* ── Calc-section: light frost tint ── */
section.calc-section,
.calc-section {
  background: var(--surface-frost) !important;
  border: none !important;
}

/* ── Hero section always gradient (not affected by section position) ── */
section.hero { background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 50%, #EFF6FF 100%) !important; }

/* ── Advisory section: light gray ── */
section.advisory-section { background: var(--paper-dim) !important; border: none !important; }

/* ── Process section: warm ── */
section.process { background: var(--paper-warm) !important; }

/* ── FAQ section: warm (homepage) ── */
section#faqs, section#faq { background: var(--paper-warm) !important; }

/* ── inner product page sections explicit backgrounds ── */
section#features, section#advantages, section#why      { background: var(--paper) !important; border: none !important; }
section#eligibility, section#how-it-works, section#documents { background: var(--surface-frost) !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }

/* Remove the old section:nth-of-type alternating rule — use explicit classes instead */
/* (it was removed from the main CSS but ensuring nothing re-adds it) */


/* ============================================================
   23  DOC-GRID & ELIGIBILITY LAYOUT FIXES
   ============================================================ */

/* Doc-grid — 2 columns, content doesn't overflow */
.doc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin-top: 24px;
}
@media (max-width: 640px) {
  .doc-grid { grid-template-columns: 1fr !important; }
}
.doc-card {
  min-width: 0 !important; /* prevent overflow */
  word-break: break-word;
}
.doc-card ul li {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* info-wrap — always 2-col on desktop, stack on tablet */
.info-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: flex-start !important;
}
@media (max-width: 900px) {
  .info-wrap { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Chart-wrap — must sit INSIDE calc-section, directly under calc-wrap */
.calc-section .chart-wrap {
  margin-top: 0 !important;
}

/* Ensure calc-wrap + chart-wrap form one visual unit */
.calc-wrap.has-chart {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  border-bottom: none !important;
}
.calc-wrap.has-chart + .chart-wrap {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  border-top: 1px solid var(--line) !important;
}

/* Range slider — never hidden behind other elements */
input[type="range"] {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  z-index: 5 !important;
}


/* ============================================================
   24  NEW CONTENT ELEMENTS
   ============================================================ */

/* Geo-context paragraph — subtle local signal */
.geo-context {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 16px 20px;
  background: var(--paper-dim);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 28px;
  max-width: 72ch;
}

/* Areas Served section on contact page */
.areas-served-section {
  padding: 48px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}
.areas-served-section h3 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  color: var(--navy);
}
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px) {
  .areas-grid { grid-template-columns: 1fr; }
}
.area-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.area-group h4 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-primary);
  margin-bottom: 10px;
}
.area-group p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}


/* ============================================================
   25  WHATSAPP SOFT-CAPTURE BUTTON
   ============================================================ */

.calc-btn-wa {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: var(--radius-sm);
  background: #25D366;
  color: var(--white) !important;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none !important;
  margin-bottom: 10px;
}
.calc-btn-wa:hover {
  background: #128C7E;
  transform: translateY(-1px);
  color: var(--white) !important;
}

/* Lead form box button stack — full width buttons in sidebar */
.lead-form-box .btn {
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.lead-form-box .btn:last-child { margin-bottom: 0 !important; }

/* FAQ container narrow width on new pages */
#faqs .container { max-width: 820px; }


/* ============================================================
   26  WHO ARE YOU — MEGA MENU WITH ICONS
   ============================================================ */

/* Who Are You mega-menu — compact */
.mega-menu-who {
  width: 480px !important;
  grid-template-columns: 1fr 1fr !important;
}
.mega-menu-who .mega-group { padding: 16px; }
.mega-menu-who .mega-group a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
}
.who-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand-primary-glow); color: var(--brand-primary);
  flex-shrink: 0; transition: background 0.15s;
}
.mega-menu-who .mega-group a:hover .who-icon { background: var(--brand-primary); color: white; }
.who-text strong { font-size: 12.5px; font-weight: 600; color: var(--navy); display: block; line-height: 1.2; }
.who-text small  { font-size: 11px; color: var(--text-muted); line-height: 1.3; margin-top: 1px; display: block; }
.mega-menu-who .mega-group a:hover .who-text strong { color: var(--brand-primary); }
@media (max-width: 960px) {
  .mega-menu-who { width: 100% !important; }
}

/* Rich link rows inside Who Are You */
.mega-menu-who .mega-group a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin-left: -12px !important;
  border-radius: var(--radius-sm) !important;
  transition: background 0.18s !important;
}
.mega-menu-who .mega-group a:hover {
  background: var(--brand-primary-glow) !important;
}

/* Icon */
.who-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary-glow);
  border-radius: 8px;
  margin-top: 2px;
  transition: transform 0.2s;
}
.mega-menu-who .mega-group a:hover .who-icon {
  transform: scale(1.15);
}

/* Text stack */
.who-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.who-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  display: block;
}
.who-text small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
  display: block;
  white-space: normal;
}
.mega-menu-who .mega-group a:hover .who-text strong {
  color: var(--brand-primary);
}

/* Quick Check group — same styling as By Profile / By Problem, spans full width */
.mega-menu-who .mega-group:last-child {
  grid-column: 1 / -1;
}
.mega-menu-who .mega-group:last-child ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
@media (max-width: 640px) {
  .mega-menu-who .mega-group:last-child ul {
    grid-template-columns: 1fr;
  }
}

/* Mobile: Who Are You collapses cleanly */
@media (max-width: 860px) {
  .mega-menu-who .mega-group a {
    flex-direction: row !important;
    gap: 10px !important;
  }
  .who-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }
  .who-text strong { font-size: 13px !important; }
  .who-text small  { display: none !important; }
}


/* ============================================================
   27  SOLUTION GRID & START HERE QUIZ
   ============================================================ */

/* ── 9-card solution grid ── */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .solution-grid { grid-template-columns: 1fr; }
}

.solution-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 20px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition:
    transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.solution-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s ease;
}
.solution-card:hover::before { transform: scaleY(1); }
.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -8px rgba(37,99,235,0.15);
  border-color: var(--brand-primary);
}

/* Accent variant — segment cards */
.solution-card-accent {
  background: var(--paper-dim);
}

.solution-icon {
  font-size: 1.8rem;
  color: var(--brand-primary);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.solution-card:hover .solution-icon {
  transform: scale(1.15) rotate(-5deg);
}

.solution-body { flex: 1; min-width: 0; }
.solution-body h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.3;
  transition: color 0.2s;
}
.solution-card:hover .solution-body h3 { color: var(--brand-primary); }
.solution-body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.solution-arrow {
  font-size: 18px;
  color: var(--line);
  flex-shrink: 0;
  align-self: center;
  transition: color 0.2s, transform 0.2s;
}
.solution-card:hover .solution-arrow {
  color: var(--brand-primary);
  transform: translateX(4px);
}

/* ── Start Here Quiz Widget ── */
.start-here-widget {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  margin-top: 16px;
}
@media (max-width: 640px) {
  .start-here-widget { padding: 28px 24px; }
}

.start-here-header { margin-bottom: 32px; }
.start-here-badge {
  display: inline-block;
  background: var(--brand-primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.start-here-header h3 {
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

.quiz-steps { position: relative; min-height: 140px; }

.quiz-step { display: none; }
.quiz-step.active { display: block; }

.quiz-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 540px) {
  .quiz-options { grid-template-columns: 1fr; }
}

.quiz-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.quiz-icon { display: inline-flex; flex-shrink: 0; color: var(--brand-primary); }
.quiz-opt:hover .quiz-icon { color: inherit; }
.quiz-opt:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-glow);
  color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Result step */
.quiz-result { text-align: center; padding: 12px 0; }
.quiz-result-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.quiz-result-link {
  display: inline-block;
  background: var(--brand-primary);
  color: var(--white) !important;
  padding: 16px 36px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.2s;
  margin-bottom: 14px;
}
.quiz-result-link:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
}
.quiz-result-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.quiz-restart {
  background: none;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.quiz-restart:hover { color: var(--navy); }

/* Progress dots */
.quiz-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.quiz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s, transform 0.3s;
}
.quiz-dot.active {
  background: var(--brand-primary);
  transform: scale(1.3);
}


/* ============================================================
   28  PROCESS SECTION UPDATES
   ============================================================ */

/* Trust badge row inside process section */
.process-trust {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.process-trust .trust-badge-row {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Process section lede */
.process .lede {
  max-width: 64ch;
  margin-bottom: 48px;
}

/* Slide 1 H1 line-height for the line-break layout */
.hero-slide .slide-text h1, .hero-slide .slide-text h2 {
  line-height: 1.1;
}

/* ── Market Updates Page ───────────────────────────────────────── */
.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.rate-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.rate-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.rate-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 8px;
}
.rate-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 768px) {
  .market-grid { grid-template-columns: 1fr; }
  .rates-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .rates-grid { grid-template-columns: 1fr; }
}

/* QUICKLENDING-DESIGN-FIX-V2-START */
/* Scheme: AI_REFINED — AI-Recommended: Refined Original (logo match) | design_fix.py */

/* 1. Primary button: gradient + more breathing room */
.btn-primary {
  background: linear-gradient(135deg, #0052E7 0%, #003DB8 100%);
  border-color: #0052E7;
  padding: 13px 26px;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #003DB8 0%, #0052E7 100%);
  box-shadow: 0 8px 20px rgba(0,82,231,0.28);
}
.hero .btn-primary, .cta-band .btn-primary, .btn-primary.btn-lg {
  padding: 15px 32px;
}

/* 2. Ghost button uses accent orange (was under-used) */
.btn-ghost {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}
.btn-ghost:hover {
  background: var(--brand-accent);
  color: #fff !important;
  border-color: var(--brand-accent);
}
/* WhatsApp ghost buttons must stay green, not the generic ghost-orange */
.btn-ghost.btn-wa {
  color: #10B981 !important;
  border-color: #10B981 !important;
}
.btn-ghost.btn-wa:hover {
  background: #10B981;
  color: var(--white) !important;
  border-color: #10B981;
}

/* 3. Process step numbers: .num was using brand-primary-glow (near-invisible rgba) */
.num {
  color: #0052E7 !important;
  opacity: 1 !important;
}

/* 4. Hero: subtle warm note at base */
.hero, section.hero {
  background: linear-gradient(145deg, #EEF2FF 0%, #F8FAFC 45%, #FFF7ED 100%) !important;
}

/* 5. Product/inner page heroes */
.product-hero, section.product-hero, .faq-page-hero, .market-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%) !important;
}

/* 6. CTA band: gradient instead of flat navy */
.cta-band {
  background: linear-gradient(135deg, #0B1D36 0%, #001C4B 100%);
}

/* 7. Floating phone + WA buttons: hide on mobile (sticky bar handles it) */
@media (max-width: 860px) {
  .phone-float, .whatsapp-float { display: none !important; }
}

/* 8. Card shadows: stronger lift */
.card, .loan-card, .why-card, .feature-card,
.calc-card, .related-card, .info-card, .doc-card {
  box-shadow: 0 2px 12px rgba(15,23,42,0.08);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover, .loan-card:hover, .why-card:hover,
.feature-card:hover, .calc-card:hover, .related-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,0.13);
  transform: translateY(-2px);
}

/* 9. Form label spacing: 6px felt tight -> 8px */
.form-group label, .input-group label, .form-label { margin-bottom: 8px; display: block; }

/* 10. Focus-visible ring for keyboard accessibility */
:focus-visible {
  outline: 2px solid #0052E7 !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* 11. Who-icon gap cleanup (icons removed) */
.mega-menu-who .mega-group a { gap: 0 !important; }

/* 12. Process section: warm background */
.process { background: var(--paper-warm, #F8F6F3); }

/* 13. Warm section utility class */
.bg-warm, .section-warm { background: var(--paper-warm, #F8F6F3) !important; }
.section-alt, .bg-surface, .bg-dim { background: #EEF3FA !important; }

/* 14. Mobile vertical breathing room */
@media (max-width: 768px) {
  .process, .advisory-section, .features-section,
  .why-section, .products-section, .calculators-section {
    padding-top: 68px; padding-bottom: 68px;
  }
}

/* QUICKLENDING-DESIGN-FIX-V2-END */

/* QUICKLENDING-EXTRAS-V1-START */
/* design_extras.py | 2026-09-06 */

/* ── 1. Form labels: remove uppercase formality ──────────────────────────────
   Labels were: 12px / weight 800 / uppercase / letter-spacing 0.6px
   Result: looked like legal fine-print headers, not helpful field guides.
   HTML labels are already in natural case ("Mobile number", "Full Name", etc.)
   so removing the CSS transforms simply lets them display as intended.       */
.field > label {
  font-size: 13px !important;         /* 12px → 13px: readable without magnifying */
  font-weight: 600 !important;        /* 800 → 600: still bold enough, less shouting */
  text-transform: none !important;    /* remove uppercase */
  letter-spacing: 0 !important;      /* remove condensed tracking */
  color: var(--navy, #0B1D36) !important;  /* text-muted → navy: more readable */
}

/* Eligibility form (index.html quiz) and contact form labels */
.elig-field label,
.form-group label,
.quiz-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* data-list labels redesigned as bolder headings (see main .data-list .label rule) */

/* ── 2. Page-nav tabs: pill active state ─────────────────────────────────────
   Before: thin 2px border-bottom underline — almost invisible on mobile.
   After:  filled pill background — immediately clear which section is active.
   Floating buttons are already hidden on mobile by design_fix.py, so the
   last tabs are no longer obscured.                                          */
.nav-anchor {
  border-radius: 20px;                  /* rounded so pill can appear */
  border-bottom: 2px solid transparent; /* keep for layout, hidden when inactive */
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.nav-anchor:hover {
  background: rgba(0, 82, 231, 0.07);   /* subtle hover bg */
  color: var(--brand-primary);
  border-bottom-color: transparent;
}
.nav-anchor.active {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
  border-radius: 20px !important;
}

/* On mobile, make nav tabs slightly more compact so more fit on screen */
@media (max-width: 640px) {
  .nav-anchor {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ── 3. Section alternation: homepage #faq gets warm background ───────────────
   The homepage lower half (why → calc → faq → cta) is all pure white, which
   reads as one undifferentiated block on long screens.
   Adding a warm background to #faq breaks the monotony without being heavy.  */
section#faq {
  background: var(--paper-warm, #F8F6F3) !important;
}

/* Subtle cool tint on the "Why Us" solution-cards section */
section#why {
  background: #F4F7FC !important;  /* very light blue — distinct from warm sections */
  border: none !important;
}

/* ── 4a. Calculator result animation — CSS keyframe ─────────────────────────
   When a calculator result updates, the element briefly scales + fades in.
   The class 'result-pop' is added by the MutationObserver in script.js.     */
@keyframes ql-result-pop {
  0%   { opacity: 0.5; transform: scale(0.96); }
  60%  { opacity: 1;   transform: scale(1.02); }
  100% { opacity: 1;   transform: scale(1);    }
}

.result-pop {
  animation: ql-result-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Smooth color transition on value elements */
.val, #emiOut, .result-number, .mono {
  transition: color 0.2s ease;
}

/* QUICKLENDING-EXTRAS-V1-END */

/* ============================================================
   PREMIUM THEME REFINEMENTS
   Applied site-wide (originally scoped to home/home-loan, now
   merged in per request). Design tokens above already updated;
   these are the per-component color/surface/hover refinements.
   ============================================================ */


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
body {
  background: var(--surface) !important;
  color: var(--text) !important;
}

h2, h3, h4,
.advisory-heading {
  color: var(--text-strong) !important;
}

.eyebrow {
  color: var(--brand-accent) !important;
}

/* ------------------------------------------------------------
   3. HERO — frost harmony
   ------------------------------------------------------------ */
.hero,
section.hero,
.product-hero,
section.product-hero {
  background: linear-gradient(
    145deg,
    var(--surface-frost) 0%,
    var(--surface-subtle) 45%,
    var(--surface) 100%
  ) !important;
  border: none !important;
}

.hero-slide .slide-text h1,
.hero-slide .slide-text h2,
.product-hero h1 {
  color: var(--brand-primary) !important;
}

.hero-slide .slide-text h1 em,
.hero-slide .slide-text h2 em {
  color: var(--brand-accent) !important;
}

.hero-slide .slide-text .lede,
.product-hero p,
.product-hero .lede {
  color: var(--text-steel-soft) !important;
}

/* ------------------------------------------------------------
   4. SECTION RHYTHM
   ------------------------------------------------------------ */
.process,
section.process,
#how-it-works {
  background: var(--surface-warm) !important;
  border: none !important;
}

section#why {
  background: var(--surface) !important;
  border: none !important;
}

.advisory-section,
section.advisory-section,
.calc-section,
section.calc-section {
  background: var(--surface-subtle) !important;
  border: none !important;
}

section#faq {
  background: var(--surface-warm) !important;
  border: none !important;
}

/* ------------------------------------------------------------
   5. CALCULATOR — light frost panel
   ------------------------------------------------------------ */
.calc-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-calc) !important;
  overflow: hidden !important;
}

.calc-wrap > div:first-child {
  background: #FAFBFC !important;
  border-right: 1px solid var(--border) !important;
}

.calc-result {
  background: var(--surface-frost) !important;
  color: var(--text-strong) !important;
}

.calc-result .eyebrow {
  color: var(--text-muted) !important;
}

.emi-figure {
  color: var(--brand-primary) !important;
  font-weight: 800 !important;
}

.emi-breakdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.emi-line {
  color: #475569 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.emi-line .val {
  color: var(--text-strong) !important;
  font-weight: 700 !important;
}

.emi-line:last-child {
  background: color-mix(in srgb, var(--brand-primary) 5%, white) !important;
  border-bottom: none !important;
}

.emi-line:last-child .val {
  color: var(--brand-primary) !important;
}

.calc-disclaimer {
  color: #94A3B8 !important;
  border-top: 1px solid var(--border) !important;
}

.chart-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.chart-stat-value.blue { color: var(--brand-primary) !important; }
.chart-stat-value.green { color: var(--brand-accent) !important; }

/* ------------------------------------------------------------
   6. FLYING CARDS + FORMS
   ------------------------------------------------------------ */
.solution-card,
.why-item,
.doc-card,
.data-list li,
.elig-card,
.lead-form-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all var(--duration) var(--ease-spring) !important;
  position: relative !important;
  z-index: 1;
}

.elig-card,
.lead-form-box {
  box-shadow: var(--shadow-form) !important;
}

.solution-card:hover,
.why-item:hover,
.doc-card:hover,
.data-list li:hover {
  transform: translateY(-16px) scale(1.03) !important;
  background: linear-gradient(145deg, #F0F6FF, var(--surface)) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--shadow-card-hover) !important;
  z-index: 10 !important;
}

.solution-card .solution-icon,
.why-item .icon {
  background: color-mix(in srgb, var(--brand-primary) 8%, white) !important;
  color: var(--brand-primary) !important;
  transition: all var(--duration-fast) ease !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
}

.solution-card:hover .solution-icon,
.why-item:hover .icon {
  background: var(--brand-accent) !important;
  color: var(--text-on-brand) !important;
  transform: rotate(-12deg) scale(1.15) !important;
}

.solution-card h3,
.why-item h3,
.doc-card h4 {
  color: var(--text-strong) !important;
}

.solution-card:hover h3,
.why-item:hover h3,
.doc-card:hover h4 {
  color: var(--brand-primary) !important;
}

.solution-card p,
.why-item p {
  color: var(--text-muted) !important;
}

/* ------------------------------------------------------------
   7. CTA — frost blue
   ------------------------------------------------------------ */
.cta-band,
section.cta-band {
  background: var(--surface-frost) !important;
  border: none !important;
  border-top: 1px solid var(--border-frost) !important;
}

.cta-band h2,
section.cta-band h2 {
  color: var(--brand-primary) !important;
}

.cta-band p,
section.cta-band p {
  color: var(--text-steel) !important;
}

.cta-band .btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)) !important;
  color: var(--text-on-brand) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 22%, transparent) !important;
}

.cta-band .btn-ghost {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  background: transparent !important;
}

.cta-band .btn-ghost:hover {
  background: var(--brand-accent) !important;
  color: var(--text-on-brand) !important;
}

.cta-band .btn-wa {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border-color: #10B981 !important;
}

/* ------------------------------------------------------------
   8. FOOTER — white + orange divider
   ------------------------------------------------------------ */
footer {
  background: var(--surface) !important;
  border-top: 2px solid var(--brand-accent) !important;
  color: var(--text-footer) !important;
}

.footer-logo,
footer h4 {
  color: var(--brand-primary) !important;
}

.footer-p,
footer ul li a {
  color: var(--text-footer) !important;
}

footer ul li a:hover {
  color: var(--brand-accent) !important;
}

.disclaimer-box {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border-frost) !important;
  color: var(--text-footer) !important;
}

.disclaimer-para {
  color: var(--text-footer) !important;
}

.footer-bottom,
.seo-links-row {
  border-top-color: var(--border-frost) !important;
  color: var(--text-footer-muted) !important;
}

.footer-privacy a,
.seo-link-item {
  color: var(--text-footer-muted) !important;
}

.footer-privacy a:hover,
.seo-link-item:hover {
  color: var(--brand-accent) !important;
}

.footer-logo-img img {
  filter: none !important;
}

/* ------------------------------------------------------------
   9. BUTTONS
   ------------------------------------------------------------ */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 22%, transparent) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-primary-hover), var(--brand-primary)) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 30%, transparent) !important;
}

.btn-ghost {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

.btn-ghost:hover {
  background: var(--brand-accent) !important;
  color: var(--text-on-brand) !important;
}

/* ============================================================
   SECTION BACKGROUND RHYTHM — final authoritative pass
   Each homepage section gets a distinct, non-repeating background
   so consecutive sections never share an identical color. Uses
   maximum-specificity selectors (element.class#id) so this wins
   over any earlier accumulated rule regardless of source order.
   ============================================================ */
section.hero#top { background: linear-gradient(145deg, var(--surface-frost) 0%, var(--surface-subtle) 45%, var(--surface) 100%) !important; }
section.process#how-it-works { background: var(--surface-warm) !important; border: none !important; }
section#why { background: var(--surface) !important; border: none !important; }
section.advisory-section { background: var(--surface-subtle) !important; border: none !important; }
section.calc-section#calculator { background: var(--surface) !important; border: none !important; }
section#faq { background: var(--surface-warm) !important; border: none !important; }
section.cta-band#contact { background: var(--surface-frost-deep) !important; }

/* Inner product-page sections — same non-repeating principle */
section#features, section#advantages, section#why-inner { background: var(--surface) !important; border: none !important; }
section#eligibility, section#documents { background: var(--surface-frost) !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
section.section-white-border { background: var(--surface-frost) !important; }


/* === Dwell / engagement polish (safe, respects existing !important system) === */
.solution-card {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.2s ease !important;
}
.solution-card:hover {
  transform: translateY(-5px) !important;
}
.quiz-opt {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.quiz-opt:hover {
  transform: translateY(-2px);
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.seo-link-item:hover {
  color: var(--brand-accent) !important;
}


/* === Lead-gen powerhouse polish === */
:root {
  --color-orange-500: #F97316;
  --brand-accent: #F97316;
  --lead-glow: color-mix(in srgb, #F97316 28%, transparent);
}

/* Primary CTA pulse on hero form submit */
.elig-submit,
.btn-primary.elig-submit {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%) !important;
  box-shadow: 0 8px 24px var(--brand-primary-glow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.elig-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 28%, transparent) !important;
}

/* Eligibility card stands out */
.elig-card {
  border: 1px solid var(--border-frost) !important;
  box-shadow: 0 20px 50px -12px rgba(0, 82, 231, 0.18) !important;
  border-radius: var(--radius-lg) !important;
}

/* WhatsApp float more visible */
.whatsapp-float {
  background: #25D366 !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
}
.whatsapp-float:hover {
  transform: scale(1.06);
}

/* Mobile sticky CTA bar */
.mobile-sticky-cta {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.95) !important;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.08);
}
.mobile-sticky-cta .m-call {
  background: var(--brand-primary) !important;
  color: #fff !important;
}
.mobile-sticky-cta .m-wa {
  background: #25D366 !important;
  color: #fff !important;
}

/* Section rhythm for dwell time */
.solution-card h3 {
  font-size: 1.05rem;
}
.start-here-widget {
  margin-top: 48px;
  padding: 28px 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--border-frost);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Trust line under form */
.elig-card .sub {
  color: var(--text-muted);
  font-size: 13px;
}


/* === Smooth section flow (no hard colour cut) === */
section.hero#top {
  background: linear-gradient(165deg, #EEF4FF 0%, #F8FAFC 55%, #F1F5F9 100%) !important;
}
section.process#how-it-works {
  background: linear-gradient(180deg, #F1F5F9 0%, #F8FAFC 35%, #FFF9F5 100%) !important;
  border: none !important;
}
section#why {
  background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 28%, #F8FAFC 100%) !important;
}
/* Trust pills: softer, less “loud blue pill” clash */
.elig-card .trust-badge-icon {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}
.elig-card .trust-badge-icon svg {
  stroke: var(--brand-primary) !important;
}
.elig-card .trust-badge-icon:hover {
  background: var(--surface-frost) !important;
  color: var(--brand-primary) !important;
  border-color: var(--border-frost) !important;
}


/* === Ultra-premium polish: form + trust pills + surfaces === */
:root {
  --color-blue-600: #0B3CC1;
  --color-blue-700: #082A8A;
  --color-orange-500: #E85D04;
  --brand-primary: #0B3CC1;
  --brand-primary-hover: #082A8A;
  --brand-primary-glow: rgba(11, 60, 193, 0.14);
  --brand-accent: #E85D04;
  --surface-frost: #F0F4FF;
  --shadow-premium:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(11, 60, 193, 0.08),
    0 28px 56px -12px rgba(15, 23, 42, 0.10);
}

/* Eligibility card — private-bank desk feel */
.elig-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 60, 193, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-premium) !important;
  padding: 40px 36px !important;
}
.elig-card h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #0F172A !important;
}
.elig-card .sub {
  color: #64748B !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-bottom: 20px;
}
.elig-card input,
.elig-card select {
  border-radius: 12px !important;
  border-color: #E2E8F0 !important;
  background: #FAFBFC !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.elig-card input:focus,
.elig-card select:focus {
  background: #fff !important;
  border-color: #0B3CC1 !important;
  box-shadow: 0 0 0 4px rgba(11, 60, 193, 0.12) !important;
}
.elig-submit {
  border-radius: 12px !important;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  background: linear-gradient(180deg, #1A4FD6 0%, #0B3CC1 100%) !important;
  box-shadow: 0 8px 20px rgba(11, 60, 193, 0.28) !important;
}
.elig-submit:hover {
  background: linear-gradient(180deg, #0B3CC1 0%, #082A8A 100%) !important;
}

/* Trust pills — quiet luxury */
.elig-card .trust-badge-container {
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid #EEF2F7 !important;
}
.elig-card .trust-badge-row {
  gap: 10px !important;
}
.elig-card .trust-badge-icon {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid #E8EDF5 !important;
  color: #1E293B !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.elig-card .trust-badge-icon svg {
  stroke: #0B3CC1 !important;
  width: 14px;
  height: 14px;
}
.elig-card .trust-badge-icon:hover {
  border-color: rgba(11, 60, 193, 0.25) !important;
  background: #F0F4FF !important;
  color: #0B3CC1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(11, 60, 193, 0.1) !important;
}

/* Hero surface — calmer premium wash */
section.hero#top {
  background: linear-gradient(160deg, #F5F7FF 0%, #F8FAFC 40%, #F1F5F9 100%) !important;
}

/* Primary buttons sitewide — slightly richer */
.btn-primary {
  background: linear-gradient(180deg, #1A4FD6 0%, #0B3CC1 100%) !important;
  border-color: #0B3CC1 !important;
  box-shadow: 0 6px 16px rgba(11, 60, 193, 0.22) !important;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #0B3CC1 0%, #082A8A 100%) !important;
}
.btn-ghost {
  border-width: 1.5px !important;
}


/* === UX-best-pass (Option A) === */
header.is-scrolled {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  border-bottom-color: rgba(226, 232, 240, 0.9) !important;
}

/* Larger, easier slider dots */
.hero-dots .dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  padding: 0;
}
.hero-dots .dot:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

/* Clear keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Comfortable tap targets on mobile */
@media (max-width: 860px) {
  .btn, .trust-badge-icon, .mobile-sticky-cta a {
    min-height: 44px;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .elig-card {
    position: static !important;
    margin-top: 8px;
  }
}

/* Form: clearer hierarchy */
.elig-field label {
  font-weight: 600;
  font-size: 13px;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}
.elig-consent {
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748B;
}
.elig-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero-slide.active .slide-text > * { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* Section breathing room */
section.process, section#why, .advisory-section, .calc-section {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Solution cards: clearer clickability */
.solution-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 60, 193, 0.12);
  border-color: rgba(11, 60, 193, 0.2);
}


/* === a11y-cro-pass === */
.field-hint {
  display: block;
  font-size: 11.5px;
  color: #64748B;
  margin-top: 6px;
  line-height: 1.4;
}
.elig-field input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #DC2626;
}
.elig-field input:valid:not(:placeholder-shown) {
  border-color: #86EFAC;
}

/* iOS safe area for sticky CTA */
.mobile-sticky-cta {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 90;
}
body {
  padding-bottom: 0;
}
@media (max-width: 860px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    background: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }
}

/* Ghost button: stronger contrast for WCAG on light bg */
.hero-cta .btn-ghost {
  border-color: #0B3CC1 !important;
  color: #0B3CC1 !important;
  background: #fff !important;
}
.hero-cta .btn-ghost:hover {
  background: #F0F4FF !important;
}

/* Menu toggle min size */
.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}