@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');









:root {




  --primary: #1B3A57;




  --primary-rgb: 27, 58, 87;




  --primary-light: #254D6E;




  --accent: #2EC4A0;




  --accent-rgb: 46, 196, 160;




  --accent-hover: #20A882;




  --text-main: #1B3A57;




  --text-muted: #6B7F94;




  --bg-light: #F8FAFB;




  --bg-white: #FFFFFF;




  --border-color: #EEF2F6;




  




  --score-poor: #FF5B5B;




  --score-fair: #FFB347;




  --score-good: #4FC3F7;




  --score-very-good: #81C784;




  --score-excellent: #2EC4A0;




  




  --shadow-sm: 0 2px 8px rgba(27, 58, 87, 0.04);




  --shadow-md: 0 8px 24px rgba(27, 58, 87, 0.08);




  --shadow-lg: 0 16px 48px rgba(27, 58, 87, 0.12);




  --shadow-accent: 0 8px 30px rgba(46, 196, 160, 0.3);




  




  --radius-sm: 8px;




  --radius-md: 16px;




  --radius-lg: 24px;




  --radius-xl: 32px;




  




  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);




  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);




  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);




}









/* Reset & Base Styles */




* {




  margin: 0;




  padding: 0;




  box-sizing: border-box;




}









html {




  scroll-behavior: smooth;




  font-size: 16px;




  background-color: var(--bg-white);




  color: var(--text-main);




  font-family: 'Inter', sans-serif;




  overflow-x: hidden;




}









body {




  min-height: 100vh;




  display: flex;




  flex-direction: column;




  line-height: 1.6;




  -webkit-font-smoothing: antialiased;




}









h1, h2, h3, h4, h5, h6 {




  font-family: 'Outfit', sans-serif;




  font-weight: 700;




  color: var(--primary);




  line-height: 1.2;




}









a {




  text-decoration: none;




  color: inherit;




  transition: var(--transition-fast);




}









img {




  max-width: 100%;




  height: auto;




  display: block;




}









/* Common Layout Containers */




.container {




  width: 100%;




  max-width: 1280px;




  margin: 0 auto;




  padding: 0 2rem;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .container {




    padding: 0 1.25rem;




  }




}









section {




  padding: 6rem 0;




  position: relative;




  overflow: hidden;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  section {




    padding: 4rem 0;




  }




}









/* Buttons */




.btn {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  padding: 0.875rem 2rem;




  font-size: 0.95rem;




  font-weight: 700;




  border-radius: 50px;




  border: 2px solid transparent;




  cursor: pointer;




  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);




  box-shadow: var(--shadow-sm);




  white-space: nowrap;




}









.btn-primary {




  background-color: var(--accent);




  color: var(--bg-white);




  box-shadow: var(--shadow-accent);




}









.btn-primary:hover {




  background-color: var(--accent-hover);




  transform: translateY(-2px);




  box-shadow: 0 10px 25px rgba(46, 196, 160, 0.4);




}









.btn-outline {




  background-color: transparent;




  border-color: rgba(255, 255, 255, 0.25);




  color: var(--bg-white);




}









.btn-outline:hover {




  background-color: rgba(255, 255, 255, 0.1);




  border-color: var(--bg-white);




  transform: translateY(-2px);




}









/* Glassmorphism */




.glass-card {




  background: rgba(255, 255, 255, 0.08);




  backdrop-filter: blur(16px);




  -webkit-backdrop-filter: blur(16px);




  border: 1px solid rgba(255, 255, 255, 0.15);




  border-radius: var(--radius-lg);




  color: var(--bg-white);




}









.glass-card-light {




  background: rgba(255, 255, 255, 0.75);




  backdrop-filter: blur(20px);




  -webkit-backdrop-filter: blur(20px);




  border: 1px solid rgba(238, 242, 246, 0.8);




  border-radius: var(--radius-lg);




}









/* Decorative Floating Background Elements */




@keyframes drift-y {




  0% { transform: translateY(0px) rotate(0deg); }




  50% { transform: translateY(-15px) rotate(5deg); }




  100% { transform: translateY(0px) rotate(0deg); }




}









@keyframes drift-x {




  0% { transform: translateX(0px) rotate(0deg); }




  50% { transform: translateX(-15px) rotate(-8deg); }




  100% { transform: translateX(0px) rotate(0deg); }




}









.floating-bg-element {




  position: absolute;




  pointer-events: none;




  z-index: 1;




}









.float-star-1 {




  top: 15%;




  left: 5%;




  animation: drift-y 8s ease-in-out infinite;




}









.float-coin-1 {




  top: 25%;




  right: 8%;




  animation: drift-x 9s ease-in-out infinite;




}









.float-shield-1 {




  bottom: 12%;




  left: 8%;




  animation: drift-y 10s ease-in-out infinite;




}









.float-coin-2 {




  top: 12%;




  left: 6%;




  animation: drift-x 11s ease-in-out infinite;




}









.float-card-1 {




  top: 15%;




  left: 3%;




  animation: drift-y 12s ease-in-out infinite;




}









.float-shield-2 {




  bottom: 10%;




  right: 5%;




  animation: drift-x 9s ease-in-out infinite;




}









/* Floating Animations */




@keyframes float {




  0% { transform: translateY(0px); }




  50% { transform: translateY(-10px); }




  100% { transform: translateY(0px); }




}









@keyframes pulse-soft {




  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 196, 160, 0.4); }




  70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(46, 196, 160, 0); }




  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 196, 160, 0); }




}









.floating-element {




  animation: float 6s ease-in-out infinite;




}









/* Header & Navigation */




header {




  position: sticky;




  top: 0;




  z-index: 100;




  height: 90px;




  background-color: rgba(255, 255, 255, 0.95);




  backdrop-filter: blur(10px);




  -webkit-backdrop-filter: blur(10px);




  border-bottom: 1px solid var(--border-color);




  display: flex;




  align-items: center;




  transition: all 0.3s ease;




}









header.scrolled {




  height: 70px;




  box-shadow: var(--shadow-md);




}









header .container {




  display: flex;




  justify-content: space-between;




  align-items: center;




  max-width: 1380px;




  width: 100%;




  padding: 0 2.5rem;




}
























  




  









nav {




  display: flex;




  align-items: center;




  gap: 2rem;




}









nav a {




  font-size: 0.925rem;




  font-weight: 600;




  color: var(--text-muted);




  position: relative;




  padding: 0.25rem 0;




}









nav a::after {




  content: '';




  position: absolute;




  bottom: 0;




  left: 0;




  width: 0;




  height: 2px;




  background-color: var(--accent);




  transition: var(--transition-fast);




}









nav a:hover {




  color: var(--accent);




}









nav a:hover::after, nav a.active::after {




  width: 100%;




}









nav a.active {




  color: var(--accent);




}









.nav-actions {




  display: flex;




  align-items: center;




  gap: 1.5rem;




}









/* Mobile Menu Button */




.menu-btn {




  display: none;




  background: none;




  border: none;




  cursor: pointer;




  position: relative;




  width: 24px;




  height: 18px;




}









.menu-btn span {




  display: block;




  width: 100%;




  height: 2px;




  background-color: var(--primary);




  border-radius: 2px;




  position: absolute;




  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;




}









.menu-btn span:nth-child(1) { top: 0; }




.menu-btn span:nth-child(2) { top: 8px; }




.menu-btn span:nth-child(3) { top: 16px; }









.menu-btn.active span:nth-child(1) {




  transform: rotate(45deg);




  top: 8px;




}




.menu-btn.active span:nth-child(2) {




  opacity: 0;




}




.menu-btn.active span:nth-child(3) {




  transform: rotate(-45deg);




  top: 8px;




}









@media (max-width: 1024px) {




  nav, .nav-actions .btn-download {




    display: none;




  }




  .menu-btn {




    display: block;




  }




}









/* Mobile Sidebar Drawer */




.mobile-drawer {




  position: fixed;




  top: 80px;




  left: 0;




  width: 100%;




  height: calc(100vh - 80px);




  background-color: var(--bg-white);




  z-index: 99;




  transform: translateY(-100%);




  opacity: 0;




  visibility: hidden;




  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);




  padding: 2rem;




  display: flex;




  flex-direction: column;




  gap: 2rem;




  box-shadow: var(--shadow-lg);




  border-top: 1px solid var(--border-color);




}









.mobile-drawer.open {




  transform: translateY(0);




  opacity: 1;




  visibility: visible;




}









.mobile-drawer nav {




  display: flex;




  flex-direction: column;




  align-items: flex-start;




  gap: 1.5rem;




}









.mobile-drawer nav a {




  font-size: 1.2rem;




  width: 100%;




  padding: 0.5rem 0;




  border-bottom: 1px solid var(--border-color);




}









.mobile-drawer .btn {




  width: 100%;




  margin-top: auto;




}









/* Hero Section */




.hero {




  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, #152c42 100%);




  color: var(--bg-white);




  min-height: calc(100vh - 80px);




  display: flex;




  align-items: center;




  padding: 4rem 0;




  position: relative;




}









.hero::after {




  content: '';




  position: absolute;




  top: 0;




  right: 0;




  width: 50%;




  height: 100%;




  background: radial-gradient(circle at 60% 30%, rgba(46, 196, 160, 0.15) 0%, transparent 60%);




  pointer-events: none;




}









.hero-grid {




  display: grid;




  grid-template-columns: 1fr 1.25fr;




  gap: 3rem;




  align-items: center;




}









@media (max-width: 1300px) {




  .hero-grid {




    grid-template-columns: 1fr 1.1fr;




    gap: 2rem;




  }




}









@media (max-width: 1100px) {




  .hero-grid {




    grid-template-columns: 1fr;




    gap: 3rem;




    text-align: center;




  }




  .hero-image-wrapper {




    display: none;




  }




}









.hero-content {




  z-index: 2;




}









.trust-badge {




  display: inline-flex;




  align-items: center;




  gap: 0.5rem;




  background-color: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.25);




  color: var(--accent);




  padding: 0.5rem 1.25rem;




  border-radius: 50px;




  font-size: 0.8rem;




  font-weight: 700;




  text-transform: uppercase;




  letter-spacing: 0.05em;




  margin-bottom: 2rem;




}









.trust-badge span {




  width: 8px;




  height: 8px;




  background-color: var(--accent);




  border-radius: 50%;




  display: inline-block;




  box-shadow: 0 0 8px var(--accent);




}









.hero h1 {




  color: var(--bg-white);




  font-size: 3.5rem;




  font-weight: 900;




  line-height: 1.15;




  margin-bottom: 1.5rem;




  letter-spacing: -0.02em;




}









.hero h1 span {




  color: var(--accent);




  position: relative;




}









.hero p {




  font-size: 1.125rem;




  color: rgba(255, 255, 255, 0.75);




  max-width: 580px;




  margin-bottom: 2.5rem;




  line-height: 1.7;




}









@media (max-width: 1024px) {




  .hero p {




    margin-left: auto;




    margin-right: auto;




  }




}









.hero-actions {




  display: flex;




  gap: 1rem;




  margin-bottom: 3.5rem;




}









@media (max-width: 1024px) {




  .hero-actions {




    justify-content: center;




  }




}









@media (max-width: 576px) {




  .hero-actions {




    flex-direction: column;




    align-items: stretch;




  }




}









.hero-stats {




  display: grid;




  grid-template-cols: repeat(3, 1fr);




  gap: 2rem;




  border-top: 1px solid rgba(255, 255, 255, 0.1);




  padding-top: 2rem;




}









.stat-item h3 {




  color: var(--accent);




  font-size: 2rem;




  font-weight: 800;




}









.stat-item p {




  font-size: 0.85rem;




  color: rgba(255, 255, 255, 0.55);




  margin-bottom: 0;




  margin-top: 0.25rem;




  line-height: 1.4;




}









.hero-visual {




  display: flex;




  flex-direction: row;




  align-items: center;




  justify-content: flex-end;




  gap: 3.5rem;




  z-index: 2;




  width: 100%;




}









/* =============================================




   HERO BOUNCING IMAGE




   ============================================= */









@keyframes hero-bounce {




  0%   { transform: translateY(0px) rotate(-1deg); }




  25%  { transform: translateY(-14px) rotate(0deg); }




  50%  { transform: translateY(-8px) rotate(1deg); }




  75%  { transform: translateY(-18px) rotate(0deg); }




  100% { transform: translateY(0px) rotate(-1deg); }




}









@keyframes glow-pulse {




  0%   { opacity: 0.4; transform: scale(1); }




  50%  { opacity: 0.75; transform: scale(1.08); }




  100% { opacity: 0.4; transform: scale(1); }




}









.hero-image-wrapper {




  position: relative;




  display: flex;




  align-items: center;




  justify-content: center;




  z-index: 2;




  flex-shrink: 0;




}









.hero-image-glow-ring {




  position: absolute;




  width: 260px;




  height: 260px;




  border-radius: 50%;




  background: radial-gradient(circle, rgba(46, 196, 160, 0.25) 0%, transparent 70%);




  animation: glow-pulse 4s ease-in-out infinite;




  pointer-events: none;




  z-index: 1;




}









.hero-floating-image {




  width: 220px;




  height: 290px;




  object-fit: cover;




  object-position: top center;




  border-radius: 24px;




  box-shadow:




    0 30px 60px rgba(0, 0, 0, 0.4),




    0 0 0 1px rgba(255, 255, 255, 0.08),




    0 0 40px rgba(46, 196, 160, 0.2);




  animation: hero-bounce 6s ease-in-out infinite;




  position: relative;




  z-index: 2;




  display: block;




}









/* Floating badge overlays on image */




.hero-img-badge {




  position: absolute;




  display: flex;




  align-items: center;




  gap: 0.4rem;




  padding: 0.5rem 0.875rem;




  border-radius: 50px;




  font-size: 0.775rem;




  font-weight: 800;




  z-index: 5;




  white-space: nowrap;




  backdrop-filter: blur(12px);




  -webkit-backdrop-filter: blur(12px);




}









.score-badge-overlay {




  bottom: 24px;




  left: -20px;




  background: rgba(27, 58, 87, 0.92);




  border: 1px solid rgba(46, 196, 160, 0.3);




  color: #ffffff;




  flex-direction: column;




  align-items: flex-start;




  gap: 0.1rem;




  animation: float 5s ease-in-out infinite;




}









.badge-score-num {




  font-family: 'Outfit', sans-serif;




  font-size: 1.4rem;




  font-weight: 900;




  color: var(--accent);




  line-height: 1;




}









.badge-score-lbl {




  font-size: 0.65rem;




  color: rgba(255, 255, 255, 0.6);




  text-transform: uppercase;




  letter-spacing: 0.06em;




}









.verified-badge-overlay {




  top: -20px;




  left: -30px;




  background: rgba(255, 255, 255, 0.15);




  border: 1px solid rgba(255, 255, 255, 0.2);




  color: #ffffff;




  animation: float 7s ease-in-out infinite reverse;




}









.verified-badge-overlay span:first-child {




  font-size: 1rem;




}









/* Tabbed Widget System in Hero */




.hero-widget-tabs-container {




  width: 100%;




  max-width: 420px;




  padding: 1.5rem;




  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);




  position: relative;




  overflow: hidden;




  display: flex;




  flex-direction: column;




}









.widget-tabs-header {




  display: flex;




  gap: 0.25rem;




  border-bottom: 1px solid rgba(255, 255, 255, 0.1);




  padding-bottom: 0.75rem;




  margin-bottom: 1.5rem;




}









.widget-tab-btn {




  flex: 1;




  background: none;




  border: none;




  color: rgba(255, 255, 255, 0.5);




  font-size: 0.85rem;




  font-weight: 700;




  padding: 0.5rem 0;




  cursor: pointer;




  transition: all var(--transition-fast);




  border-bottom: 2px solid transparent;




  text-align: center;




}









.widget-tab-btn:hover {




  color: rgba(255, 255, 255, 0.8);




}









.widget-tab-btn.active {




  color: var(--accent);




  border-bottom-color: var(--accent);




  text-shadow: 0 0 10px rgba(46, 196, 160, 0.2);




}









.widget-tabs-content {




  position: relative;




  min-height: 310px;




}









.widget-content {




  display: none;




}









.widget-content.active {




  display: block;




}









/* User Profile Carousel Widget */




.user-profiles-slider {




  position: relative;




  min-height: 250px;




}









.user-profile-slide {




  position: absolute;




  top: 0;




  left: 0;




  width: 100%;




  opacity: 0;




  visibility: hidden;




  transform: translateY(10px) scale(0.98);




  transition: all 0.4s ease-in-out;




}









.user-profile-slide.active {




  opacity: 1;




  visibility: visible;




  transform: translateY(0) scale(1);




  position: relative;




}









.profile-card-top {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1.25rem;




}









.profile-info-block {




  display: flex;




  align-items: center;




  gap: 0.875rem;




}









.profile-avatar-wrapper {




  width: 48px;




  height: 48px;




  border-radius: 50%;




  overflow: hidden;




  border: 2px solid rgba(255, 255, 255, 0.2);




}









.avatar-svg {




  width: 100%;




  height: 100%;




}









.profile-meta h4 {




  font-size: 0.95rem;




  color: #ffffff;




  font-weight: 700;




  margin-bottom: 0.15rem;




}









.profile-meta p {




  font-size: 0.75rem;




  color: rgba(255, 255, 255, 0.55);




}









.profile-score-badge {




  text-align: right;




  background: rgba(255, 255, 255, 0.08);




  padding: 0.35rem 0.75rem;




  border-radius: 12px;




  border: 1px solid rgba(255, 255, 255, 0.1);




}









.profile-score-num {




  font-family: 'Outfit', sans-serif;




  font-size: 1.25rem;




  font-weight: 850;




  color: #ffffff;




}









.profile-score-label {




  font-size: 0.6rem;




  text-transform: uppercase;




  font-weight: 800;




  color: var(--accent);




  letter-spacing: 0.05em;




}









.profile-quote {




  font-size: 0.825rem;




  color: rgba(255, 255, 255, 0.8);




  line-height: 1.6;




  font-style: italic;




  margin-bottom: 1.5rem;




  min-height: 60px;




}









.score-trend-graphic {




  background: rgba(255, 255, 255, 0.04);




  padding: 0.75rem 1rem;




  border-radius: 12px;




  display: flex;




  justify-content: space-between;




  align-items: center;




  border: 1px solid rgba(255, 255, 255, 0.06);




}









.trend-label {




  font-size: 0.65rem;




  color: rgba(255, 255, 255, 0.4);




  text-transform: uppercase;




  letter-spacing: 0.05em;




  font-weight: 700;




}









.trend-chart-svg {




  width: 110px;




  height: 28px;




  overflow: visible;




}









.widget-carousel-controls {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-top: 1.25rem;




  padding-top: 1rem;




  border-top: 1px solid rgba(255, 255, 255, 0.08);




}









.widget-ctrl-btn {




  background: none;




  border: 1px solid rgba(255, 255, 255, 0.15);




  width: 32px;




  height: 32px;




  border-radius: 50%;




  color: #ffffff;




  cursor: pointer;




  display: grid;




  place-items: center;




  font-size: 0.8rem;




  transition: all var(--transition-fast);




}









.widget-ctrl-btn:hover {




  background-color: var(--accent);




  border-color: var(--accent);




}









.widget-indicators {




  display: flex;




  gap: 0.4rem;




}









.widget-ind-dot {




  width: 5px;




  height: 5px;




  border-radius: 50%;




  background-color: rgba(255, 255, 255, 0.25);




  cursor: pointer;




  transition: all var(--transition-fast);




}









.widget-ind-dot.active {




  background-color: var(--accent);




  transform: scale(1.3);




}









/* Estimator Widget Inside Tab */




.score-widget-header {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1.25rem;




}









.score-widget-title {




  font-size: 0.75rem;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.1em;




  color: rgba(255, 255, 255, 0.4);




}









.gauge-wrapper {




  position: relative;




  width: 170px;




  height: 170px;




  margin: 0.5rem auto 1.5rem;




}









.gauge-svg {




  transform: rotate(-90deg);




  width: 100%;




  height: 100%;




}









.gauge-track {




  stroke: rgba(255, 255, 255, 0.08);




}









.gauge-fill {




  stroke-dasharray: 565.48;




  stroke-dashoffset: 565.48;




  transition: stroke-dashoffset 0.6s cubic-bezier(0.1, 0.8, 0.25, 1), stroke 0.6s ease;




}









.gauge-center {




  position: absolute;




  top: 0;




  left: 0;




  width: 100%;




  height: 100%;




  display: flex;




  flex-direction: column;




  justify-content: center;




  align-items: center;




  text-align: center;




}









.score-display-number {




  font-family: 'Outfit', sans-serif;




  font-size: 2.8rem;




  font-weight: 900;




  color: var(--bg-white);




  line-height: 1;




}









.score-display-label {




  font-size: 0.75rem;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.1em;




  margin-top: 0.15rem;




  transition: color 0.3s ease;




}









.score-controller {




  margin-top: 1rem;




}









.slider-label {




  display: flex;




  justify-content: space-between;




  font-size: 0.725rem;




  font-weight: 700;




  color: rgba(255, 255, 255, 0.5);




  margin-bottom: 0.4rem;




}









.range-slider-input {




  -webkit-appearance: none;




  appearance: none;




  width: 100%;




  height: 5px;




  border-radius: 5px;




  background: rgba(255, 255, 255, 0.15);




  outline: none;




  transition: background 0.3s;




}









.range-slider-input::-webkit-slider-thumb {




  -webkit-appearance: none;




  appearance: none;




  width: 18px;




  height: 18px;




  border-radius: 50%;




  background: var(--accent);




  cursor: pointer;




  box-shadow: 0 0 10px rgba(46, 196, 160, 0.8);




}









.range-slider-input::-moz-range-thumb {




  width: 18px;




  height: 18px;




  border-radius: 50%;




  background: var(--accent);




  cursor: pointer;




  box-shadow: 0 0 10px rgba(46, 196, 160, 0.8);




}









.score-tips-box {




  margin-top: 1rem;




  padding: 0.75rem;




  background-color: rgba(255, 255, 255, 0.04);




  border-radius: var(--radius-sm);




  border-left: 3px solid var(--accent);




  font-size: 0.775rem;




  color: rgba(255, 255, 255, 0.8);




  line-height: 1.4;




  min-height: 52px;




}









/* Trust Ticker Banner */




.trust-ticker {




  background-color: var(--bg-light);




  border-bottom: 1px solid var(--border-color);




  padding: 1.5rem 0;




}









.ticker-wrapper {




  display: flex;




  justify-content: space-around;




  align-items: center;




  flex-wrap: wrap;




  gap: 1.5rem;




}









.ticker-item {




  display: flex;




  align-items: center;




  gap: 0.75rem;




  font-size: 0.9rem;




  font-weight: 700;




  color: var(--primary);




}









.ticker-icon {




  width: 24px;




  height: 24px;




  background-color: rgba(46, 196, 160, 0.15);




  color: var(--accent);




  border-radius: 50%;




  display: grid;




  place-items: center;




  font-size: 0.75rem;




  font-weight: 900;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .ticker-wrapper {




    display: grid;




    grid-template-cols: 1fr 1fr;




    gap: 1rem 2rem;




  }




}









/* Savings Calculator Section */




.calculator {




  background-color: var(--bg-white);




}









.section-header {




  text-align: center;




  max-width: 680px;




  margin: 0 auto 4rem;




}









.section-header p.subtitle {




  color: var(--accent);




  font-size: 0.85rem;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.15em;




  margin-bottom: 0.75rem;




}









.section-header h2 {




  font-size: 2.5rem;




  margin-bottom: 1rem;




}









.section-header p.desc {




  color: var(--text-muted);




  font-size: 1.1rem;




}









.calc-grid {




  display: grid;




  grid-template-cols: 1.1fr 0.9fr;




  gap: 4rem;




  align-items: flex-start;




}









@media (max-width: 992px) {




  .calc-grid {




    grid-template-cols: 1fr;




    gap: 3rem;




  }




}









.calc-left {




  background: var(--bg-light);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  padding: 2.5rem;




}









.loan-tabs {




  display: flex;




  gap: 0.75rem;




  margin-bottom: 2.5rem;




  overflow-x: auto;




  padding-bottom: 0.5rem;




}









.loan-tab-btn {




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  padding: 0.75rem 1.5rem;




  border-radius: var(--radius-sm);




  font-size: 0.9rem;




  font-weight: 700;




  color: var(--text-muted);




  cursor: pointer;




  transition: all var(--transition-fast);




  display: flex;




  align-items: center;




  gap: 0.5rem;




  white-space: nowrap;




}









.loan-tab-btn:hover {




  border-color: var(--accent);




  color: var(--primary);




}









.loan-tab-btn.active {




  background-color: var(--accent);




  border-color: var(--accent);




  color: var(--bg-white);




  box-shadow: 0 4px 12px rgba(46, 196, 160, 0.25);




}









.slider-group {




  margin-bottom: 2.5rem;




}









.slider-header {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1rem;




}









.slider-title {




  font-weight: 700;




  color: var(--primary);




}









.slider-value-badge {




  background-color: rgba(27, 58, 87, 0.05);




  padding: 0.35rem 0.85rem;




  border-radius: 6px;




  font-weight: 800;




  color: var(--primary);




  font-size: 1.1rem;




}









.calc-slider {




  -webkit-appearance: none;




  appearance: none;




  width: 100%;




  height: 6px;




  border-radius: 5px;




  background: #E2E6E9;




  outline: none;




}









.calc-slider::-webkit-slider-thumb {




  -webkit-appearance: none;




  appearance: none;




  width: 22px;




  height: 22px;




  border-radius: 50%;




  background: var(--primary);




  cursor: pointer;




  border: 2px solid var(--bg-white);




  box-shadow: var(--shadow-sm);




  transition: transform var(--transition-fast);




}









.calc-slider::-webkit-slider-thumb:hover {




  transform: scale(1.15);




  background: var(--accent);




}









.savings-highlight-banner {




  background-color: #E6FAF5;




  border: 1px solid rgba(46, 196, 160, 0.2);




  border-radius: var(--radius-md);




  padding: 1.25rem;




  text-align: center;




  color: var(--accent-hover);




  font-size: 1.15rem;




  font-weight: 800;




  margin-top: 1rem;




}









/* Interactive Interest Visualizer (Dashboard style) */




.calculator-viz-card {




  padding: 2rem;




  border-radius: var(--radius-lg);




  border: 1px solid var(--border-color);




  color: var(--text-main);




  box-shadow: var(--shadow-md);




  background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%);




}









.viz-card-title {




  font-size: 1.05rem;




  color: var(--primary);




  margin-bottom: 1.75rem;




  border-bottom: 1px solid var(--border-color);




  padding-bottom: 0.75rem;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.03em;




}









.viz-item {




  margin-bottom: 1.75rem;




}









.viz-label-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 0.5rem;




}









.viz-score-tag {




  font-size: 0.75rem;




  font-weight: 800;




  padding: 0.25rem 0.6rem;




  border-radius: 6px;




  text-transform: uppercase;




  letter-spacing: 0.02em;




}









.viz-score-tag.bad {




  background-color: #FDEDE1;




  color: #DB5F0D;




  border: 1px solid rgba(219, 95, 13, 0.15);




}









.viz-score-tag.good {




  background-color: #DCF8E5;




  color: #08772D;




  border: 1px solid rgba(8, 119, 45, 0.15);




}









.viz-val-highlight {




  font-family: 'Outfit', sans-serif;




  font-size: 1.25rem;




  font-weight: 900;




}









.viz-val-highlight.bad { color: var(--score-poor); }




.viz-val-highlight.good { color: var(--score-excellent); }









.viz-bar-track {




  height: 10px;




  background-color: #E2E6E9;




  border-radius: 6px;




  overflow: hidden;




  margin-bottom: 0.4rem;




}









.viz-bar-fill {




  height: 100%;




  border-radius: 6px;




  transition: width 0.5s cubic-bezier(0.1, 0.8, 0.25, 1);




  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);




}









.viz-bar-fill.bad {




  background: linear-gradient(90deg, #FF5B5B 0%, #E04848 100%);




}









.viz-bar-fill.good {




  background: linear-gradient(90deg, #2EC4A0 0%, #1db38f 100%);




}









.viz-meta-row {




  font-size: 0.75rem;




  color: var(--text-muted);




}









.viz-meta-row strong {




  color: var(--primary);




}









.viz-summary-footer {




  display: flex;




  gap: 0.6rem;




  align-items: flex-start;




  background-color: rgba(27, 58, 87, 0.03);




  padding: 0.85rem;




  border-radius: var(--radius-sm);




  margin-top: 1rem;




  border: 1px dashed rgba(27, 58, 87, 0.15);




}









.footer-alert-icon {




  font-size: 0.9rem;




}









.viz-summary-footer p {




  font-size: 0.775rem;




  color: var(--text-muted);




  line-height: 1.45;




  margin: 0;




}









/* Download App Section */




.download-section {




  background-color: var(--primary);




  color: var(--bg-white);




  padding: 4.5rem 0;




  border-bottom: 1px solid rgba(255, 255, 255, 0.1);




  position: relative;




  z-index: 10;




}









.download-grid {




  display: flex;




  justify-content: space-between;




  align-items: center;




  gap: 2rem;




  flex-wrap: wrap;




}









.download-text {




  max-width: 600px;




}









.download-text h2 {




  color: var(--bg-white);




  font-size: 2rem;




  margin-bottom: 0.5rem;




}









.download-text p {




  color: rgba(255, 255, 255, 0.65);




  font-size: 0.95rem;




}









.download-badges {




  display: flex;




  gap: 1rem;




}









.badge-link {




  display: block;




  height: 52px;




  width: 165px;




  transition: transform var(--transition-fast);




}









.badge-link img {




  height: 100%;




  width: 100%;




  object-fit: contain;




}









.badge-link:hover {




  transform: translateY(-2px);




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .download-grid {




    flex-direction: column;




    text-align: center;




    justify-content: center;




  }




  .download-badges {




    flex-direction: column;




    align-items: center;




  }




}









/* Credit Education Section */




.edu-section {




  background-color: var(--bg-light);




  border-top: 1px solid var(--border-color);




  border-bottom: 1px solid var(--border-color);




}









.edu-grid {




  display: grid;




  grid-template-cols: 0.9fr 1.1fr;




  gap: 4rem;




}









@media (max-width: 992px) {




  .edu-grid {




    grid-template-cols: 1fr;




    gap: 3rem;




  }




}









/* Interactive Score Range Carousel (Premium Dark Theme) */




.range-carousel-container {




  background: linear-gradient(135deg, #1B3A57 0%, #12283D 100%);




  border: 1px solid rgba(255, 255, 255, 0.12);




  border-radius: var(--radius-lg);




  padding: 2.5rem;




  box-shadow: var(--shadow-lg);




  display: flex;




  flex-direction: column;




  min-height: 420px;




  color: var(--bg-white);




  position: relative;




}









.carousel-title {




  font-size: 1.45rem;




  margin-bottom: 2rem;




  border-bottom: 1px solid rgba(255, 255, 255, 0.1);




  padding-bottom: 0.75rem;




  color: var(--bg-white);




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.03em;




}









.range-carousel {




  position: relative;




  flex-grow: 1;




  min-height: 240px;




}









.range-slide {




  position: absolute;




  top: 0;




  left: 0;




  width: 100%;




  opacity: 0;




  visibility: hidden;




  transform: scale(0.96);




  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);




}









.range-slide.active {




  opacity: 1;




  visibility: visible;




  transform: scale(1);




  position: relative;




}









.range-slide-visual-arc {




  float: right;




  width: 48px;




  height: 48px;




  display: flex;




  align-items: center;




  justify-content: center;




}









.mini-arc-svg {




  width: 100%;




  height: 100%;




  transform: rotate(-90deg);




}









.range-slide-header {




  display: flex;




  flex-direction: column;




  align-items: flex-start;




  gap: 0.25rem;




  margin-bottom: 1.25rem;




}









.range-slide-title {




  font-family: 'Outfit', sans-serif;




  font-size: 1.35rem;




  font-weight: 800;




  color: #ffffff;




}









.range-slide-val {




  font-family: 'Outfit', sans-serif;




  font-size: 1.15rem;




  font-weight: 800;




}









.range-poor-color { color: var(--score-poor); }




.range-fair-color { color: var(--score-fair); }




.range-good-color { color: var(--score-good); }




.range-vgood-color { color: var(--score-very-good); }




.range-excellent-color { color: var(--score-excellent); }









.range-slide-desc {




  font-size: 0.875rem;




  color: rgba(255, 255, 255, 0.7);




  line-height: 1.6;




  margin-bottom: 1.5rem;




}









.range-slide-stat {




  display: flex;




  justify-content: space-between;




  align-items: center;




  background-color: rgba(255, 255, 255, 0.04);




  padding: 0.85rem 1.25rem;




  border-radius: var(--radius-sm);




  font-size: 0.825rem;




  font-weight: 700;




  margin-bottom: 1.5rem;




  border: 1px solid rgba(255, 255, 255, 0.08);




}









.stat-highlight {




  font-family: 'Outfit', sans-serif;




  font-size: 1.15rem;




  font-weight: 900;




}









.range-slide-advice {




  background-color: rgba(255, 255, 255, 0.02);




  border-left: 4px solid var(--accent);




  padding: 0.85rem 1.25rem;




  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;




  font-size: 0.8rem;




  line-height: 1.5;




  color: rgba(255, 255, 255, 0.9);




}









.range-slide[data-index="0"] .range-slide-advice { border-left-color: var(--score-poor); }




.range-slide[data-index="1"] .range-slide-advice { border-left-color: var(--score-fair); }




.range-slide[data-index="2"] .range-slide-advice { border-left-color: var(--score-good); }




.range-slide[data-index="3"] .range-slide-advice { border-left-color: var(--score-very-good); }




.range-slide[data-index="4"] .range-slide-advice { border-left-color: var(--score-excellent); }









.range-carousel-controls {




  display: flex;




  align-items: center;




  justify-content: space-between;




  margin-top: 1.5rem;




  padding-top: 1.25rem;




  border-top: 1px solid rgba(255, 255, 255, 0.1);




}









.range-ctrl-btn {




  background: none;




  border: 1px solid rgba(255, 255, 255, 0.2);




  width: 38px;




  height: 38px;




  border-radius: 50%;




  cursor: pointer;




  display: grid;




  place-items: center;




  color: #ffffff;




  font-size: 0.9rem;




  font-weight: 700;




  transition: all var(--transition-fast);




}









.range-ctrl-btn:hover {




  background-color: var(--accent);




  border-color: var(--accent);




  color: var(--bg-white);




}









.range-indicators {




  display: flex;




  gap: 0.5rem;




}









.range-ind-dot {




  width: 6px;




  height: 6px;




  border-radius: 50%;




  background-color: rgba(255, 255, 255, 0.2);




  cursor: pointer;




  transition: all var(--transition-fast);




}









.range-ind-dot.active {




  background-color: var(--accent);




  transform: scale(1.3);




}









.edu-factors-stack {




  display: flex;




  flex-direction: column;




  gap: 1.25rem;




  width: 100%;




}









.factor-bar-card {




  display: flex;




  align-items: center;




  justify-content: space-between;




  gap: 2rem;




  background-color: var(--bg-white);




  border: 1.5px solid transparent;




  border-radius: var(--radius-md);




  padding: 1.5rem 2rem;




  position: relative;




  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);




  box-shadow: 0 4px 12px rgba(27, 58, 87, 0.03);




}









.factor-bar-card:hover {




  transform: translateY(-2px);




  box-shadow: var(--shadow-md);




}









/* Individual card styling with background and borders */




.payment-history-bar {




  border-color: #F3E4C0;




  background: linear-gradient(135deg, #FFFDF6 0%, #FFFFFF 100%);




}




.payment-history-bar:hover {




  border-color: #C49A3C;




}









.credit-util-bar {




  border-color: #C8F0E6;




  background: linear-gradient(135deg, #F4FAF8 0%, #FFFFFF 100%);




}




.credit-util-bar:hover {




  border-color: #2EC4A0;




}









.credit-age-bar {




  border-color: #E2E7EC;




  background: linear-gradient(135deg, #F6F8F9 0%, #FFFFFF 100%);




}




.credit-age-bar:hover {




  border-color: #99AAB5;




}









.mix-bar {




  border-color: #F0E1D5;




  background: linear-gradient(135deg, #FAF7F4 0%, #FFFFFF 100%);




}




.mix-bar:hover {




  border-color: #CD7F32;




}









/* Floating top-right corner badge */




.factor-floating-badge {




  position: absolute;




  top: -10px;




  right: 2.25rem;




  width: 26px;




  height: 26px;




  border-radius: 50%;




  display: grid;




  place-items: center;




  color: #ffffff;




  font-size: 0.75rem;




  border: 2px solid #ffffff;




  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);




  z-index: 5;




}









.gold-badge { background: #C49A3C; }




.teal-badge { background: #2EC4A0; }




.silver-badge { background: #7D8E9B; }




.bronze-badge { background: #9C5D24; }









/* Icon wrapper */




.factor-bar-icon {




  flex-shrink: 0;




  width: 70px;




  height: 70px;




  display: flex;




  align-items: center;




  justify-content: center;




}









/* Text details column */




.factor-bar-info {




  flex-grow: 1;




  padding-right: 1.5rem;




}









.factor-bar-info h3 {




  font-family: 'Outfit', sans-serif;




  font-size: 1.25rem;




  font-weight: 850;




  color: var(--primary);




  margin-bottom: 0.25rem;




}









.factor-bar-info p {




  font-size: 0.85rem;




  color: var(--text-muted);




  line-height: 1.5;




  margin: 0;




}









/* Gauge area on right */




.factor-bar-gauge-wrapper {




  display: flex;




  align-items: center;




  gap: 1.25rem;




  flex-shrink: 0;




}









.factor-bar-percent {




  font-family: 'Outfit', sans-serif;




  font-size: 2.2rem;




  font-weight: 900;




  line-height: 1;




  letter-spacing: -0.02em;




}









.gold-text { color: #C49A3C; }




.teal-text { color: #2EC4A0; }




.silver-text { color: #7D8E9B; }




.mix-text { color: #CD7F32; }









.factor-bar-liquid-ring {




  position: relative;




  width: 48px;




  height: 48px;




  flex-shrink: 0;




}









.liquid-gauge-svg {




  width: 100%;




  height: 100%;




}









.liquid-center-dot {




  position: absolute;




  top: 50%;




  left: 50%;




  transform: translate(-50%, -50%);




  width: 12px;




  height: 12px;




  border-radius: 50%;




}









.gold-bg { background-color: #C49A3C; }




.teal-bg { background-color: #2EC4A0; }




.silver-bg { background-color: #7D8E9B; }




.mix-bg { background-color: #CD7F32; }









/* Responsive adjustments */




@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .factor-bar-card {




    flex-direction: column;




    align-items: flex-start;




    gap: 1.25rem;




    padding: 1.5rem;




  }




  




  .factor-bar-info {




    padding-right: 0;




  }









  .factor-bar-gauge-wrapper {




    width: 100%;




    justify-content: space-between;




    border-top: 1px solid var(--border-color);




    padding-top: 1rem;




    margin-top: 0.5rem;




  }









  .factor-floating-badge {




    right: 1.5rem;




  }




}














/* Benefits Section & Smartphone Mock-up Layout */




.benefits-layout-grid {




  display: grid;




  grid-template-columns: 0.95fr 1.05fr;




  gap: 4rem;




  align-items: center;




  margin-bottom: 1.5rem;




}









@media (max-width: 992px) {




  .benefits-layout-grid {




    grid-template-columns: 1fr;




    gap: 3.5rem;




  }




}









.benefits-image-wrapper {




  display: flex;




  justify-content: center;




  align-items: center;




}









.benefits-image-card {




  position: relative;




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  padding: 1rem;




  box-shadow: var(--shadow-lg);




  animation: float 6s ease-in-out infinite reverse;




  max-width: 520px;




  width: 100%;




}









.benefits-dial-image {




  width: 100%;




  height: auto;




  border-radius: var(--radius-md);




  display: block;




}









.dial-card-overlay {




  position: absolute;




  bottom: 2rem;




  left: 2rem;




  right: 2rem;




  background: rgba(27, 58, 87, 0.95);




  backdrop-filter: blur(8px);




  -webkit-backdrop-filter: blur(8px);




  border: 1px solid rgba(255, 255, 255, 0.1);




  padding: 1.15rem;




  border-radius: var(--radius-md);




  color: #ffffff;




}









.dial-pill {




  display: inline-block;




  font-size: 0.7rem;




  font-weight: 800;




  text-transform: uppercase;




  padding: 0.35rem 0.75rem;




  border-radius: 4px;




  margin-bottom: 0.5rem;




  background: var(--accent);




}









.dial-tip-text {




  font-size: 0.775rem;




  line-height: 1.4;




  color: rgba(255, 255, 255, 0.7);




  margin: 0;




}














.benefits-mockup-wrapper {




  display: flex;




  justify-content: center;




}









/* 3D Floating Smartphone Mock-up */




.phone-mockup {




  width: 275px;




  height: 550px;




  border: 11px solid #1c2733;




  border-radius: 38px;




  background-color: #0b1724;




  box-shadow: 0 30px 60px rgba(27, 58, 87, 0.25), 0 0 0 1px rgba(27, 58, 87, 0.05);




  position: relative;




  overflow: hidden;




  animation: float 6s ease-in-out infinite;




}









.phone-notch {




  width: 95px;




  height: 18px;




  background-color: #1c2733;




  border-bottom-left-radius: 12px;




  border-bottom-right-radius: 12px;




  position: absolute;




  top: 0;




  left: 50%;




  transform: translateX(-50%);




  z-index: 15;




}









.phone-screen {




  width: 100%;




  height: 100%;




  padding: 1.25rem 1rem;




  display: flex;




  flex-direction: column;




  color: #ffffff;




  position: relative;




  background: linear-gradient(180deg, #12283d 0%, #0d1a29 100%);




}









.phone-status-bar {




  display: flex;




  justify-content: space-between;




  font-size: 0.65rem;




  opacity: 0.8;




  margin-bottom: 1.25rem;




  font-weight: 600;




}









.phone-app-header {




  display: flex;




  justify-content: center;




  margin-bottom: 1.75rem;




}









.phone-app-header img {




  height: 18px;




  filter: brightness(0) invert(1);




}









.phone-gauge-section {




  display: flex;




  justify-content: center;




  margin-bottom: 1.75rem;




}









.phone-gauge-circle {




  position: relative;




  width: 110px;




  height: 110px;




}









.phone-svg {




  width: 100%;




  height: 100%;




  transform: rotate(-90deg);




}









.phone-gauge-val {




  position: absolute;




  top: 38%;




  left: 50%;




  transform: translate(-50%, -50%);




  font-family: 'Outfit', sans-serif;




  font-size: 2.1rem;




  font-weight: 900;




  color: #ffffff;




}









.phone-gauge-lbl {




  position: absolute;




  bottom: 24%;




  left: 50%;




  transform: translate(-50%, -50%);




  font-size: 0.6rem;




  text-transform: uppercase;




  font-weight: 800;




  color: #2EC4A0;




  letter-spacing: 0.05em;




}









.phone-insights-list {




  display: flex;




  flex-direction: column;




  gap: 0.6rem;




  margin-bottom: auto;




}









.phone-insight-item {




  display: flex;




  justify-content: space-between;




  align-items: center;




  background-color: rgba(255, 255, 255, 0.06);




  padding: 0.6rem 0.85rem;




  border-radius: 10px;




  font-size: 0.725rem;




  border: 1px solid rgba(255, 255, 255, 0.04);




}









.phone-insight-badge {




  font-weight: 700;




  color: #2EC4A0;




}









.phone-alert-pop {




  display: flex;




  gap: 0.5rem;




  align-items: center;




  background: rgba(46, 196, 160, 0.95);




  padding: 0.65rem 0.85rem;




  border-radius: 14px;




  color: #ffffff;




  position: absolute;




  bottom: 1.5rem;




  left: 0.75rem;




  right: 0.75rem;




  box-shadow: 0 10px 25px rgba(46, 196, 160, 0.35);




  border: 1px solid rgba(255, 255, 255, 0.2);




}









.pop-bell {




  font-size: 1rem;




  animation: float 2s ease-in-out infinite;




}









.pop-txt strong {




  display: block;




  font-size: 0.725rem;




  font-weight: 800;




  margin-bottom: 0.1rem;




}









.pop-txt p {




  font-size: 0.625rem;




  opacity: 0.9;




  margin: 0;




  line-height: 1.2;




}









.benefits-bottom-grid {




  display: grid;




  grid-template-columns: repeat(4, 1fr);




  gap: 1.5rem;




  margin-top: 3.5rem;




  width: 100%;




}









@media (max-width: 1100px) {




  .benefits-bottom-grid {




    grid-template-columns: 1fr 1fr;




    gap: 1.5rem;




  }




}









@media (max-width: 576px) {




  .benefits-bottom-grid {




    grid-template-columns: 1fr;




  }




}














.benefit-card {




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  padding: 2rem;




  position: relative;




  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);




}









.benefit-card:hover {




  transform: translateY(-8px);




  border-color: var(--accent);




  box-shadow: var(--shadow-lg);




}









.benefit-number {




  position: absolute;




  top: 1.5rem;




  right: 2rem;




  font-family: 'Outfit', sans-serif;




  font-size: 2.2rem;




  font-weight: 900;




  color: rgba(46, 196, 160, 0.12);




  line-height: 1;




}









.benefit-card-icon {




  width: 48px;




  height: 48px;




  border-radius: var(--radius-md);




  background-color: rgba(46, 196, 160, 0.1);




  color: var(--accent);




  display: grid;




  place-items: center;




  font-size: 1.2rem;




  margin-bottom: 1.25rem;




}









.benefit-card h3 {




  font-size: 1.15rem;




  margin-bottom: 0.5rem;




  padding-right: 2rem;




}









.benefit-card p {




  font-size: 0.85rem;




  color: var(--text-muted);




  line-height: 1.55;




}









/* Interactive Blogs Section */




.blogs {




  background-color: var(--bg-light);




  border-top: 1px solid var(--border-color);




  border-bottom: 1px solid var(--border-color);




}









.blog-filters {




  display: flex;




  justify-content: center;




  gap: 0.75rem;




  margin-bottom: 3rem;




  flex-wrap: wrap;




}









.filter-btn {




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  padding: 0.6rem 1.5rem;




  border-radius: 50px;




  font-size: 0.875rem;




  font-weight: 700;




  color: var(--text-muted);




  cursor: pointer;




  transition: all var(--transition-fast);




}









.filter-btn:hover {




  border-color: var(--accent);




  color: var(--primary);




}









.filter-btn.active {




  background-color: var(--primary);




  border-color: var(--primary);




  color: var(--bg-white);




  box-shadow: var(--shadow-md);




}









.blogs-grid {




  display: grid;




  grid-template-cols: repeat(auto-fill, minmax(350px, 1fr));




  gap: 2rem;




  transition: all 0.4s ease;




}









@media (max-width: 576px) {




  .blogs-grid {




    grid-template-cols: 1fr;




  }




}









.blog-card {




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  overflow: hidden;




  transition: all 0.3s ease;




  display: flex;




  flex-direction: column;




}









.blog-card.hidden {




  display: none;




  opacity: 0;




  transform: scale(0.9);




}









.blog-card:hover {




  transform: translateY(-5px);




  box-shadow: var(--shadow-lg);




  border-color: var(--accent);




}









.blog-image-wrapper {




  height: 200px;




  position: relative;




  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);




  display: flex;




  align-items: center;




  justify-content: center;




  overflow: hidden;




}









.blog-image-illustration {




  width: 100%;




  height: 100%;




  display: flex;




  align-items: center;




  justify-content: center;




  opacity: 0.85;




}









.blog-image-illustration svg {




  width: 40%;




  height: 40%;




}









.blog-tag {




  position: absolute;




  bottom: 1rem;




  left: 1.25rem;




  background-color: var(--accent);




  color: var(--bg-white);




  font-size: 0.7rem;




  font-weight: 800;




  text-transform: uppercase;




  padding: 0.35rem 0.75rem;




  border-radius: 4px;




}









.blog-body {




  padding: 1.5rem;




  display: flex;




  flex-direction: column;




  flex-grow: 1;




}









.blog-meta {




  display: flex;




  gap: 1rem;




  font-size: 0.75rem;




  color: var(--text-muted);




  margin-bottom: 0.75rem;




  font-weight: 500;




}









.blog-body h3 {




  font-size: 1.25rem;




  line-height: 1.4;




  margin-bottom: 0.75rem;




  color: var(--primary);




}









.blog-body p {




  font-size: 0.85rem;




  color: var(--text-muted);




  line-height: 1.5;




  margin-bottom: 1.25rem;




}









.blog-read-more {




  margin-top: auto;




  font-size: 0.8rem;




  font-weight: 800;




  color: var(--accent);




  display: inline-flex;




  align-items: center;




  gap: 0.25rem;




}









.blog-read-more:hover {




  color: var(--accent-hover);




}









/* Modern 3D Cards Testimonial Carousel Section */




.testimonials-section {




  background-color: var(--bg-white);




}









.carousel-outer-container {




  position: relative;




  width: 100%;




  max-width: 800px;




  margin: 0 auto;




  height: 380px;




}









.carousel-deck {




  position: relative;




  width: 100%;




  height: 100%;




}









.carousel-card {




  position: absolute;




  width: 100%;




  max-width: 600px;




  left: 50%;




  top: 50%;




  transform: translate(-50%, -50%);




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  padding: 2.5rem;




  box-shadow: var(--shadow-lg);




  opacity: 0;




  visibility: hidden;




  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);




  display: flex;




  flex-direction: column;




  gap: 1.5rem;




}









/* Deck Positions */




.carousel-card.active {




  opacity: 1;




  visibility: visible;




  z-index: 5;




  transform: translate(-50%, -50%) scale(1);




  filter: blur(0px);




}









.carousel-card.next {




  opacity: 0.6;




  visibility: visible;




  z-index: 4;




  transform: translate(-45%, -47%) scale(0.93);




  filter: blur(1px);




}









.carousel-card.prev {




  opacity: 0.6;




  visibility: visible;




  z-index: 4;




  transform: translate(-55%, -47%) scale(0.93);




  filter: blur(1px);




}









.carousel-card.far-next {




  opacity: 0;




  visibility: hidden;




  z-index: 1;




  transform: translate(-40%, -45%) scale(0.85);




}









.carousel-card.far-prev {




  opacity: 0;




  visibility: hidden;




  z-index: 1;




  transform: translate(-60%, -45%) scale(0.85);




}









.quote-icon {




  font-size: 3rem;




  line-height: 1;




  color: rgba(46, 196, 160, 0.2);




  font-family: 'Outfit', sans-serif;




  height: 24px;




}









.test-text {




  font-size: 1.05rem;




  line-height: 1.6;




  color: var(--primary);




  font-style: italic;




}









.test-user {




  display: flex;




  align-items: center;




  gap: 1rem;




}









.test-avatar {




  width: 48px;




  height: 48px;




  border-radius: 50%;




  background-color: var(--accent);




  color: var(--bg-white);




  font-weight: 800;




  display: grid;




  place-items: center;




  font-size: 1.1rem;




}









.test-user-info h4 {




  font-size: 0.95rem;




}









.test-user-info p {




  font-size: 0.75rem;




  color: var(--text-muted);




}









.test-stars {




  margin-left: auto;




  color: #FFB347;




  display: flex;




  gap: 2px;




}









/* Carousel Nav Controls */




.carousel-controls {




  display: flex;




  justify-content: center;




  align-items: center;




  gap: 1.5rem;




  margin-top: 2rem;




}









.ctrl-btn {




  width: 48px;




  height: 48px;




  border-radius: 50%;




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  color: var(--primary);




  cursor: pointer;




  display: grid;




  place-items: center;




  box-shadow: var(--shadow-sm);




  transition: all var(--transition-fast);




}









.ctrl-btn:hover {




  background-color: var(--primary);




  border-color: var(--primary);




  color: var(--bg-white);




  box-shadow: var(--shadow-md);




}









.carousel-indicators {




  display: flex;




  gap: 0.5rem;




}









.ind-dot {




  width: 8px;




  height: 8px;




  border-radius: 50%;




  background-color: var(--border-color);




  cursor: pointer;




  transition: all var(--transition-fast);




}









.ind-dot.active {




  background-color: var(--accent);




  width: 20px;




  border-radius: 4px;




}









/* Premium FAQS Section */




.faq-contact-grid {




  display: grid;




  grid-template-cols: 1.1fr 0.9fr;




  gap: 4rem;




}









@media (max-width: 992px) {




  .faq-contact-grid {




    grid-template-cols: 1fr;




    gap: 3rem;




  }




}









.accordion {




  display: flex;




  flex-direction: column;




  gap: 1.25rem;




}









.accordion-item {




  border: 1px solid var(--border-color);




  border-radius: var(--radius-md);




  background-color: var(--bg-white);




  overflow: hidden;




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




  box-shadow: var(--shadow-sm);




}









.accordion-item:hover, .accordion-item.active {




  border-color: var(--accent);




  box-shadow: var(--shadow-md);




}









.accordion-header {




  padding: 1.5rem;




  display: flex;




  justify-content: space-between;




  align-items: center;




  cursor: pointer;




  user-select: none;




  background-color: var(--bg-white);




  transition: background-color var(--transition-fast);




}









.accordion-header:hover {




  background-color: var(--bg-light);




}









.accordion-q-wrapper {




  display: flex;




  align-items: center;




  gap: 0.75rem;




}









.accordion-dot {




  width: 8px;




  height: 8px;




  background-color: #D6DFE8;




  border-radius: 50%;




  flex-shrink: 0;




  transition: all var(--transition-fast);




}









.accordion-item.active .accordion-dot {




  background-color: var(--accent);




  box-shadow: 0 0 8px var(--accent);




  animation: pulse-soft 2s infinite;




}









.accordion-header h4 {




  font-size: 1rem;




  font-weight: 700;




  color: var(--primary);




}









.accordion-icon {




  display: flex;




  align-items: center;




  justify-content: center;




  color: var(--accent);




  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color var(--transition-fast), background-color var(--transition-fast);




  flex-shrink: 0;




  width: 32px;




  height: 32px;




  border-radius: 50%;




  background-color: rgba(46, 196, 160, 0.08);




}




.accordion-icon .chevron-icon {




  width: 18px;




  height: 18px;




  display: block;




}




.accordion-item:hover .accordion-icon {




  background-color: rgba(46, 196, 160, 0.15);




}




.accordion-item.active .accordion-icon {




  transform: rotate(180deg);




  color: var(--accent-hover);




  background-color: rgba(46, 196, 160, 0.2);




}









.accordion-content {




  max-height: 0;




  overflow: hidden;




  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);




  padding: 0 1.5rem;




  background: linear-gradient(180deg, var(--bg-white) 0%, rgba(248, 250, 251, 0.5) 100%);




}









.accordion-item.active .accordion-content {




  max-height: 500px;




  padding-bottom: 1.5rem;




  border-top: 1px dashed var(--border-color);




  padding-top: 1rem;




}









.accordion-content p {




  font-size: 0.875rem;




  color: var(--text-muted);




  line-height: 1.6;




}









.contact-card {




  background-color: var(--bg-light);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  padding: 2.5rem;




}









.contact-card h3 {




  font-size: 1.5rem;




  margin-bottom: 1.5rem;




}









.form-group {




  margin-bottom: 1.25rem;




}









.form-row {




  display: grid;




  grid-template-cols: 1fr 1fr;




  gap: 1rem;




}









@media (max-width: 576px) {




  .form-row {




    grid-template-cols: 1fr;




    gap: 0;




  }




}









.form-group label {




  display: block;




  font-size: 0.775rem;




  font-weight: 700;




  margin-bottom: 0.5rem;




  color: var(--primary);




}









.form-control {




  width: 100%;




  background-color: var(--bg-white);




  border: 1px solid #D6DFE8;




  border-radius: var(--radius-sm);




  padding: 0.75rem 1rem;




  font-size: 0.9rem;




  outline: none;




  font-family: inherit;




  transition: all var(--transition-fast);




}









.form-control:focus {




  border-color: var(--accent);




  box-shadow: 0 0 0 3px rgba(46, 196, 160, 0.15);




}









textarea.form-control {




  min-height: 120px;




  resize: vertical;




}









.contact-card .btn {




  width: 100%;




  margin-top: 1rem;




}









/* Footer Section with Proper Column Layout */














/* Floating Bottom Download Banner */




.floating-download-banner {




  position: fixed;




  bottom: 0;




  left: 0;




  width: 100%;




  background-color: rgba(255, 255, 255, 0.95);




  backdrop-filter: blur(10px);




  -webkit-backdrop-filter: blur(10px);




  border-top: 1px solid var(--border-color);




  box-shadow: 0 -8px 30px rgba(27, 58, 87, 0.08);




  z-index: 90;




  padding: 0.875rem 0;




  transform: translateY(100%);




  transition: transform var(--transition-slow);




}









.floating-download-banner.show {




  transform: translateY(0);




}









.float-banner-content {




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 1rem;




}









.banner-text-side {




  display: flex;




  align-items: center;




  gap: 1rem;




}









.banner-icon {




  width: 44px;




  height: 44px;




  background-color: var(--primary);




  border-radius: var(--radius-sm);




  display: grid;




  place-items: center;




}









.banner-icon svg {




  width: 24px;




  height: 24px;




}









.banner-desc h4 {




  font-size: 0.95rem;




  margin-bottom: 0.15rem;




}









.banner-desc p {




  font-size: 0.75rem;




  color: var(--text-muted);




}









.banner-actions {




  display: flex;




  gap: 0.75rem;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .floating-download-banner {




    padding: 0.75rem 0;




  }




  .float-banner-content {




    justify-content: center;




    text-align: center;




  }




  .banner-text-side {




    display: none;




  }




  .banner-actions {




    width: 100%;




  }




  .banner-actions .btn {




    width: 100%;




  }




}









/* Floating Quick Menu Assistant */




.floating-assistant-wrapper {




  position: fixed;




  bottom: 95px; /* Sits above the floating banner */




  right: 2rem;




  z-index: 91;




  display: flex;




  flex-direction: column;




  align-items: flex-end;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .floating-assistant-wrapper {




    bottom: 80px;




    right: 1.25rem;




  }




}









.assistant-menu {




  margin-bottom: 1rem;




  display: flex;




  flex-direction: column;




  gap: 0.5rem;




  opacity: 0;




  visibility: hidden;




  transform: translateY(20px);




  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);




}









.assistant-menu.open {




  opacity: 1;




  visibility: visible;




  transform: translateY(0);




}









.assistant-menu-item {




  display: flex;




  align-items: center;




  gap: 0.75rem;




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  padding: 0.6rem 1.25rem;




  border-radius: 50px;




  box-shadow: var(--shadow-md);




  font-size: 0.8rem;




  font-weight: 700;




  color: var(--primary);




  cursor: pointer;




  transition: all var(--transition-fast);




}









.assistant-menu-item:hover {




  background-color: var(--primary);




  border-color: var(--primary);




  color: var(--bg-white);




  transform: translateX(-4px);




}









.assistant-menu-item-icon {




  width: 24px;




  height: 24px;




  background-color: rgba(46, 196, 160, 0.1);




  color: var(--accent);




  border-radius: 50%;




  display: grid;




  place-items: center;




  font-size: 0.7rem;




}









.assistant-menu-item:hover .assistant-menu-item-icon {




  background-color: rgba(255, 255, 255, 0.2);




  color: var(--bg-white);




}









.assistant-trigger-btn {




  width: 56px;




  height: 56px;




  border-radius: 50%;




  background-color: var(--accent);




  color: var(--bg-white);




  border: none;




  cursor: pointer;




  display: grid;




  place-items: center;




  box-shadow: var(--shadow-accent);




  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);




}









.assistant-trigger-btn:hover {




  background-color: var(--accent-hover);




  transform: scale(1.08) rotate(90deg);




}









.assistant-trigger-btn.active {




  transform: rotate(135deg);




  background-color: var(--primary);




  box-shadow: var(--shadow-md);




}









.assistant-trigger-btn svg {




  width: 24px;




  height: 24px;




  transition: transform 0.3s ease;




}









/* ==========================================




   FOOTER LAYOUT — Two-Row Structure




   ========================================== */









/* Row 1: Brand + Tagline */




.footer-top-row {




  display: flex;




  justify-content: space-between;




  align-items: flex-start;




  gap: 3rem;




  padding-bottom: 3rem;




  flex-wrap: wrap;




}









.footer-brand {




  max-width: 420px;




  display: flex;




  flex-direction: column;




  gap: 1.25rem;




}









.footer-brand-desc {




  font-size: 0.875rem;




  line-height: 1.65;




  color: rgba(255, 255, 255, 0.55);




}









.footer-badges-row {




  display: flex;




  gap: 0.75rem;




}









.footer-store-badge {




  display: inline-flex;




  align-items: center;




  gap: 0.4rem;




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(255, 255, 255, 0.12);




  color: rgba(255, 255, 255, 0.75);




  padding: 0.5rem 1.1rem;




  border-radius: 50px;




  font-size: 0.78rem;




  font-weight: 700;




  transition: all 0.2s ease;




}









.footer-store-badge:hover {




  background: rgba(46, 196, 160, 0.15);




  border-color: rgba(46, 196, 160, 0.4);




  color: var(--accent);




}









.footer-tagline-block {




  text-align: right;




  display: flex;




  flex-direction: column;




  align-items: flex-end;




  gap: 1rem;




}









.footer-tagline {




  font-family: 'Outfit', sans-serif;




  font-size: 1.35rem;




  font-weight: 800;




  color: rgba(255, 255, 255, 0.9);




  line-height: 1.3;




  margin: 0;




}









.footer-trust-pills {




  display: flex;




  gap: 0.6rem;




  flex-wrap: wrap;




  justify-content: flex-end;




}









.trust-pill {




  font-size: 0.7rem;




  font-weight: 700;




  padding: 0.35rem 0.85rem;




  border-radius: 50px;




  background: rgba(255, 255, 255, 0.05);




  border: 1px solid rgba(255, 255, 255, 0.1);




  color: rgba(255, 255, 255, 0.6);




  white-space: nowrap;




}









/* Footer Divider */




.footer-divider {




  height: 1px;




  background: linear-gradient(




    90deg,




    transparent 0%,




    rgba(255, 255, 255, 0.12) 20%,




    rgba(46, 196, 160, 0.25) 50%,




    rgba(255, 255, 255, 0.12) 80%,




    transparent 100%




  );




  margin-bottom: 3rem;




}









/* Row 2: Product | Company | Legal — 3 Equal Columns */




.footer-nav-columns {




  display: flex;




  flex-direction: row;




  align-items: flex-start;




  gap: 0;




  margin-bottom: 3rem;




}









.footer-nav-col {




  flex: 1;




  padding: 0 2.5rem;




}









.footer-nav-col:first-child {




  padding-left: 0;




}









.footer-nav-col:last-child {




  padding-right: 0;




}









/* Vertical separator between columns */




.footer-col-separator {




  width: 1px;




  align-self: stretch;




  background: linear-gradient(




    180deg,




    transparent 0%,




    rgba(255, 255, 255, 0.1) 20%,




    rgba(255, 255, 255, 0.1) 80%,




    transparent 100%




  );




  flex-shrink: 0;




}









.footer-col-heading {




  font-family: 'Outfit', sans-serif;




  color: var(--bg-white);




  font-size: 0.7rem;




  font-weight: 900;




  text-transform: uppercase;




  letter-spacing: 0.18em;




  margin-bottom: 1.5rem;




  display: flex;




  align-items: center;




  gap: 0.5rem;




}









.footer-col-heading::after {




  content: '';




  flex: 1;




  height: 1px;




  background: rgba(255, 255, 255, 0.08);




  display: block;




}









/* Footer Bottom */




.footer-bottom {




  border-top: 1px solid rgba(255, 255, 255, 0.08);




  padding-top: 1.75rem;




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 1rem;




  font-size: 0.775rem;




  color: rgba(255, 255, 255, 0.4);




}









/* Footer Responsive */




@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .footer-top-row {




    flex-direction: column;




    align-items: flex-start;




    gap: 2rem;




  }









  .footer-tagline-block {




    text-align: left;




    align-items: flex-start;




  }









  .footer-trust-pills {




    justify-content: flex-start;




  }









  .footer-nav-columns {




    flex-direction: column;




    gap: 2rem;




  }









  .footer-nav-col {




    padding: 0;




    width: 100%;




  }









  .footer-col-separator {




    display: none;




  }









  .footer-bottom {




    flex-direction: column;




    text-align: center;




    gap: 0.5rem;




  }




}














/* Glass card for dark backgrounds (hero widget) */




.glass-card {




  background: rgba(255, 255, 255, 0.08);




  backdrop-filter: blur(16px);




  -webkit-backdrop-filter: blur(16px);




  border: 1px solid rgba(255, 255, 255, 0.15);




  border-radius: var(--radius-lg);




}









/* Right column of the calculator grid */




.calc-right {




  display: flex;




  flex-direction: column;




  gap: 1.5rem;




}









/* Calculator viz card override for light background */




.calculator-viz-card {




  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%) !important;




  backdrop-filter: none !important;




  border: 1px solid var(--border-color) !important;




  color: var(--text-main) !important;




}









/* ==========================================




   RESPONSIVE OVERRIDES




   ========================================== */




@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .hero h1 {




    font-size: 2.25rem;




  }









  .hero-stats {




    grid-template-columns: repeat(3, 1fr);




    gap: 1rem;




  }









  .stat-item h3 {




    font-size: 1.4rem;




  }









  .hero-widget-tabs-container {




    max-width: 100%;




  }









  .section-header h2 {




    font-size: 1.9rem;




  }









  .calc-left {




    padding: 1.75rem;




  }









  .blogs-grid {




    grid-template-columns: 1fr;




  }









  .carousel-outer-container {




    height: 420px;




  }









  .faq-contact-grid {




    gap: 2rem;




  }




  




  .range-carousel-container {




    padding: 1.75rem;




  }









  .edu-factors-grid {




    grid-template-columns: 1fr 1fr;




  }




}









@media (max-width: 480px) {




  .hero h1 {




    font-size: 1.9rem;




  }









  .hero-stats {




    grid-template-columns: 1fr 1fr;




    gap: 1rem 0.75rem;




  }









  .hero-stats .stat-item:last-child {




    grid-column: 1 / -1;




    border-top: 1px solid rgba(255,255,255,0.1);




    padding-top: 1rem;




    margin-top: 0.25rem;




  }









  .edu-factors-grid {




    grid-template-columns: 1fr;




  }









  .benefits-grid {




    grid-template-columns: 1fr;




  }









  .form-row {




    grid-template-columns: 1fr;




  }









  .blog-meta {




    flex-wrap: wrap;




    gap: 0.5rem;




  }




}









/* ==========================================




   PREMIUM CONTACT SECTION




   ========================================== */









/* Outer panel: two-column split */




.contact-panel {




  display: grid;




  grid-template-columns: 1fr 1.4fr;




  border-radius: var(--radius-xl);




  overflow: hidden;




  box-shadow: var(--shadow-lg);




  border: 1px solid var(--border-color);




}









/* Left info side — dark gradient */




.contact-info-side {




  background: linear-gradient(145deg, var(--primary) 0%, #0f2135 100%);




  padding: 3rem 2.5rem;




  display: flex;




  flex-direction: column;




  gap: 1.75rem;




  position: relative;




  overflow: hidden;




}









/* decorative background circle */




.contact-info-side::before {




  content: '';




  position: absolute;




  width: 280px;




  height: 280px;




  background: radial-gradient(circle, rgba(46, 196, 160, 0.12) 0%, transparent 70%);




  bottom: -60px;




  right: -60px;




  pointer-events: none;




}









.contact-info-badge {




  display: inline-flex;




  align-items: center;




  gap: 0.6rem;




  background: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.25);




  color: var(--accent);




  font-size: 0.78rem;




  font-weight: 800;




  padding: 0.4rem 1rem;




  border-radius: 50px;




  width: fit-content;




}









.contact-badge-dot {




  width: 7px;




  height: 7px;




  background: var(--accent);




  border-radius: 50%;




  box-shadow: 0 0 8px var(--accent);




  animation: pulse-soft 2s infinite;




}









.contact-info-title {




  font-family: 'Outfit', sans-serif;




  font-size: 2.2rem;




  font-weight: 900;




  color: #ffffff;




  line-height: 1.2;




  margin: 0;




}









.contact-info-desc {




  font-size: 0.875rem;




  color: rgba(255, 255, 255, 0.55);




  line-height: 1.7;




  margin: 0;




}









.contact-detail-list {




  display: flex;




  flex-direction: column;




  gap: 1.25rem;




}









.contact-detail-item {




  display: flex;




  align-items: center;




  gap: 1rem;




}









.contact-detail-icon {




  width: 40px;




  height: 40px;




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(255, 255, 255, 0.1);




  border-radius: 10px;




  display: grid;




  place-items: center;




  font-size: 1rem;




  flex-shrink: 0;




}









.detail-label {




  font-size: 0.7rem;




  font-weight: 700;




  text-transform: uppercase;




  letter-spacing: 0.06em;




  color: rgba(255, 255, 255, 0.4);




  margin: 0 0 0.2rem;




}









.detail-value {




  font-size: 0.875rem;




  font-weight: 700;




  color: rgba(255, 255, 255, 0.85);




  margin: 0;




}









/* Satisfaction ring stat */




.contact-response-stat {




  display: flex;




  align-items: center;




  gap: 1rem;




  background: rgba(255, 255, 255, 0.04);




  border: 1px solid rgba(255, 255, 255, 0.08);




  border-radius: var(--radius-md);




  padding: 1.1rem 1.25rem;




  margin-top: auto;




}









.stat-ring-small {




  position: relative;




  flex-shrink: 0;




}









.ring-label {




  position: absolute;




  top: 50%;




  left: 50%;




  transform: translate(-50%, -50%);




  font-family: 'Outfit', sans-serif;




  font-size: 0.8rem;




  font-weight: 900;




  color: var(--accent);




}









.response-stat-title {




  font-size: 0.875rem;




  font-weight: 800;




  color: rgba(255, 255, 255, 0.85);




  margin: 0 0 0.25rem;




}









.response-stat-sub {




  font-size: 0.72rem;




  color: rgba(255, 255, 255, 0.4);




  margin: 0;




}









/* Right form side */




.contact-form-side {




  background-color: var(--bg-white);




  padding: 3rem 2.5rem;




  display: flex;




  flex-direction: column;




  gap: 1.5rem;




}









.contact-form-header h4 {




  font-size: 1.5rem;




  font-weight: 800;




  color: var(--primary);




  margin-bottom: 0.4rem;




}









.contact-form-header p {




  font-size: 0.875rem;




  color: var(--text-muted);




  margin: 0;




}









/* Premium Form */




.premium-form {




  display: flex;




  flex-direction: column;




  gap: 1.1rem;




}









/* Two-column row */




.form-row-two {




  display: grid;




  grid-template-columns: 1fr 1fr;




  gap: 1rem;




}









/* Floating Label Input Pattern */




.floating-field {




  position: relative;




}









.floating-input {




  width: 100%;




  padding: 1.25rem 1rem 0.5rem;




  border: 1.5px solid #D6DFE8;




  border-radius: var(--radius-sm);




  font-size: 0.9rem;




  font-family: inherit;




  color: var(--primary);




  background-color: var(--bg-light);




  outline: none;




  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;




  -webkit-appearance: none;




  appearance: none;




}









.floating-input:focus {




  border-color: var(--accent);




  background-color: var(--bg-white);




  box-shadow: 0 0 0 3px rgba(46, 196, 160, 0.12);




}









.floating-label {




  position: absolute;




  left: 1rem;




  top: 50%;




  transform: translateY(-50%);




  font-size: 0.875rem;




  color: var(--text-muted);




  pointer-events: none;




  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);




  font-weight: 600;




  background: transparent;




  padding: 0 0.2rem;




}









/* Float label up when input has content or is focused */




.floating-input:focus ~ .floating-label,




.floating-input:not(:placeholder-shown) ~ .floating-label {




  top: 0.45rem;




  font-size: 0.65rem;




  color: var(--accent);




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.04em;




}









/* Field icon */




.field-icon {




  position: absolute;




  right: 1rem;




  top: 50%;




  transform: translateY(-50%);




  font-size: 0.95rem;




  pointer-events: none;




  opacity: 0.45;




}









/* Select field */




.floating-select {




  cursor: pointer;




  padding-right: 2.5rem;




}









.select-arrow {




  font-size: 1rem;




  color: var(--text-muted);




}









/* Textarea field */




.textarea-field .floating-input {




  min-height: 110px;




  resize: vertical;




  padding-top: 1.5rem;




}









.textarea-field .floating-label {




  top: 1.25rem;




  transform: none;




}









.floating-textarea:focus ~ .floating-label,




.floating-textarea:not(:placeholder-shown) ~ .floating-label {




  top: 0.45rem;




  font-size: 0.65rem;




  color: var(--accent);




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.04em;




}









/* Submit button */




.contact-submit-btn {




  width: 100%;




  display: flex;




  align-items: center;




  justify-content: center;




  gap: 0.75rem;




  padding: 1rem 2rem;




  background: linear-gradient(135deg, var(--primary) 0%, #254D6E 100%);




  color: #ffffff;




  border: none;




  border-radius: var(--radius-md);




  font-size: 1rem;




  font-weight: 800;




  font-family: 'Outfit', sans-serif;




  cursor: pointer;




  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);




  box-shadow: 0 6px 20px rgba(27, 58, 87, 0.25);




  letter-spacing: 0.02em;




  margin-top: 0.5rem;




}









.contact-submit-btn:hover {




  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);




  transform: translateY(-2px);




  box-shadow: var(--shadow-accent);




}









.contact-submit-btn:active {




  transform: translateY(0);




}









.submit-btn-icon {




  display: flex;




  align-items: center;




  transition: transform 0.3s ease;




}









.contact-submit-btn:hover .submit-btn-icon {




  transform: translateX(3px);




}









.form-privacy-note {




  font-size: 0.72rem;




  color: var(--text-muted);




  text-align: center;




  line-height: 1.4;




  margin: 0;




}









/* Spin animation for loading state */




@keyframes spin {




  from { transform: rotate(0deg); }




  to { transform: rotate(360deg); }




}









/* Responsive */




@media (max-width: 992px) {




  .contact-panel {




    grid-template-columns: 1fr;




  }









  .contact-info-side {




    padding: 2.5rem 2rem;




  }









  .contact-response-stat {




    margin-top: 0;




  }




}









@media (max-width: 576px) {




  .form-row-two {




    grid-template-columns: 1fr;




  }









  .contact-form-side {




    padding: 2rem 1.5rem;




  }









  .contact-info-title {




    font-size: 1.75rem;




  }




}














/* ==========================================================================




   BLOG DETAIL PAGES STYLES




   ========================================================================== */




.blog-detail-hero {




  padding: 8rem 0 3.5rem;




  background: linear-gradient(135deg, #102F49 0%, #1B3A57 60%, #154562 100%);




  color: #ffffff;




  position: relative;




  overflow: hidden;




}









.blog-detail-hero::before {




  content: '';




  position: absolute;




  top: -50%;




  right: -20%;




  width: 600px;




  height: 600px;




  background: radial-gradient(circle, rgba(46, 196, 160, 0.15) 0%, rgba(46, 196, 160, 0) 70%);




  border-radius: 50%;




  pointer-events: none;




}









.breadcrumb-nav {




  display: flex;




  align-items: center;




  gap: 0.5rem;




  font-size: 0.85rem;




  margin-bottom: 1.5rem;




  color: rgba(255, 255, 255, 0.7);




}









.breadcrumb-nav a {




  color: rgba(255, 255, 255, 0.85);




  text-decoration: none;




  transition: color 0.2s;




}









.breadcrumb-nav a:hover {




  color: var(--accent);




}









.blog-detail-tag {




  display: inline-block;




  padding: 0.35rem 0.9rem;




  border-radius: 999px;




  font-size: 0.75rem;




  font-weight: 700;




  text-transform: uppercase;




  letter-spacing: 0.08em;




  background: rgba(46, 196, 160, 0.2);




  color: var(--accent);




  border: 1px solid rgba(46, 196, 160, 0.4);




  margin-bottom: 1rem;




}









.blog-detail-title {




  font-size: 2.75rem;




  line-height: 1.2;




  font-weight: 800;




  margin-bottom: 1.25rem;




  color: #ffffff;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .blog-detail-title {




    font-size: 2rem;




  }




}









.blog-detail-lead {




  font-size: 1.15rem;




  line-height: 1.7;




  color: rgba(255, 255, 255, 0.85);




  max-width: 800px;




  margin-bottom: 1.75rem;




}









.blog-meta-bar {




  display: flex;




  flex-wrap: wrap;




  align-items: center;




  gap: 1.5rem;




  padding-top: 1.25rem;




  border-top: 1px solid rgba(255, 255, 255, 0.12);




  font-size: 0.9rem;




  color: rgba(255, 255, 255, 0.75);




}









.blog-meta-item {




  display: flex;




  align-items: center;




  gap: 0.5rem;




}









.blog-detail-layout {




  display: grid;




  grid-template-columns: 1fr 340px;




  gap: 3.5rem;




  padding: 4rem 0 6rem;




}









@media (max-width: 992px) {




  .blog-detail-layout {




    grid-template-columns: 1fr;




    gap: 2.5rem;




  }




}









.blog-main-content {




  color: #2D3748;




  font-size: 1.05rem;




  line-height: 1.8;




}









.blog-main-content h2 {




  font-size: 1.85rem;




  color: #1B3A57;




  margin: 2.5rem 0 1rem;




  font-weight: 800;




  display: flex;




  align-items: center;




  gap: 0.75rem;




}









.blog-main-content h3 {




  font-size: 1.35rem;




  color: #1B3A57;




  margin: 1.75rem 0 0.75rem;




  font-weight: 700;




}









.blog-main-content p {




  margin-bottom: 1.25rem;




}









.blog-main-content ul, .blog-main-content ol {




  margin: 1rem 0 1.5rem 1.5rem;




}









.blog-main-content li {




  margin-bottom: 0.6rem;




}









/* Interactive Widgets inside Blog */




.interactive-widget-box {




  background: #F7FAFC;




  border: 1px solid #E2E8F0;




  border-left: 4px solid var(--accent);




  border-radius: 1rem;




  padding: 1.75rem;




  margin: 2rem 0;




  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);




}









.interactive-widget-header {




  display: flex;




  align-items: center;




  justify-content: space-between;




  margin-bottom: 1.25rem;




}









.interactive-widget-header h4 {




  font-size: 1.2rem;




  font-weight: 700;




  color: #1B3A57;




  margin: 0;




  display: flex;




  align-items: center;




  gap: 0.5rem;




}









.habit-check-list {




  display: flex;




  flex-direction: column;




  gap: 0.75rem;




}









.habit-check-item {




  display: flex;




  align-items: flex-start;




  gap: 0.75rem;




  padding: 0.85rem 1rem;




  background: #ffffff;




  border: 1px solid #E2E8F0;




  border-radius: 0.75rem;




  cursor: pointer;




  transition: all 0.2s;




}









.habit-check-item:hover {




  border-color: var(--accent);




  background: #F0FDF4;




}









.habit-check-item input[type="checkbox"] {




  margin-top: 0.25rem;




  width: 18px;




  height: 18px;




  accent-color: #2EC4A0;




  cursor: pointer;




}









.habit-progress-bar-wrap {




  margin-top: 1.5rem;




  background: #EDF2F7;




  border-radius: 999px;




  height: 12px;




  overflow: hidden;




}









.habit-progress-fill {




  height: 100%;




  width: 0%;




  background: linear-gradient(90deg, #FFB347, #2EC4A0);




  border-radius: 999px;




  transition: width 0.4s ease;




}









.habit-score-result {




  margin-top: 1rem;




  padding: 1rem;




  background: #102F49;




  color: #ffffff;




  border-radius: 0.75rem;




  text-align: center;




  font-weight: 700;




}









/* Simulator Widget */




.sim-grid {




  display: grid;




  grid-template-columns: 1fr 1fr;




  gap: 1.5rem;




  margin-top: 1rem;




}









@media (max-width: 600px) {




  .sim-grid {




    grid-template-columns: 1fr;




  }




}









.sim-input-group label {




  display: block;




  font-size: 0.85rem;




  font-weight: 600;




  color: #4A5568;




  margin-bottom: 0.35rem;




}









.sim-input-group input {




  width: 100%;




  padding: 0.75rem 1rem;




  border: 1px solid #CBD5E0;




  border-radius: 0.5rem;




  font-size: 1rem;




}









.sim-output-card {




  background: #ffffff;




  border: 2px solid #2EC4A0;




  border-radius: 0.75rem;




  padding: 1rem 1.25rem;




  display: flex;




  flex-direction: column;




  justify-content: center;




}









.sim-percent-highlight {




  font-size: 1.75rem;




  font-weight: 800;




  color: #2EC4A0;




}









/* Copy Template Box */




.copy-template-container {




  background: #102F49;




  color: #E2E8F0;




  border-radius: 0.75rem;




  padding: 1.5rem;




  margin: 1.5rem 0;




  position: relative;




}









.copy-template-header {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1rem;




  border-bottom: 1px solid rgba(255, 255, 255, 0.1);




  padding-bottom: 0.75rem;




}









.copy-template-btn {




  background: #2EC4A0;




  color: #102F49;




  border: none;




  padding: 0.4rem 0.9rem;




  border-radius: 0.5rem;




  font-weight: 700;




  font-size: 0.8rem;




  cursor: pointer;




  transition: all 0.2s;




}









.copy-template-btn:hover {




  background: #63E2C4;




}









.copy-template-content {




  font-family: monospace;




  font-size: 0.85rem;




  line-height: 1.6;




  white-space: pre-wrap;




  background: rgba(0, 0, 0, 0.2);




  padding: 1rem;




  border-radius: 0.5rem;




}









/* Interactive Error Selector */




.error-selector-grid {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));




  gap: 1rem;




  margin: 1.5rem 0;




}









.error-select-btn {




  background: #ffffff;




  border: 2px solid #E2E8F0;




  padding: 1rem;




  border-radius: 0.75rem;




  text-align: left;




  cursor: pointer;




  transition: all 0.2s;




  font-size: 0.9rem;




  font-weight: 600;




  color: #1B3A57;




}









.error-select-btn:hover, .error-select-btn.active {




  border-color: #2EC4A0;




  background: #F0FDF4;




  box-shadow: 0 4px 12px rgba(46, 196, 160, 0.15);




}









.error-resolution-details {




  background: #ffffff;




  border: 1px solid #E2E8F0;




  border-radius: 0.75rem;




  padding: 1.5rem;




  margin-top: 1rem;




}









/* Sidebar */




.blog-sidebar {




  display: flex;




  flex-direction: column;




  gap: 2rem;




}









.sidebar-sticky-card {




  position: sticky;




  top: 6rem;




  background: #ffffff;




  border: 1px solid #E2E8F0;




  border-radius: 1rem;




  padding: 1.75rem;




  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);




}









.sidebar-cta-card {




  background: linear-gradient(135deg, #102F49, #1B3A57);




  color: #ffffff;




  border-radius: 1rem;




  padding: 1.75rem;




  text-align: center;




}









.sidebar-cta-card h4 {




  font-size: 1.3rem;




  font-weight: 800;




  margin-bottom: 0.75rem;




  color: #ffffff;




}









.sidebar-cta-card p {




  font-size: 0.9rem;




  color: rgba(255, 255, 255, 0.8);




  margin-bottom: 1.25rem;




}









.next-article-card {




  display: block;




  background: #F8FAFC;




  border: 1px solid #E2E8F0;




  border-radius: 1rem;




  padding: 1.5rem;




  text-decoration: none;




  transition: all 0.3s;




  color: inherit;




  margin-top: 3rem;




}









.next-article-card:hover {




  border-color: #2EC4A0;




  transform: translateY(-3px);




  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);




}









.next-article-label {




  font-size: 0.75rem;




  font-weight: 700;




  text-transform: uppercase;




  color: #2EC4A0;




  margin-bottom: 0.5rem;




}









.next-article-title {




  font-size: 1.15rem;




  font-weight: 700;




  color: #1B3A57;




}



















/* ==========================================================================




   TRUSTED & SECURED: INTEGRATED CREDIT BUREAUS & STRATEGIC PARTNERSHIPS




   ========================================================================== */




.security-partners-section {




  padding: 85px 0;




  background: linear-gradient(180deg, rgba(27, 58, 87, 0.02) 0%, rgba(46, 196, 160, 0.05) 100%);




  position: relative;




}









.bureau-integration-block {




  margin-bottom: 40px;




}









.bureau-block-header {




  text-align: center;




  margin-bottom: 28px;




}









.bureau-block-header h3 {




  font-size: 24px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 6px;




}









.bureau-block-header p {




  font-size: 14px;




  color: #64748b;




  max-width: 600px;




  margin: 0 auto;




}









.bureau-cards-grid {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));




  gap: 24px;




}









.bureau-feature-card {




  padding: 30px 28px;




  border-radius: 20px;




  background: #ffffff;




  border: 1px solid rgba(46, 196, 160, 0.22);




  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.05);




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




  display: flex;




  flex-direction: column;




}









.bureau-feature-card:hover {




  transform: translateY(-4px);




  border-color: #2EC4A0;




  box-shadow: 0 16px 36px rgba(46, 196, 160, 0.15);




}









.bureau-card-top {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 16px;




  gap: 12px;




}









.bureau-brand-wrap {




  display: flex;




  align-items: center;




  gap: 14px;




}









.bureau-logo-badge {




  width: 52px;




  height: 52px;




  border-radius: 14px;




  display: flex;




  align-items: center;




  justify-content: center;




  font-weight: 900;




  font-size: 15px;




  letter-spacing: 0.5px;




  flex-shrink: 0;




  box-shadow: 0 4px 12px rgba(0,0,0,0.06);




}









.bureau-logo-badge.crif {




  background: linear-gradient(135deg, #0288D1 0%, #01579B 100%);




  color: #ffffff;




}









.bureau-logo-badge.experian {




  background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%);




  color: #ffffff;




}









.bureau-brand-wrap h4 {




  font-size: 18px;




  font-weight: 800;




  color: #1B3A57;




  margin: 0 0 2px 0;




}









.bureau-license-tag {




  font-size: 11px;




  font-weight: 700;




  color: #0d9488;




  background: rgba(46, 196, 160, 0.12);




  padding: 2px 8px;




  border-radius: 6px;




  display: inline-block;




}









.live-sync-pill {




  font-size: 11px;




  font-weight: 700;




  color: #059669;




  background: rgba(16, 185, 129, 0.1);




  padding: 5px 10px;




  border-radius: 20px;




  display: flex;




  align-items: center;




  gap: 6px;




  white-space: nowrap;




}









.pulse-dot {




  width: 6px;




  height: 6px;




  background: #10B981;




  border-radius: 50%;




  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);




  animation: pulse-ring 2s infinite;




}









.bureau-desc {




  font-size: 14px;




  color: #475569;




  line-height: 1.55;




  margin-bottom: 20px;




  flex-grow: 1;




}









.bureau-feature-list {




  list-style: none;




  padding: 0;




  margin: 0;




  display: flex;




  flex-direction: column;




  gap: 10px;




  border-top: 1px dashed #e2e8f0;




  padding-top: 16px;




}









.bureau-feature-list li {




  font-size: 13px;




  color: #1B3A57;




  font-weight: 600;




  display: flex;




  align-items: center;




  gap: 8px;




}









.bureau-feature-list .check-icon {




  color: #2EC4A0;




  font-weight: 900;




}









/* Security Pillars Grid */




.security-pillars-grid {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));




  gap: 20px;




  margin-bottom: 40px;




}









.sec-pillar-card {




  padding: 24px;




  border-radius: 18px;




  background: #ffffff;




  border: 1px solid #e2e8f0;




  box-shadow: 0 6px 20px rgba(27, 58, 87, 0.04);




  transition: all 0.3s ease;




}









.sec-pillar-card:hover {




  transform: translateY(-2px);




  border-color: #2EC4A0;




  box-shadow: 0 10px 28px rgba(46, 196, 160, 0.12);




}









.sec-pillar-icon {




  font-size: 26px;




  margin-bottom: 12px;




}









.sec-pillar-card h4 {




  font-size: 16px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 6px;




}









.sec-pillar-card p {




  font-size: 13px;




  color: #64748b;




  line-height: 1.5;




  margin: 0;




}









/* Strategic Partnerships Banner */




.partnerships-banner-card {




  padding: 36px 32px;




  border-radius: 22px;




  background: linear-gradient(135deg, rgba(27, 58, 87, 0.96) 0%, rgba(15, 36, 56, 0.98) 100%);




  color: #ffffff;




  box-shadow: 0 20px 45px rgba(27, 58, 87, 0.2);




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.partnerships-header-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 20px;




  margin-bottom: 28px;




  border-bottom: 1px solid rgba(255, 255, 255, 0.12);




  padding-bottom: 24px;




}









.partner-eyebrow {




  font-size: 13px;




  font-weight: 700;




  color: #2EC4A0;




  text-transform: uppercase;




  letter-spacing: 0.5px;




  display: inline-block;




  margin-bottom: 6px;




}









.partnerships-intro h3 {




  font-size: 22px;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 6px;




}









.partnerships-intro p {




  font-size: 14px;




  color: #cbd5e1;




  max-width: 650px;




  line-height: 1.5;




  margin: 0;




}









.partner-stat-badge {




  background: rgba(46, 196, 160, 0.15);




  border: 1px solid rgba(46, 196, 160, 0.4);




  padding: 14px 22px;




  border-radius: 16px;




  text-align: center;




  flex-shrink: 0;




}









.stat-big {




  font-size: 32px;




  font-weight: 900;




  color: #2EC4A0;




  display: block;




  line-height: 1;




}









.stat-sub {




  font-size: 11px;




  font-weight: 700;




  color: #e2e8f0;




  text-transform: uppercase;




  letter-spacing: 0.5px;




}









.partner-categories-grid {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));




  gap: 16px;




}









.partner-category-item {




  display: flex;




  align-items: center;




  gap: 12px;




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(255, 255, 255, 0.08);




  padding: 16px;




  border-radius: 14px;




  transition: all 0.25s ease;




}









.partner-category-item:hover {




  background: rgba(46, 196, 160, 0.12);




  border-color: rgba(46, 196, 160, 0.35);




  transform: translateY(-2px);




}









.pcat-icon {




  font-size: 24px;




  width: 42px;




  height: 42px;




  border-radius: 10px;




  background: rgba(255, 255, 255, 0.1);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.pcat-info strong {




  font-size: 13px;




  color: #ffffff;




  display: block;




  margin-bottom: 2px;




}









.pcat-info span {




  font-size: 11px;




  color: #94a3b8;




}









@media (max-width: 768px) {




  header {




    height: 82px;




  }




  .logo {




    height: 68px;




  }




  .logo img {




    height: 62px;




    max-height: 62px;




  }




  .partnerships-banner-card {




    padding: 24px 20px;




  }




  .bureau-cards-grid {




    grid-template-columns: 1fr;




  }




  .partner-categories-grid {




    grid-template-columns: 1fr;




  }




}














/* Header & Navigation */




header {




  position: sticky;




  top: 0;




  z-index: 100;




  height: 102px;




  background-color: rgba(255, 255, 255, 0.96);




  backdrop-filter: blur(10px);




  -webkit-backdrop-filter: blur(10px);




  border-bottom: 1px solid var(--border-color);




  display: flex;




  align-items: center;




  transition: all 0.3s ease;




}









.logo {




  display: flex;




  align-items: center;




  height: 88px;




}









.logo img {




  height: 80px;




  max-height: 80px;




  width: auto;




  object-fit: contain;




  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);




  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));




}









.logo:hover img {




  transform: scale(1.05);




}














/* ==========================================================================




   UPDATED APP DOWNLOAD & PLAY STORE VIDEO TRAILER




   ========================================================================== */




.download-section {




  background: linear-gradient(135deg, #1B3A57 0%, #0f2438 100%);




  color: #ffffff;




  padding: 85px 0;




  border-bottom: 1px solid rgba(255, 255, 255, 0.1);




  position: relative;




  z-index: 10;




  overflow: hidden;




}









.download-main-grid {




  display: grid;




  grid-template-columns: 1.15fr 0.85fr;




  gap: 40px;




  align-items: center;




}









.app-rating-pill {




  display: inline-flex;




  align-items: center;




  gap: 8px;




  background: rgba(46, 196, 160, 0.15);




  border: 1px solid rgba(46, 196, 160, 0.35);




  padding: 6px 14px;




  border-radius: 30px;




  margin-bottom: 16px;




}









.rating-stars {




  color: #FFB300;




  font-size: 13px;




  letter-spacing: 2px;




}









.rating-text {




  font-size: 12px;




  font-weight: 700;




  color: #2EC4A0;




  letter-spacing: 0.3px;




}









.download-text-col h2 {




  color: #ffffff;




  font-size: 32px;




  font-weight: 800;




  line-height: 1.25;




  margin-bottom: 12px;




}









.download-sub {




  color: #cbd5e1;




  font-size: 15px;




  line-height: 1.6;




  margin-bottom: 24px;




}









.app-feature-bullets {




  display: flex;




  flex-direction: column;




  gap: 10px;




  margin-bottom: 30px;




}









.app-bullet {




  display: flex;




  align-items: center;




  gap: 10px;




  font-size: 14px;




  color: #e2e8f0;




  font-weight: 600;




}









.bullet-check {




  width: 20px;




  height: 20px;




  border-radius: 50%;




  background: rgba(46, 196, 160, 0.2);




  color: #2EC4A0;




  display: inline-flex;




  align-items: center;




  justify-content: center;




  font-size: 12px;




  font-weight: 900;




  flex-shrink: 0;




}









/* Updated Vector Store Badges */




.download-badges-wrapper {




  display: flex;




  gap: 16px;




  flex-wrap: wrap;




}









.store-badge-card {




  display: inline-flex;




  align-items: center;




  gap: 14px;




  background: #000000;




  color: #ffffff;




  padding: 10px 20px;




  border-radius: 12px;




  border: 1px solid rgba(255, 255, 255, 0.2);




  text-decoration: none;




  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);




  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);




}









.store-badge-card:hover {




  transform: translateY(-3px);




  border-color: #2EC4A0;




  box-shadow: 0 10px 28px rgba(46, 196, 160, 0.25);




  background: #0a0a0a;




}









.badge-icon-box {




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.badge-text-box {




  display: flex;




  flex-direction: column;




  text-align: left;




  line-height: 1.15;




}









.badge-sub {




  font-size: 10px;




  font-weight: 500;




  color: #94a3b8;




  letter-spacing: 0.5px;




  text-transform: uppercase;




}









.badge-main {




  font-size: 17px;




  font-weight: 700;




  color: #ffffff;




  font-family: inherit;




}









/* App Trailer Card */




.app-trailer-card {




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(46, 196, 160, 0.35);




  border-radius: 22px;




  padding: 20px;




  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);




  backdrop-filter: blur(12px);




}









.trailer-header {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 14px;




}









.trailer-tag {




  font-size: 12px;




  font-weight: 800;




  color: #2EC4A0;




  display: flex;




  align-items: center;




  gap: 6px;




  text-transform: uppercase;




  letter-spacing: 0.5px;




}









.play-indicator-dot {




  width: 8px;




  height: 8px;




  border-radius: 50%;




  background: #FF5252;




  box-shadow: 0 0 0 2px rgba(255, 82, 82, 0.4);




  animation: pulse-ring 1.5s infinite;




}









.trailer-duration {




  font-size: 11px;




  font-weight: 700;




  color: #94a3b8;




  background: rgba(255, 255, 255, 0.1);




  padding: 3px 8px;




  border-radius: 6px;




}









.video-preview-frame {




  position: relative;




  border-radius: 14px;




  overflow: hidden;




  background: #000000;




  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);




  aspect-ratio: 16/10;




  cursor: pointer;




}









.video-thumbnail-wrap {




  width: 100%;




  height: 100%;




  position: relative;




  display: flex;




  align-items: center;




  justify-content: center;




}









.trailer-thumb-img {




  width: 100%;




  height: 100%;




  object-fit: cover;




  transition: transform 0.4s ease;




}









.video-thumbnail-wrap:hover .trailer-thumb-img {




  transform: scale(1.04);




}









.video-overlay-backdrop {




  position: absolute;




  top: 0;




  left: 0;




  width: 100%;




  height: 100%;




  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);




}









.play-button-circle {




  position: absolute;




  width: 60px;




  height: 60px;




  border-radius: 50%;




  background: rgba(46, 196, 160, 0.9);




  display: flex;




  align-items: center;




  justify-content: center;




  box-shadow: 0 0 24px rgba(46, 196, 160, 0.7);




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




  z-index: 2;




}









.play-button-circle svg {




  margin-left: 3px;




}









.video-thumbnail-wrap:hover .play-button-circle {




  transform: scale(1.12);




  background: #2EC4A0;




  box-shadow: 0 0 32px rgba(46, 196, 160, 0.9);




}









.video-caption-overlay {




  position: absolute;




  bottom: 12px;




  left: 14px;




  right: 14px;




  z-index: 2;




  text-align: left;




}









.video-caption-overlay strong {




  display: block;




  font-size: 14px;




  color: #ffffff;




  margin-bottom: 2px;




}









.video-caption-overlay span {




  display: block;




  font-size: 11px;




  color: #cbd5e1;




}









.trailer-footer-bar {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-top: 14px;




  padding-top: 12px;




  border-top: 1px solid rgba(255, 255, 255, 0.1);




  flex-wrap: wrap;




  gap: 10px;




}









.trailer-verified {




  font-size: 12px;




  color: #cbd5e1;




  font-weight: 600;




  display: flex;




  align-items: center;




  gap: 6px;




}









.btn-xs {




  padding: 6px 14px;




  font-size: 12px;




  font-weight: 700;




  border-radius: 8px;




}









.btn-outline-light {




  border: 1px solid rgba(255, 255, 255, 0.3);




  color: #ffffff;




  background: rgba(255, 255, 255, 0.05);




  text-decoration: none;




  transition: all 0.2s ease;




}









.btn-outline-light:hover {




  border-color: #2EC4A0;




  color: #2EC4A0;




  background: rgba(46, 196, 160, 0.1);




}









/* Footer store badges */




.footer-store-badge {




  display: inline-flex;




  align-items: center;




  gap: 0.5rem;




  background: rgba(255, 255, 255, 0.08);




  border: 1px solid rgba(255, 255, 255, 0.16);




  color: rgba(255, 255, 255, 0.85);




  padding: 0.55rem 1.15rem;




  border-radius: 50px;




  font-size: 0.8rem;




  font-weight: 700;




  transition: all var(--transition-fast);




  text-decoration: none;




}









.footer-store-badge svg {




  display: block;




}









@media (max-width: 991px) {




  .download-main-grid {




    grid-template-columns: 1fr;




    text-align: center;




  }




  .download-text-col {




    display: flex;




    flex-direction: column;




    align-items: center;




  }




  .app-feature-bullets {




    align-items: flex-start;




  }




  .download-badges-wrapper {




    justify-content: center;




  }




}



















/* ==========================================================================




   REDESIGNED PERSISTENT WEBSITE FOOTER




   ========================================================================== */




footer {




  background: linear-gradient(180deg, #1B3A57 0%, #0c1c2b 100%);




  color: rgba(255, 255, 255, 0.7);




  padding: 5.5rem 0 2.5rem;




  font-size: 0.875rem;




  border-top: 1px solid rgba(46, 196, 160, 0.2);




  position: relative;




  z-index: 10;




}









.footer-top-row {




  display: flex;




  justify-content: space-between;




  align-items: flex-start;




  gap: 3.5rem;




  padding-bottom: 3rem;




  flex-wrap: wrap;




}









.footer-brand {




  max-width: 460px;




  display: flex;




  flex-direction: column;




  gap: 1.25rem;




}









.footer-logo {




  display: inline-flex;




  align-items: center;




  background-color: #ffffff;




  padding: 0.75rem 1.4rem;




  border-radius: 14px;




  width: fit-content;




  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(46, 196, 160, 0.35);




  transition: all 0.3s ease;




}









.footer-logo:hover {




  transform: translateY(-2px);




  box-shadow: 0 12px 30px rgba(46, 196, 160, 0.35), 0 0 0 1.5px rgba(46, 196, 160, 0.5);




}









.footer-logo img {




  height: 52px;




  max-height: 52px;




  width: auto;




  object-fit: contain;




  display: block;




}









.company-badge-pill {




  display: inline-flex;




  align-items: center;




  gap: 8px;




  background: rgba(46, 196, 160, 0.15);




  border: 1px solid rgba(46, 196, 160, 0.35);




  color: #2EC4A0;




  font-size: 0.85rem;




  font-weight: 700;




  padding: 0.4rem 1rem;




  border-radius: 20px;




  letter-spacing: 0.3px;




  width: fit-content;




}









.footer-brand-desc {




  font-size: 0.875rem;




  line-height: 1.65;




  color: rgba(255, 255, 255, 0.65);




}









/* Social Media Section */




.footer-social-wrapper {




  display: flex;




  align-items: center;




  gap: 14px;




  margin-top: 4px;




  flex-wrap: wrap;




}









.social-label {




  font-size: 0.8rem;




  font-weight: 700;




  text-transform: uppercase;




  letter-spacing: 0.5px;




  color: rgba(255, 255, 255, 0.5);




}









.footer-social-icons {




  display: flex;




  gap: 10px;




}









.social-icon-btn {




  width: 38px;




  height: 38px;




  border-radius: 50%;




  background: rgba(255, 255, 255, 0.08);




  border: 1px solid rgba(255, 255, 255, 0.15);




  color: #ffffff;




  display: flex;




  align-items: center;




  justify-content: center;




  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);




  text-decoration: none;




}









.social-icon-btn:hover {




  transform: translateY(-3px);




  background: #2EC4A0;




  border-color: #2EC4A0;




  color: #1B3A57;




  box-shadow: 0 6px 18px rgba(46, 196, 160, 0.4);




}









.social-icon-btn.instagram:hover {




  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);




  border-color: transparent;




  color: #ffffff;




  box-shadow: 0 6px 18px rgba(253, 29, 29, 0.4);




}









.social-icon-btn.facebook:hover {




  background: #1877F2;




  border-color: #1877F2;




  color: #ffffff;




  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.4);




}









.social-icon-btn.youtube:hover {




  background: #FF0000;




  border-color: #FF0000;




  color: #ffffff;




  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.4);




}









.social-icon-btn.linkedin:hover {




  background: #0A66C2;




  border-color: #0A66C2;




  color: #ffffff;




  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.4);




}









/* Tagline & Store Buttons */




.footer-tagline-block {




  text-align: right;




  display: flex;




  flex-direction: column;




  align-items: flex-end;




  gap: 1.25rem;




}









.footer-tagline {




  font-family: 'Outfit', sans-serif;




  font-size: 1.4rem;




  font-weight: 800;




  color: rgba(255, 255, 255, 0.95);




  line-height: 1.3;




  margin: 0;




}









.footer-trust-pills {




  display: flex;




  gap: 0.6rem;




  flex-wrap: wrap;




  justify-content: flex-end;




}









.footer-store-buttons {




  display: flex;




  gap: 0.75rem;




  flex-wrap: wrap;




  justify-content: flex-end;




}









.footer-store-badge {




  display: inline-flex;




  align-items: center;




  gap: 0.5rem;




  background: rgba(255, 255, 255, 0.08);




  border: 1px solid rgba(255, 255, 255, 0.16);




  color: rgba(255, 255, 255, 0.85);




  padding: 0.55rem 1.15rem;




  border-radius: 50px;




  font-size: 0.8rem;




  font-weight: 700;




  transition: all var(--transition-fast);




  text-decoration: none;




}









.footer-store-badge:hover {




  background: rgba(46, 196, 160, 0.15);




  border-color: rgba(46, 196, 160, 0.4);




  color: var(--accent);




}









.footer-divider {




  height: 1px;




  background: linear-gradient(




    90deg,




    transparent 0%,




    rgba(255, 255, 255, 0.12) 20%,




    rgba(46, 196, 160, 0.35) 50%,




    rgba(255, 255, 255, 0.12) 80%,




    transparent 100%




  );




  margin-bottom: 3.5rem;




}









/* Nav Columns */




.footer-nav-columns {




  display: flex;




  flex-direction: row;




  align-items: flex-start;




  gap: 0;




  margin-bottom: 3.5rem;




}









.footer-nav-col {




  flex: 1;




  padding: 0 2.5rem;




}









.footer-nav-col:first-child {




  padding-left: 0;




}









.footer-nav-col:last-child {




  padding-right: 0;




}









.footer-col-separator {




  width: 1px;




  align-self: stretch;




  background: linear-gradient(




    180deg,




    transparent 0%,




    rgba(255, 255, 255, 0.12) 20%,




    rgba(255, 255, 255, 0.12) 80%,




    transparent 100%




  );




  flex-shrink: 0;




}









.footer-col-heading {




  font-family: 'Outfit', sans-serif;




  color: var(--bg-white);




  font-size: 0.75rem;




  font-weight: 900;




  text-transform: uppercase;




  letter-spacing: 0.18em;




  margin-bottom: 1.5rem;




  display: flex;




  align-items: center;




  gap: 0.5rem;




}









.footer-col-heading::after {




  content: '';




  flex: 1;




  height: 1px;




  background: rgba(255, 255, 255, 0.1);




  display: block;




}









.footer-links {




  list-style: none;




  display: flex;




  flex-direction: column;




  gap: 0.85rem;




}









.footer-links a {




  color: rgba(255, 255, 255, 0.65);




  font-weight: 600;




  font-size: 0.85rem;




  transition: all var(--transition-fast);




  display: inline-block;




  text-decoration: none;




}









.footer-links a:hover {




  color: var(--accent);




  transform: translateX(4px);




}









/* Bottom Bar */




.footer-bottom {




  border-top: 1px solid rgba(255, 255, 255, 0.1);




  padding-top: 2rem;




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 1.5rem;




  font-size: 0.8rem;




  color: rgba(255, 255, 255, 0.5);




}









.copyright-text p {




  margin: 0 0 4px 0;




  color: rgba(255, 255, 255, 0.85);




}









.copyright-text strong {




  color: #2EC4A0;




}









.corp-cin {




  font-size: 0.725rem;




  color: rgba(255, 255, 255, 0.45);




}









.footer-bureau-compliance strong {




  color: rgba(255, 255, 255, 0.85);




}









@media (max-width: 991px) {




  .footer-top-row {




    flex-direction: column;




    align-items: flex-start;




    gap: 2rem;




  }




  .footer-tagline-block {




    text-align: left;




    align-items: flex-start;




  }




  .footer-trust-pills, .footer-store-buttons {




    justify-content: flex-start;




  }




  .footer-nav-columns {




    flex-direction: column;




    gap: 2rem;




  }




  .footer-nav-col {




    padding: 0;




    width: 100%;




  }




  .footer-col-separator {




    display: none;




  }




  .footer-bottom {




    flex-direction: column;




    text-align: center;




    align-items: center;




    gap: 1rem;




  }




}



















/* ==========================================================================




   HERO CREDIT CHECK FORM (APP REDIRECT)




   ========================================================================== */




.hero-credit-check-card {




  padding: 28px 26px;




  border-radius: 22px;




  background: rgba(255, 255, 255, 0.95);




  border: 1.5px solid rgba(46, 196, 160, 0.35);




  box-shadow: 0 16px 45px rgba(27, 58, 87, 0.12);




  backdrop-filter: blur(12px);




  position: relative;




  z-index: 5;




}









.check-card-header {




  margin-bottom: 20px;




  text-align: left;




}









.check-card-badge {




  display: inline-flex;




  align-items: center;




  gap: 6px;




  background: rgba(46, 196, 160, 0.12);




  color: #0f766e;




  font-size: 11px;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.5px;




  padding: 4px 10px;




  border-radius: 20px;




  margin-bottom: 8px;




}









.check-card-header h3 {




  font-size: 20px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 4px;




}









.check-card-sub {




  font-size: 12px;




  color: #64748b;




  line-height: 1.4;




  margin: 0;




}









.hero-check-form {




  display: flex;




  flex-direction: column;




  gap: 14px;




}









.form-group-hero {




  display: flex;




  flex-direction: column;




  gap: 4px;




  text-align: left;




}









.hero-field-label {




  font-size: 12px;




  font-weight: 700;




  color: #1B3A57;




}









.hero-input-wrap {




  display: flex;




  align-items: center;




  background: #f8fafc;




  border: 1.5px solid #e2e8f0;




  border-radius: 10px;




  padding: 0 12px;




  transition: all 0.2s ease;




}









.hero-input-wrap:focus-within {




  border-color: #2EC4A0;




  background: #ffffff;




  box-shadow: 0 0 0 3px rgba(46, 196, 160, 0.15);




}









.hero-input-icon {




  font-size: 15px;




  margin-right: 8px;




  color: #94a3b8;




}









.hero-input-prefix {




  font-size: 14px;




  font-weight: 700;




  color: #1B3A57;




  margin-right: 6px;




}









.hero-input-field {




  flex: 1;




  border: none;




  background: transparent;




  padding: 10px 0;




  font-size: 14px;




  font-weight: 600;




  color: #1B3A57;




  outline: none;




}









.hero-input-field.pan-field {




  text-transform: uppercase;




  letter-spacing: 1px;




}









.hero-consent-row {




  display: flex;




  align-items: flex-start;




  gap: 8px;




  text-align: left;




  margin: 2px 0 4px 0;




}









.hero-consent-check {




  margin-top: 3px;




  accent-color: #2EC4A0;




  cursor: pointer;




}









.hero-consent-label {




  font-size: 11px;




  color: #64748b;




  line-height: 1.4;




  cursor: pointer;




}









.hero-consent-label a {




  color: #2EC4A0;




  text-decoration: underline;




}









.hero-check-submit-btn {




  width: 100%;




  padding: 12px 20px;




  font-size: 15px;




  font-weight: 800;




  border-radius: 12px;




  box-shadow: 0 6px 20px rgba(46, 196, 160, 0.35);




  cursor: pointer;




}









.check-card-trust-row {




  display: flex;




  justify-content: space-between;




  font-size: 11px;




  font-weight: 700;




  color: #0f766e;




  padding: 4px 2px 0;




}









/* ==========================================================================




   OVERDUE CLOSURE & SETTLEMENT SECTION




   ========================================================================== */




.overdue-settlement-section {




  padding: 85px 0;




  background: linear-gradient(180deg, rgba(27, 58, 87, 0.03) 0%, rgba(46, 196, 160, 0.06) 100%);




  position: relative;




}









.settlement-steps-flow {




  display: grid;




  grid-template-columns: repeat(5, 1fr);




  gap: 16px;




  align-items: stretch;




  margin-bottom: 36px;




}









.settlement-step-card {




  padding: 24px 20px;




  border-radius: 18px;




  background: #ffffff;




  border: 1px solid rgba(46, 196, 160, 0.2);




  box-shadow: 0 8px 24px rgba(27, 58, 87, 0.05);




  position: relative;




  display: flex;




  flex-direction: column;




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




}









.settlement-step-card:hover {




  transform: translateY(-4px);




  border-color: #2EC4A0;




  box-shadow: 0 14px 32px rgba(46, 196, 160, 0.18);




}









.settlement-step-card.highlight {




  background: linear-gradient(135deg, rgba(46, 196, 160, 0.08) 0%, rgba(27, 58, 87, 0.04) 100%);




  border: 1.5px solid #2EC4A0;




}









.step-num-badge {




  position: absolute;




  top: -12px;




  left: 20px;




  width: 28px;




  height: 28px;




  border-radius: 50%;




  background: #1B3A57;




  color: #ffffff;




  font-size: 13px;




  font-weight: 900;




  display: flex;




  align-items: center;




  justify-content: center;




  box-shadow: 0 4px 10px rgba(27, 58, 87, 0.25);




}









.step-num-badge.active {




  background: #2EC4A0;




  color: #1B3A57;




  box-shadow: 0 4px 12px rgba(46, 196, 160, 0.4);




}









.step-icon-wrap {




  font-size: 28px;




  margin: 8px 0 12px 0;




}









.step-title {




  font-size: 18px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 2px;




}









.step-subtitle {




  font-size: 11px;




  font-weight: 700;




  color: #0d9488;




  text-transform: uppercase;




  letter-spacing: 0.5px;




  margin-bottom: 10px;




  display: inline-block;




}









.step-desc {




  font-size: 13px;




  color: #475569;




  line-height: 1.5;




  margin-bottom: 16px;




  flex-grow: 1;




}









.step-checklist {




  list-style: none;




  padding: 0;




  margin: 0;




  display: flex;




  flex-direction: column;




  gap: 6px;




  border-top: 1px dashed #e2e8f0;




  padding-top: 12px;




}









.step-checklist li {




  font-size: 12px;




  font-weight: 600;




  color: #1B3A57;




  display: flex;




  align-items: center;




  gap: 6px;




}









.step-checklist li span {




  color: #2EC4A0;




  font-weight: 900;




}









.step-connector-arrow {




  display: none;




}









/* Settlement CTA Card */




.settlement-cta-card {




  padding: 28px 32px;




  border-radius: 20px;




  background: linear-gradient(135deg, #1B3A57 0%, #0c1c2b 100%);




  color: #ffffff;




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 20px;




  box-shadow: 0 16px 40px rgba(27, 58, 87, 0.2);




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.settlement-cta-left {




  display: flex;




  align-items: center;




  gap: 18px;




  max-width: 650px;




}









.cta-icon-box {




  font-size: 32px;




  width: 54px;




  height: 54px;




  border-radius: 14px;




  background: rgba(46, 196, 160, 0.15);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.settlement-cta-left h4 {




  font-size: 18px;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 4px;




}









.settlement-cta-left p {




  font-size: 13px;




  color: #cbd5e1;




  margin: 0;




  line-height: 1.5;




}









/* ==========================================================================




   EDUCATIONAL VIDEO GUIDE SECTION




   ========================================================================== */




.video-tutorial-section {




  padding: 85px 0;




  background: #ffffff;




  position: relative;




}









.video-tutorial-grid {




  display: grid;




  grid-template-columns: 1.15fr 0.85fr;




  gap: 36px;




  align-items: center;




}









.video-player-card {




  border-radius: 22px;




  overflow: hidden;




  background: #000000;




  box-shadow: 0 20px 50px rgba(27, 58, 87, 0.18);




  border: 1.5px solid rgba(46, 196, 160, 0.3);




}









.video-embed-container {




  width: 100%;




  aspect-ratio: 16/10;




  position: relative;




  overflow: hidden;




}









.video-stage {




  width: 100%;




  height: 100%;




  position: relative;




  cursor: pointer;




  display: flex;




  align-items: center;




  justify-content: center;




}









.video-poster-img {




  width: 100%;




  height: 100%;




  object-fit: cover;




  transition: transform 0.4s ease;




}









.video-stage:hover .video-poster-img {




  transform: scale(1.04);




}









.video-stage-overlay {




  position: absolute;




  top: 0;




  left: 0;




  width: 100%;




  height: 100%;




  background: linear-gradient(180deg, rgba(27, 58, 87, 0.2) 0%, rgba(12, 28, 43, 0.85) 100%);




}









.video-play-button-big {




  position: absolute;




  width: 72px;




  height: 72px;




  border-radius: 50%;




  background: #2EC4A0;




  display: flex;




  align-items: center;




  justify-content: center;




  box-shadow: 0 0 30px rgba(46, 196, 160, 0.8);




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




  z-index: 2;




}









.video-play-button-big svg {




  margin-left: 4px;




}









.video-stage:hover .video-play-button-big {




  transform: scale(1.15);




  box-shadow: 0 0 45px rgba(46, 196, 160, 1);




}









.video-badge-runtime {




  position: absolute;




  top: 16px;




  right: 16px;




  background: rgba(0, 0, 0, 0.65);




  color: #ffffff;




  font-size: 11px;




  font-weight: 800;




  padding: 4px 10px;




  border-radius: 6px;




  backdrop-filter: blur(4px);




  z-index: 2;




}









.video-caption-bar {




  position: absolute;




  bottom: 16px;




  left: 18px;




  right: 18px;




  z-index: 2;




  text-align: left;




}









.video-caption-bar strong {




  display: block;




  font-size: 16px;




  color: #ffffff;




  margin-bottom: 2px;




}









.video-caption-bar span {




  display: block;




  font-size: 12px;




  color: #cbd5e1;




}









/* Chapters Column */




.chapters-card {




  padding: 30px 28px;




  border-radius: 20px;




  background: #f8fafc;




  border: 1px solid #e2e8f0;




}









.chapters-title {




  font-size: 18px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 20px;




}









.video-chapter-item {




  display: flex;




  gap: 14px;




  padding: 14px;




  border-radius: 12px;




  background: #ffffff;




  border: 1px solid #e2e8f0;




  margin-bottom: 12px;




  cursor: pointer;




  transition: all 0.25s ease;




}









.video-chapter-item:hover, .video-chapter-item.active {




  border-color: #2EC4A0;




  background: rgba(46, 196, 160, 0.05);




  transform: translateX(4px);




}









.chapter-num {




  width: 34px;




  height: 34px;




  border-radius: 10px;




  background: rgba(46, 196, 160, 0.15);




  color: #0f766e;




  font-size: 13px;




  font-weight: 900;




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.chapter-content h4 {




  font-size: 14px;




  font-weight: 700;




  color: #1B3A57;




  margin-bottom: 3px;




}









.chapter-content p {




  font-size: 12px;




  color: #64748b;




  line-height: 1.4;




  margin-bottom: 4px;




}









.chapter-time {




  font-size: 11px;




  font-weight: 700;




  color: #0d9488;




}









.chapters-cta-row {




  margin-top: 20px;




}









.btn-block {




  width: 100%;




  text-align: center;




}









@media (max-width: 1100px) {




  .settlement-steps-flow {




    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));




  }




}









@media (max-width: 991px) {




  .video-tutorial-grid {




    grid-template-columns: 1fr;




  }




}









@media (max-width: 768px) {




  .settlement-steps-flow {




    grid-template-columns: 1fr;




  }




  .settlement-cta-card {




    flex-direction: column;




    text-align: center;




  }




  .settlement-cta-left {




    flex-direction: column;




    text-align: center;




  }




}



















/* ==========================================================================




   CLEAN & POLISHED BLOG SYSTEM STYLES




   ========================================================================== */









/* Article Reader Page */




.blog-reader-page {




  background: #f8fafc;




}









.article-page-main {




  padding-top: 105px;




  padding-bottom: 70px;




  min-height: 80vh;




}









.article-container {




  max-width: 840px;




  margin: 0 auto;




  padding: 0 20px;




}









/* Breadcrumbs */




.reader-breadcrumbs {




  display: flex;




  align-items: center;




  flex-wrap: wrap;




  gap: 8px;




  font-size: 13px;




  font-weight: 700;




  color: #64748b;




  margin-bottom: 24px;




}









.reader-breadcrumbs a {




  color: #0d9488;




  text-decoration: none;




  transition: color 0.2s;




}









.reader-breadcrumbs a:hover {




  color: #2EC4A0;




}









.bc-sep {




  color: #cbd5e1;




  font-size: 14px;




}









.bc-current {




  color: #1B3A57;




}









/* Header block */




.reader-header {




  margin-bottom: 28px;




  text-align: left;




}









.reader-meta-bar {




  display: flex;




  align-items: center;




  flex-wrap: wrap;




  gap: 12px;




  margin-bottom: 16px;




}









.reader-category-pill {




  display: inline-flex;




  align-items: center;




  background: rgba(46, 196, 160, 0.14);




  color: #0d9488;




  border: 1px solid rgba(46, 196, 160, 0.4);




  font-size: 11.5px;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.5px;




  padding: 4px 12px;




  border-radius: 6px;




}









.reader-meta-item {




  font-size: 12.5px;




  font-weight: 700;




  color: #64748b;




}









.reader-title {




  font-size: 34px;




  font-weight: 900;




  color: #1B3A57;




  line-height: 1.35;




  margin: 0 0 16px 0;




  letter-spacing: -0.5px;




}









.reader-lead {




  font-size: 16.5px;




  color: #475569;




  line-height: 1.65;




  margin: 0 0 24px 0;




}









/* Author Banner */




.reader-author-card {




  display: flex;




  align-items: center;




  gap: 14px;




  padding: 14px 18px;




  border-radius: 14px;




  background: #ffffff;




  border: 1px solid #e2e8f0;




  box-shadow: 0 4px 12px rgba(27, 58, 87, 0.03);




}









.reader-avatar {




  width: 42px;




  height: 42px;




  border-radius: 50%;




  background: linear-gradient(135deg, #2EC4A0, #1B3A57);




  color: #ffffff;




  font-size: 14px;




  font-weight: 900;




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.reader-author-info strong {




  display: block;




  font-size: 14px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 2px;




}









.reader-author-info span {




  display: block;




  font-size: 11.5px;




  color: #64748b;




}









.reader-date {




  margin-left: auto;




  font-size: 12.5px;




  font-weight: 700;




  color: #0d9488;




  white-space: nowrap;




}









/* Banner Box */




.reader-banner-box {




  border-radius: 20px;




  overflow: hidden;




  max-height: 380px;




  margin-bottom: 32px;




  background: #0f172a;




  border: 1px solid #e2e8f0;




  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.06);




}









.reader-cover-img {




  width: 100%;




  height: 100%;




  max-height: 380px;




  object-fit: cover;




  display: block;




}









/* Article Rich Content */




.reader-content-body {




  background: #ffffff;




  border-radius: 20px;




  padding: 36px 32px;




  border: 1px solid #e2e8f0;




  box-shadow: 0 4px 20px rgba(27, 58, 87, 0.03);




  font-size: 16px;




  color: #334155;




  line-height: 1.8;




  margin-bottom: 28px;




}









.reader-content-body h2 {




  font-size: 22px;




  font-weight: 900;




  color: #1B3A57;




  margin: 28px 0 12px 0;




  padding-bottom: 6px;




  border-bottom: 2px solid rgba(46, 196, 160, 0.2);




}









.reader-content-body h2:first-child {




  margin-top: 0;




}









.reader-content-body h3 {




  font-size: 18px;




  font-weight: 800;




  color: #1B3A57;




  margin: 22px 0 10px 0;




}









.reader-content-body p {




  margin-bottom: 18px;




}









.reader-content-body ul, .reader-content-body ol {




  margin: 0 0 20px 24px;




}









.reader-content-body li {




  margin-bottom: 8px;




}









/* Share Row */




.reader-share-row {




  display: flex;




  align-items: center;




  justify-content: space-between;




  padding: 16px 20px;




  border-radius: 14px;




  background: #ffffff;




  border: 1px solid #e2e8f0;




  margin-bottom: 28px;




}









.share-title {




  font-size: 13.5px;




  font-weight: 800;




  color: #1B3A57;




}









.share-btn-group {




  display: flex;




  gap: 10px;




}









.share-btn-item {




  padding: 8px 16px;




  border-radius: 8px;




  font-size: 12px;




  font-weight: 800;




  border: none;




  cursor: pointer;




  transition: all 0.2s ease;




}









.share-btn-item.wa {




  background: #25D366;




  color: #ffffff;




}









.share-btn-item.li {




  background: #0A66C2;




  color: #ffffff;




}









.share-btn-item.cp {




  background: #1B3A57;




  color: #ffffff;




}









.share-btn-item:hover {




  opacity: 0.9;




  transform: translateY(-2px);




}









/* CTA Box */




.reader-cta-box {




  padding: 32px 28px;




  border-radius: 20px;




  background: linear-gradient(135deg, rgba(46, 196, 160, 0.12) 0%, rgba(27, 58, 87, 0.05) 100%);




  border: 1.5px solid #2EC4A0;




  text-align: center;




  margin-bottom: 28px;




}









.reader-cta-badge {




  display: inline-block;




  background: #2EC4A0;




  color: #1B3A57;




  font-size: 11px;




  font-weight: 900;




  padding: 4px 12px;




  border-radius: 20px;




  margin-bottom: 10px;




}









.reader-cta-box h3 {




  font-size: 20px;




  font-weight: 800;




  color: #1B3A57;




  margin-bottom: 8px;




}









.reader-cta-box p {




  font-size: 13.5px;




  color: #475569;




  max-width: 500px;




  margin: 0 auto 18px auto;




}









.reader-back-row {




  text-align: center;




  margin-top: 20px;




}









/* Blogs Hub Page */




.blogs-hub-page {




  background: #f8fafc;




}









.blogs-hub-hero {




  padding: 120px 0 35px 0;




  background: linear-gradient(180deg, rgba(27, 58, 87, 0.04) 0%, rgba(46, 196, 160, 0.08) 100%);




}









.blogs-hero-content {




  max-width: 820px;




  margin: 0 auto;




}









.blogs-hero-content h1 {




  font-size: 38px;




  font-weight: 900;




  color: #1B3A57;




  margin-bottom: 12px;




}









.blogs-hero-content h1 span {




  color: #2EC4A0;




}









.blog-search-box {




  position: relative;




  max-width: 580px;




  margin: 22px auto 18px auto;




  display: flex;




  align-items: center;




  background: #ffffff;




  border: 1.5px solid #cbd5e1;




  border-radius: 14px;




  padding: 0 16px;




  box-shadow: 0 8px 24px rgba(27, 58, 87, 0.08);




}









.blog-search-box:focus-within {




  border-color: #2EC4A0;




  box-shadow: 0 0 0 3px rgba(46, 196, 160, 0.2);




}









.blog-search-box .search-icon {




  font-size: 18px;




  margin-right: 10px;




}









.blog-search-box input {




  flex: 1;




  border: none;




  outline: none;




  font-size: 15px;




  padding: 14px 0;




  font-weight: 600;




  color: #1B3A57;




  background: transparent;




}









.blog-category-chips {




  display: flex;




  flex-wrap: wrap;




  gap: 10px;




  justify-content: center;




  margin-top: 14px;




}









.cat-chip {




  padding: 8px 18px;




  border-radius: 20px;




  font-size: 13px;




  font-weight: 700;




  background: #ffffff;




  border: 1.5px solid #e2e8f0;




  color: #475569;




  cursor: pointer;




  transition: all 0.2s ease;




}









.cat-chip:hover, .cat-chip.active {




  background: #1B3A57;




  border-color: #1B3A57;




  color: #ffffff;




  transform: translateY(-2px);




}









/* Featured Article Section */




.featured-article-section {




  padding: 35px 0;




}









.featured-article-card {




  display: grid;




  grid-template-columns: 1.1fr 1.3fr;




  gap: 32px;




  border-radius: 24px;




  overflow: hidden;




  padding: 28px;




  background: #ffffff;




  border: 1.5px solid rgba(46, 196, 160, 0.35);




  box-shadow: 0 16px 40px rgba(27, 58, 87, 0.08);




}









.featured-media {




  position: relative;




  border-radius: 18px;




  overflow: hidden;




  height: 280px;




  background: #0f172a;




}









.featured-img {




  width: 100%;




  height: 100%;




  object-fit: cover;




}









.featured-pill {




  position: absolute;




  top: 14px;




  left: 14px;




  background: #2EC4A0;




  color: #1B3A57;




  font-size: 11px;




  font-weight: 900;




  padding: 5px 12px;




  border-radius: 6px;




  text-transform: uppercase;




}









.featured-details {




  display: flex;




  flex-direction: column;




  justify-content: center;




}









.featured-title {




  font-size: 24px;




  font-weight: 900;




  color: #1B3A57;




  margin: 10px 0 12px 0;




}









.featured-title a {




  color: #1B3A57;




  text-decoration: none;




}









.featured-title a:hover {




  color: #2EC4A0;




}









.featured-excerpt {




  font-size: 14px;




  color: #475569;




  line-height: 1.6;




  margin-bottom: 20px;




}









.featured-footer {




  display: flex;




  align-items: center;




  justify-content: space-between;




  flex-wrap: wrap;




  gap: 16px;




}









/* All Articles Grid */




.all-articles-section {




  padding: 25px 0 60px 0;




}









.section-title-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 24px;




}









.section-title-row h3 {




  font-size: 22px;




  font-weight: 800;




  color: #1B3A57;




}









.results-count {




  font-size: 13px;




  font-weight: 700;




  color: #64748b;




}









.blogs-grid {




  display: grid;




  grid-template-columns: repeat(3, 1fr);




  gap: 28px;




  align-items: stretch;




  margin-bottom: 40px;




}









.blog-card {




  border-radius: 20px;




  overflow: hidden;




  background: #ffffff;




  border: 1.5px solid rgba(46, 196, 160, 0.22);




  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.06);




  display: flex;




  flex-direction: column;




  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);




}









.blog-card:hover {




  transform: translateY(-8px);




  border-color: #2EC4A0;




  box-shadow: 0 18px 45px rgba(46, 196, 160, 0.22);




}









.blog-card-media {




  position: relative;




  width: 100%;




  height: 200px;




  overflow: hidden;




  background: #0f172a;




}









.blog-card-img {




  width: 100%;




  height: 100%;




  object-fit: cover;




  transition: transform 0.4s ease;




}









.blog-card:hover .blog-card-img {




  transform: scale(1.08);




}









.blog-card-body {




  padding: 22px 20px;




  display: flex;




  flex-direction: column;




  flex-grow: 1;




}









.blog-meta-row {




  display: flex;




  align-items: center;




  justify-content: space-between;




  font-size: 12px;




  font-weight: 700;




  color: #64748b;




  margin-bottom: 10px;




}









.blog-meta-time {




  color: #0d9488;




}









.blog-card-title {




  font-size: 18px;




  font-weight: 800;




  color: #1B3A57;




  line-height: 1.4;




  margin-bottom: 10px;




}









.blog-card-title a {




  color: #1B3A57;




  text-decoration: none;




  transition: color 0.2s ease;




}









.blog-card-title a:hover {




  color: #2EC4A0;




}









.blog-card-excerpt {




  font-size: 13px;




  color: #475569;




  line-height: 1.55;




  margin-bottom: 18px;




  flex-grow: 1;




}









.blog-card-footer {




  display: flex;




  align-items: center;




  justify-content: space-between;




  padding-top: 14px;




  border-top: 1px solid #f1f5f9;




}









.blog-author-info {




  display: flex;




  align-items: center;




  gap: 8px;




}









.blog-author-avatar {




  width: 28px;




  height: 28px;




  border-radius: 50%;




  background: linear-gradient(135deg, #2EC4A0, #1B3A57);




  color: #ffffff;




  font-size: 11px;




  font-weight: 900;




  display: flex;




  align-items: center;




  justify-content: center;




}









.blog-author-name {




  font-size: 12px;




  font-weight: 700;




  color: #1B3A57;




}









.blog-read-btn {




  font-size: 12px;




  font-weight: 800;




  color: #0d9488;




  text-decoration: none;




  display: inline-flex;




  align-items: center;




  gap: 4px;




  transition: all 0.2s ease;




}









.blog-read-btn:hover {




  color: #2EC4A0;




  transform: translateX(3px);




}









.blogs-view-all-row {




  margin-top: 10px;




}









.blogs-hub-btn {




  padding: 14px 28px;




  font-size: 15px;




  font-weight: 800;




  border-radius: 12px;




}









/* Blogs CTA Banner */




.blogs-cta-banner {




  padding: 20px 0 60px 0;




}









.blogs-app-cta-card {




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 24px;




  padding: 36px 40px;




  border-radius: 22px;




  background: linear-gradient(135deg, #1B3A57 0%, #0a1724 100%);




  color: #ffffff;




  border: 1px solid rgba(46, 196, 160, 0.35);




  box-shadow: 0 18px 45px rgba(27, 58, 87, 0.25);




}









.cta-banner-left {




  max-width: 680px;




}









.cta-badge {




  display: inline-block;




  background: rgba(46, 196, 160, 0.2);




  color: #2EC4A0;




  font-size: 12px;




  font-weight: 800;




  padding: 4px 10px;




  border-radius: 6px;




  margin-bottom: 10px;




}









.cta-banner-left h3 {




  font-size: 24px;




  font-weight: 900;




  color: #ffffff;




  margin-bottom: 8px;




}









.cta-banner-left p {




  font-size: 14px;




  color: #cbd5e1;




  line-height: 1.5;




  margin: 0;




}









@media (max-width: 991px) {




  .blogs-grid {




    grid-template-columns: repeat(2, 1fr);




  }




  .featured-article-card {




    grid-template-columns: 1fr;




  }




  .featured-media {




    height: 220px;




  }




}









@media (max-width: 640px) {




  .blogs-grid {




    grid-template-columns: 1fr;




  }




  .reader-title {




    font-size: 26px;




  }




  .reader-author-card {




    flex-direction: column;




    align-items: flex-start;




  }




  .reader-date {




    margin-left: 0;




  }




  .reader-content-body {




    padding: 24px 18px;




  }




  .reader-share-row {




    flex-direction: column;




    gap: 12px;




    align-items: flex-start;




  }




}














/* ==========================================================================




   CAROUSEL PERFORMANCE & RESPONSIVENESS FIX (GPU HARDWARE ACCELERATED)




   ========================================================================== */




.carousel-card {




  position: absolute;




  width: 100%;




  max-width: 600px;




  left: 50%;




  top: 50%;




  transform: translate3d(-50%, -50%, 0);




  background-color: var(--bg-white);




  border: 1px solid var(--border-color);




  border-radius: var(--radius-lg);




  padding: 2.5rem;




  box-shadow: var(--shadow-lg);




  opacity: 0;




  visibility: hidden;




  will-change: transform, opacity;




  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.32s ease;




  display: flex;




  flex-direction: column;




  gap: 1.5rem;




}









.carousel-card.active {




  opacity: 1;




  visibility: visible;




  z-index: 5;




  transform: translate3d(-50%, -50%, 0) scale(1);




}









.carousel-card.next {




  opacity: 0.65;




  visibility: visible;




  z-index: 4;




  transform: translate3d(-45%, -47%, 0) scale(0.93);




}









.carousel-card.prev {




  opacity: 0.65;




  visibility: visible;




  z-index: 4;




  transform: translate3d(-55%, -47%, 0) scale(0.93);




}









.carousel-card.far-next {




  opacity: 0;




  visibility: hidden;




  z-index: 1;




  transform: translate3d(-40%, -45%, 0) scale(0.85);




}









.carousel-card.far-prev {




  opacity: 0;




  visibility: hidden;




  z-index: 1;




  transform: translate3d(-60%, -45%, 0) scale(0.85);




}









/* User profile stories fast transition */




.user-profile-slide {




  will-change: opacity, transform;




  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);




}









.range-slide {




  will-change: opacity, transform;




  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);




}









/* ==========================================================================




   SMOOTH PAGE TRANSITIONS & BACK TO TOP BUTTON




   ========================================================================== */




html {




  scroll-behavior: smooth;




}









body { opacity: 1; }









@keyframes pageFadeIn { 0% { opacity: 0.95; } 100% { opacity: 1; } }




  100% {




    opacity: 1;




    transform: translateY(0);




  }




}









.back-to-top-btn {




  position: fixed;




  bottom: 30px;




  right: 30px;




  width: 48px;




  height: 48px;




  border-radius: 50%;




  background: #1B3A57;




  color: #2EC4A0;




  border: 1.5px solid rgba(46, 196, 160, 0.4);




  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.35);




  display: flex;




  align-items: center;




  justify-content: center;




  cursor: pointer;




  z-index: 999;




  opacity: 0;




  visibility: hidden;




  transform: scale(0.8) translateY(10px);




  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);




}









.back-to-top-btn.visible {




  opacity: 1;




  visibility: visible;




  transform: scale(1) translateY(0);




}









.back-to-top-btn:hover {




  background: #2EC4A0;




  color: #1B3A57;




  box-shadow: 0 12px 35px rgba(46, 196, 160, 0.55);




  transform: scale(1.1) translateY(-3px);




}









/* ==========================================================================




   GOODSCORE-STYLE AI ANIMATIONS & RADAR SCANNER




   ========================================================================== */




.ai-intelligence-section {




  padding: 90px 0;




  background: linear-gradient(180deg, #091522 0%, #0c1c2e 50%, #091522 100%);




  color: #ffffff;




  position: relative;




  overflow: hidden;




}









.ai-intelligence-section::before {




  content: '';




  position: absolute;




  top: 20%;




  left: 30%;




  width: 500px;




  height: 500px;




  background: radial-gradient(circle, rgba(46, 196, 160, 0.15) 0%, rgba(27, 58, 87, 0) 70%);




  pointer-events: none;




  border-radius: 50%;




  animation: aiOrbGlow 6s ease-in-out infinite alternate;




}









@keyframes aiOrbGlow {




  0% { transform: scale(0.85) translate(0, 0); opacity: 0.6; }




  100% { transform: scale(1.15) translate(30px, 20px); opacity: 1; }




}









.ai-live-badge {




  display: inline-flex;




  align-items: center;




  gap: 8px;




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  border: 1px solid rgba(46, 196, 160, 0.4);




  font-size: 12px;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.6px;




  padding: 6px 14px;




  border-radius: 20px;




}









.ai-pulse-dot {




  width: 8px;




  height: 8px;




  border-radius: 50%;




  background: #2EC4A0;




  box-shadow: 0 0 10px #2EC4A0;




  animation: pulseAiDot 1.4s infinite;




}









@keyframes pulseAiDot {




  0%, 100% { transform: scale(1); opacity: 1; }




  50% { transform: scale(1.6); opacity: 0.4; }




}









.ai-intelligence-section h2 {




  color: #ffffff;




  font-size: 36px;




  font-weight: 900;




  line-height: 1.3;




  margin-bottom: 12px;




}









.ai-intelligence-section h2 span {




  color: #2EC4A0;




}









.ai-intelligence-section .desc {




  color: #cbd5e1;




  max-width: 680px;




  margin: 0 auto;




}









.ai-showcase-grid {




  display: grid;




  grid-template-columns: 1.15fr 0.85fr;




  gap: 36px;




  align-items: center;




  margin-top: 48px;




}









/* AI Scanner Card */




.ai-scanner-card {




  background: rgba(15, 28, 45, 0.85);




  border: 1.5px solid rgba(46, 196, 160, 0.35);




  border-radius: 26px;




  padding: 36px 30px;




  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);




  position: relative;




  overflow: hidden;




}









.ai-radar-container {




  position: relative;




  width: 320px;




  height: 320px;




  margin: 0 auto 28px auto;




  display: flex;




  align-items: center;




  justify-content: center;




}









.ai-radar-ring {




  position: absolute;




  border-radius: 50%;




  border: 1px dashed rgba(46, 196, 160, 0.35);




  box-sizing: border-box;




}









.ring-outer {




  width: 300px;




  height: 300px;




  border: 1px solid rgba(46, 196, 160, 0.25);




  animation: rotateClockwise 24s linear infinite;




}









.ring-middle {




  width: 220px;




  height: 220px;




  border-color: rgba(79, 195, 247, 0.35);




  animation: rotateCounterClockwise 16s linear infinite;




}









.ring-inner {




  width: 150px;




  height: 150px;




  border-color: rgba(46, 196, 160, 0.5);




  animation: rotateClockwise 10s linear infinite;




}









@keyframes rotateClockwise {




  from { transform: rotate(0deg); }




  to { transform: rotate(360deg); }




}









@keyframes rotateCounterClockwise {




  from { transform: rotate(360deg); }




  to { transform: rotate(0deg); }




}









.ai-radar-sweep {




  position: absolute;




  width: 300px;




  height: 300px;




  border-radius: 50%;




  background: conic-gradient(from 0deg at 50% 50%, rgba(46, 196, 160, 0.35) 0deg, rgba(46, 196, 160, 0) 65deg);




  animation: radarSweep 3.5s linear infinite;




  pointer-events: none;




}









@keyframes radarSweep {




  from { transform: rotate(0deg); }




  to { transform: rotate(360deg); }




}









.ai-core-orb {




  position: relative;




  width: 110px;




  height: 110px;




  border-radius: 50%;




  background: linear-gradient(135deg, #1B3A57 0%, #0c1926 100%);




  border: 2px solid #2EC4A0;




  display: flex;




  flex-direction: column;




  align-items: center;




  justify-content: center;




  box-shadow: 0 0 35px rgba(46, 196, 160, 0.6);




  z-index: 5;




}









.ai-core-score {




  font-size: 22px;




  font-weight: 900;




  color: #ffffff;




  line-height: 1;




}









.ai-core-lbl {




  font-size: 9.5px;




  font-weight: 800;




  color: #2EC4A0;




  text-transform: uppercase;




  margin-top: 2px;




}









/* Orbiting Nodes */




.ai-node {




  position: absolute;




  display: flex;




  align-items: center;




  gap: 6px;




  background: rgba(12, 28, 43, 0.92);




  border: 1px solid rgba(46, 196, 160, 0.4);




  padding: 4px 10px;




  border-radius: 20px;




  font-size: 10.5px;




  font-weight: 800;




  color: #ffffff;




  backdrop-filter: blur(4px);




  z-index: 6;




  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);




  animation: floatNode 4s ease-in-out infinite alternate;




}









.node-dot {




  width: 6px;




  height: 6px;




  border-radius: 50%;




  background: #2EC4A0;




  box-shadow: 0 0 6px #2EC4A0;




}









.node-dot.warning {




  background: #FFB347;




  box-shadow: 0 0 6px #FFB347;




}









.node-1 { top: 12px; left: 18px; animation-delay: 0s; }




.node-2 { top: 20px; right: 10px; animation-delay: 0.8s; }




.node-3 { bottom: 25px; left: 10px; animation-delay: 1.5s; }




.node-4 { bottom: 16px; right: 18px; animation-delay: 2.2s; }









@keyframes floatNode {




  0% { transform: translateY(0); }




  100% { transform: translateY(-6px); }




}









/* Telemetry Bar */




.ai-telemetry-bar {




  display: grid;




  grid-template-columns: repeat(3, 1fr);




  gap: 12px;




  padding-top: 20px;




  border-top: 1px solid rgba(255, 255, 255, 0.1);




  text-align: center;




}









.t-lbl {




  display: block;




  font-size: 11px;




  color: #94a3b8;




  margin-bottom: 2px;




  font-weight: 700;




}









.t-val {




  display: block;




  font-size: 13.5px;




  font-weight: 900;




}









.text-green { color: #2EC4A0; }




.text-cyan { color: #38bdf8; }




.text-gold { color: #fbbf24; }









/* AI Features Column */




.ai-features-col {




  display: flex;




  flex-direction: column;




  gap: 16px;




}









.ai-feature-box {




  display: flex;




  gap: 18px;




  padding: 20px 22px;




  border-radius: 18px;




  background: rgba(255, 255, 255, 0.04);




  border: 1.5px solid rgba(255, 255, 255, 0.08);




  cursor: pointer;




  transition: all 0.28s ease;




}









.ai-feature-box:hover, .ai-feature-box.active {




  background: rgba(46, 196, 160, 0.08);




  border-color: #2EC4A0;




  transform: translateX(6px);




}









.ai-feat-icon {




  font-size: 28px;




  width: 48px;




  height: 48px;




  border-radius: 14px;




  background: rgba(46, 196, 160, 0.12);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.ai-feat-info h4 {




  font-size: 16px;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 4px;




}









.ai-feat-info p {




  font-size: 12.5px;




  color: #94a3b8;




  line-height: 1.5;




  margin-bottom: 6px;




}









.ai-feat-stat {




  font-size: 11.5px;




  font-weight: 800;




  color: #2EC4A0;




  display: inline-block;




}









.ai-cta-row {




  margin-top: 8px;




}









@media (max-width: 991px) {




  .ai-showcase-grid {




    grid-template-columns: 1fr;




  }




}









@media (max-width: 640px) {




  .ai-radar-container {




    width: 260px;




    height: 260px;




  }




  .ring-outer, .ai-radar-sweep {




    width: 250px;




    height: 250px;




  }




  .ring-middle {




    width: 180px;




    height: 180px;




  }




  .ai-telemetry-bar {




    grid-template-columns: 1fr;




    gap: 8px;




  }




  .back-to-top-btn {




    bottom: 20px;




    right: 20px;




    width: 42px;




    height: 42px;




  }




}



















/* ==========================================================================




   STRICT OVERRIDES: BLOG ARTICLE READER HEADER & VERTICAL FLOW




   ========================================================================== */




.reader-header-block {




  display: block !important;




  position: static !important;




  height: auto !important;




  min-height: 0 !important;




  max-height: none !important;




  width: 100% !important;




  max-width: 100% !important;




  background: transparent !important;




  border: none !important;




  box-shadow: none !important;




  margin: 0 0 28px 0 !important;




  padding: 0 !important;




  text-align: left !important;




  z-index: 1 !important;




  flex: none !important;




}









.reader-header-block .reader-meta-bar {




  display: flex !important;




  align-items: center !important;




  flex-wrap: wrap !important;




  gap: 12px !important;




  margin: 0 0 16px 0 !important;




  padding: 0 !important;




  width: 100% !important;




  position: static !important;




}









.reader-header-block .reader-category-pill {




  display: inline-flex !important;




  position: static !important;




  background: rgba(46, 196, 160, 0.14) !important;




  color: #0d9488 !important;




  border: 1px solid rgba(46, 196, 160, 0.4) !important;




  font-size: 11.5px !important;




  font-weight: 800 !important;




  text-transform: uppercase !important;




  letter-spacing: 0.5px !important;




  padding: 4px 12px !important;




  border-radius: 6px !important;




  margin: 0 !important;




}









.reader-header-block .reader-meta-item {




  display: inline-block !important;




  position: static !important;




  font-size: 12.5px !important;




  font-weight: 700 !important;




  color: #64748b !important;




  margin: 0 !important;




}









.reader-header-block .reader-title {




  display: block !important;




  width: 100% !important;




  font-size: 34px !important;




  font-weight: 900 !important;




  color: #1B3A57 !important;




  line-height: 1.35 !important;




  margin: 0 0 16px 0 !important;




  letter-spacing: -0.5px !important;




  text-align: left !important;




}









.reader-header-block .reader-lead {




  display: block !important;




  width: 100% !important;




  font-size: 16.5px !important;




  color: #475569 !important;




  line-height: 1.65 !important;




  margin: 0 0 24px 0 !important;




  text-align: left !important;




}









.reader-header-block .reader-author-card {




  display: flex !important;




  width: 100% !important;




  align-items: center !important;




  gap: 14px !important;




  padding: 14px 18px !important;




  border-radius: 14px !important;




  background: #ffffff !important;




  border: 1px solid #e2e8f0 !important;




  box-shadow: 0 4px 12px rgba(27, 58, 87, 0.03) !important;




  margin: 0 0 28px 0 !important;




  box-sizing: border-box !important;




}









.reader-banner-box {




  display: block !important;




  width: 100% !important;




  border-radius: 20px !important;




  overflow: hidden !important;




  max-height: 380px !important;




  margin: 0 0 32px 0 !important;




  background: #0f172a !important;




  border: 1px solid #e2e8f0 !important;




  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.06) !important;




  box-sizing: border-box !important;




}









.reader-cover-img {




  width: 100% !important;




  height: 100% !important;




  max-height: 380px !important;




  object-fit: cover !important;




  display: block !important;




}














/* ==========================================================================




   PROFESSIONAL VECTOR SVG ICONS STYLING SYSTEM




   ========================================================================== */




.svg-ico {




  display: inline-block;




  vertical-align: middle;




  flex-shrink: 0;




}









.hero-input-icon {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 20px;




  height: 20px;




  margin-right: 8px;




  color: #94a3b8;




  flex-shrink: 0;




}









.hero-input-icon svg {




  display: block;




  stroke: #94a3b8;




}









.hero-input-wrap:focus-within .hero-input-icon svg {




  stroke: #2EC4A0;




}









.ticker-icon {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 20px;




  height: 20px;




  border-radius: 50%;




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  margin-right: 8px;




  flex-shrink: 0;




}









.ticker-icon svg {




  stroke: #2EC4A0;




}









.loan-tab-btn {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  gap: 6px;




}









.loan-tab-btn svg {




  color: currentColor;




  stroke: currentColor;




  transition: transform 0.2s ease;




}









.loan-tab-btn:hover svg,




.loan-tab-btn.active svg {




  transform: scale(1.08);




}









.footer-alert-icon {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 28px;




  height: 28px;




  border-radius: 50%;




  background: rgba(245, 158, 11, 0.15);




  color: #F59E0B;




  flex-shrink: 0;




}









.footer-alert-icon svg {




  stroke: #F59E0B;




}









.chapter-time {




  display: inline-flex;




  align-items: center;




  gap: 4px;




}









.bullet-check {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 18px;




  height: 18px;




  border-radius: 50%;




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  margin-right: 8px;




  flex-shrink: 0;




}









.benefit-card-icon {




  width: 50px;




  height: 50px;




  border-radius: 14px;




  background: rgba(46, 196, 160, 0.12);




  color: #2EC4A0;




  display: flex;




  align-items: center;




  justify-content: center;




  margin-bottom: 1.25rem;




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




}









.benefit-card:hover .benefit-card-icon {




  background: #2EC4A0;




  color: #1B3A57;




  transform: translateY(-3px) scale(1.05);




  box-shadow: 0 8px 20px rgba(46, 196, 160, 0.3);




}









.benefit-card-icon svg {




  stroke: currentColor;




  transition: stroke 0.3s ease;




}









.phone-icons {




  display: inline-flex;




  align-items: center;




  gap: 6px;




  color: #64748b;




}









.pop-bell {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 32px;




  height: 32px;




  border-radius: 50%;




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




}









.ai-feat-icon {




  width: 52px;




  height: 52px;




  border-radius: 14px;




  background: rgba(46, 196, 160, 0.12);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




  transition: all 0.3s ease;




}









.ai-feature-box:hover .ai-feat-icon,




.ai-feature-box.active .ai-feat-icon {




  background: rgba(46, 196, 160, 0.25);




  box-shadow: 0 0 16px rgba(46, 196, 160, 0.4);




}









.sec-pillar-icon {




  width: 54px;




  height: 54px;




  border-radius: 16px;




  background: rgba(46, 196, 160, 0.1);




  display: flex;




  align-items: center;




  justify-content: center;




  margin-bottom: 14px;




}









.pcat-icon {




  width: 44px;




  height: 44px;




  border-radius: 12px;




  background: rgba(255, 255, 255, 0.08);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




  transition: all 0.25s ease;




}









.partnership-category-card:hover .pcat-icon {




  background: rgba(46, 196, 160, 0.2);




  transform: scale(1.08);




}









.contact-detail-icon {




  width: 42px;




  height: 42px;




  border-radius: 12px;




  background: rgba(46, 196, 160, 0.12);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.field-icon {




  position: absolute;




  right: 14px;




  top: 50%;




  transform: translateY(-50%);




  display: inline-flex;




  align-items: center;




  justify-content: center;




  color: #94a3b8;




  pointer-events: none;




}









.stars-gold-wrap {




  display: inline-flex;




  align-items: center;




  gap: 3px;




}









.stars-gold-wrap svg {




  display: inline-block;




  vertical-align: middle;




}









.assistant-menu-item-icon {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 24px;




  height: 24px;




  margin-right: 8px;




  flex-shrink: 0;




}














/* ==========================================================================




   REDESIGNED STATE-OF-THE-ART SAVINGS & INTEREST CALCULATOR




   ========================================================================== */




.calculator {




  background: radial-gradient(circle at 50% 15%, #18354f 0%, #0c1c2b 65%, #07121d 100%);




  color: #ffffff;




  padding: 6.5rem 0;




  position: relative;




  overflow: hidden;




  border-top: 1px solid rgba(46, 196, 160, 0.2);




  border-bottom: 1px solid rgba(46, 196, 160, 0.2);




}









.calc-ambient-orb {




  position: absolute;




  border-radius: 50%;




  filter: blur(90px);




  pointer-events: none;




  opacity: 0.25;




}









.calc-ambient-orb.orb-1 {




  width: 450px;




  height: 450px;




  background: #2EC4A0;




  top: -100px;




  left: 10%;




}









.calc-ambient-orb.orb-2 {




  width: 500px;




  height: 500px;




  background: #4FC3F7;




  bottom: -150px;




  right: 5%;




}









.calc-grid-overlay {




  position: absolute;




  top: 0;




  left: 0;




  right: 0;




  bottom: 0;




  background-image: 




    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),




    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);




  background-size: 40px 40px;




  pointer-events: none;




}









.relative-z {




  position: relative;




  z-index: 2;




}









.calc-header-wrap {




  margin-bottom: 3.5rem;




}









.calc-live-badge {




  display: inline-flex;




  align-items: center;




  gap: 8px;




  background: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.35);




  color: #2EC4A0;




  padding: 0.4rem 1.1rem;




  border-radius: 50px;




  font-size: 0.825rem;




  font-weight: 700;




  margin-bottom: 1rem;




  letter-spacing: 0.04em;




  text-transform: uppercase;




}









.calc-pulse-dot {




  width: 8px;




  height: 8px;




  border-radius: 50%;




  background-color: #2EC4A0;




  box-shadow: 0 0 10px #2EC4A0;




  animation: pulse-green-glow 2s infinite;




}









@keyframes pulse-green-glow {




  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 196, 160, 0.7); }




  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(46, 196, 160, 0); }




  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 196, 160, 0); }




}









.calc-title {




  font-family: 'Outfit', sans-serif;




  font-size: 2.8rem;




  font-weight: 900;




  color: #ffffff;




  margin-bottom: 1rem;




  letter-spacing: -0.02em;




}









.calc-gradient-text {




  background: linear-gradient(135deg, #2EC4A0 0%, #4FC3F7 100%);




  -webkit-background-clip: text;




  -webkit-text-fill-color: transparent;




}









.calc-desc {




  font-size: 1.1rem;




  color: rgba(255, 255, 255, 0.7);




  max-width: 650px;




  margin: 0 auto;




  line-height: 1.6;




}









/* Dashboard Grid Layout */




.calc-main-dashboard {




  display: grid;




  grid-template-columns: 1.05fr 1fr;




  gap: 2.5rem;




  align-items: stretch;




}









@media (max-width: 992px) {




  .calc-main-dashboard {




    grid-template-columns: 1fr;




    gap: 2rem;




  }




}









/* Glass Panels */




.glass-panel {




  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);




  backdrop-filter: blur(20px);




  -webkit-backdrop-filter: blur(20px);




  border: 1px solid rgba(255, 255, 255, 0.12);




  border-radius: 24px;




  padding: 2.25rem;




  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);




  display: flex;




  flex-direction: column;




  justify-content: space-between;




}









/* Left Console Card */




.console-header-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1.25rem;




}









.console-label {




  font-size: 0.85rem;




  font-weight: 800;




  text-transform: uppercase;




  letter-spacing: 0.08em;




  color: rgba(255, 255, 255, 0.6);




}









.console-sub-badge {




  font-size: 0.775rem;




  font-weight: 700;




  padding: 0.25rem 0.75rem;




  border-radius: 20px;




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  border: 1px solid rgba(46, 196, 160, 0.3);




}









/* Segmented Loan Tabs */




.loan-tabs-container {




  display: flex;




  gap: 0.75rem;




  background: rgba(0, 0, 0, 0.25);




  padding: 0.4rem;




  border-radius: 16px;




  border: 1px solid rgba(255, 255, 255, 0.08);




  margin-bottom: 2rem;




}









.loan-tabs-container .loan-tab-btn {




  flex: 1;




  background: transparent;




  border: none;




  padding: 0.75rem 0.5rem;




  border-radius: 12px;




  font-size: 0.875rem;




  font-weight: 700;




  color: rgba(255, 255, 255, 0.65);




  cursor: pointer;




  display: flex;




  align-items: center;




  justify-content: center;




  gap: 8px;




  transition: all 0.25s ease;




  white-space: nowrap;




}









.tab-icon-box {




  display: flex;




  align-items: center;




  justify-content: center;




}









.loan-tabs-container .loan-tab-btn:hover {




  color: #ffffff;




  background: rgba(255, 255, 255, 0.06);




}









.loan-tabs-container .loan-tab-btn.active {




  background: linear-gradient(135deg, #2EC4A0 0%, #1db38f 100%);




  color: #0c1c2b;




  font-weight: 800;




  box-shadow: 0 4px 16px rgba(46, 196, 160, 0.35);




}









.loan-tabs-container .loan-tab-btn.active svg {




  stroke: #0c1c2b;




}









/* Slider Interactive Box */




.slider-interactive-box {




  background: rgba(0, 0, 0, 0.2);




  border: 1px solid rgba(255, 255, 255, 0.08);




  border-radius: 18px;




  padding: 1.5rem;




  margin-bottom: 1.5rem;




}









.slider-header-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1.5rem;




}









.slider-title-text {




  font-size: 0.95rem;




  font-weight: 700;




  color: rgba(255, 255, 255, 0.85);




}









.amount-value-pill {




  display: flex;




  align-items: baseline;




  gap: 6px;




  background: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.35);




  padding: 0.4rem 1rem;




  border-radius: 12px;




}









.currency-tag {




  font-size: 0.75rem;




  font-weight: 800;




  color: #2EC4A0;




}









.amount-display-val {




  font-family: 'Outfit', sans-serif;




  font-size: 1.4rem;




  font-weight: 900;




  color: #ffffff;




  letter-spacing: 0.02em;




}









/* Modern Slider Input */




.range-slider-wrapper {




  position: relative;




  margin-bottom: 0.85rem;




}









.calc-slider-modern {




  -webkit-appearance: none;




  appearance: none;




  width: 100%;




  height: 8px;




  border-radius: 8px;




  background: rgba(255, 255, 255, 0.15);




  outline: none;




  cursor: pointer;




  position: relative;




  z-index: 2;




}









.calc-slider-modern::-webkit-slider-thumb {




  -webkit-appearance: none;




  appearance: none;




  width: 26px;




  height: 26px;




  border-radius: 50%;




  background: #2EC4A0;




  cursor: pointer;




  border: 3px solid #ffffff;




  box-shadow: 0 0 16px rgba(46, 196, 160, 0.8);




  transition: transform 0.2s ease, box-shadow 0.2s ease;




}









.calc-slider-modern::-webkit-slider-thumb:hover {




  transform: scale(1.2);




  box-shadow: 0 0 24px rgba(46, 196, 160, 1);




}









.slider-range-labels {




  display: flex;




  justify-content: space-between;




  align-items: center;




  font-size: 0.775rem;




  font-weight: 600;




  color: rgba(255, 255, 255, 0.4);




  margin-bottom: 1.25rem;




}









.slider-drag-hint {




  display: inline-flex;




  align-items: center;




  gap: 4px;




  color: rgba(46, 196, 160, 0.8);




  font-size: 0.725rem;




}









/* Preset Chips */




.preset-amount-chips {




  display: flex;




  gap: 0.5rem;




  flex-wrap: wrap;




}









.preset-chip {




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(255, 255, 255, 0.12);




  color: rgba(255, 255, 255, 0.75);




  padding: 0.35rem 0.85rem;




  border-radius: 20px;




  font-size: 0.78rem;




  font-weight: 700;




  cursor: pointer;




  transition: all 0.2s ease;




}









.preset-chip:hover {




  background: rgba(46, 196, 160, 0.15);




  border-color: rgba(46, 196, 160, 0.35);




  color: #2EC4A0;




}









.preset-chip.active {




  background: rgba(46, 196, 160, 0.2);




  border-color: #2EC4A0;




  color: #2EC4A0;




  box-shadow: 0 2px 8px rgba(46, 196, 160, 0.25);




}









/* Hero Savings Glow Banner */




.savings-hero-banner {




  background: linear-gradient(135deg, rgba(46, 196, 160, 0.15) 0%, rgba(79, 195, 247, 0.1) 100%);




  border: 1px solid rgba(46, 196, 160, 0.35);




  border-radius: 18px;




  padding: 1.25rem 1.5rem;




  display: flex;




  align-items: center;




  gap: 1rem;




  box-shadow: 0 10px 30px rgba(46, 196, 160, 0.1);




  position: relative;




  overflow: hidden;




}









.savings-glow-sparkle {




  width: 44px;




  height: 44px;




  border-radius: 12px;




  background: rgba(46, 196, 160, 0.2);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.savings-banner-info {




  flex: 1;




}









.savings-banner-sub {




  display: block;




  font-size: 0.75rem;




  font-weight: 700;




  color: rgba(255, 255, 255, 0.65);




  text-transform: uppercase;




  letter-spacing: 0.05em;




  margin-bottom: 2px;




}









.savings-banner-val {




  font-family: 'Outfit', sans-serif;




  font-size: 1.4rem;




  font-weight: 900;




  color: #2EC4A0;




  letter-spacing: -0.01em;




}









.savings-tier-chip {




  font-size: 0.7rem;




  font-weight: 800;




  padding: 0.25rem 0.65rem;




  border-radius: 20px;




  background: #2EC4A0;




  color: #0c1c2b;




  text-transform: uppercase;




  letter-spacing: 0.04em;




  white-space: nowrap;




}









/* Right Column: Comparative Analytics */




.analytics-header {




  display: flex;




  justify-content: space-between;




  align-items: flex-start;




  margin-bottom: 1.5rem;




  border-bottom: 1px solid rgba(255, 255, 255, 0.08);




  padding-bottom: 1rem;




}









.analytics-card-title {




  font-family: 'Outfit', sans-serif;




  font-size: 1.15rem;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 4px;




}









.analytics-sub {




  font-size: 0.8rem;




  color: rgba(255, 255, 255, 0.5);




  margin: 0;




}









.analytics-live-tag {




  display: inline-flex;




  align-items: center;




  gap: 6px;




  font-size: 0.7rem;




  font-weight: 700;




  color: #2EC4A0;




  background: rgba(46, 196, 160, 0.1);




  border: 1px solid rgba(46, 196, 160, 0.25);




  padding: 0.2rem 0.6rem;




  border-radius: 12px;




  white-space: nowrap;




}









.live-dot {




  width: 6px;




  height: 6px;




  border-radius: 50%;




  background: #2EC4A0;




}









/* Comparison Cards Grid */




.comparison-cards-grid {




  display: grid;




  grid-template-columns: 1fr 1fr;




  gap: 1rem;




  margin-bottom: 1.25rem;




}









@media (max-width: 576px) {




  .comparison-cards-grid {




    grid-template-columns: 1fr;




  }




}









.tier-comp-card {




  background: rgba(0, 0, 0, 0.25);




  border-radius: 16px;




  padding: 1.25rem;




  border: 1px solid rgba(255, 255, 255, 0.08);




  display: flex;




  flex-direction: column;




  justify-content: space-between;




}









.tier-comp-card.card-poor {




  border-color: rgba(239, 68, 68, 0.25);




  background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, rgba(0, 0, 0, 0.25) 100%);




}









.tier-comp-card.card-excellent {




  border-color: rgba(46, 196, 160, 0.35);




  background: linear-gradient(180deg, rgba(46, 196, 160, 0.08) 0%, rgba(0, 0, 0, 0.25) 100%);




  box-shadow: 0 0 20px rgba(46, 196, 160, 0.06);




}









.tier-card-top {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 1rem;




}









.tier-badge-pill {




  display: inline-flex;




  align-items: center;




  gap: 5px;




  font-size: 0.725rem;




  font-weight: 800;




  padding: 0.25rem 0.55rem;




  border-radius: 6px;




  text-transform: uppercase;




}









.dot-indicator {




  width: 6px;




  height: 6px;




  border-radius: 50%;




}









.bad-pill {




  background: rgba(239, 68, 68, 0.15);




  color: #f87171;




  border: 1px solid rgba(239, 68, 68, 0.3);




}









.dot-red { background: #ef4444; }









.good-pill {




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.dot-green { background: #2EC4A0; }









.tier-rate-badge {




  font-family: 'Outfit', sans-serif;




  font-size: 0.95rem;




  font-weight: 800;




}









.bad-rate { color: #f87171; }




.good-rate { color: #2EC4A0; }









.tier-cost-block {




  margin-bottom: 0.85rem;




}









.cost-lbl {




  display: block;




  font-size: 0.725rem;




  font-weight: 600;




  color: rgba(255, 255, 255, 0.5);




  margin-bottom: 2px;




}









.cost-val {




  font-family: 'Outfit', sans-serif;




  font-size: 1.35rem;




  font-weight: 900;




  letter-spacing: -0.01em;




}









.text-red { color: #f87171; }




.text-green { color: #2EC4A0; }




.text-cyan { color: #4FC3F7; }









.tier-emi-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  font-size: 0.775rem;




  color: rgba(255, 255, 255, 0.6);




  margin-bottom: 0.85rem;




  background: rgba(255, 255, 255, 0.04);




  padding: 0.35rem 0.6rem;




  border-radius: 8px;




}









.emi-val {




  font-family: 'Outfit', sans-serif;




  font-weight: 800;




  color: #ffffff;




}









.tier-progress-track {




  height: 8px;




  background: rgba(255, 255, 255, 0.08);




  border-radius: 10px;




  overflow: hidden;




}









.tier-progress-bar {




  height: 100%;




  border-radius: 10px;




  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);




}









.bad-bar {




  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);




}









.good-bar {




  background: linear-gradient(90deg, #2EC4A0 0%, #4FC3F7 100%);




  box-shadow: 0 0 10px rgba(46, 196, 160, 0.5);




}









/* Monthly Difference Banner */




.monthly-diff-banner {




  background: rgba(46, 196, 160, 0.08);




  border: 1px dashed rgba(46, 196, 160, 0.3);




  border-radius: 14px;




  padding: 0.75rem 1rem;




  display: flex;




  align-items: center;




  gap: 0.75rem;




  margin-bottom: 1.25rem;




}









.diff-icon-box {




  width: 32px;




  height: 32px;




  border-radius: 8px;




  background: rgba(46, 196, 160, 0.15);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.diff-text {




  font-size: 0.825rem;




  color: rgba(255, 255, 255, 0.75);




}









.diff-text strong {




  color: #2EC4A0;




  font-weight: 800;




  margin-left: 4px;




}









/* Action CTA Box */




.calc-footer-cta-box {




  display: flex;




  flex-direction: column;




  gap: 0.85rem;




}









.cta-tip-line {




  display: flex;




  align-items: center;




  gap: 8px;




  font-size: 0.775rem;




  color: rgba(255, 255, 255, 0.6);




  line-height: 1.4;




}









.tip-icon {




  display: flex;




  align-items: center;




  flex-shrink: 0;




}









.calc-action-btn {




  padding: 0.9rem 1.5rem;




  font-size: 0.95rem;




  font-weight: 800;




  border-radius: 12px;




  text-align: center;




  box-shadow: 0 8px 25px rgba(46, 196, 160, 0.3);




  transition: all 0.3s ease;




}









.calc-action-btn:hover {




  transform: translateY(-2px);




  box-shadow: 0 12px 30px rgba(46, 196, 160, 0.45);




}














/* Additional Mobile Responsive Rules for Redesigned Calculator */




@media (max-width: 768px) {




  .calculator {




    padding: 4.5rem 0 !important;




  }




  .calc-title {




    font-size: 2rem !important;




  }




  .calc-desc {




    font-size: 0.95rem !important;




  }




  .glass-panel {




    padding: 1.5rem !important;




    border-radius: 18px !important;




  }




  .loan-tabs-container {




    overflow-x: auto;




    padding-bottom: 0.35rem;




  }




  .loan-tabs-container .loan-tab-btn {




    padding: 0.6rem 0.85rem;




    font-size: 0.8rem;




  }




  .amount-display-val {




    font-size: 1.2rem;




  }




  .comparison-cards-grid {




    grid-template-columns: 1fr !important;




  }




  .savings-hero-banner {




    flex-direction: column;




    align-items: flex-start;




    gap: 0.75rem;




  }




  .savings-tier-chip {




    align-self: flex-start;




  }




  .monthly-diff-banner {




    flex-direction: column;




    align-items: flex-start;




    gap: 0.5rem;




  }




}














/* ==========================================================================




   REDESIGNED CREDIT EDUCATION & FACTORS MATRIX SECTION




   ========================================================================== */




.edu-section {




  background: radial-gradient(circle at 50% 20%, #16314a 0%, #0d1e2e 60%, #081420 100%) !important;




  color: #ffffff !important;




  padding: 6rem 0 !important;




  position: relative;




  overflow: hidden;




  border-top: 1px solid rgba(46, 196, 160, 0.2);




  border-bottom: 1px solid rgba(46, 196, 160, 0.2);




}









.orb-edu-1 {




  width: 450px;




  height: 450px;




  background: #2EC4A0;




  top: -80px;




  left: 5%;




  position: absolute;




  border-radius: 50%;




  filter: blur(100px);




  opacity: 0.18;




  pointer-events: none;




}









.orb-edu-2 {




  width: 500px;




  height: 500px;




  background: #818CF8;




  bottom: -100px;




  right: 5%;




  position: absolute;




  border-radius: 50%;




  filter: blur(100px);




  opacity: 0.16;




  pointer-events: none;




}









.edu-header-center {




  margin-bottom: 3.5rem;




}









.edu-live-badge {




  display: inline-flex;




  align-items: center;




  gap: 8px;




  background: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.35);




  color: #2EC4A0;




  padding: 0.4rem 1.1rem;




  border-radius: 50px;




  font-size: 0.8rem;




  font-weight: 700;




  margin-bottom: 1rem;




  letter-spacing: 0.04em;




  text-transform: uppercase;




}









.edu-pulse-dot {




  width: 8px;




  height: 8px;




  border-radius: 50%;




  background-color: #2EC4A0;




  box-shadow: 0 0 10px #2EC4A0;




  animation: pulse-green-glow 2s infinite;




}









.edu-heading {




  font-family: 'Outfit', sans-serif;




  font-size: 2.6rem;




  font-weight: 900;




  color: #ffffff;




  margin-bottom: 0.85rem;




  letter-spacing: -0.02em;




}









.edu-subheading {




  font-size: 1.05rem;




  color: rgba(255, 255, 255, 0.7);




  max-width: 680px;




  margin: 0 auto;




  line-height: 1.6;




}









.edu-grid-modern {




  display: grid;




  grid-template-columns: 0.95fr 1.05fr;




  gap: 2.5rem;




  align-items: stretch;




}









@media (max-width: 992px) {




  .edu-grid-modern {




    grid-template-columns: 1fr;




    gap: 2rem;




  }




}









.glass-panel-edu {




  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);




  backdrop-filter: blur(20px);




  -webkit-backdrop-filter: blur(20px);




  border: 1px solid rgba(255, 255, 255, 0.12);




  border-radius: 24px;




  padding: 2.25rem;




  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);




  display: flex;




  flex-direction: column;




  justify-content: space-between;




}









/* Left Range Panel Header */




.range-panel-header {




  display: flex;




  justify-content: space-between;




  align-items: center;




  border-bottom: 1px solid rgba(255, 255, 255, 0.1);




  padding-bottom: 1.25rem;




  margin-bottom: 1.75rem;




}









.range-panel-title {




  font-family: 'Outfit', sans-serif;




  font-size: 1.25rem;




  font-weight: 800;




  color: #ffffff;




  margin: 0;




}









.range-panel-pill {




  font-size: 0.75rem;




  font-weight: 700;




  padding: 0.25rem 0.65rem;




  border-radius: 12px;




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.range-carousel-container {




  min-height: 480px;




}









.range-carousel-controls {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-top: 1.75rem;




  padding-top: 1.25rem;




  border-top: 1px solid rgba(255, 255, 255, 0.08);




}









.range-ctrl-btn {




  width: 40px;




  height: 40px;




  border-radius: 12px;




  background: rgba(255, 255, 255, 0.08);




  border: 1px solid rgba(255, 255, 255, 0.15);




  color: #ffffff;




  display: flex;




  align-items: center;




  justify-content: center;




  cursor: pointer;




  transition: all 0.25s ease;




}









.range-ctrl-btn:hover {




  background: #2EC4A0;




  color: #0c1c2b;




  border-color: #2EC4A0;




  transform: scale(1.05);




}









/* Right Factor Matrix Panel */




.factor-header-group {




  margin-bottom: 1.5rem;




  border-bottom: 1px solid rgba(255, 255, 255, 0.08);




  padding-bottom: 1.25rem;




}









.factor-header-title-row {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 0.4rem;




}









.factor-main-title {




  font-family: 'Outfit', sans-serif;




  font-size: 1.25rem;




  font-weight: 800;




  color: #ffffff;




  margin: 0;




}









.factor-bureau-tag {




  font-size: 0.725rem;




  font-weight: 700;




  color: #2EC4A0;




  background: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.3);




  padding: 0.2rem 0.65rem;




  border-radius: 12px;




}









.factor-main-sub {




  font-size: 0.825rem;




  color: rgba(255, 255, 255, 0.6);




  margin: 0;




  line-height: 1.5;




}









/* Factor Cards Matrix Grid */




.factor-cards-matrix {




  display: flex;




  flex-direction: column;




  gap: 0.85rem;




}









.factor-tile {




  background: rgba(0, 0, 0, 0.22);




  border: 1px solid rgba(255, 255, 255, 0.08);




  border-radius: 16px;




  padding: 1.1rem 1.25rem;




  transition: all 0.25s ease;




}









.factor-tile:hover {




  background: rgba(255, 255, 255, 0.05);




  transform: translateY(-2px);




}









.tile-gold { border-left: 3px solid #F59E0B; }




.tile-teal { border-left: 3px solid #2EC4A0; }




.tile-cyan { border-left: 3px solid #4FC3F7; }




.tile-purple { border-left: 3px solid #A78BFA; }









.factor-tile-top {




  display: flex;




  align-items: center;




  gap: 12px;




  margin-bottom: 0.45rem;




}









.factor-tile-icon {




  width: 36px;




  height: 36px;




  border-radius: 10px;




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.gold-icon-bg { background: rgba(245, 158, 11, 0.15); }




.teal-icon-bg { background: rgba(46, 196, 160, 0.15); }




.cyan-icon-bg { background: rgba(79, 195, 247, 0.15); }




.purple-icon-bg { background: rgba(167, 139, 250, 0.15); }









.factor-tile-heading {




  flex: 1;




  display: flex;




  align-items: center;




  gap: 8px;




  flex-wrap: wrap;




}









.factor-name {




  font-family: 'Outfit', sans-serif;




  font-size: 0.95rem;




  font-weight: 800;




  color: #ffffff;




  margin: 0;




}









.factor-impact-badge {




  font-size: 0.65rem;




  font-weight: 800;




  padding: 0.15rem 0.5rem;




  border-radius: 6px;




  text-transform: uppercase;




  letter-spacing: 0.04em;




}









.impact-critical {




  background: rgba(245, 158, 11, 0.15);




  color: #FBBF24;




  border: 1px solid rgba(245, 158, 11, 0.3);




}









.impact-high {




  background: rgba(46, 196, 160, 0.15);




  color: #2EC4A0;




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.impact-medium {




  background: rgba(79, 195, 247, 0.15);




  color: #4FC3F7;




  border: 1px solid rgba(79, 195, 247, 0.3);




}









.impact-low {




  background: rgba(167, 139, 250, 0.15);




  color: #C4B5FD;




  border: 1px solid rgba(167, 139, 250, 0.3);




}









.factor-percent-pill {




  font-family: 'Outfit', sans-serif;




  font-size: 1.15rem;




  font-weight: 900;




  flex-shrink: 0;




  letter-spacing: -0.01em;




}









.gold-pill { color: #F59E0B; }




.teal-pill { color: #2EC4A0; }




.cyan-pill { color: #4FC3F7; }




.purple-pill { color: #A78BFA; }









.factor-desc {




  font-size: 0.8rem;




  color: rgba(255, 255, 255, 0.65);




  line-height: 1.45;




  margin: 0 0 0.65rem 0;




}









.factor-progress-track {




  height: 5px;




  background: rgba(255, 255, 255, 0.08);




  border-radius: 6px;




  overflow: hidden;




}









.factor-progress-bar {




  height: 100%;




  border-radius: 6px;




}









.bar-gold { background: linear-gradient(90deg, #F59E0B, #FBBF24); box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }




.bar-teal { background: linear-gradient(90deg, #2EC4A0, #4FC3F7); box-shadow: 0 0 8px rgba(46, 196, 160, 0.4); }




.bar-cyan { background: linear-gradient(90deg, #4FC3F7, #60A5FA); box-shadow: 0 0 8px rgba(79, 195, 247, 0.4); }




.bar-purple { background: linear-gradient(90deg, #A78BFA, #C084FC); box-shadow: 0 0 8px rgba(167, 139, 250, 0.4); }









@media (max-width: 768px) {




  .edu-section {




    padding: 4.5rem 0 !important;




  }




  .edu-heading {




    font-size: 2rem !important;




  }




  .glass-panel-edu {




    padding: 1.5rem !important;




  }




}














/* ==========================================================================




   ENHANCED OVERDUE CLOSURE & SETTLEMENT SECTION




   ========================================================================== */




.overdue-settlement-section {




  padding: 6rem 0 !important;




  background: radial-gradient(circle at 50% 20%, #15304a 0%, #0d1e2e 60%, #07121d 100%) !important;




  color: #ffffff !important;




  position: relative;




  overflow: hidden;




  border-top: 1px solid rgba(46, 196, 160, 0.2);




  border-bottom: 1px solid rgba(46, 196, 160, 0.2);




}









.orb-settle-1 {




  width: 450px;




  height: 450px;




  background: #2EC4A0;




  top: -100px;




  right: 8%;




  position: absolute;




  border-radius: 50%;




  filter: blur(100px);




  opacity: 0.18;




  pointer-events: none;




}









.orb-settle-2 {




  width: 500px;




  height: 500px;




  background: #4FC3F7;




  bottom: -120px;




  left: 5%;




  position: absolute;




  border-radius: 50%;




  filter: blur(100px);




  opacity: 0.16;




  pointer-events: none;




}









.settle-header-wrap {




  margin-bottom: 3.5rem;




}









.settle-live-badge {




  display: inline-flex;




  align-items: center;




  gap: 8px;




  background: rgba(46, 196, 160, 0.12);




  border: 1px solid rgba(46, 196, 160, 0.35);




  color: #2EC4A0;




  padding: 0.4rem 1.1rem;




  border-radius: 50px;




  font-size: 0.8rem;




  font-weight: 700;




  margin-bottom: 1rem;




  letter-spacing: 0.04em;




  text-transform: uppercase;




}









.settle-pulse-dot {




  width: 8px;




  height: 8px;




  border-radius: 50%;




  background-color: #2EC4A0;




  box-shadow: 0 0 10px #2EC4A0;




  animation: pulse-green-glow 2s infinite;




}









.settle-title {




  font-family: 'Outfit', sans-serif;




  font-size: 2.6rem;




  font-weight: 900;




  color: #ffffff;




  margin-bottom: 0.85rem;




  letter-spacing: -0.02em;




}









.settle-desc {




  font-size: 1.05rem;




  color: rgba(255, 255, 255, 0.7);




  max-width: 680px;




  margin: 0 auto;




  line-height: 1.6;




}









.settlement-steps-flow {




  display: grid;




  grid-template-columns: repeat(5, 1fr);




  gap: 16px;




  align-items: stretch;




  margin-bottom: 2.5rem;




}









.glass-panel-settle {




  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);




  backdrop-filter: blur(20px);




  -webkit-backdrop-filter: blur(20px);




  border: 1px solid rgba(255, 255, 255, 0.12);




  border-radius: 20px;




}









.settlement-step-card {




  padding: 24px 18px;




  position: relative;




  display: flex;




  flex-direction: column;




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);




  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);




}









.settlement-step-card:hover {




  transform: translateY(-4px);




  border-color: #2EC4A0;




  box-shadow: 0 18px 45px rgba(46, 196, 160, 0.25);




}









.settlement-step-card.highlight {




  border: 1.5px solid #2EC4A0;




  background: linear-gradient(145deg, rgba(46, 196, 160, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);




}









.step-num-badge {




  position: absolute;




  top: -12px;




  left: 18px;




  width: 28px;




  height: 28px;




  border-radius: 50%;




  background: #1B3A57;




  color: #ffffff;




  font-size: 13px;




  font-weight: 900;




  display: flex;




  align-items: center;




  justify-content: center;




  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);




  border: 2px solid rgba(255, 255, 255, 0.2);




}









.step-num-badge.active {




  background: #2EC4A0;




  color: #0c1c2b;




  border-color: #ffffff;




  box-shadow: 0 0 12px rgba(46, 196, 160, 0.6);




}









.step-icon-wrap {




  width: 44px;




  height: 44px;




  border-radius: 12px;




  display: flex;




  align-items: center;




  justify-content: center;




  margin: 6px 0 12px 0;




}









.icon-teal { background: rgba(46, 196, 160, 0.15); }




.icon-gold { background: rgba(245, 158, 11, 0.15); }




.icon-cyan { background: rgba(79, 195, 247, 0.15); }




.icon-indigo { background: rgba(129, 140, 248, 0.15); }




.icon-emerald { background: rgba(46, 196, 160, 0.25); }









.step-title {




  font-family: 'Outfit', sans-serif;




  font-size: 17px;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 2px;




}









.step-subtitle {




  font-size: 10.5px;




  font-weight: 800;




  color: #2EC4A0;




  text-transform: uppercase;




  letter-spacing: 0.5px;




  margin-bottom: 8px;




  display: inline-block;




}









.step-desc {




  font-size: 12.5px;




  color: rgba(255, 255, 255, 0.65);




  line-height: 1.5;




  margin-bottom: 14px;




  flex-grow: 1;




}









.step-checklist {




  list-style: none;




  padding: 0;




  margin: 0;




  display: flex;




  flex-direction: column;




  gap: 6px;




  border-top: 1px dashed rgba(255, 255, 255, 0.1);




  padding-top: 10px;




}









.step-checklist li {




  font-size: 11.5px;




  font-weight: 600;




  color: rgba(255, 255, 255, 0.85);




  display: flex;




  align-items: center;




  gap: 6px;




}









.chk-svg {




  display: flex;




  align-items: center;




  flex-shrink: 0;




}









/* Settlement CTA Card */




.settlement-cta-card {




  padding: 24px 30px;




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 20px;




  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.settlement-cta-left {




  display: flex;




  align-items: center;




  gap: 16px;




  max-width: 680px;




}









.cta-icon-box {




  width: 50px;




  height: 50px;




  border-radius: 14px;




  background: rgba(46, 196, 160, 0.15);




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}









.settle-cta-heading {




  font-family: 'Outfit', sans-serif;




  font-size: 17px;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 3px;




}









.settle-cta-sub {




  font-size: 12.5px;




  color: rgba(255, 255, 255, 0.7);




  margin: 0;




  line-height: 1.5;




}









.btn-settle {




  padding: 0.75rem 1.5rem;




  font-size: 0.9rem;




  font-weight: 800;




  border-radius: 12px;




  white-space: nowrap;




}









@media (max-width: 1100px) {




  .settlement-steps-flow {




    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));




  }




}









@media (max-width: 768px) {




  .overdue-settlement-section {




    padding: 4.5rem 0 !important;




  }




  .settle-title {




    font-size: 2rem !important;




  }




  .settlement-steps-flow {




    grid-template-columns: 1fr;




  }




  .settlement-cta-card {




    flex-direction: column;




    text-align: center;




  }




  .settlement-cta-left {




    flex-direction: column;




    text-align: center;




  }




}














/* ==========================================================================




   VIDEO PLAYER & GLOBAL ANCHOR / FOOTER ENHANCEMENTS (v=36)




   ========================================================================== */









/* 1. Global Overflow & Persistent Sticky Header Fix */




html {




  scroll-behavior: smooth;




  overflow-x: clip !important;




}









body {




  overflow-x: clip !important;




  position: relative;




}









header#main-header, header {




  position: sticky !important;




  top: 0 !important;




  z-index: 1000 !important;




  background-color: rgba(255, 255, 255, 0.98) !important;




  backdrop-filter: blur(14px) !important;




  -webkit-backdrop-filter: blur(14px) !important;




  box-shadow: 0 4px 20px rgba(27, 58, 87, 0.06);




}









header.scrolled {




  box-shadow: 0 8px 30px rgba(27, 58, 87, 0.12) !important;




}









/* 2. Interactive HD Video Walkthrough Player */




.video-active-player {




  width: 100%;




  height: 100%;




  min-height: 420px;




  background: radial-gradient(circle at 50% 30%, #15304a 0%, #0c1c2b 70%, #07121d 100%);




  border-radius: 16px;




  display: flex;




  flex-direction: column;




  justify-content: space-between;




  overflow: hidden;




  position: relative;




  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);




  border: 1px solid rgba(46, 196, 160, 0.3);




}









.vap-top-bar {




  padding: 12px 18px;




  background: rgba(12, 28, 43, 0.85);




  border-bottom: 1px solid rgba(255, 255, 255, 0.08);




  display: flex;




  justify-content: space-between;




  align-items: center;




  flex-wrap: wrap;




  gap: 8px;




}









.vap-badge {




  font-size: 11px;




  font-weight: 800;




  color: #2EC4A0;




  display: inline-flex;




  align-items: center;




  gap: 6px;




  text-transform: uppercase;




  letter-spacing: 0.5px;




}









.vap-live-dot {




  width: 7px;




  height: 7px;




  border-radius: 50%;




  background: #2EC4A0;




  box-shadow: 0 0 8px #2EC4A0;




  animation: pulse-green-glow 1.5s infinite;




}









.vap-chapter-title {




  font-size: 12.5px;




  font-weight: 700;




  color: #ffffff;




}









.vap-stage {




  flex-grow: 1;




  display: flex;




  align-items: center;




  justify-content: center;




  padding: 20px;




}









.vap-scene {




  width: 100%;




  display: flex;




  justify-content: center;




  align-items: center;




}









.vap-phone-mockup {




  width: 260px;




  background: #08111a;




  border: 2px solid rgba(46, 196, 160, 0.4);




  border-radius: 28px;




  padding: 12px 14px 18px;




  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(46, 196, 160, 0.2);




  position: relative;




}









.vpm-notch {




  width: 70px;




  height: 5px;




  background: #1e293b;




  border-radius: 10px;




  margin: 0 auto 10px;




}









.vpm-header {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 12px;




  padding-bottom: 6px;




  border-bottom: 1px solid rgba(255, 255, 255, 0.08);




}









.vpm-brand {




  font-family: 'Outfit', sans-serif;




  font-size: 13px;




  font-weight: 900;




  color: #2EC4A0;




}









.vpm-step-tag {




  font-size: 10px;




  color: rgba(255, 255, 255, 0.5);




  font-weight: 700;




}









.vpm-body {




  text-align: center;




}









.vpm-app-icon {




  width: 44px;




  height: 44px;




  border-radius: 12px;




  background: rgba(46, 196, 160, 0.15);




  display: flex;




  align-items: center;




  justify-content: center;




  margin: 0 auto 10px;




}









.vpm-body h4 {




  font-size: 14px;




  font-weight: 800;




  color: #ffffff;




  margin-bottom: 4px;




}









.vpm-body p {




  font-size: 11px;




  color: rgba(255, 255, 255, 0.65);




  margin-bottom: 12px;




}









.vpm-input-box {




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(46, 196, 160, 0.5);




  border-radius: 8px;




  padding: 8px;




  font-size: 12px;




  font-weight: 700;




  color: #ffffff;




  margin-bottom: 10px;




}









.vpm-cursor {




  animation: blink 1s infinite;




  color: #2EC4A0;




}









.vpm-otp-row {




  display: flex;




  justify-content: center;




  gap: 6px;




  margin-bottom: 10px;




}









.vpm-otp-digit {




  width: 24px;




  height: 28px;




  border-radius: 6px;




  background: rgba(46, 196, 160, 0.15);




  border: 1px solid #2EC4A0;




  color: #ffffff;




  font-weight: 800;




  font-size: 12px;




  display: flex;




  align-items: center;




  justify-content: center;




  box-shadow: 0 0 10px rgba(46, 196, 160, 0.4);




}









.vpm-verified-pill {




  display: inline-flex;




  align-items: center;




  gap: 5px;




  background: rgba(46, 196, 160, 0.2);




  color: #2EC4A0;




  font-size: 10.5px;




  font-weight: 800;




  padding: 4px 10px;




  border-radius: 20px;




}









/* Scene 2 */




.vpm-pan-box {




  background: rgba(255, 255, 255, 0.06);




  border: 1px solid rgba(255, 255, 255, 0.15);




  border-radius: 8px;




  padding: 8px;




  margin-bottom: 12px;




}









.vpm-pan-label {




  display: block;




  font-size: 9.5px;




  color: rgba(255, 255, 255, 0.5);




  text-transform: uppercase;




}









.vpm-pan-box strong {




  font-size: 14px;




  letter-spacing: 2px;




  color: #4FC3F7;




}









.vpm-score-circle {




  width: 80px;




  height: 80px;




  border-radius: 50%;




  background: conic-gradient(#2EC4A0 0% 88%, rgba(255,255,255,0.1) 88% 100%);




  margin: 0 auto 10px;




  display: flex;




  flex-direction: column;




  align-items: center;




  justify-content: center;




  box-shadow: 0 0 20px rgba(46, 196, 160, 0.5);




}









.vpm-score-val {




  font-family: 'Outfit', sans-serif;




  font-size: 22px;




  font-weight: 900;




  color: #ffffff;




  line-height: 1;




}









.vpm-score-status {




  font-size: 8.5px;




  font-weight: 800;




  color: #2EC4A0;




  letter-spacing: 0.5px;




}









.vpm-bureau-row {




  font-size: 9.5px;




  color: rgba(255, 255, 255, 0.6);




  display: flex;




  flex-direction: column;




  gap: 2px;




}









.vpm-soft-check {




  color: #2EC4A0;




  font-weight: 700;




}









/* Scene 3 */




.vpm-factor-mini {




  display: flex;




  justify-content: space-between;




  font-size: 10.5px;




  padding: 5px 8px;




  border-radius: 6px;




  background: rgba(255, 255, 255, 0.04);




  margin-bottom: 5px;




}









.vpm-factor-mini span {




  color: rgba(255, 255, 255, 0.7);




}









.vpm-dl-btn {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  gap: 6px;




  width: 100%;




  padding: 7px 10px;




  font-size: 11px;




  font-weight: 800;




  margin-top: 8px;




  border-radius: 8px;




}









/* Controls Bar */




.vap-controls {




  padding: 12px 18px;




  background: rgba(12, 28, 43, 0.95);




  border-top: 1px solid rgba(255, 255, 255, 0.1);




  display: flex;




  align-items: center;




  gap: 12px;




}









.vap-play-btn {




  background: #2EC4A0;




  border: none;




  width: 32px;




  height: 32px;




  border-radius: 50%;




  display: flex;




  align-items: center;




  justify-content: center;




  cursor: pointer;




  flex-shrink: 0;




  box-shadow: 0 0 12px rgba(46, 196, 160, 0.6);




}









.vap-time-code {




  font-size: 11.5px;




  font-weight: 700;




  color: #cbd5e1;




  white-space: nowrap;




}









.vap-progress-wrap {




  flex-grow: 1;




  height: 6px;




  background: rgba(255, 255, 255, 0.15);




  border-radius: 10px;




  cursor: pointer;




  position: relative;




  overflow: hidden;




}









.vap-progress-buffered {




  position: absolute;




  top: 0;




  left: 0;




  height: 100%;




  width: 100%;




  background: rgba(255, 255, 255, 0.2);




}









.vap-progress-bar {




  position: absolute;




  top: 0;




  left: 0;




  height: 100%;




  width: 0%;




  background: #2EC4A0;




  box-shadow: 0 0 8px #2EC4A0;




  transition: width 0.1s linear;




}









.vap-chapters-pills {




  display: flex;




  gap: 6px;




}









.vap-chap-btn {




  background: rgba(255, 255, 255, 0.08);




  border: 1px solid rgba(255, 255, 255, 0.15);




  color: rgba(255, 255, 255, 0.7);




  font-size: 10.5px;




  font-weight: 800;




  padding: 4px 8px;




  border-radius: 6px;




  cursor: pointer;




  transition: all 0.2s ease;




}









.vap-chap-btn.active {




  background: rgba(46, 196, 160, 0.2);




  border-color: #2EC4A0;




  color: #2EC4A0;




}









/* 3. Footer Copyright Visibility on Desktop & Mobile */




footer {




  padding-bottom: 5rem !important;




  position: relative !important;




  z-index: 95 !important;




}









.footer-bottom {




  position: relative !important;




  z-index: 100 !important;




  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;




  padding-top: 2rem !important;




  margin-top: 1rem !important;




}









.copyright-text p {




  color: #ffffff !important;




  font-size: 0.85rem !important;




  font-weight: 600 !important;




  margin: 0 0 4px 0 !important;




  opacity: 1 !important;




}









.copyright-text strong {




  color: #2EC4A0 !important;




  font-weight: 800 !important;




}









.corp-cin {




  font-size: 0.75rem !important;




  color: rgba(255, 255, 255, 0.7) !important;




  display: block !important;




}









.footer-bureau-compliance {




  color: rgba(255, 255, 255, 0.8) !important;




  font-size: 0.8rem !important;




}









.footer-bureau-compliance strong {




  color: #2EC4A0 !important;




}









@keyframes blink {




  0%, 100% { opacity: 1; }




  50% { opacity: 0; }




}














/* ==========================================================================




   PERMANENT FIXED NAVIGATION & ALWAYS-VISIBLE ANCHOR BUTTONS (v=37)




   ========================================================================== */









/* 1. Rock-Solid Fixed Header Across Entire Website */




header#main-header, header {




  position: fixed !important;




  top: 0 !important;




  left: 0 !important;




  right: 0 !important;




  width: 100% !important;




  height: 88px !important;




  z-index: 1000 !important;




  background-color: rgba(255, 255, 255, 0.98) !important;




  backdrop-filter: blur(16px) !important;




  -webkit-backdrop-filter: blur(16px) !important;




  border-bottom: 1px solid rgba(27, 58, 87, 0.12) !important;




  box-shadow: 0 4px 25px rgba(27, 58, 87, 0.08) !important;




  display: flex !important;




  align-items: center !important;




  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;




}









body {




  padding-top: 88px !important;




}









header.scrolled {




  height: 74px !important;




  box-shadow: 0 8px 30px rgba(27, 58, 87, 0.14) !important;




  background-color: rgba(255, 255, 255, 0.99) !important;




}









/* 2. Permanently Visible Back to Top Navigation Anchor Button */




.back-to-top-btn, button#back-to-top {




  position: fixed !important;




  bottom: 28px !important;




  right: 28px !important;




  width: 50px !important;




  height: 50px !important;




  border-radius: 50% !important;




  background: #1B3A57 !important;




  color: #2EC4A0 !important;




  border: 2px solid #2EC4A0 !important;




  box-shadow: 0 8px 25px rgba(27, 58, 87, 0.45), 0 0 15px rgba(46, 196, 160, 0.3) !important;




  display: flex !important;




  align-items: center !important;




  justify-content: center !important;




  cursor: pointer !important;




  z-index: 999 !important;




  opacity: 1 !important;




  visibility: visible !important;




  transform: scale(1) !important;




  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;




}









.back-to-top-btn:hover, button#back-to-top:hover {




  background: #2EC4A0 !important;




  color: #1B3A57 !important;




  border-color: #ffffff !important;




  box-shadow: 0 12px 35px rgba(46, 196, 160, 0.65), 0 0 20px rgba(46, 196, 160, 0.5) !important;




  transform: translateY(-4px) scale(1.1) !important;




}









/* 3. Floating Quick Navigation Anchor Menu Wrapper */




.floating-assistant-wrapper {




  position: fixed !important;




  bottom: 90px !important;




  right: 28px !important;




  z-index: 998 !important;




  display: flex !important;




  flex-direction: column !important;




  align-items: flex-end !important;




}









.assistant-trigger-btn, button#assistant-trigger {




  width: 50px !important;




  height: 50px !important;




  border-radius: 50% !important;




  background-color: #2EC4A0 !important;




  color: #1B3A57 !important;




  border: 2px solid #ffffff !important;




  cursor: pointer !important;




  display: grid !important;




  place-items: center !important;




  box-shadow: 0 8px 25px rgba(46, 196, 160, 0.45) !important;




  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;




  opacity: 1 !important;




  visibility: visible !important;




}









.assistant-trigger-btn:hover, button#assistant-trigger:hover {




  background-color: #1B3A57 !important;




  color: #2EC4A0 !important;




  border-color: #2EC4A0 !important;




  transform: scale(1.1) rotate(90deg) !important;




  box-shadow: 0 12px 30px rgba(27, 58, 87, 0.5) !important;




}









.assistant-trigger-btn.active, button#assistant-trigger.active {




  transform: rotate(135deg) !important;




  background-color: #1B3A57 !important;




  color: #2EC4A0 !important;




  border-color: #2EC4A0 !important;




}









.assistant-menu {




  margin-bottom: 0.75rem !important;




  display: flex !important;




  flex-direction: column !important;




  gap: 0.45rem !important;




  opacity: 0 !important;




  visibility: hidden !important;




  transform: translateY(15px) scale(0.95) !important;




  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;




  pointer-events: none !important;




}









.assistant-menu.open {




  opacity: 1 !important;




  visibility: visible !important;




  transform: translateY(0) scale(1) !important;




  pointer-events: auto !important;




}









.assistant-menu-item {




  display: flex !important;




  align-items: center !important;




  gap: 0.65rem !important;




  background-color: #ffffff !important;




  border: 1.5px solid rgba(46, 196, 160, 0.3) !important;




  padding: 0.55rem 1.15rem !important;




  border-radius: 50px !important;




  box-shadow: 0 6px 20px rgba(27, 58, 87, 0.15) !important;




  font-size: 0.8rem !important;




  font-weight: 800 !important;




  color: #1B3A57 !important;




  cursor: pointer !important;




  text-decoration: none !important;




  white-space: nowrap !important;




  transition: all 0.2s ease !important;




}









.assistant-menu-item:hover {




  background-color: #1B3A57 !important;




  border-color: #2EC4A0 !important;




  color: #ffffff !important;




  transform: translateX(-4px) !important;




  box-shadow: 0 8px 25px rgba(46, 196, 160, 0.35) !important;




}









.assistant-menu-item-icon {




  width: 24px !important;




  height: 24px !important;




  background-color: rgba(46, 196, 160, 0.15) !important;




  color: #2EC4A0 !important;




  border-radius: 50% !important;




  display: flex !important;




  align-items: center !important;




  justify-content: center !important;




  flex-shrink: 0 !important;




}









.assistant-menu-item:hover .assistant-menu-item-icon {




  background-color: #2EC4A0 !important;




  color: #1B3A57 !important;




}









@media (max-width: 768px) {




  header#main-header, header {




    height: 74px !important;




  }




  body {




    padding-top: 74px !important;




  }




  .back-to-top-btn, button#back-to-top {




    bottom: 20px !important;




    right: 20px !important;




    width: 44px !important;




    height: 44px !important;




  }




  .floating-assistant-wrapper {




    bottom: 74px !important;




    right: 20px !important;




  }




  .assistant-trigger-btn, button#assistant-trigger {




    width: 44px !important;




    height: 44px !important;




  }




}














/* ==========================================================================




   ULTRA-STRICT FIXED HEADER & VIEWPORT LOCK (v=38)




   ========================================================================== */









/* 1. Remove ANY transform from body & html that breaks position: fixed */




html, body {




  transform: none !important;




  filter: none !important;




  perspective: none !important;




  will-change: auto !important;




  animation: none !important;




}









/* 2. Lock Header to Top of Viewport Permanently */




header#main-header, header {




  position: fixed !important;




  top: 0 !important;




  left: 0 !important;




  right: 0 !important;




  width: 100vw !important;




  max-width: 100% !important;




  height: 88px !important;




  z-index: 10000 !important;




  background: rgba(255, 255, 255, 0.98) !important;




  backdrop-filter: blur(16px) !important;




  -webkit-backdrop-filter: blur(16px) !important;




  border-bottom: 1px solid rgba(27, 58, 87, 0.12) !important;




  box-shadow: 0 4px 25px rgba(27, 58, 87, 0.08) !important;




  margin: 0 !important;




  box-sizing: border-box !important;




  display: flex !important;




  align-items: center !important;




}









body {




  padding-top: 88px !important;




}









header.scrolled {




  height: 74px !important;




  box-shadow: 0 8px 30px rgba(27, 58, 87, 0.15) !important;




  background: rgba(255, 255, 255, 0.99) !important;




}









@media (max-width: 768px) {




  header#main-header, header {




    height: 74px !important;




  }




  body {




    padding-top: 74px !important;




  }




}





















/* Enhanced Non-White Colored Sub-Text */


.check-card-sub {


  font-size: 13px !important;


  font-weight: 600 !important;


  color: #38bdf8 !important;


  margin: 3px 0 0 0 !important;


  line-height: 1.4 !important;


  display: flex !important;


  flex-wrap: wrap !important;


  align-items: center !important;


  gap: 6px !important;


}





.check-card-sub .sub-cyan {


  color: #38bdf8 !important; /* Radiant Sky Cyan */


  font-weight: 700 !important;


}





.check-card-sub .sub-dot {


  color: #2EC4A0 !important; /* Brand Emerald Dot */


  font-weight: 800 !important;


}





.check-card-sub .sub-green {


  color: #2EC4A0 !important; /* ScoreCare Brand Teal */


  font-weight: 700 !important;


}





/* Hide any legacy duplicate back-to-top button */


.back-to-top-btn, button#back-to-top {


  display: none !important;


  visibility: hidden !important;


  opacity: 0 !important;


  pointer-events: none !important;


}





/* SINGLE UNIFIED SCROLL TO TOP ANCHOR BUTTON (↑) */


.scroll-top-btn, a#scroll-to-top {


  position: fixed !important;


  bottom: 90px !important;


  right: 28px !important;


  width: 48px !important;


  height: 48px !important;


  border-radius: 50% !important;


  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;


  color: #ffffff !important;


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  text-decoration: none !important;


  z-index: 999 !important;


  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45) !important;


  border: 2px solid rgba(255, 255, 255, 0.9) !important;


  opacity: 0 !important;


  visibility: hidden !important;


  transform: translateY(20px) scale(0.8) !important;


  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;


  cursor: pointer !important;


  outline: none !important;


}





.scroll-top-btn.visible {


  opacity: 1 !important;


  visibility: visible !important;


  transform: translateY(0) scale(1) !important;


}





.scroll-top-btn:hover {


  background: linear-gradient(135deg, #22d3ee, #0369a1) !important;


  color: #ffffff !important;


  transform: translateY(-4px) scale(1.08) !important;


  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.65) !important;


}





.scroll-top-btn:active {


  transform: translateY(-1px) scale(0.95) !important;


}





.scroll-top-btn svg {


  transition: transform 0.25s ease;


}





.scroll-top-btn:hover svg {


  transform: translateY(-2px);


}





@media (max-width: 768px) {


  .scroll-top-btn, a#scroll-to-top {


    bottom: 78px !important;


    right: 18px !important;


    width: 42px !important;


    height: 42px !important;


  }


  .scroll-top-btn svg {


    width: 18px;


    height: 18px;


  }


}






/* ==========================================================================

   PERFECT SINGLE SCROLL-TO-TOP & FLOATING STACK (v40)

   ========================================================================== */



/* 1. Quick Assistant Button: Positioned above scroll-to-top */

.floating-assistant-wrapper {

  position: fixed !important;

  bottom: 88px !important;

  right: 28px !important;

  z-index: 998 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end !important;

}



/* 2. ONE Single Floating Scroll to Top Anchor Button (↑) */

.scroll-top-btn, a#scroll-to-top {

  position: fixed !important;

  bottom: 28px !important;

  right: 28px !important;

  width: 48px !important;

  height: 48px !important;

  border-radius: 50% !important;

  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;

  color: #ffffff !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-decoration: none !important;

  z-index: 9999 !important;

  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5) !important;

  border: 2px solid rgba(255, 255, 255, 0.9) !important;

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

  transform: translateY(16px) scale(0.85) !important;

  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.3s ease !important;

  cursor: pointer !important;

  outline: none !important;

}



.scroll-top-btn.visible, a#scroll-to-top.visible {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  transform: translateY(0) scale(1) !important;

}



.scroll-top-btn:hover, a#scroll-to-top:hover {

  background: linear-gradient(135deg, #22d3ee, #0369a1) !important;

  color: #ffffff !important;

  transform: translateY(-4px) scale(1.08) !important;

  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.7) !important;

}



.scroll-top-btn:active, a#scroll-to-top:active {

  transform: translateY(-1px) scale(0.95) !important;

}



.scroll-top-btn svg, a#scroll-to-top svg {

  width: 22px !important;

  height: 22px !important;

  stroke: #ffffff !important;

  stroke-width: 2.5 !important;

  transition: transform 0.25s ease !important;

}



.scroll-top-btn:hover svg, a#scroll-to-top:hover svg {

  transform: translateY(-2px) !important;

}



/* Hide legacy back-to-top button permanently */

.back-to-top-btn, button#back-to-top {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



/* Mobile Adjustments */

@media (max-width: 768px) {

  .floating-assistant-wrapper {

    bottom: 78px !important;

    right: 18px !important;

  }

  .scroll-top-btn, a#scroll-to-top {

    bottom: 22px !important;

    right: 18px !important;

    width: 44px !important;

    height: 44px !important;

  }

  .scroll-top-btn svg, a#scroll-to-top svg {

    width: 20px !important;

    height: 20px !important;

  }

}



/* ==========================================================================
   UPDATED NAV & FOOTER BRANDING, SIZES & HIGHLIGHTS
   ========================================================================== */

/* 9. Nav Bar: Increase logo size, reduce menu font size */
header .logo, .logo {
  height: 66px !important;
  display: flex !important;
  align-items: center !important;
}

header .logo img, .logo img {
  height: 60px !important;
  max-height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
}

header nav a, #nav-links a, .nav-links a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15px !important;
  padding: 6px 11px !important;
}

/* 4. Footer: Increase company logo size */
.footer-logo img, .footer-brand .logo img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 8px !important;
}

/* 5. Footer: Highlight RBI Authorized CICs, 100% Secured & Encrypted, Official Bureau Sync */
.footer-trust-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 16px 0 20px 0 !important;
}

.footer-trust-pills .trust-pill {
  background: linear-gradient(135deg, rgba(46, 196, 160, 0.16), rgba(6, 182, 212, 0.14)) !important;
  border: 1px solid #2EC4A0 !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-shadow: 0 4px 18px rgba(46, 196, 160, 0.25) !important;
  transition: all 0.3s ease !important;
}

.footer-trust-pills .trust-pill:hover {
  background: linear-gradient(135deg, rgba(46, 196, 160, 0.28), rgba(6, 182, 212, 0.24)) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(46, 196, 160, 0.4) !important;
}

.footer-trust-pills .trust-pill svg {
  color: #2EC4A0 !important;
  stroke: #2EC4A0 !important;
}

/* 6. Copyright Made with pride in India line */
.made-in-india-line {
  margin: 4px 0 0 0 !important;
  font-size: 13px !important;
  color: #cbd5e1 !important;
  font-weight: 500 !important;
  display: block !important;
}

/* 11. Remove Mobile App bottom bar from site */
.floating-download-banner, #floating-download-banner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ==========================================================================
   BLOG DETAIL PAGE - FULL WIDTH & DYNAMIC HERO COVER
   ========================================================================== */

.blog-detail-container,
.article-container,
.blog-post-container,
main.blog-detail,
.blog-detail-wrapper,
.article-layout,
.single-blog-wrapper {
  max-width: 1280px !important;
  width: 95% !important;
  margin: 0 auto !important;
  padding: 24px 0 60px 0 !important;
}

#article-cover-wrapper,
.article-cover-wrapper,
.blog-hero-image-wrapper {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 35px rgba(27, 58, 87, 0.08) !important;
  background: #ffffff !important;
}

#article-cover,
.article-cover-img,
.blog-hero-image {
  width: 100% !important;
  max-height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}

.article-content,
#article-content {
  max-width: 100% !important;
  width: 100% !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: #334155 !important;
}

.article-content figure,
#article-content figure,
.article-content img,
#article-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
}


/* ==========================================================================
   BLOG DETAIL PAGE - FULL WIDTH & DYNAMIC HERO COVER
   ========================================================================== */

.article-page-main {
  width: 100% !important;
  background-color: #F8FAFB !important;
  padding: 30px 0 80px 0 !important;
}

.article-container,
.article-page-main .container,
.article-page-main .article-container {
  max-width: 1240px !important;
  width: 95% !important;
  margin: 0 auto !important;
}

.reader-header-block {
  max-width: 100% !important;
  margin-bottom: 28px !important;
}

.reader-title {
  font-size: 2.6rem !important;
  line-height: 1.25 !important;
  color: #1B3A57 !important;
  font-weight: 800 !important;
  margin: 16px 0 14px 0 !important;
}

.reader-lead {
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: #52677C !important;
  margin-bottom: 24px !important;
}

.reader-banner-box {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-bottom: 36px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 35px rgba(27, 58, 87, 0.08) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.reader-cover-img {
  width: 100% !important;
  max-height: 540px !important;
  object-fit: contain !important;
  display: block !important;
  background-color: #ffffff !important;
}

.reader-content-body {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 48px 48px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 12px 40px rgba(27, 58, 87, 0.05) !important;
  font-size: 1.1rem !important;
  line-height: 1.9 !important;
  color: #334155 !important;
}

.reader-content-body h1,
.reader-content-body h2 {
  color: #1B3A57 !important;
  font-weight: 800 !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
}

.reader-content-body p {
  color: #475569 !important;
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  margin-bottom: 20px !important;
}

.reader-content-body img,
.reader-content-body figure {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  margin: 24px 0 !important;
}

.reader-share-row,
.reader-cta-box {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .reader-title {
    font-size: 1.9rem !important;
  }
  .reader-content-body {
    padding: 28px 20px !important;
    font-size: 1rem !important;
  }
}


/* ==========================================================
   COMPREHENSIVE CREDIT MANAGEMENT SECTION
   ========================================================== */
.credit-management-section {
  padding: 6.5rem 0;
  background: #FDFBF7;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(27, 58, 87, 0.05);
  border-bottom: 1px solid rgba(27, 58, 87, 0.05);
}

.credit-mgmt-header {
  margin-bottom: 3.5rem;
}

.credit-mgmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(46, 196, 160, 0.12);
  color: #1E4841;
  border: 1px solid rgba(46, 196, 160, 0.28);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.credit-mgmt-badge svg {
  color: #2EC4A0;
}

.credit-mgmt-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 2.35rem;
  font-weight: 800;
  color: #1B3A57;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.credit-mgmt-subtitle {
  font-size: 1.05rem;
  color: #6B7F94;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.credit-mgmt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.credit-mgmt-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #E8ECEF;
  border-radius: 18px;
  padding: 30px 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 18px rgba(27, 58, 87, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  position: relative;
}

.credit-mgmt-card:hover {
  transform: translateY(-5px);
  border-color: rgba(46, 196, 160, 0.5);
  box-shadow: 0 14px 34px rgba(27, 58, 87, 0.09);
  background: #FAFCF9;
}

.credit-mgmt-card-top {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.credit-mgmt-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(46, 196, 160, 0.12);
  color: #1E4841;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.credit-mgmt-card:hover .credit-mgmt-icon-wrap {
  background: #2EC4A0;
  color: #FFFFFF;
  transform: scale(1.05);
}

.credit-mgmt-card-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1B3A57;
  margin-bottom: 0.35rem;
}

.credit-mgmt-card-cat {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2EC4A0;
  margin-bottom: 0.85rem;
}

.credit-mgmt-card-desc {
  font-size: 0.9rem;
  color: #6B7F94;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.credit-mgmt-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 58, 87, 0.06);
}

.credit-mgmt-card-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1E4841;
}

.credit-mgmt-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(46, 196, 160, 0.1);
  color: #1E4841;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.credit-mgmt-card:hover .credit-mgmt-arrow {
  transform: translateX(4px);
  background: #2EC4A0;
  color: #FFFFFF;
}

@media (max-width: 1024px) {
  .credit-mgmt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .credit-mgmt-grid {
    grid-template-columns: 1fr;
  }
  .credit-management-section {
    padding: 4.5rem 0;
  }
  .credit-mgmt-title {
    font-size: 1.85rem;
  }
}


/* ==========================================================
   COMPREHENSIVE CREDIT MANAGEMENT SECTION - SHARED CARD STYLES
   ========================================================== */
.credit-management-section {
  padding: 5rem 0;
  background: #FDFBF7 !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(27, 58, 87, 0.06);
  border-bottom: 1px solid rgba(27, 58, 87, 0.06);
  display: block !important;
}

.credit-mgmt-header {
  margin-bottom: 3rem;
  text-align: center;
}

.credit-mgmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(46, 196, 160, 0.12);
  color: #1E4841;
  border: 1px solid rgba(46, 196, 160, 0.28);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.credit-mgmt-badge svg {
  color: #2EC4A0;
}

.credit-mgmt-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: #1B3A57;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.credit-mgmt-subtitle {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.credit-mgmt-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* SINGLE MAIN CARD CONTAINER */
.credit-mgmt-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border: 1px solid #E8ECEF !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 4px 16px rgba(27, 58, 87, 0.04) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.credit-mgmt-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(46, 196, 160, 0.5) !important;
  box-shadow: 0 10px 25px rgba(27, 58, 87, 0.08) !important;
}

/* RESET ALL NESTED CONTAINER BORDERS & EXTRA BOXES */
.credit-mgmt-card-top,
.credit-mgmt-card-title,
.credit-mgmt-card-cat,
.credit-mgmt-card-desc,
.credit-mgmt-card-bottom,
.credit-mgmt-card-label {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
}

.credit-mgmt-card-top {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.credit-mgmt-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(46, 196, 160, 0.12) !important;
  color: #1E4841 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.credit-mgmt-card:hover .credit-mgmt-icon-wrap {
  background: #2EC4A0 !important;
  color: #FFFFFF !important;
}

.credit-mgmt-card-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.credit-mgmt-card-cat {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1E4841 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.credit-mgmt-card-desc {
  font-size: 0.92rem !important;
  color: #64748B !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  flex-grow: 1 !important;
}

.credit-mgmt-card-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(27, 58, 87, 0.06) !important;
}

.credit-mgmt-card-label {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #1E4841 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.credit-mgmt-arrow {
  color: #1E4841 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.15rem !important;
}

.credit-mgmt-card:hover .credit-mgmt-arrow {
  transform: translateX(4px) !important;
  color: #2EC4A0 !important;
}

@media (max-width: 1024px) {
  .credit-mgmt-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .credit-mgmt-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .credit-management-section {
    padding: 3.5rem 0 !important;
  }
  .credit-mgmt-title {
    font-size: 1.85rem !important;
  }
}

/* ==========================================================
   CREDIT SCORE FORM CARD CLEANUP
   ========================================================== */
.hero-credit-check-card {
  padding: 28px 24px !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.06) !important;
}

.hero-input-wrap {
  display: flex !important;
  align-items: center !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 46px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  box-shadow: none !important;
}

.hero-input-wrap:focus-within {
  border-color: #2EC4A0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(46, 196, 160, 0.15) !important;
}

.hero-input-field {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
  width: 100% !important;
  outline: none !important;
  font-size: 14px !important;
  color: #1B3A57 !important;
}

/* ==========================================================
   UPDATED SCORECARE THEME FOOTER STYLING
   ========================================================== */
footer, #main-footer {
  background: #F4F0E8 !important;
  color: #5A6B64 !important;
  padding: 5rem 0 2.5rem !important;
  border-top: 1px solid #D8D2C5 !important;
  position: relative !important;
  z-index: 10 !important;
}

.footer-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 3rem !important;
  padding-bottom: 2.5rem !important;
  flex-wrap: wrap !important;
}

.footer-brand {
  max-width: 460px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #FFFFFF !important;
  padding: 0.65rem 1.2rem !important;
  border-radius: 12px !important;
  width: fit-content !important;
  border: 1px solid #E8ECEF !important;
  box-shadow: 0 2px 8px rgba(27, 58, 87, 0.04) !important;
}

.footer-logo img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}

.company-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  width: fit-content !important;
}

.footer-brand-desc {
  color: #5A6B64 !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.footer-brand-desc strong {
  color: #1E4841 !important;
}

.social-label {
  color: #1E4841 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.footer-social-icons {
  display: flex !important;
  gap: 10px !important;
}

.social-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: #1E4841 !important;
  border: 1px solid #D8D2C5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.social-icon-btn:hover {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-color: #1E4841 !important;
  transform: translateY(-2px) !important;
}

.footer-tagline-block {
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1rem !important;
}

.footer-tagline {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #6B7F94 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.footer-tagline span {
  color: #1E4841 !important;
}

.footer-trust-pills {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.trust-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #FFFFFF !important;
  color: #1E4841 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid #D8D2C5 !important;
}

.footer-store-buttons {
  display: flex !important;
  gap: 10px !important;
}

.footer-store-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  color: #1E4841 !important;
  border: 1px solid #D8D2C5 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.footer-store-badge:hover {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-color: #1E4841 !important;
  transform: translateY(-2px) !important;
}

.footer-divider {
  height: 1px !important;
  background: #D8D2C5 !important;
  margin: 2rem 0 2.5rem 0 !important;
}

.footer-nav-columns {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-bottom: 2.5rem !important;
}

.footer-nav-col {
  flex: 1 !important;
  padding: 0 2.5rem !important;
}

.footer-nav-col:first-child {
  padding-left: 0 !important;
}

.footer-nav-col:last-child {
  padding-right: 0 !important;
}

.footer-col-separator {
  width: 1px !important;
  align-self: stretch !important;
  background: #D8D2C5 !important;
  flex-shrink: 0 !important;
}

.footer-col-heading {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  color: #1E4841 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.footer-col-heading::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(30, 72, 65, 0.15) !important;
  display: block !important;
}

.footer-links {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links a {
  color: #5A6B64 !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.footer-links a:hover {
  color: #1E4841 !important;
  transform: translateX(4px) !important;
  font-weight: 600 !important;
}

.footer-bottom {
  border-top: 1px solid #D8D2C5 !important;
  padding-top: 1.8rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  font-size: 0.84rem !important;
  color: #5A6B64 !important;
}

.copyright-text p {
  margin: 0 0 4px 0 !important;
  color: #5A6B64 !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
}

.copyright-text strong {
  color: #1E4841 !important;
  font-weight: 700 !important;
}

.made-in-india-line {
  color: #5A6B64 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.footer-bureau-compliance {
  color: #5A6B64 !important;
  font-size: 0.84rem !important;
}

.footer-bureau-compliance strong {
  color: #1E4841 !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .footer-top-row {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .footer-tagline-block {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .footer-trust-pills {
    justify-content: flex-start !important;
  }
  .footer-nav-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .footer-nav-col {
    padding: 0 !important;
    width: 100% !important;
  }
  .footer-col-separator {
    display: none !important;
  }
}


/* ==========================================================
   MASTER CLEAN CARD COMPONENT DESIGN SYSTEM
   Eliminates all nested boxes, inner rectangles, and double borders
   ========================================================== */

/* 1. HERO CREDIT CHECK FORM CARD */
.hero-credit-check-card {
  padding: 30px 26px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 12px 35px rgba(27, 58, 87, 0.08) !important;
  backdrop-filter: none !important;
  position: relative !important;
  z-index: 5 !important;
}

/* NO INNER BOX / BORDER ON HEADER */
.check-card-header {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.check-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(46, 196, 160, 0.12) !important;
  color: #1E4841 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(46, 196, 160, 0.25) !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}

.check-card-header h3 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.check-card-sub {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-input-wrap {
  display: flex !important;
  align-items: center !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  height: 48px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.hero-input-wrap:focus-within {
  border-color: #2EC4A0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(46, 196, 160, 0.15) !important;
}

.hero-check-submit-btn {
  width: 100% !important;
  padding: 13px 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(30, 72, 65, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.hero-check-submit-btn:hover {
  background: #163630 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(30, 72, 65, 0.35) !important;
}

/* NO INNER BOX / BORDER ON TRUST FOOTER */
.check-card-trust-row {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #5A6B64 !important;
  padding: 10px 2px 0 !important;
  margin: 0 !important;
}

.check-card-trust-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2. COMPREHENSIVE CREDIT MANAGEMENT (9 CARDS) */
.credit-management-section {
  padding: 5rem 0 !important;
  background: #FDFBF7 !important;
  border-top: 1px solid rgba(27, 58, 87, 0.06) !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.06) !important;
}

.credit-mgmt-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.credit-mgmt-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border: 1px solid #E8ECEF !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 4px 16px rgba(27, 58, 87, 0.04) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
}

.credit-mgmt-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(46, 196, 160, 0.5) !important;
  box-shadow: 0 10px 25px rgba(27, 58, 87, 0.08) !important;
}

.credit-mgmt-card-top,
.credit-mgmt-card-title,
.credit-mgmt-card-cat,
.credit-mgmt-card-desc,
.credit-mgmt-card-bottom,
.credit-mgmt-card-label {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.credit-mgmt-card-top {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.credit-mgmt-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(46, 196, 160, 0.12) !important;
  color: #1E4841 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  border: none !important;
  box-shadow: none !important;
}

.credit-mgmt-card-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.credit-mgmt-card-cat {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1E4841 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.credit-mgmt-card-desc {
  font-size: 0.92rem !important;
  color: #64748B !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  flex-grow: 1 !important;
}

.credit-mgmt-card-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(27, 58, 87, 0.06) !important;
}

.credit-mgmt-card-label {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #1E4841 !important;
  margin: 0 !important;
}

.credit-mgmt-arrow {
  color: #1E4841 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.15rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.credit-mgmt-card:hover .credit-mgmt-arrow {
  transform: translateX(4px) !important;
  color: #2EC4A0 !important;
}

/* 3. BENEFIT CARDS (01, 02, 03, 04) */
.benefits-bottom-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.benefit-card {
  background: #FFFFFF !important;
  border: 1px solid #E8ECEF !important;
  border-radius: 16px !important;
  padding: 26px 20px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(27, 58, 87, 0.04) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.benefit-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(46, 196, 160, 0.4) !important;
  box-shadow: 0 10px 25px rgba(27, 58, 87, 0.08) !important;
}

.benefit-number {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: rgba(30, 72, 65, 0.15) !important;
  line-height: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.benefit-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(46, 196, 160, 0.12) !important;
  color: #1E4841 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  border: none !important;
  box-shadow: none !important;
}

.benefit-card h3 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.benefit-card p {
  font-size: 0.88rem !important;
  color: #64748B !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-grow: 1 !important;
}

/* 4. APP DOWNLOAD BULLETS & STORE BUTTONS */
.app-feature-bullets {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 20px 0 28px 0 !important;
}

.app-bullet {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1B3A57 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.bullet-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(46, 196, 160, 0.15) !important;
  color: #1E4841 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: none !important;
}

.download-badges-wrapper {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.store-badge-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
  color: #1B3A57 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(27, 58, 87, 0.04) !important;
}

.store-badge-card:hover {
  border-color: #1E4841 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(27, 58, 87, 0.08) !important;
}

/* 5. FOOTER THEME */
footer, #main-footer {
  background: #F4F0E8 !important;
  color: #5A6B64 !important;
  padding: 5rem 0 2.5rem !important;
  border-top: 1px solid #D8D2C5 !important;
  position: relative !important;
  z-index: 10 !important;
}

.footer-col-heading {
  color: #1E4841 !important;
}

.footer-links a {
  color: #5A6B64 !important;
}

.footer-links a:hover {
  color: #1E4841 !important;
}

@media (max-width: 1024px) {
  .benefits-bottom-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .benefits-bottom-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================
   SCORECARE FULL-WIDTH BLOG READER & DETAIL PAGE LAYOUT
   ========================================================== */

.blog-reader-page {
  background: #FDFBF7 !important;
  min-height: 100vh !important;
  padding-bottom: 5rem !important;
}

.blog-reader-section {
  padding: 2.5rem 0 4rem 0 !important;
  background: transparent !important;
}

/* WIDE 92% CONTAINER (MAX 1450PX) */
.reader-container {
  width: 92% !important;
  max-width: 1450px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* BREADCRUMBS */
.reader-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  color: #64748B !important;
  margin-bottom: 1.8rem !important;
  flex-wrap: wrap !important;
}

.reader-breadcrumbs a {
  color: #1E4841 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.reader-breadcrumbs a:hover {
  text-decoration: underline !important;
}

.reader-breadcrumbs .bc-sep {
  color: #CBD5E1 !important;
}

.reader-breadcrumbs .bc-current {
  color: #64748B !important;
  font-weight: 500 !important;
}

/* DYNAMIC FEATURED HERO IMAGE AT TOP */
.reader-banner-box {
  width: 100% !important;
  max-height: 520px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 2.5rem !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.08) !important;
  border: 1px solid #E8ECEF !important;
  background: #F4F0E8 !important;
}

.reader-cover-img {
  width: 100% !important;
  height: 100% !important;
  max-height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ARTICLE HEADER & METADATA */
.reader-header-block {
  margin-bottom: 2.5rem !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.08) !important;
  padding-bottom: 2rem !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.reader-meta-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 1.2rem !important;
  flex-wrap: wrap !important;
}

.reader-category-pill {
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: 1px solid rgba(46, 196, 160, 0.3) !important;
}

.reader-meta-item {
  font-size: 0.86rem !important;
  color: #64748B !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.reader-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  line-height: 1.25 !important;
  margin: 0 0 1rem 0 !important;
}

.reader-lead {
  font-size: 1.15rem !important;
  color: #5A6B64 !important;
  line-height: 1.65 !important;
  margin: 0 0 1.5rem 0 !important;
}

.reader-author-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 1.2rem !important;
}

.reader-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}

.reader-author-info strong {
  display: block !important;
  font-size: 0.95rem !important;
  color: #1B3A57 !important;
}

.reader-author-info span {
  font-size: 0.8rem !important;
  color: #64748B !important;
}

.reader-date {
  margin-left: auto !important;
  font-size: 0.85rem !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

/* WIDE ARTICLE CONTENT */
.reader-content-body {
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
  color: #334155 !important;
  margin-bottom: 3.5rem !important;
}

.reader-content-body h2 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  margin: 2.5rem 0 1rem 0 !important;
  line-height: 1.3 !important;
}

.reader-content-body h3 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
  margin: 2rem 0 0.75rem 0 !important;
}

.reader-content-body p {
  margin: 0 0 1.35rem 0 !important;
  color: #334155 !important;
}

.reader-content-body ul,
.reader-content-body ol {
  margin: 0 0 1.5rem 1.5rem !important;
  padding: 0 !important;
}

.reader-content-body li {
  margin-bottom: 0.65rem !important;
  color: #334155 !important;
}

.reader-content-body a {
  color: #1E4841 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.reader-content-body a:hover {
  color: #2EC4A0 !important;
}

.reader-content-body hr {
  border: none !important;
  border-top: 1px solid rgba(27, 58, 87, 0.08) !important;
  margin: 2.5rem 0 !important;
}

.reader-content-body img,
.reader-content-body figure {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  margin: 1.8rem 0 !important;
  box-shadow: 0 6px 20px rgba(27, 58, 87, 0.06) !important;
}

.reader-content-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2rem 0 !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #E8ECEF !important;
}

.reader-content-body th,
.reader-content-body td {
  padding: 14px 18px !important;
  border: 1px solid #E8ECEF !important;
  text-align: left !important;
  font-size: 0.95rem !important;
}

.reader-content-body th {
  background: #F4F0E8 !important;
  color: #1B3A57 !important;
  font-weight: 700 !important;
}

/* SHARE ROW */
.reader-share-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(27, 58, 87, 0.08) !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.08) !important;
  margin-bottom: 3.5rem !important;
  flex-wrap: wrap !important;
}

.share-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
}

.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid #E8ECEF !important;
  background: #FFFFFF !important;
  color: #1B3A57 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.share-btn:hover {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-color: #1E4841 !important;
}

@media (max-width: 1024px) {
  .reader-container {
    width: 94% !important;
    padding: 0 12px !important;
  }
  .reader-title {
    font-size: 2.1rem !important;
  }
}

@media (max-width: 640px) {
  .reader-container {
    width: 94% !important;
    padding: 0 8px !important;
  }
  .reader-title {
    font-size: 1.65rem !important;
  }
  .reader-author-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .reader-date {
    margin-left: 0 !important;
  }
  .reader-banner-box {
    max-height: 280px !important;
  }
}


/* ==========================================================
   SCORECARE FULL-WIDTH BLOG DETAIL & READER DESIGN SYSTEM
   ========================================================== */

.blog-reader-page {
  background: #FDFBF7 !important;
  min-height: 100vh !important;
  padding-bottom: 5rem !important;
}

.blog-reader-section {
  padding: 2rem 0 4rem 0 !important;
  background: transparent !important;
}

/* WIDE 92% CONTAINER (MAX 1450PX) */
.reader-container {
  width: 92% !important;
  max-width: 1450px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* BREADCRUMBS */
.reader-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  color: #64748B !important;
  margin-bottom: 1.8rem !important;
  flex-wrap: wrap !important;
}

.reader-breadcrumbs a {
  color: #1E4841 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.reader-breadcrumbs a:hover {
  text-decoration: underline !important;
}

.reader-breadcrumbs .bc-sep {
  color: #CBD5E1 !important;
}

.reader-breadcrumbs .bc-current {
  color: #64748B !important;
  font-weight: 500 !important;
}

/* 1. DYNAMIC TOP HERO BANNER (NO DEFAULT GIRL IMAGE) */
.reader-banner-box {
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 2.2rem !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.08) !important;
  border: 1px solid #E8ECEF !important;
  background: #F4F0E8 !important;
  text-align: center !important;
}

.reader-cover-img {
  width: 100% !important;
  max-height: 540px !important;
  object-fit: cover !important;
  display: block !important;
}

/* 2. ARTICLE HEADER & METADATA */
.reader-header-block {
  margin-bottom: 2.2rem !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.08) !important;
  padding-bottom: 2rem !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.reader-meta-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 1.2rem !important;
  flex-wrap: wrap !important;
}

.reader-category-pill {
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: 1px solid rgba(46, 196, 160, 0.3) !important;
}

.reader-meta-item {
  font-size: 0.86rem !important;
  color: #64748B !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.reader-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 2.45rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  line-height: 1.28 !important;
  margin: 0 0 1rem 0 !important;
}

.reader-lead {
  font-size: 1.15rem !important;
  color: #5A6B64 !important;
  line-height: 1.65 !important;
  margin: 0 0 1.5rem 0 !important;
}

.reader-author-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 1.2rem !important;
}

.reader-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}

.reader-author-info strong {
  display: block !important;
  font-size: 0.95rem !important;
  color: #1B3A57 !important;
}

.reader-author-info span {
  font-size: 0.8rem !important;
  color: #64748B !important;
}

.reader-date {
  margin-left: auto !important;
  font-size: 0.85rem !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

/* 3. WIDE FULL-WIDTH ARTICLE CONTENT BODY */
.reader-content-body {
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
  color: #334155 !important;
  margin-bottom: 3.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

.reader-content-body h1,
.reader-content-body h2 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  margin: 2.5rem 0 1rem 0 !important;
  line-height: 1.3 !important;
}

.reader-content-body h3 {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
  margin: 2rem 0 0.75rem 0 !important;
}

.reader-content-body p {
  margin: 0 0 1.35rem 0 !important;
  color: #334155 !important;
}

.reader-content-body ul,
.reader-content-body ol {
  margin: 0 0 1.5rem 1.5rem !important;
  padding: 0 !important;
}

.reader-content-body li {
  margin-bottom: 0.65rem !important;
  color: #334155 !important;
}

.reader-content-body a {
  color: #1E4841 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.reader-content-body a:hover {
  color: #2EC4A0 !important;
}

.reader-content-body hr {
  border: none !important;
  border-top: 1px solid rgba(27, 58, 87, 0.08) !important;
  margin: 2.5rem 0 !important;
}

.reader-content-body img,
.reader-content-body figure {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  margin: 2rem auto !important;
  display: block !important;
  box-shadow: 0 6px 22px rgba(27, 58, 87, 0.06) !important;
}

.reader-content-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2rem 0 !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #E8ECEF !important;
}

.reader-content-body th,
.reader-content-body td {
  padding: 14px 18px !important;
  border: 1px solid #E8ECEF !important;
  text-align: left !important;
  font-size: 0.95rem !important;
}

.reader-content-body th {
  background: #F4F0E8 !important;
  color: #1B3A57 !important;
  font-weight: 700 !important;
}

/* 4. SHARE ROW */
.reader-share-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(27, 58, 87, 0.08) !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.08) !important;
  margin-bottom: 3.5rem !important;
  flex-wrap: wrap !important;
}

.share-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1B3A57 !important;
}

.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid #E8ECEF !important;
  background: #FFFFFF !important;
  color: #1B3A57 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.share-btn:hover {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-color: #1E4841 !important;
}

@media (max-width: 1024px) {
  .reader-container {
    width: 94% !important;
    padding: 0 12px !important;
  }
  .reader-title {
    font-size: 2.1rem !important;
  }
}

@media (max-width: 640px) {
  .reader-container {
    width: 94% !important;
    padding: 0 8px !important;
  }
  .reader-title {
    font-size: 1.65rem !important;
  }
  .reader-author-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .reader-date {
    margin-left: 0 !important;
  }
  .reader-banner-box {
    max-height: 280px !important;
  }
}


/* ==========================================================
   HIGH-CONTRAST LOAN SAVINGS CALCULATOR & APP DOWNLOAD SYSTEM
   ========================================================== */

/* 1. CALCULATOR SECTION OVERHAUL */
.calculator {
  background: #FDFBF7 !important;
  color: #1B3A57 !important;
  padding: 5.5rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(27, 58, 87, 0.08) !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.08) !important;
}

.calculator .calc-ambient-orb {
  display: none !important;
}

.calc-header-wrap .calc-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  border: 1px solid rgba(46, 196, 160, 0.4) !important;
  border-radius: 9999px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 1rem !important;
}

.calc-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #2EC4A0 !important;
  box-shadow: 0 0 8px #2EC4A0 !important;
}

.calc-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 2.35rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  line-height: 1.25 !important;
  margin-bottom: 0.75rem !important;
}

.calc-gradient-text {
  color: #0D7A5F !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.calc-desc {
  font-size: 1.05rem !important;
  color: #5A6B64 !important;
  max-width: 680px !important;
  margin: 0 auto 3rem auto !important;
  line-height: 1.6 !important;
}

/* Glass Panels -> Crisp Clean Elevated Cards */
.glass-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.05) !important;
  color: #1B3A57 !important;
}

.console-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.25rem !important;
}

.console-label {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1B3A57 !important;
}

.console-sub-badge {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  border: 1px solid rgba(46, 196, 160, 0.3) !important;
}

/* Loan Product Tabs */
.loan-tabs-container {
  display: flex !important;
  gap: 8px !important;
  background: #F1F5F3 !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid #E2E8F0 !important;
  margin-bottom: 1.8rem !important;
}

.loan-tabs-container .loan-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.loan-tabs-container .loan-tab-btn:hover {
  color: #1B3A57 !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.loan-tabs-container .loan-tab-btn.active {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(30, 72, 65, 0.2) !important;
}

.loan-tabs-container .loan-tab-btn.active svg {
  stroke: #FFFFFF !important;
}

/* Slider Interactive Box */
.slider-interactive-box {
  background: #F8FAF9 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.slider-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.4rem !important;
}

.slider-title-text {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  letter-spacing: -0.01em !important;
}

.amount-value-pill {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  background: #EAF6F0 !important;
  border: 1.5px solid #2EC4A0 !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
}

.currency-tag {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: #0D7A5F !important;
}

.amount-display-val {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #1B3A57 !important;
  letter-spacing: 0.02em !important;
}

.range-slider-wrapper {
  position: relative !important;
  margin-bottom: 1rem !important;
}

.calc-slider-modern {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: 8px !important;
  background: #CBD5E1 !important;
  outline: none !important;
  cursor: pointer !important;
}

.calc-slider-modern::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #2EC4A0 !important;
  cursor: pointer !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(46, 196, 160, 0.6) !important;
  transition: transform 0.2s ease !important;
}

.calc-slider-modern::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}

.slider-range-labels {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 1.25rem !important;
}

.slider-drag-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #0D7A5F !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

/* Preset Chips */
.preset-amount-chips {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.preset-chip {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #1E4841 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.preset-chip:hover {
  background: #EAF6F0 !important;
  border-color: #2EC4A0 !important;
  color: #1E4841 !important;
}

.preset-chip.active {
  background: #1E4841 !important;
  border-color: #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(30, 72, 65, 0.2) !important;
}

/* Savings Hero Banner */
.savings-hero-banner {
  background: #EAF6F0 !important;
  border: 1.5px solid #2EC4A0 !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  box-shadow: 0 4px 16px rgba(46, 196, 160, 0.12) !important;
}

.savings-banner-sub {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #5A6B64 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.savings-banner-val {
  display: block !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
}

.savings-tier-chip {
  margin-left: auto !important;
  background: #2EC4A0 !important;
  color: #FFFFFF !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Right Analytics Column */
.analytics-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.analytics-card-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  margin-bottom: 4px !important;
}

.analytics-sub {
  font-size: 0.86rem !important;
  color: #64748B !important;
}

.analytics-live-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  border: 1px solid rgba(46, 196, 160, 0.3) !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

.live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #2EC4A0 !important;
}

.comparison-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 1.5rem !important;
}

.tier-comp-card {
  background: #F8FAF9 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
}

.tier-comp-card.card-poor {
  border-left: 4px solid #EF4444 !important;
}

.tier-comp-card.card-excellent {
  border-left: 4px solid #2EC4A0 !important;
}

.tier-label-subprime {
  color: #DC2626 !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
}

.tier-label-elite {
  color: #0D7A5F !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
}

.tier-rate-badge {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
  margin: 6px 0 !important;
}

.tier-emi-val, .tier-interest-val {
  font-size: 0.92rem !important;
  color: #334155 !important;
  font-weight: 600 !important;
}


/* ==========================================================
   2. APP DOWNLOAD SECTION OVERHAUL (100% SECURED & STORE BADGES)
   ========================================================== */
.app-feature-bullets {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 1.8rem 0 2rem 0 !important;
}

.app-bullet {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1B3A57 !important;
}

.bullet-check {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #2EC4A0 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(46, 196, 160, 0.3) !important;
}

.bullet-check svg {
  stroke: #FFFFFF !important;
  stroke-width: 3 !important;
}

.download-badges-wrapper {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 1rem !important;
}

.store-badge-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 18px rgba(30, 72, 65, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.store-badge-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(30, 72, 65, 0.35) !important;
  background: #153832 !important;
  color: #FFFFFF !important;
}

.badge-text-col {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.badge-micro-lbl {
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
}

.badge-brand-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.1 !important;
}



/* ==========================================================================
   SCORECARE MODERN DARK FOOTER THEME (Matches Reference UI)
   ========================================================================== */
.site-footer {
  background-color: #040D14 !important;
  color: #94A3B8 !important;
  padding: 4.5rem 0 2rem !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 100% !important;
}

.footer-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

.footer-grid-5col {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1.35fr 1fr 1.8fr !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 3.5rem !important;
}

/* Column 1: Brand & Social */
.footer-col-brand {
  display: flex !important;
  flex-direction: column !important;
}

.footer-logo-link {
  display: inline-block !important;
  margin-bottom: 1.25rem !important;
}

.footer-logo-img {
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
}

.footer-brand-bio {
  font-size: 0.88rem !important;
  line-height: 1.68 !important;
  color: #94A3B8 !important;
  margin: 0 0 1.5rem 0 !important;
}

.brand-company-highlight {
  color: #00E599 !important;
  font-weight: 700 !important;
}

.footer-social-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}

.footer-follow-heading {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
}

.footer-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.social-circle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #0A1926 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.social-circle-btn:hover {
  transform: translateY(-2px) !important;
  border-color: #00E599 !important;
  background: rgba(0, 229, 153, 0.1) !important;
  color: #00E599 !important;
  box-shadow: 0 4px 14px rgba(0, 229, 153, 0.25) !important;
}

.social-circle-btn.instagram:hover {
  border-color: #E1306C !important;
  color: #E1306C !important;
  box-shadow: 0 4px 14px rgba(225, 48, 108, 0.3) !important;
}

.social-circle-btn.facebook:hover {
  border-color: #1877F2 !important;
  color: #1877F2 !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.3) !important;
}

.social-circle-btn.youtube:hover {
  border-color: #FF0000 !important;
  color: #FF0000 !important;
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.3) !important;
}

.social-circle-btn.linkedin:hover {
  border-color: #0A66C2 !important;
  color: #0A66C2 !important;
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.3) !important;
}

/* Nav Columns (Columns 2, 3, 4) */
.footer-col-title {
  font-family: 'Inter', sans-serif !important;
  color: #FFFFFF !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.25rem 0 !important;
  letter-spacing: -0.01em !important;
}

.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.footer-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.footer-nav-list li a {
  font-size: 0.88rem !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
}

.footer-nav-list li a:hover {
  color: #00E599 !important;
  transform: translateX(2px) !important;
}

/* Column 5: Trust Block & Store Badges */
.footer-col-trust {
  display: flex !important;
  flex-direction: column !important;
}

.footer-trust-header {
  margin-bottom: 1.15rem !important;
}

.trust-heading-main {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.trust-heading-sub {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #00E599 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.footer-trust-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin-bottom: 1.25rem !important;
}

.trust-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.65rem 1rem !important;
  border-radius: 50px !important;
  background: rgba(0, 229, 153, 0.03) !important;
  border: 1px solid rgba(0, 229, 153, 0.28) !important;
  transition: all 0.25s ease !important;
}

.trust-badge-pill:hover {
  border-color: #00E599 !important;
  background: rgba(0, 229, 153, 0.08) !important;
  box-shadow: 0 0 16px rgba(0, 229, 153, 0.16) !important;
  transform: translateY(-1px) !important;
}

.trust-pill-svg {
  color: #00E599 !important;
  flex-shrink: 0 !important;
}

.trust-pill-text {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #E2E8F0 !important;
  white-space: nowrap !important;
}

.footer-store-grid {
  display: flex !important;
  gap: 0.65rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.app-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.85rem !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  transition: all 0.25s ease !important;
}

.app-store-btn:hover {
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 229, 153, 0.2) !important;
}

.store-svg {
  flex-shrink: 0 !important;
}

.store-btn-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.store-small {
  font-size: 0.55rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.store-large {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

/* Bottom Bar */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 1.75rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
}

.footer-bottom-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.scroll-top-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.scroll-top-btn:hover {
  background: #00E599 !important;
  border-color: #00E599 !important;
  color: #040D14 !important;
  transform: translateY(-2px) !important;
}

.footer-copyright {
  color: #94A3B8 !important;
}

.footer-bottom-center {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.2) !important;
}

.footer-legal-link {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.footer-legal-link:hover {
  color: #00E599 !important;
}

.footer-bottom-right {
  color: #94A3B8 !important;
}

.heart-emoji {
  color: #FF3B30 !important;
  display: inline-block !important;
  margin: 0 2px !important;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .footer-grid-5col {
    grid-template-columns: 2fr 1fr 1.2fr 1fr !important;
  }
  .footer-col-trust {
    grid-column: span 4 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .footer-trust-cards {
    flex-direction: row !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 860px) {
  .footer-grid-5col {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-col-brand {
    grid-column: span 2 !important;
  }
  .footer-col-trust {
    grid-column: span 2 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .footer-trust-cards {
    flex-direction: column !important;
    width: 100% !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
}

@media (max-width: 540px) {
  .site-footer {
    padding: 3rem 0 1.5rem !important;
  }
  .footer-grid-5col {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .footer-col-brand {
    grid-column: span 1 !important;
  }
  .footer-col-trust {
    grid-column: span 1 !important;
  }
  .footer-store-grid {
    width: 100% !important;
  }
  .app-store-btn {
    flex: 1 !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
   SCORECARE MODERN DARK FOOTER THEME (EXACT MATCH TO REFERENCE IMAGE)
   ========================================================================== */
footer, #main-footer, .site-footer {
  background: #040D14 !important;
  background-color: #040D14 !important;
  background-image: none !important;
  color: #94A3B8 !important;
  padding: 4.5rem 0 2rem !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 100% !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

footer::before, #main-footer::before, .site-footer::before,
footer::after, #main-footer::after, .site-footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.footer-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

.footer-grid-5col {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1.35fr 1fr 1.8fr !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 3.5rem !important;
}

/* Column 1: Brand & Social */
.footer-col-brand {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.footer-brand-logo-wrap, 
a.footer-brand-logo-wrap,
div.footer-brand-logo-wrap {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: fit-content !important;
}

.footer-brand-logo-img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

.footer-brand-bio {
  font-size: 0.88rem !important;
  line-height: 1.68 !important;
  color: #94A3B8 !important;
  margin: 0 0 1.5rem 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.brand-company-highlight {
  color: #00E599 !important;
  font-weight: 700 !important;
}

.footer-social-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}

.footer-follow-heading {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
}

.footer-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.social-circle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #0A1926 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.social-circle-btn:hover {
  transform: translateY(-2px) !important;
  border-color: #00E599 !important;
  background: rgba(0, 229, 153, 0.1) !important;
  color: #00E599 !important;
  box-shadow: 0 4px 14px rgba(0, 229, 153, 0.25) !important;
}

.social-circle-btn.instagram:hover {
  border-color: #E1306C !important;
  color: #E1306C !important;
  box-shadow: 0 4px 14px rgba(225, 48, 108, 0.3) !important;
}

.social-circle-btn.facebook:hover {
  border-color: #1877F2 !important;
  color: #1877F2 !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.3) !important;
}

.social-circle-btn.youtube:hover {
  border-color: #FF0000 !important;
  color: #FF0000 !important;
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.3) !important;
}

.social-circle-btn.linkedin:hover {
  border-color: #0A66C2 !important;
  color: #0A66C2 !important;
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.3) !important;
}

/* Nav Columns (Columns 2, 3, 4) */
.footer-col-links {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

h4.footer-col-title,
.footer-col-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #FFFFFF !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.25rem 0 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

h4.footer-col-title::after,
.footer-col-title::after {
  display: none !important;
}

.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.footer-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer-nav-list li a {
  font-size: 0.88rem !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.footer-nav-list li a:hover {
  color: #00E599 !important;
  transform: translateX(2px) !important;
}

/* Column 5: Trust Block & Store Badges */
.footer-col-trust {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.footer-trust-header {
  margin-bottom: 1.15rem !important;
}

.trust-heading-main {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

.trust-heading-sub {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #00E599 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-trust-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin-bottom: 1.25rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.trust-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.65rem 1.1rem !important;
  border-radius: 50px !important;
  background: rgba(0, 229, 153, 0.03) !important;
  border: 1px solid rgba(0, 229, 153, 0.32) !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
  width: 100% !important;
}

.trust-badge-pill:hover {
  border-color: #00E599 !important;
  background: rgba(0, 229, 153, 0.08) !important;
  box-shadow: 0 0 16px rgba(0, 229, 153, 0.18) !important;
  transform: translateY(-1px) !important;
}

.trust-pill-svg {
  color: #00E599 !important;
  stroke: #00E599 !important;
  flex-shrink: 0 !important;
}

.trust-pill-text {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-store-grid {
  display: flex !important;
  gap: 0.65rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.app-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.85rem !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}

.app-store-btn:hover {
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 229, 153, 0.2) !important;
}

.store-svg {
  flex-shrink: 0 !important;
}

.store-btn-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.store-small {
  font-size: 0.55rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Inter', sans-serif !important;
}

.store-large {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
}

/* Bottom Bar */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 1.75rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
  background: transparent !important;
}

.footer-bottom-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.footer-back-to-top-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  position: static !important;
  box-shadow: none !important;
}

.footer-back-to-top-btn:hover {
  background: #00E599 !important;
  border-color: #00E599 !important;
  color: #040D14 !important;
  transform: translateY(-2px) !important;
}

.footer-copyright {
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-bottom-center {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.2) !important;
}

.footer-legal-link {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-legal-link:hover {
  color: #00E599 !important;
}

.footer-bottom-right {
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
}

.heart-emoji {
  color: #FF3B30 !important;
  display: inline-block !important;
  margin: 0 2px !important;
}

/* Hide legacy floating scroll-to-top buttons */
a#scroll-to-top, .scroll-to-top-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .footer-grid-5col {
    grid-template-columns: 2fr 1fr 1.2fr 1fr !important;
  }
  .footer-col-trust {
    grid-column: span 4 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .footer-trust-cards {
    flex-direction: row !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 860px) {
  .footer-grid-5col {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-col-brand {
    grid-column: span 2 !important;
  }
  .footer-col-trust {
    grid-column: span 2 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .footer-trust-cards {
    flex-direction: column !important;
    width: 100% !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
}

@media (max-width: 540px) {
  footer, #main-footer, .site-footer {
    padding: 3rem 0 1.5rem !important;
  }
  .footer-grid-5col {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .footer-col-brand {
    grid-column: span 1 !important;
  }
  .footer-col-trust {
    grid-column: span 1 !important;
  }
  .footer-store-grid {
    width: 100% !important;
  }
  .app-store-btn {
    flex: 1 !important;
    justify-content: center !important;
  }
}



/* ==========================================================================
   SCORECARE MODERN DEEP DARK FOOTER THEME (EXACT MATCH TO REFERENCE IMAGE)
   Solid background without grid lines or watermark patterns
   ========================================================================== */

footer, #main-footer, .site-footer {
  background: #06131D !important;
  background-color: #06131D !important;
  background-image: none !important;
  color: #94A3B8 !important;
  padding: 4.5rem 0 2rem 0 !important;
  position: relative !important;
  border-top: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 100% !important;
  box-shadow: none !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

footer::before, #main-footer::before, .site-footer::before,
footer::after, #main-footer::after, .site-footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

.footer-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-grid-5col {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1.35fr 1fr 1.8fr !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 3.5rem !important;
}

/* Column 1: Brand & Social */
.footer-col-brand {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.footer-brand-logo-wrap, 
a.footer-brand-logo-wrap,
div.footer-brand-logo-wrap {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: fit-content !important;
  text-decoration: none !important;
}

.footer-brand-logo-img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

.footer-brand-bio {
  font-size: 0.88rem !important;
  line-height: 1.68 !important;
  color: #94A3B8 !important;
  margin: 0 0 1.5rem 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.brand-company-highlight {
  color: #00E599 !important;
  font-weight: 600 !important;
}

.footer-social-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.footer-social-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.social-circle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #0C202E !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
}

.social-circle-btn.instagram {
  color: #E1306C !important;
}
.social-circle-btn.facebook {
  color: #1877F2 !important;
}
.social-circle-btn.youtube {
  color: #FF0000 !important;
}
.social-circle-btn.linkedin {
  color: #0A66C2 !important;
}

.social-circle-btn:hover {
  transform: translateY(-2px) scale(1.06) !important;
  border-color: #00E599 !important;
  box-shadow: 0 4px 12px rgba(0, 229, 153, 0.25) !important;
}

/* Nav Columns (Columns 2, 3, 4) */
.footer-col-links {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.footer-col-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 1.25rem 0 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.01em !important;
  position: static !important;
  background: transparent !important;
}

.footer-col-title::after {
  display: none !important;
}

.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.footer-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer-nav-list li a {
  font-size: 0.88rem !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.footer-nav-list li a:hover {
  color: #00E599 !important;
  transform: translateX(2px) !important;
}

/* Column 5: Trust Block & Store Badges */
.footer-col-trust {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.footer-trust-header {
  margin-bottom: 1.15rem !important;
}

.trust-heading-main {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

.trust-heading-sub {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #00E599 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-trust-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin-bottom: 1.25rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.trust-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.65rem 1.1rem !important;
  border-radius: 50px !important;
  background: rgba(0, 229, 153, 0.04) !important;
  border: 1px solid rgba(0, 229, 153, 0.4) !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.trust-badge-pill:hover {
  border-color: #00E599 !important;
  background: rgba(0, 229, 153, 0.09) !important;
  box-shadow: 0 0 16px rgba(0, 229, 153, 0.2) !important;
  transform: translateY(-1px) !important;
}

.trust-pill-svg {
  color: #00E599 !important;
  stroke: #00E599 !important;
  flex-shrink: 0 !important;
}

.trust-pill-text {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-store-grid {
  display: flex !important;
  gap: 0.65rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.app-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.85rem !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}

.app-store-btn:hover {
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 229, 153, 0.2) !important;
}

.store-svg {
  flex-shrink: 0 !important;
}

.store-btn-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.store-small {
  font-size: 0.55rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Inter', sans-serif !important;
}

.store-large {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
}

/* Bottom Bar */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 1.75rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
  background: transparent !important;
}

.footer-bottom-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.footer-back-to-top-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  position: static !important;
  box-shadow: none !important;
}

.footer-back-to-top-btn:hover {
  background: #00E599 !important;
  border-color: #00E599 !important;
  color: #040D14 !important;
  transform: translateY(-2px) !important;
}

.footer-copyright {
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-bottom-center {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.2) !important;
}

.footer-legal-link {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-legal-link:hover {
  color: #00E599 !important;
}

.footer-bottom-right {
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
}

.heart-emoji {
  color: #FF3B30 !important;
  display: inline-block !important;
  margin: 0 2px !important;
}

/* Hide legacy floating download banners and scroll-to-top buttons */
.persistent-download-banner,
.floating-download-banner,
#floating-download-banner,
.banner-actions a.btn.btn-primary,
a#scroll-to-top,
.scroll-to-top-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .footer-grid-5col {
    grid-template-columns: 2fr 1fr 1.2fr 1fr !important;
  }
  .footer-col-trust {
    grid-column: span 4 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .footer-trust-cards {
    flex-direction: row !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 860px) {
  .footer-grid-5col {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-col-brand {
    grid-column: span 2 !important;
  }
  .footer-col-trust {
    grid-column: span 2 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .footer-trust-cards {
    flex-direction: column !important;
    width: 100% !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
}

@media (max-width: 540px) {
  footer, #main-footer, .site-footer {
    padding: 3rem 0 1.5rem !important;
  }
  .footer-grid-5col {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .footer-col-brand {
    grid-column: span 1 !important;
  }
  .footer-col-trust {
    grid-column: span 1 !important;
  }
  .footer-store-grid {
    width: 100% !important;
  }
  .app-store-btn {
    flex: 1 !important;
    justify-content: center !important;
  }
}



/* ==========================================================================
   SCORECARE EDITORIAL THEME (EXACT MATCH TO REFERENCE SCREENSHOTS)
   - Warm Architectural Cream Canvas (#FAF7F2) + Subtle Grid Lines
   - Fraunces Serif Display Headings + Inter Sans-Serif Body
   - Deep Forest Green (#1E4841) + Emerald Mint (#2EC4A0) Accents
   - Elevated Clean White Cards + Soft Floating Elevation
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..800&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --theme-bg: #FAF7F2;
  --theme-paper: #FFFFFF;
  --theme-forest: #1E4841;
  --theme-forest-dark: #133830;
  --theme-mint: #2EC4A0;
  --theme-mint-light: #EAF6F0;
  --theme-navy: #1B3A57;
  --theme-slate: #64748B;
  --theme-border: rgba(27, 58, 87, 0.08);
}

/* 1. Global Page Background & Architectural Grid Canvas */
html, body, .page, main, 
section:not(.site-footer):not(#main-footer):not(footer),
.hero, #about, #calculator, #overdue-settlement, #benefits, #blogs, #faqs, #contact, #security-partners,
.credit-management-section, .edu-section {
  background-color: #FAF7F2 !important;
  background-image: 
    linear-gradient(to right, rgba(30, 72, 65, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 72, 65, 0.035) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  color: #1B3A57 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 2. Top Header Navigation */
header#main-header, header {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(27, 58, 87, 0.08) !important;
  box-shadow: 0 4px 20px rgba(27, 58, 87, 0.03) !important;
}

header nav a.active, header nav a:hover {
  color: #1E4841 !important;
  border-bottom: 2px solid #2EC4A0 !important;
}

header .btn-primary, header .header-cta-btn, header a[href*="play.google"], header a[href*="download"] {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.2) !important;
  transition: all 0.2s ease !important;
}

header .btn-primary:hover, header .header-cta-btn:hover {
  background: #133830 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(30, 72, 65, 0.3) !important;
}

/* 3. Editorial Serif Headings across all sections */
h1, h2, h3, .section-title, .hero h1, .calc-heading, .matrix-title, .contact-heading {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.02em !important;
  color: #1B3A57 !important;
}

h1 strong, h1 span, h2 strong, h2 span, .highlight-green {
  color: #1E4841 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

/* 4. Top Tagline Badges / Section Pills */
.pill-badge, .section-badge, .badge-pill, [class*="tagline-pill"], .trailer-tag, .bureau-pill {
  background: #EAF6F0 !important;
  border: 1px solid rgba(46, 196, 160, 0.35) !important;
  color: #1E4841 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  padding: 6px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.pill-badge::before, .section-badge::before {
  content: "●" !important;
  color: #2EC4A0 !important;
  font-size: 0.75rem !important;
}

/* 5. Clean Elevated White Cards */
.card, .feature-card, .calc-card, .mgmt-card, .benefit-card, .hero-credit-check-card, .contact-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(27, 58, 87, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.04) !important;
  box-sizing: border-box !important;
}

/* 6. Hero Section (Image 2 Match) */
.hero h1 {
  font-size: 3.4rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #1B3A57 !important;
  margin: 1.25rem 0 1rem 0 !important;
}

.hero p {
  color: #64748B !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  max-width: 540px !important;
}

.hero-actions .btn-primary, .hero-actions a.btn-download, a.btn-primary {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(30, 72, 65, 0.25) !important;
}

.hero-actions .btn-secondary, a.btn-outline, a.btn-secondary {
  background: #FFFFFF !important;
  color: #1E4841 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  box-shadow: 0 2px 8px rgba(27, 58, 87, 0.04) !important;
}

/* Hero Score Check Form */
.hero-credit-check-card {
  padding: 32px 28px !important;
}

.hero-credit-check-card input {
  background: #FDFBF7 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  color: #1B3A57 !important;
  font-weight: 500 !important;
}

.hero-credit-check-card input:focus {
  border-color: #2EC4A0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(46, 196, 160, 0.12) !important;
  outline: none !important;
}

.hero-credit-check-card button[type="submit"], .hero-credit-check-card .btn-submit {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  border-radius: 12px !important;
  padding: 16px !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(30, 72, 65, 0.25) !important;
}

/* 7. Loan Calculator Section (Image 1 Match) */
.calc-header h2 {
  font-family: 'Fraunces', serif !important;
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  color: #1B3A57 !important;
}

.calc-header h2 span {
  color: #1E4841 !important;
}

.calc-tab-btn.active, .loan-type-btn.active {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
}

.calc-amount-badge {
  background: #EAF6F0 !important;
  border: 1px solid #2EC4A0 !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
}

.calc-slider-track {
  background: #E2E8F0 !important;
}

.calc-slider-fill {
  background: #1E4841 !important;
}

/* Red / Green Comparison Boxes in Calculator */
.calc-comparison-box.low-score, .calc-box-red {
  background: #FDF2F2 !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}

.calc-comparison-box.high-score, .calc-box-green {
  background: #F0FDF4 !important;
  border: 1px solid rgba(30, 72, 65, 0.2) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}

/* 8. Contact Section (Image 3 Match) */
.contact-split-card {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(27, 58, 87, 0.08) !important;
  box-shadow: 0 12px 40px rgba(27, 58, 87, 0.06) !important;
}

.contact-left-panel {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  padding: 44px 36px !important;
}

.contact-left-panel h2 {
  font-family: 'Fraunces', serif !important;
  color: #FFFFFF !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
}

.contact-left-panel h2 span {
  color: #2EC4A0 !important;
}

.contact-info-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.contact-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #2EC4A0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.contact-right-panel {
  padding: 44px 40px !important;
  background: #FFFFFF !important;
}

.contact-right-panel h3 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.8rem !important;
  color: #1B3A57 !important;
  margin-bottom: 8px !important;
}

.contact-right-panel input, .contact-right-panel textarea, .contact-right-panel select {
  background: #FDFBF7 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  color: #1B3A57 !important;
}

.contact-right-panel input:focus, .contact-right-panel textarea:focus, .contact-right-panel select:focus {
  border-color: #2EC4A0 !important;
  background: #FFFFFF !important;
  outline: none !important;
}

.contact-right-panel .btn-send {
  background: #1E4841 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  border: none !important;
  width: 100% !important;
}

/* 9. Credit Health Matrix (Image 4 Match) */
.edu-health-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(27, 58, 87, 0.08) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow: 0 8px 24px rgba(27, 58, 87, 0.04) !important;
}

.edu-factor-card {
  background: #FDFBF7 !important;
  border: 1.5px solid #F3E8D2 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* 10. Footer Section (Kept Deep Dark Slate, WITHOUT Grid Lines) */
footer, #main-footer, .site-footer {
  background: #06131D !important;
  background-color: #06131D !important;
  background-image: none !important;
  color: #94A3B8 !important;
  border-top: none !important;
  position: relative !important;
  z-index: 10 !important;
}

footer::before, #main-footer::before, .site-footer::before,
footer::after, #main-footer::after, .site-footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
}


/* ==========================================================================
   HIGH-CONTRAST BLACK TEXT & FOREST GREEN BUTTON ENHANCEMENT (DEV / STAGING)
   Ensures zero light/white text on light canvas & bold Forest Green buttons
   ========================================================================== */

/* ---------------------------------------------------------
   1. GLOBAL & TYPOGRAPHY: CRISP BLACK & CHARCOAL TEXT
   --------------------------------------------------------- */
body {
  color: #1A2D27 !important;
}

/* Headings across all sections (unless in dark footer) */
h1:not(footer *), h2:not(footer *), h3:not(footer *), h4:not(footer *), h5:not(footer *), h6:not(footer *) {
  color: #111827 !important;
}

/* Paragraphs, descriptions, and labels across all non-footer cards & sections */
section:not(footer) p,
section:not(footer) span:not(.btn *):not(.badge-gold *):not(.badge-green *):not(.pill-tag *),
section:not(footer) li,
section:not(footer) label,
.card p,
.factor-card p,
.step-card p,
.blog-card p,
.stat-item p,
.hero p,
.calc-desc,
.settle-desc,
.step-desc,
.factor-desc,
.edu-subheading,
.range-slide-desc,
.download-text p,
.vpm-body p,
.console-label,
.slider-title-text,
.slider-range-labels,
.diff-text,
.cta-tip-line,
.tier-emi-row,
.savings-banner-sub,
.analytics-sub,
.cost-lbl,
.dial-tip-text,
.factor-main-sub,
.vpm-bureau-row,
.vpm-factor-mini span,
.vpm-step-tag,
.vpm-pan-label,
.settle-cta-sub {
  color: #2D3748 !important;
}

/* Strong, bold text and numbers */
section:not(footer) strong,
section:not(footer) b,
.factor-title,
.step-title,
.stat-num,
.calc-stat-val,
.card-title,
.blog-title {
  color: #111827 !important;
}

/* Specific Subtitles & Lead Text */
.hero-subtitle,
.section-subtitle,
.calc-subtitle,
.about-lead,
.lead-p {
  color: #2D3748 !important;
}

/* ---------------------------------------------------------
   2. FOREST GREEN BUTTONS & CTAS
   --------------------------------------------------------- */
/* Primary Action Buttons: Solid Deep Forest Green with crisp white text */
.btn-primary,
.hero-check-submit-btn,
.calc-action-btn,
.btn-settle,
.blogs-hub-btn,
.contact-submit-btn,
.assistant-trigger-btn,
.sidebar-cta-btn,
button[type="submit"]:not(footer *) {
  background-color: #1E4841 !important;
  background-image: linear-gradient(135deg, #1E4841 0%, #133830 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #133830 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.28) !important;
}

.btn-primary:hover,
.hero-check-submit-btn:hover,
.calc-action-btn:hover,
.btn-settle:hover,
.blogs-hub-btn:hover,
.contact-submit-btn:hover,
.assistant-trigger-btn:hover {
  background-color: #133830 !important;
  background-image: linear-gradient(135deg, #133830 0%, #0D2621 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(30, 72, 65, 0.4) !important;
}

.btn-primary *,
.hero-check-submit-btn *,
.calc-action-btn *,
.btn-settle *,
.blogs-hub-btn *,
.contact-submit-btn * {
  color: #FFFFFF !important;
}

/* Outline & Secondary Buttons: Now styled in Bold Forest Green so they never mix with white */
.btn-outline,
.btn-outline-light,
.btn-secondary,
.ctrl-btn,
.range-ctrl-btn,
.vap-chap-btn,
.blog-read-btn {
  background-color: #EAF6F0 !important;
  border: 2px solid #1E4841 !important;
  color: #1E4841 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(30, 72, 65, 0.12) !important;
}

.btn-outline:hover,
.btn-outline-light:hover,
.btn-secondary:hover,
.ctrl-btn:hover,
.range-ctrl-btn:hover,
.vap-chap-btn:hover,
.blog-read-btn:hover {
  background-color: #1E4841 !important;
  border-color: #1E4841 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.3) !important;
}

.btn-outline:hover *,
.btn-outline-light:hover *,
.range-ctrl-btn:hover * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Preset Chips in Calculator (₹4L, ₹8L, ₹15L, ₹25L) */
.preset-chip {
  background: #FAF8F5 !important;
  border: 1.5px solid #D1D5DB !important;
  color: #1E4841 !important;
  font-weight: 700 !important;
}

.preset-chip.active,
.preset-chip:hover {
  background: #1E4841 !important;
  border-color: #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(30, 72, 65, 0.25) !important;
}

/* Loan Tabs in Calculator (Car Loan, Personal Loan, Home Loan) */
.loan-tabs-container .loan-tab-btn {
  background: #FAF8F5 !important;
  border: 1.5px solid #E5E7EB !important;
  color: #374151 !important;
  font-weight: 600 !important;
}

.loan-tabs-container .loan-tab-btn.active,
.loan-tabs-container .loan-tab-btn:hover {
  background: #1E4841 !important;
  border-color: #1E4841 !important;
  color: #FFFFFF !important;
}

.loan-tabs-container .loan-tab-btn.active *,
.loan-tabs-container .loan-tab-btn:hover * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* ---------------------------------------------------------
   3. SPECIFIC CARDS & CONTAINERS CONTRAST ENHANCEMENT
   --------------------------------------------------------- */
/* 5-Step Overdue Settlement Cards */
.settle-step-card, [class*="settle-step-card"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2DBD0 !important;
  color: #1A2D27 !important;
}

.settle-step-card p,
.settle-step-card span,
.settle-step-card li,
.step-checklist li {
  color: #374151 !important;
}

.settle-step-card strong,
.settle-step-card h3,
.settle-step-card h4 {
  color: #111827 !important;
}

/* Score Health & Factor Cards */
.factor-bar-card,
.factor-item,
[class*="factor-card"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2DBD0 !important;
}

.factor-title,
.factor-item h4 {
  color: #111827 !important;
}

.factor-desc,
.factor-item p {
  color: #374151 !important;
}

/* Advice & Highlight Panels */
.range-slide-advice,
[class*="advice-box"],
.score-tips-box {
  background-color: #FAF8F5 !important;
  border: 1px solid #E8E4DA !important;
  border-left: 4px solid #1E4841 !important;
  color: #1A2D27 !important;
}

.range-slide-advice p,
.score-tips-box p {
  color: #374151 !important;
}

/* Floating Contact Left Panel (Deep Forest Green card) */
.contact-info-side {
  background: linear-gradient(145deg, #1E4841 0%, #133830 100%) !important;
  color: #FFFFFF !important;
}

.contact-info-side h2,
.contact-info-side h3,
.contact-info-side h4,
.contact-info-side .contact-title {
  color: #FFFFFF !important;
}

.contact-info-side p,
.contact-info-side .contact-info-desc,
.contact-info-side .detail-value,
.contact-info-side .response-stat-title {
  color: rgba(255, 255, 255, 0.95) !important;
}

.contact-info-side .detail-label,
.contact-info-side .response-stat-sub {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Right Contact Form Side */
.contact-form-side {
  background-color: #FFFFFF !important;
}

.contact-form-side label,
.contact-form-side p {
  color: #1F2937 !important;
}

.floating-input {
  color: #111827 !important;
  border: 1.5px solid #D1D5DB !important;
  background-color: #FAFAF9 !important;
}

.floating-input:focus {
  border-color: #1E4841 !important;
  background-color: #FFFFFF !important;
}



/* ==========================================================================
   FOOTER BOTTOM BAR & FLOATING STACK ENHANCEMENT
   ========================================================================== */

/* 1. Made with ❤️ in India placed on left side below social media icons */
.footer-made-in-india-left {
  margin-top: 1.25rem !important;
  color: #94A3B8 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-family: 'Inter', sans-serif !important;
}

.footer-made-in-india-left .heart-emoji {
  color: #EF4444 !important;
  display: inline-block !important;
  font-size: 0.95rem !important;
}

/* 2. Centered Copyright Bar in Footer (No duplicate legal links) */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 1.6rem !important;
  padding-bottom: 0.75rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  background: transparent !important;
}

.footer-bottom-center-copyright {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.footer-copyright {
  color: #94A3B8 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.01em !important;
}

/* 3. Floating Action Stack: Green circle message icon at bottom, Circular arrow button JUST ABOVE it */

/* Green circle message icon at bottom-right */
.assistant-trigger-btn, button#assistant-trigger {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background-color: #1E4841 !important;
  background-image: linear-gradient(135deg, #1E4841 0%, #133830 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(30, 72, 65, 0.45) !important;
  z-index: 9998 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.assistant-trigger-btn:hover, button#assistant-trigger:hover {
  background-color: #133830 !important;
  transform: scale(1.08) rotate(90deg) !important;
  box-shadow: 0 12px 30px rgba(30, 72, 65, 0.6) !important;
}

.assistant-trigger-btn svg, button#assistant-trigger svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #FFFFFF !important;
}

/* Circular Arrow Scroll-to-Top button: Positioned JUST ABOVE the green circle message icon */
.scroll-top-btn, a#scroll-to-top {
  position: fixed !important;
  bottom: 88px !important; /* 24px + 52px + 12px gap */
  right: 27px !important;  /* Centered with 52px trigger below (52 - 46)/2 + 24 = 27px */
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background-color: #1E4841 !important;
  background-image: linear-gradient(135deg, #1E4841 0%, #133830 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(30, 72, 65, 0.4) !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.85) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.scroll-top-btn.visible, a#scroll-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.scroll-top-btn:hover, a#scroll-to-top:hover {
  background-color: #133830 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 10px 25px rgba(30, 72, 65, 0.6) !important;
}

.scroll-top-btn svg, a#scroll-to-top svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #FFFFFF !important;
  stroke-width: 2.5 !important;
}

@media (max-width: 768px) {
  .assistant-trigger-btn, button#assistant-trigger {
    bottom: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .scroll-top-btn, a#scroll-to-top {
    bottom: 78px !important;
    right: 23px !important;
    width: 42px !important;
    height: 42px !important;
  }
}



/* ==========================================================================
   FOOTER BRAND TAGLINE & HIGHLIGHTED TEXT STYLES
   ========================================================================== */

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.65 !important;
  margin: 1rem 0 1.25rem 0 !important;
}

.footer-col-brand .footer-tagline strong,
p.footer-tagline strong {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.footer-highlight-gold {
  color: #FBBF24 !important; /* Radiant gold highlight for operating entity */
  font-weight: 600 !important;
}

.footer-highlight-green {
  color: #00E599 !important; /* Bright electric mint green highlight for 100% free */
  font-weight: 700 !important;
}



/* ==========================================================================
   FOOTER LOGO & MINT HIGHLIGHTS (COLOR MATCHED TO "Credit Score Platform" #00E599)
   ========================================================================== */

.footer-logo-img {
  display: block !important;
  max-width: 175px !important;
  height: auto !important;
  margin-bottom: 0.75rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-highlight-mint,
.footer-col-brand .footer-tagline .footer-highlight-mint,
p.footer-tagline .footer-highlight-mint {
  color: #00E599 !important; /* Exact match to "Credit Score Platform" .trust-heading-sub */
  font-weight: 700 !important;
}

.footer-col-brand .footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.65 !important;
  margin: 0.75rem 0 1.25rem 0 !important;
}



/* ==========================================================================
   LOAN TABS (CAR, PERSONAL, HOME) & AI CREDIT VISUALIZER THEME FIX (v92)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOAN TABS ACTIVE & INACTIVE STYLES
   -------------------------------------------------------------------------- */

/* ACTIVE LOAN TAB (Dark green background, crisp white text & icon) */
.loan-tabs-container .loan-tab-btn.active,
.loan-tab-btn.active {
  background-color: #1E4841 !important;
  background-image: linear-gradient(135deg, #1E4841 0%, #133830 100%) !important;
  border: 1.5px solid #133830 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.3) !important;
}

.loan-tabs-container .loan-tab-btn.active span,
.loan-tabs-container .loan-tab-btn.active .tab-icon-box,
.loan-tabs-container .loan-tab-btn.active svg,
.loan-tab-btn.active span,
.loan-tab-btn.active .tab-icon-box,
.loan-tab-btn.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* INACTIVE LOAN TABS (Light cream background, dark green/charcoal text & icon, subtle border) */
.loan-tabs-container .loan-tab-btn:not(.active),
.loan-tab-btn:not(.active) {
  background-color: #FAF7F2 !important;
  background: #FAF7F2 !important;
  border: 1.5px solid #E2DBD0 !important;
  color: #1E4841 !important;
  box-shadow: none !important;
}

.loan-tabs-container .loan-tab-btn:not(.active) span,
.loan-tabs-container .loan-tab-btn:not(.active) .tab-icon-box,
.loan-tabs-container .loan-tab-btn:not(.active) svg,
.loan-tab-btn:not(.active) span,
.loan-tab-btn:not(.active) .tab-icon-box,
.loan-tab-btn:not(.active) svg {
  color: #1E4841 !important;
  stroke: #1E4841 !important;
  fill: none !important;
}

.loan-tabs-container .loan-tab-btn:not(.active):hover,
.loan-tab-btn:not(.active):hover {
  background: #EAF6F0 !important;
  border-color: #1E4841 !important;
  color: #1E4841 !important;
}

.loan-tabs-container .loan-tab-btn:not(.active):hover span,
.loan-tabs-container .loan-tab-btn:not(.active):hover svg {
  color: #1E4841 !important;
  stroke: #1E4841 !important;
}

/* --------------------------------------------------------------------------
   2. AI CREDIT INTELLIGENCE SECTION & LARGE VISUALIZATION CARD (WARM CREAM THEME)
   -------------------------------------------------------------------------- */

.ai-intelligence-section {
  padding: 90px 0 !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

.ai-intelligence-section::before {
  display: none !important; /* Remove dark orb glow */
}

/* Section Header */
.ai-intelligence-section .ai-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  background: #EAF6F0 !important;
  border: 1px solid rgba(30, 72, 65, 0.25) !important;
  color: #1E4841 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.03em !important;
  margin: 0 auto 14px auto !important;
}

.ai-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #00E599 !important;
  box-shadow: 0 0 8px #00E599 !important;
  display: inline-block !important;
}

.ai-intelligence-section h2 {
  font-family: 'Fraunces', serif !important;
  color: #111827 !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

.ai-intelligence-section h2 span {
  color: #1E4841 !important;
}

.ai-intelligence-section .desc {
  color: #5A6B64 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* Left AI Scanner Card (Main Visualizer Card) */
.ai-scanner-card {
  background: #F7F5F2 !important;
  background-color: #F7F5F2 !important;
  border: 1.5px solid #E2DBD0 !important;
  border-radius: 24px !important;
  padding: 34px 28px !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Radar Rings */
.ai-radar-container {
  position: relative !important;
  width: 320px !important;
  height: 320px !important;
  margin: 0 auto 24px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ai-radar-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(30, 72, 65, 0.2) !important;
  box-sizing: border-box !important;
}

.ai-radar-sweep {
  position: absolute !important;
  width: 310px !important;
  height: 310px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 229, 153, 0.18) 0deg, rgba(0, 229, 153, 0) 65deg) !important;
  animation: radarSweep 3.5s linear infinite !important;
  pointer-events: none !important;
}

/* Central Core Orb */
.ai-core-orb {
  position: relative !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #1E4841 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 18px rgba(30, 72, 65, 0.15) !important;
  z-index: 5 !important;
}

.ai-core-glow {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  box-shadow: 0 0 20px rgba(0, 229, 153, 0.25) !important;
  pointer-events: none !important;
}

.ai-core-icon {
  display: none !important;
}

/* Score number */
.ai-core-score {
  font-family: 'Fraunces', serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #111827 !important;
  line-height: 1.1 !important;
}

/* "AI PROJECTED" */
.ai-core-lbl {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #1E4841 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 2px !important;
}

/* Orbiting Nodes (Status Badges) */
.ai-node {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(30, 72, 65, 0.25) !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(27, 58, 87, 0.08) !important;
  z-index: 6 !important;
  animation: floatNode 4s ease-in-out infinite alternate !important;
}

.ai-node .node-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: #00E599 !important;
  box-shadow: 0 0 6px rgba(0, 229, 153, 0.6) !important;
  flex-shrink: 0 !important;
}

.ai-node .node-dot.warning {
  background-color: #D97706 !important;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.5) !important;
}

/* Node Text (Utilization: Optimal, Zero Late DPD, 1 Dispute Solved, Waived ₹42,000) */
.ai-node .node-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #1E4841 !important;
  white-space: nowrap !important;
}

/* Bottom Telemetry Bar (3 Stats) */
.ai-telemetry-bar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  padding: 14px 12px !important;
  border: 1px solid #E2DBD0 !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  margin-top: 18px !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(27, 58, 87, 0.04) !important;
}

.telemetry-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: center !important;
}

.telemetry-item .t-lbl {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #5A6B64 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.telemetry-item .t-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
}

.telemetry-item .t-val.text-green {
  color: #1E4841 !important; /* 24/24 Points Verified */
}

.telemetry-item .t-val.text-cyan {
  color: #1E4841 !important; /* 98.4% Loan Ready */
}

.telemetry-item .t-val.text-gold {
  color: #B45309 !important; /* +45 Pts Estimated */
}

/* Right-Side AI Feature Cards */
.ai-features-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.ai-feature-box {
  display: flex !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2DBD0 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(27, 58, 87, 0.04) !important;
}

.ai-feature-box:hover,
.ai-feature-box.active {
  background: #FAF7F2 !important;
  border-color: #1E4841 !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 16px rgba(30, 72, 65, 0.1) !important;
}

.ai-feat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #EAF6F0 !important;
  border: 1px solid rgba(30, 72, 65, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ai-feat-icon svg {
  stroke: #1E4841 !important;
}

.ai-feat-info h4 {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
}

.ai-feat-info p {
  font-size: 0.88rem !important;
  color: #5A6B64 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.ai-feat-stat {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #1E4841 !important;
  background: #EAF6F0 !important;
  border: 1px solid rgba(30, 72, 65, 0.25) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  display: inline-block !important;
}



/* ==========================================================================
   CREDIT HEALTH SECTION (LEFT & RIGHT CARDS + INNER FACTOR TILES THEME FIX)
   ========================================================================== */

/* 1. Left and Right Main Panels (Warm Cream / Off-White ScoreCare Theme) */
.glass-panel-edu,
.edu-left-card,
.edu-right-card,
.factor-matrix-panel,
.range-carousel-container {
  background: #F7F5F2 !important;
  background-color: #F7F5F2 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid #E2DBD0 !important;
  border-radius: 24px !important;
  padding: 2.25rem !important;
  box-shadow: 0 10px 30px rgba(27, 58, 87, 0.06) !important;
  color: #111827 !important;
}

/* 2. Left Card Content (Score Tier Carousel) */
.range-slide-title {
  font-family: 'Fraunces', serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.range-slide-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}

.range-slide-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: #374151 !important;
  line-height: 1.6 !important;
  margin-bottom: 1.25rem !important;
}

.range-slide-stat {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid #E2DBD0 !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 1.25rem !important;
}

.range-slide-advice {
  background-color: #FFFFFF !important;
  border: 1.5px solid #E2DBD0 !important;
  border-left: 4px solid #1E4841 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  color: #111827 !important;
}

.range-slide-advice strong {
  color: #1E4841 !important;
  font-weight: 700 !important;
}

/* Range Carousel Controls */
.range-ctrl-btn {
  background: #1E4841 !important;
  background-image: linear-gradient(135deg, #1E4841 0%, #133830 100%) !important;
  border: 1.5px solid #133830 !important;
  color: #FFFFFF !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(30, 72, 65, 0.25) !important;
}

.range-ctrl-btn:hover {
  background: #133830 !important;
  transform: scale(1.06) !important;
}

.range-ctrl-btn svg {
  stroke: #FFFFFF !important;
}

.range-ind-dot {
  background-color: #CBD5E1 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}

.range-ind-dot.active {
  background-color: #1E4841 !important;
  width: 22px !important;
  border-radius: 10px !important;
}

/* 3. Right Card Header (What Affects Your Score) */
.factor-main-title {
  font-family: 'Fraunces', serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.factor-bureau-tag {
  background: #EAF6F0 !important;
  color: #1E4841 !important;
  border: 1px solid rgba(30, 72, 65, 0.25) !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

.factor-main-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: #5A6B64 !important;
  line-height: 1.55 !important;
  margin-top: 0.4rem !important;
  margin-bottom: 1.25rem !important;
}

/* 4. Inner Factor Cards: Category-Tinted Backgrounds (No Gray, No Disabled Look) */
.factor-cards-matrix {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.factor-tile {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(27, 58, 87, 0.04) !important;
  opacity: 1 !important;
  filter: none !important;
}

.factor-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(27, 58, 87, 0.08) !important;
}

.factor-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
}

.factor-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  color: #374151 !important;
  line-height: 1.5 !important;
  margin: 6px 0 8px 0 !important;
}

/* Category 1: Payment History (35% Critical Impact - Soft Amber Warm Tint) */
.factor-tile.tile-gold {
  background: #FEF9EE !important;
  background-color: #FEF9EE !important;
  border: 1.5px solid #FDE68A !important;
  border-left: 4px solid #F59E0B !important;
}

.gold-icon-bg {
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  border-radius: 10px !important;
}

.gold-icon-bg svg {
  stroke: #D97706 !important;
}

.impact-critical {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FCD34D !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.gold-pill {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1.5px solid #F59E0B !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.factor-progress-track {
  background: #E8E0D2 !important;
  height: 6px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.bar-gold {
  background: #F59E0B !important;
  height: 100% !important;
  border-radius: 6px !important;
}

/* Category 2: Credit Utilization (30% High Impact - Soft Mint Green Tint) */
.factor-tile.tile-teal {
  background: #F0FDF9 !important;
  background-color: #F0FDF9 !important;
  border: 1.5px solid #A7F3D0 !important;
  border-left: 4px solid #10B981 !important;
}

.teal-icon-bg {
  background: #D1FAE5 !important;
  border: 1px solid #A7F3D0 !important;
  border-radius: 10px !important;
}

.teal-icon-bg svg {
  stroke: #059669 !important;
}

.impact-high {
  background: #D1FAE5 !important;
  color: #047857 !important;
  border: 1px solid #6EE7B7 !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.teal-pill {
  background: #D1FAE5 !important;
  color: #047857 !important;
  border: 1.5px solid #10B981 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.bar-teal {
  background: #10B981 !important;
  height: 100% !important;
  border-radius: 6px !important;
}

/* Category 3: Credit History Age (15% Medium Impact - Soft Sky Blue Tint) */
.factor-tile.tile-cyan {
  background: #F0F9FF !important;
  background-color: #F0F9FF !important;
  border: 1.5px solid #BAE6FD !important;
  border-left: 4px solid #0EA5E9 !important;
}

.cyan-icon-bg {
  background: #E0F2FE !important;
  border: 1px solid #BAE6FD !important;
  border-radius: 10px !important;
}

.cyan-icon-bg svg {
  stroke: #0284C7 !important;
}

.impact-medium {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border: 1px solid #7DD3FC !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.cyan-pill {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border: 1.5px solid #0EA5E9 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.bar-cyan {
  background: #0EA5E9 !important;
  height: 100% !important;
  border-radius: 6px !important;
}

/* Category 4: Credit Account Mix (10% Moderate Impact - Soft Lavender Violet Tint) */
.factor-tile.tile-purple {
  background: #FBF8FF !important;
  background-color: #FBF8FF !important;
  border: 1.5px solid #DDD6FE !important;
  border-left: 4px solid #8B5CF6 !important;
}

.purple-icon-bg {
  background: #EDE9FE !important;
  border: 1px solid #DDD6FE !important;
  border-radius: 10px !important;
}

.purple-icon-bg svg {
  stroke: #7C3AED !important;
}

.impact-low {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  border: 1px solid #C4B5FD !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.purple-pill {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  border: 1.5px solid #8B5CF6 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.bar-purple {
  background: #8B5CF6 !important;
  height: 100% !important;
  border-radius: 6px !important;
}



/* ==========================================================================
   CONTACT SECTION HIGH-CONTRAST FIX (97%, SEND MESSAGE, WE'RE ONLINE NOW)
   ========================================================================== */

/* 1. "Send Message" Button (Solid Deep Forest Green with Crisp #FFFFFF text and icon) */
.contact-submit-btn,
#contact-submit-btn,
button#contact-submit-btn {
  background-color: #1E4841 !important;
  background-image: linear-gradient(135deg, #1E4841 0%, #133830 100%) !important;
  border: 1.5px solid #133830 !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.3) !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
}

.contact-submit-btn:hover,
#contact-submit-btn:hover {
  background-color: #133830 !important;
  background-image: linear-gradient(135deg, #133830 0%, #0D2621 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(30, 72, 65, 0.45) !important;
}

.contact-submit-btn span,
.contact-submit-btn .submit-btn-text,
.contact-submit-btn .submit-btn-icon,
.contact-submit-btn svg,
#contact-submit-btn span,
#contact-submit-btn .submit-btn-text,
#contact-submit-btn .submit-btn-icon,
#contact-submit-btn svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* 2. "We're Online Now" Badge & Bright Mint Status Dot #2ECF9A */
.contact-info-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(46, 207, 154, 0.12) !important;
  border: 1px solid rgba(46, 207, 154, 0.4) !important;
  padding: 5px 14px !important;
  border-radius: 50px !important;
  margin-bottom: 0.5rem !important;
}

.contact-badge-dot,
.contact-info-badge .contact-badge-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #2ECF9A !important;
  box-shadow: 0 0 10px #2ECF9A !important;
  display: inline-block !important;
}

.dynamic-status-badge,
.contact-info-badge span,
.contact-info-badge .dynamic-status-badge {
  color: #DDF7ED !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* 3. "97%" Customer Satisfaction Ring Value in Mint Green #2ECF9A */
.ring-label,
.contact-response-stat .ring-label,
span.ring-label {
  color: #2ECF9A !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  font-family: 'Inter', sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.contact-response-stat {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
}

.contact-response-stat .response-stat-title {
  color: #FFFFFF !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
}

.contact-response-stat .response-stat-sub {
  color: #DDF7ED !important;
  font-size: 0.78rem !important;
  opacity: 0.88 !important;
  margin: 0 !important;
}

/* Overall Left Contact Info Side Text Readability */
.contact-info-side .contact-info-title {
  color: #FFFFFF !important;
}

.contact-info-side .contact-info-desc {
  color: #DDF7ED !important;
  opacity: 0.95 !important;
}

.contact-info-side .detail-label {
  color: #DDF7ED !important;
  opacity: 0.75 !important;
}

.contact-info-side .detail-value {
  color: #FFFFFF !important;
}



/* ==========================================================================
   PURE WHITE OVERRIDES FOR "WE'RE ONLINE NOW" & "97%"
   ========================================================================== */

.dynamic-status-badge,
.contact-info-badge span,
.contact-info-badge .dynamic-status-badge {
  color: #FFFFFF !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

.ring-label,
.contact-response-stat .ring-label,
span.ring-label {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  font-family: 'Inter', sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}



/* ==========================================================================
   EXPLICIT WHITE OVERRIDES FOR WE'RE ONLINE NOW, 97%, & SEND MESSAGE (v96)
   ========================================================================== */

#contact .dynamic-status-badge,
.contact-info-badge .dynamic-status-badge,
span.dynamic-status-badge {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

#contact .contact-badge-dot,
.contact-info-badge .contact-badge-dot,
span.contact-badge-dot {
  background-color: #2ECF9A !important;
  box-shadow: 0 0 10px #2ECF9A !important;
}

#contact .ring-label,
.contact-response-stat .ring-label,
span.ring-label {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

#contact-submit-btn,
.contact-submit-btn,
#contact-submit-btn *,
.contact-submit-btn * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}



/* ==========================================================================
   SCORE RANGES PROGRESS RING ENHANCEMENT (v97)
   ========================================================================== */

.range-slide-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.15rem !important;
  width: 100% !important;
}

.range-slide-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  margin-bottom: 0 !important;
}

.range-slide-visual-arc {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
}

.range-slide-visual-arc svg.mini-arc-svg {
  width: 54px !important;
  height: 54px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

.ring-score-val {
  font-family: 'Fraunces', serif !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1 !important;
  text-align: center !important;
}



/* ==========================================================================
   BENEFITS SECTION: PHONE MOCKUP & CREDIT DIAL VISUAL CARDS (v100)
   ========================================================================== */

.benefits-layout-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.12fr !important;
  gap: 3.5rem !important;
  align-items: center !important;
  justify-items: center !important;
  max-width: 1140px !important;
  margin: 0 auto 3.5rem auto !important;
}

@media (max-width: 992px) {
  .benefits-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

/* --- LEFT SIDE: PHONE MOCKUP --- */
.benefits-mockup-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.phone-mockup {
  width: 290px !important;
  height: 560px !important;
  max-width: 100% !important;
  border: 10px solid #1E2E2B !important;
  border-radius: 42px !important;
  background-color: #FAF7F2 !important;
  box-shadow: 0 25px 50px -12px rgba(27, 58, 87, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: float 6s ease-in-out infinite !important;
}

.phone-notch {
  width: 90px !important;
  height: 18px !important;
  background-color: #1E2E2B !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
}

.phone-screen {
  width: 100% !important;
  height: 100% !important;
  padding: 1.4rem 1.15rem 1.25rem 1.15rem !important;
  display: flex !important;
  flex-direction: column !important;
  color: #111827 !important;
  position: relative !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%) !important;
  box-sizing: border-box !important;
}

.phone-status-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #1E4841 !important;
  opacity: 0.9 !important;
  margin-bottom: 1.25rem !important;
}

.phone-icons {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #1E4841 !important;
}

.phone-icons svg {
  color: #1E4841 !important;
}

.phone-app-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 1.4rem !important;
}

.phone-app-header img {
  height: 22px !important;
  width: auto !important;
  filter: none !important;
  object-fit: contain !important;
}

.phone-gauge-section {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 1.4rem !important;
}

.phone-gauge-circle {
  position: relative !important;
  width: 125px !important;
  height: 125px !important;
}

.phone-svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
}

.phone-svg circle:first-child {
  stroke: #E5DFD5 !important;
  stroke-width: 7 !important;
}

.phone-svg circle:last-child {
  stroke: #00E599 !important;
  stroke-width: 7 !important;
  filter: drop-shadow(0 0 6px rgba(0, 229, 153, 0.4)) !important;
}

.phone-gauge-val {
  position: absolute !important;
  top: 38% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

.phone-gauge-lbl {
  position: absolute !important;
  bottom: 22% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #0E7051 !important;
  background: #E8F8F2 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid #C4EDDC !important;
  white-space: nowrap !important;
}

.phone-insights-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin-bottom: auto !important;
}

.phone-insight-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #FFFFFF !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #1E4841 !important;
  border: 1.5px solid #EAE5DC !important;
  box-shadow: 0 2px 8px rgba(27, 58, 87, 0.03) !important;
}

.phone-insight-item span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #1E4841 !important;
  font-weight: 600 !important;
}

.phone-insight-item svg {
  color: #1E4841 !important;
  stroke: #1E4841 !important;
}

.phone-insight-badge {
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  color: #0E7051 !important;
  background: #E8F8F2 !important;
  border: 1px solid #BCECD8 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.phone-alert-pop {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
  background: #FFFFFF !important;
  padding: 0.75rem 0.9rem !important;
  border-radius: 14px !important;
  color: #111827 !important;
  position: absolute !important;
  bottom: 1.25rem !important;
  left: 0.85rem !important;
  right: 0.85rem !important;
  box-shadow: 0 10px 25px rgba(27, 58, 87, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1.5px solid #00E599 !important;
  z-index: 10 !important;
}

.pop-bell {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background: #E8F8F2 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0E7051 !important;
}

.pop-bell svg {
  color: #0E7051 !important;
  stroke: #0E7051 !important;
}

.pop-txt strong {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #1E4841 !important;
  margin-bottom: 0.15rem !important;
}

.pop-txt p {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: #0E7051 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* --- RIGHT SIDE: CREDIT DIAL IMAGE CARD --- */
.benefits-image-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.benefits-image-card {
  position: relative !important;
  background: #FAF7F2 !important;
  border: 1.5px solid #E2DBD0 !important;
  border-radius: 28px !important;
  padding: 1.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(27, 58, 87, 0.12), 0 4px 16px rgba(27, 58, 87, 0.04) !important;
  width: 100% !important;
  max-width: 560px !important;
  height: 560px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  animation: float 6s ease-in-out infinite reverse !important;
}

.benefits-dial-image {
  width: 100% !important;
  height: auto !important;
  max-height: 400px !important;
  flex: 1 !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  display: block !important;
  background: #FFFFFF !important;
  border: 1.5px solid #EAE5DC !important;
  box-shadow: 0 4px 16px rgba(27, 58, 87, 0.04) !important;
}

.dial-card-overlay {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2DBD0 !important;
  border-left: 4px solid #00E599 !important;
  border-radius: 14px !important;
  padding: 0.9rem 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
  box-shadow: 0 4px 14px rgba(27, 58, 87, 0.04) !important;
  margin-top: 1rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dial-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 8px !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.dial-tip-text {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #2D3748 !important;
  margin: 0 !important;
}

@media (max-width: 992px) {
  .benefits-image-card {
    height: auto !important;
    min-height: auto !important;
    max-width: 500px !important;
  }
}

@media (max-width: 640px) {
  .dial-card-overlay {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

.dial-pill,
.dial-pill.range-excellent-color,
.dial-card-overlay .dial-pill,
.dial-card-overlay .dial-pill *,
span.dial-pill {
  color: #FFFFFF !important;
  background-color: #1E4841 !important;
}


/* App Download Section: Feature Checks & Video Card Refinements (v102) */
.bullet-check {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #1E4841 !important;
  border: 1.5px solid #00E599 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(30, 72, 65, 0.25) !important;
}

.bullet-check svg {
  stroke: #FFFFFF !important;
  stroke-width: 3.5 !important;
  width: 13px !important;
  height: 13px !important;
}

.app-bullet {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1E4841 !important;
}

.app-trailer-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2DBD0 !important;
  border-radius: 24px !important;
  padding: 1.25rem !important;
  box-shadow: 0 16px 36px -6px rgba(27, 58, 87, 0.10), 0 4px 12px rgba(27, 58, 87, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.trailer-footer-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 0.85rem !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.2rem !important;
  border-top: 1px solid #EAE5DC !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.trailer-verified {
  font-size: 0.82rem !important;
  color: #1E4841 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.trailer-verified svg {
  color: #0E7051 !important;
  stroke: #0E7051 !important;
  stroke-width: 2.5 !important;
  width: 16px !important;
  height: 16px !important;
}



/* Video Overlay Caption - Pure White (v103) */
.video-caption-overlay,
.video-caption-overlay strong,
.video-caption-overlay span,
.video-caption-overlay * {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

.video-caption-overlay strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 2px !important;
}

.video-caption-overlay span {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  opacity: 0.95 !important;
}



/* ==========================================================================
   LOAN COMPARISON TABS, PRESETS & FLOATING BUTTON (v104)
   ========================================================================== */

/* 1. LOAN PRODUCT TABS */
.loan-tabs-container {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
}

.loan-tabs-container .loan-tab-btn,
.loan-tab-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* ACTIVE LOAN TAB: Dark green background, pure white text & icon */
.loan-tabs-container .loan-tab-btn.active,
.loan-tab-btn.active,
button.loan-tab-btn.active {
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  border: 1.5px solid #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.3) !important;
}

.loan-tabs-container .loan-tab-btn.active span,
.loan-tabs-container .loan-tab-btn.active .tab-icon-box,
.loan-tabs-container .loan-tab-btn.active svg,
.loan-tabs-container .loan-tab-btn.active path,
.loan-tabs-container .loan-tab-btn.active rect,
.loan-tabs-container .loan-tab-btn.active circle,
.loan-tabs-container .loan-tab-btn.active line,
.loan-tabs-container .loan-tab-btn.active polyline,
.loan-tab-btn.active span,
.loan-tab-btn.active .tab-icon-box,
.loan-tab-btn.active svg,
.loan-tab-btn.active path,
.loan-tab-btn.active rect,
.loan-tab-btn.active circle,
.loan-tab-btn.active line,
.loan-tab-btn.active polyline,
button.loan-tab-btn.active * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* INACTIVE LOAN TABS: Light cream background, dark green/charcoal text & icon, subtle border */
.loan-tabs-container .loan-tab-btn:not(.active),
.loan-tab-btn:not(.active),
button.loan-tab-btn:not(.active) {
  background-color: #FAF7F2 !important;
  background: #FAF7F2 !important;
  border: 1.5px solid #E2DBD0 !important;
  color: #1E4841 !important;
  box-shadow: none !important;
}

.loan-tabs-container .loan-tab-btn:not(.active) span,
.loan-tabs-container .loan-tab-btn:not(.active) .tab-icon-box,
.loan-tabs-container .loan-tab-btn:not(.active) svg,
.loan-tabs-container .loan-tab-btn:not(.active) path,
.loan-tabs-container .loan-tab-btn:not(.active) rect,
.loan-tabs-container .loan-tab-btn:not(.active) circle,
.loan-tabs-container .loan-tab-btn:not(.active) line,
.loan-tabs-container .loan-tab-btn:not(.active) polyline,
.loan-tab-btn:not(.active) span,
.loan-tab-btn:not(.active) .tab-icon-box,
.loan-tab-btn:not(.active) svg,
.loan-tab-btn:not(.active) path,
.loan-tab-btn:not(.active) rect,
.loan-tab-btn:not(.active) circle,
.loan-tab-btn:not(.active) line,
.loan-tab-btn:not(.active) polyline,
button.loan-tab-btn:not(.active) * {
  color: #1E4841 !important;
  stroke: #1E4841 !important;
  fill: none !important;
}

.loan-tabs-container .loan-tab-btn:not(.active):hover,
.loan-tab-btn:not(.active):hover,
button.loan-tab-btn:not(.active):hover {
  background-color: #EAF6F0 !important;
  background: #EAF6F0 !important;
  border-color: #1E4841 !important;
}

.loan-tabs-container .loan-tab-btn:not(.active):hover *,
.loan-tab-btn:not(.active):hover *,
button.loan-tab-btn:not(.active):hover * {
  color: #1E4841 !important;
  stroke: #1E4841 !important;
}


/* 2. PRESET AMOUNT CHIPS (₹4L, ₹8L, ₹15L, ₹25L) */
.preset-amount-chips {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-top: 1rem !important;
  width: 100% !important;
}

.preset-chip,
button.preset-chip {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Unselected Preset Chip: Light background, dark text, subtle border */
.preset-chip:not(.active),
button.preset-chip:not(.active) {
  background-color: #FAF7F2 !important;
  background: #FAF7F2 !important;
  border: 1.5px solid #E2DBD0 !important;
  color: #1E4841 !important;
  box-shadow: none !important;
}

.preset-chip:not(.active):hover,
button.preset-chip:not(.active):hover {
  background-color: #EAF6F0 !important;
  background: #EAF6F0 !important;
  border-color: #1E4841 !important;
  color: #1E4841 !important;
}

/* Selected Preset Chip: Dark green background, white text */
.preset-chip.active,
button.preset-chip.active {
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  border: 1.5px solid #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(30, 72, 65, 0.3) !important;
}

.preset-chip.active *,
button.preset-chip.active * {
  color: #FFFFFF !important;
}


/* 3. FLOATING CIRCULAR ACTION BUTTONS */
.assistant-trigger-btn,
button#assistant-trigger {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  border: 2px solid #00E599 !important;
  box-shadow: 0 8px 24px rgba(30, 72, 65, 0.45) !important;
  z-index: 9998 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.assistant-trigger-btn svg,
button#assistant-trigger svg {
  width: 26px !important;
  height: 26px !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  display: block !important;
  margin: 0 auto !important;
}

.assistant-trigger-btn path,
button#assistant-trigger path {
  stroke: #FFFFFF !important;
  fill: none !important;
}

.assistant-trigger-btn:hover,
button#assistant-trigger:hover {
  background-color: #133830 !important;
  background: #133830 !important;
  border-color: #00E599 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 12px 30px rgba(30, 72, 65, 0.6) !important;
}

.assistant-trigger-btn:hover svg,
button#assistant-trigger:hover svg,
.assistant-trigger-btn:hover path,
button#assistant-trigger:hover path {
  stroke: #00E599 !important;
  color: #00E599 !important;
}

.assistant-trigger-btn:active,
button#assistant-trigger:active {
  transform: scale(0.95) !important;
}

.assistant-trigger-btn:focus-visible,
button#assistant-trigger:focus-visible {
  outline: 3px solid #00E599 !important;
  outline-offset: 3px !important;
}

.scroll-top-btn,
a#scroll-to-top {
  position: fixed !important;
  bottom: 88px !important;
  right: 27px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  border: 1.5px solid #00E599 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(30, 72, 65, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9998 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.scroll-top-btn svg,
a#scroll-to-top svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #FFFFFF !important;
  fill: none !important;
  color: #FFFFFF !important;
}

.scroll-top-btn:hover,
a#scroll-to-top:hover {
  background-color: #133830 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(30, 72, 65, 0.5) !important;
}



/* ==========================================================================
   LOAN TABS & PRESETS: GUARANTEED PURE WHITE TEXT & ICONS IN ACTIVE/HOVER/FOCUS (v105)
   ========================================================================== */

/* Active Loan Tab - ALL States: Normal, Hover, Focus, Active, Visited */
.loan-tabs-container .loan-tab-btn.active,
.loan-tabs-container .loan-tab-btn.active:hover,
.loan-tabs-container .loan-tab-btn.active:focus,
.loan-tabs-container .loan-tab-btn.active:active,
.loan-tabs-container .loan-tab-btn.active:visited,
.loan-tabs-container .loan-tab-btn.active:focus-visible,
.loan-tab-btn.active,
.loan-tab-btn.active:hover,
.loan-tab-btn.active:focus,
.loan-tab-btn.active:active,
.loan-tab-btn.active:visited,
.loan-tab-btn.active:focus-visible,
button.loan-tab-btn.active,
button.loan-tab-btn.active:hover,
button.loan-tab-btn.active:focus,
button.loan-tab-btn.active:active,
button.loan-tab-btn.active:visited,
button.loan-tab-btn.active:focus-visible {
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  background-image: none !important;
  border: 1.5px solid #1E4841 !important;
  border-color: #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.3) !important;
}

/* Active Loan Tab - Children (Spans, Icons, SVGs) in ALL States */
.loan-tabs-container .loan-tab-btn.active *,
.loan-tabs-container .loan-tab-btn.active:hover *,
.loan-tabs-container .loan-tab-btn.active:focus *,
.loan-tabs-container .loan-tab-btn.active:active *,
.loan-tabs-container .loan-tab-btn.active:visited *,
.loan-tabs-container .loan-tab-btn.active:focus-visible *,
.loan-tab-btn.active *,
.loan-tab-btn.active:hover *,
.loan-tab-btn.active:focus *,
.loan-tab-btn.active:active *,
.loan-tab-btn.active:visited *,
.loan-tab-btn.active:focus-visible *,
button.loan-tab-btn.active *,
button.loan-tab-btn.active:hover *,
button.loan-tab-btn.active:focus *,
button.loan-tab-btn.active:active *,
button.loan-tab-btn.active:visited *,
button.loan-tab-btn.active:focus-visible * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* Active Preset Chip - ALL States */
.preset-chip.active,
.preset-chip.active:hover,
.preset-chip.active:focus,
.preset-chip.active:active,
.preset-chip.active:visited,
.preset-chip.active:focus-visible,
button.preset-chip.active,
button.preset-chip.active:hover,
button.preset-chip.active:focus,
button.preset-chip.active:active,
button.preset-chip.active:visited,
button.preset-chip.active:focus-visible {
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  background-image: none !important;
  border: 1.5px solid #1E4841 !important;
  border-color: #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(30, 72, 65, 0.3) !important;
}

.preset-chip.active *,
.preset-chip.active:hover *,
.preset-chip.active:focus *,
.preset-chip.active:active *,
.preset-chip.active:visited *,
.preset-chip.active:focus-visible *,
button.preset-chip.active *,
button.preset-chip.active:hover *,
button.preset-chip.active:focus *,
button.preset-chip.active:active *,
button.preset-chip.active:visited *,
button.preset-chip.active:focus-visible * {
  color: #FFFFFF !important;
}



/* ==========================================================================
   LOAN TABS PERFECT WHITE ACTIVE TEXT & ICONS (v106)
   ========================================================================== */

.loan-tabs-container .loan-tab-btn,
.loan-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.loan-tab-btn .tab-label,
.loan-tab-btn span:not(.tab-icon-box) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

/* ACTIVE LOAN TAB - Background, Text & Icon in all states */
.loan-tabs-container .loan-tab-btn.active,
.loan-tab-btn.active,
button.loan-tab-btn.active {
  background: #1E4841 !important;
  background-color: #1E4841 !important;
  border: 1.5px solid #1E4841 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 72, 65, 0.3) !important;
}

.loan-tabs-container .loan-tab-btn.active .tab-label,
.loan-tabs-container .loan-tab-btn.active span,
.loan-tab-btn.active .tab-label,
.loan-tab-btn.active span,
button.loan-tab-btn.active .tab-label,
button.loan-tab-btn.active span {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.loan-tabs-container .loan-tab-btn.active svg,
.loan-tab-btn.active svg,
button.loan-tab-btn.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

.loan-tabs-container .loan-tab-btn.active svg *,
.loan-tab-btn.active svg *,
button.loan-tab-btn.active svg * {
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* INACTIVE LOAN TABS */
.loan-tabs-container .loan-tab-btn:not(.active),
.loan-tab-btn:not(.active),
button.loan-tab-btn:not(.active) {
  background: #FAF7F2 !important;
  background-color: #FAF7F2 !important;
  border: 1.5px solid #E2DBD0 !important;
  color: #1E4841 !important;
  box-shadow: none !important;
}

.loan-tabs-container .loan-tab-btn:not(.active) .tab-label,
.loan-tabs-container .loan-tab-btn:not(.active) span,
.loan-tab-btn:not(.active) .tab-label,
.loan-tab-btn:not(.active) span,
button.loan-tab-btn:not(.active) .tab-label,
button.loan-tab-btn:not(.active) span {
  color: #1E4841 !important;
  -webkit-text-fill-color: #1E4841 !important;
  fill: #1E4841 !important;
}

.loan-tabs-container .loan-tab-btn:not(.active) svg,
.loan-tab-btn:not(.active) svg,
button.loan-tab-btn:not(.active) svg {
  color: #1E4841 !important;
  stroke: #1E4841 !important;
  fill: none !important;
}

.loan-tabs-container .loan-tab-btn:not(.active) svg *,
.loan-tab-btn:not(.active) svg *,
button.loan-tab-btn:not(.active) svg * {
  stroke: #1E4841 !important;
  fill: none !important;
}



/* ==========================================================================
   APP DOWNLOAD STORE BADGES (GOOGLE PLAY & APP STORE) - ALL STATES (v107)
   ========================================================================== */

.download-badges-wrapper {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 1.5rem !important;
}

.store-badge-card,
a.store-badge-card,
a.store-badge-card:visited,
a.store-badge-card:link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 20px !important;
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 6px 18px rgba(30, 72, 65, 0.22) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
  min-width: 175px !important;
}

/* Hover, Focus, Active States */
.store-badge-card:hover,
a.store-badge-card:hover,
a.store-badge-card:visited:hover,
.store-badge-card:focus,
a.store-badge-card:focus,
.store-badge-card:focus-visible,
a.store-badge-card:focus-visible,
.store-badge-card:active,
a.store-badge-card:active {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(30, 72, 65, 0.35) !important;
  background-color: #153832 !important;
  background: #153832 !important;
  border-color: #00E599 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none !important;
}

.badge-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 30px !important;
  height: 30px !important;
}

.apple-svg,
.store-badge-card .apple-svg,
a.store-badge-card .apple-svg,
a.store-badge-card:visited .apple-svg,
a.store-badge-card:hover .apple-svg {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

.play-store-svg,
.store-badge-card .play-store-svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

.badge-text-box,
.badge-text-col {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  justify-content: center !important;
}

.badge-sub,
.store-badge-card .badge-sub,
a.store-badge-card .badge-sub,
a.store-badge-card:visited .badge-sub,
a.store-badge-card:hover .badge-sub,
a.store-badge-card:focus .badge-sub,
a.store-badge-card:active .badge-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #B5DDD3 !important;
  -webkit-text-fill-color: #B5DDD3 !important;
  line-height: 1.1 !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.badge-main,
.store-badge-card .badge-main,
a.store-badge-card .badge-main,
a.store-badge-card:visited .badge-main,
a.store-badge-card:hover .badge-main,
a.store-badge-card:focus .badge-main,
a.store-badge-card:active .badge-main {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  line-height: 1.1 !important;
  display: block !important;
  letter-spacing: 0.01em !important;
}



/* ==========================================================================
   FOOTER BRAND TAGLINE POSITIONING - PUSH UPWARD (v108)
   ========================================================================== */

.footer-logo-link {
  display: inline-block !important;
  margin-bottom: 0.2rem !important;
  padding: 0 !important;
}

.footer-logo-img {
  display: block !important;
  max-width: 175px !important;
  height: auto !important;
  margin-bottom: 0.2rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
  margin: 0.25rem 0 1.25rem 0 !important;
  padding-top: 0 !important;
}



/* ==========================================================================
   FOOTER BRAND TAGLINE - SHIFT MORE UPWARD (v109)
   ========================================================================== */

.footer-col.footer-col-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.footer-logo-link {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.footer-logo-img {
  display: block !important;
  max-width: 170px !important;
  height: auto !important;
  margin: 0 0 -4px 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
  margin: -6px 0 1.25rem 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: -4px !important;
}



/* ==========================================================================
   FOOTER LOGO & BRAND TAGLINE POSITIONING - SHIFT UPWARD (v110)
   ========================================================================== */

footer, #main-footer, .site-footer {
  padding-top: 3.25rem !important;
}

.footer-col.footer-col-brand {
  margin-top: -8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.footer-logo-link {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.footer-logo-img {
  display: block !important;
  max-width: 165px !important;
  height: auto !important;
  margin: 0 0 0.4rem 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 0 !important;
}



/* ==========================================================================
   FOOTER BRAND TAGLINE - SHIFT TOWARDS LEFT (v111)
   ========================================================================== */

.footer-col.footer-col-brand {
  align-items: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
}

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin: 0 0 1.25rem 0 !important;
  padding-left: 0 !important;
  position: relative !important;
  left: -8px !important;
  max-width: 320px !important;
}



/* ==========================================================================
   FOOTER BRAND TAGLINE - SHIFT SIGNIFICANTLY MORE LEFT (v112)
   ========================================================================== */

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin: 0 0 1.25rem 0 !important;
  padding-left: 0 !important;
  position: relative !important;
  left: -22px !important;
  max-width: 330px !important;
}



/* ==========================================================================
   FOOTER BRAND COLUMN & TAGLINE - SHIFT SIGNIFICANTLY MORE LEFT & UPWARDS (v113)
   ========================================================================== */

.footer-col.footer-col-brand {
  position: relative !important;
  left: -35px !important;
  top: -16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
}

.footer-logo-link {
  display: inline-block !important;
  margin: 0 0 0.2rem 0 !important;
  padding: 0 !important;
}

.footer-logo-img {
  display: block !important;
  max-width: 165px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-col-brand .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin: 0.15rem 0 1.15rem 0 !important;
  padding-left: 0 !important;
  max-width: 330px !important;
}

@media (max-width: 768px) {
  .footer-col.footer-col-brand {
    left: 0 !important;
    top: 0 !important;
  }
}



/* ==========================================================================
   SCORECARE UNIFIED MASTER FOOTER (v114 - FINAL REDESIGNED SPECIFICATION)
   Used consistently across all routes (Home, About, What We Do, Blogs, etc.)
   ========================================================================== */

/* 1. Footer Parent Wrapper */
.site-footer,
footer,
#main-footer {
  background: #06131D !important;
  background-color: #06131D !important;
  background-image: none !important;
  color: #94A3B8 !important;
  padding: 3.5rem 0 2rem 0 !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 100% !important;
  box-shadow: none !important;
  z-index: 10 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.site-footer::before, footer::before, #main-footer::before,
.site-footer::after, footer::after, #main-footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

/* 2. Footer Centered Container */
.site-footer .footer-container,
footer .footer-container,
#main-footer .footer-container,
.footer-container {
  width: 92% !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
}

/* 3. Five-Column Desktop Grid Layout */
.footer-grid-5col {
  display: grid !important;
  grid-template-columns: 2.3fr 1fr 1.35fr 1fr 1.8fr !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 2.5rem !important;
}

/* Column 1: Brand & Social */
.footer-col.footer-col-brand {
  position: relative !important;
  left: -35px !important;
  top: -16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-logo-link {
  display: inline-block !important;
  margin: 0 0 0.2rem 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.footer-logo-img {
  display: block !important;
  max-width: 165px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.footer-col-brand .footer-tagline,
.site-footer .footer-tagline,
p.footer-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin: 0.15rem 0 1.15rem 0 !important;
  padding-left: 0 !important;
  max-width: 330px !important;
}

.footer-highlight-mint,
.brand-company-highlight {
  color: #00E599 !important;
  font-weight: 600 !important;
}

.footer-social-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin: 0 0 1.25rem 0 !important;
}

.social-circle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.social-circle-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

.social-circle-btn:hover {
  background: #00E599 !important;
  color: #040D14 !important;
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
}

.footer-made-in-india-left {
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
  font-weight: 500 !important;
  margin-top: 0.25rem !important;
}

.heart-emoji {
  color: #FF4757 !important;
  display: inline-block !important;
  margin: 0 2px !important;
}

/* Columns 2, 3, 4: Nav Links */
.footer-col.footer-col-links {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.footer-col-title,
.site-footer h4,
.site-footer .footer-col-title {
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.footer-nav-list,
.site-footer ul.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.footer-nav-list li,
.site-footer .footer-nav-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-nav-list li a,
.site-footer .footer-nav-list a {
  color: #D9E1E8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

.footer-nav-list li a:hover,
.site-footer .footer-nav-list a:hover {
  color: #00E599 !important;
  transform: translateX(3px) !important;
  text-decoration: none !important;
}

/* Column 5: Right Column (Trust & Store Area) */
.footer-col.footer-col-trust {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.footer-trust-header {
  margin-bottom: 1.15rem !important;
}

.trust-heading-main {
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.trust-heading-sub {
  color: #00E599 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0.2rem 0 0 0 !important;
  padding: 0 !important;
}

.footer-trust-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  margin-bottom: 1.25rem !important;
}

.trust-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.85rem !important;
  box-sizing: border-box !important;
}

.trust-pill-svg {
  width: 18px !important;
  height: 18px !important;
  color: #00E599 !important;
  stroke: #00E599 !important;
  flex-shrink: 0 !important;
}

.trust-pill-text {
  color: #D9E1E8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.footer-store-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
}

.app-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: #1E4841 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.app-store-btn:hover {
  background: #14352F !important;
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.store-svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.store-btn-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.store-small {
  font-size: 0.62rem !important;
  color: #B5DDD3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

.store-large {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

/* 4. Bottom Bar: Centered Copyright Only */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 1.5rem !important;
  margin-top: 1rem !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-bottom-center-copyright {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.footer-copyright {
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* 5. Responsive Behavior & Breakpoints */
@media (max-width: 1100px) {
  .footer-grid-5col {
    grid-template-columns: 1.8fr 1fr 1.2fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-col.footer-col-trust {
    grid-column: 1 / -1 !important;
    margin-top: 1rem !important;
  }
  .footer-trust-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .footer-col.footer-col-brand {
    left: 0 !important;
    top: 0 !important;
    grid-column: 1 / -1 !important;
  }
  .footer-grid-5col {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-col.footer-col-trust {
    grid-column: 1 / -1 !important;
  }
  .footer-trust-cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 540px) {
  .site-footer, footer, #main-footer {
    padding: 2.5rem 0 1.5rem 0 !important;
  }
  .footer-grid-5col {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .footer-store-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   ENHANCED & INCREASED NAVBAR LOGO SIZE (v116)
   ========================================================================== */

header#main-header,
header {
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
}

body {
  padding-top: 90px !important;
}

header#main-header .container,
header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
}

header#main-header .logo,
header .logo,
.logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

header#main-header .logo img,
header .logo img,
.logo img {
  height: 74px !important;
  max-height: 74px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
}

header.scrolled,
header#main-header.scrolled {
  height: 76px !important;
}

header.scrolled .logo img,
header#main-header.scrolled .logo img {
  height: 62px !important;
  max-height: 62px !important;
}

@media (max-width: 768px) {
  header#main-header,
  header {
    height: 76px !important;
  }
  body {
    padding-top: 76px !important;
  }
  header#main-header .logo img,
  header .logo img,
  .logo img {
    height: 58px !important;
    max-height: 58px !important;
    max-width: 200px !important;
  }
}


/* ==========================================================================
   EXTRA LARGE NAVBAR LOGO (v117)
   ========================================================================== */

header#main-header,
header {
  height: 98px !important;
  display: flex !important;
  align-items: center !important;
}

body {
  padding-top: 98px !important;
}

header#main-header .container,
header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
}

header#main-header .logo,
header .logo,
.logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

header#main-header .logo img,
header .logo img,
.logo img {
  height: 88px !important;
  max-height: 88px !important;
  width: auto !important;
  max-width: 320px !important;
  object-fit: contain !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
}

header.scrolled,
header#main-header.scrolled {
  height: 82px !important;
}

header.scrolled .logo img,
header#main-header.scrolled .logo img {
  height: 72px !important;
  max-height: 72px !important;
}

@media (max-width: 768px) {
  header#main-header,
  header {
    height: 82px !important;
  }
  body {
    padding-top: 82px !important;
  }
  header#main-header .logo img,
  header .logo img,
  .logo img {
    height: 68px !important;
    max-height: 68px !important;
    max-width: 240px !important;
  }
}


/* ==========================================================================
   WIDER FOOTER STORE BUTTONS - SINGLE LINE TEXT (v118)
   ========================================================================== */

.footer-grid-5col {
  display: grid !important;
  grid-template-columns: 2.1fr 0.95fr 1.25fr 0.95fr 2.3fr !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 2.5rem !important;
}

.footer-col.footer-col-trust {
  width: 100% !important;
  min-width: 0 !important;
}

.footer-store-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100% !important;
  margin-top: 1rem !important;
}

.app-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  background: #1E4841 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

.app-store-btn:hover {
  background: #14352F !important;
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.store-svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.store-btn-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
}

.store-small {
  display: block !important;
  font-size: 0.62rem !important;
  color: #B5DDD3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.store-large {
  display: block !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 1100px) {
  .footer-grid-5col {
    grid-template-columns: 1.8fr 1fr 1.2fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-col.footer-col-trust {
    grid-column: 1 / -1 !important;
    margin-top: 1rem !important;
  }
  .footer-store-grid {
    max-width: 440px !important;
  }
}

@media (max-width: 768px) {
  .footer-grid-5col {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 440px !important;
  }
}

@media (max-width: 540px) {
  .footer-store-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   FOOTER TITLES PURE WHITE & COMPACT STORE BUTTONS
   ========================================================= */

/* 1. All Footer Column Titles / Headings Pure White */
.footer-col-title,
.footer-nav-title,
.footer-col-heading,
.footer-col-nav h4,
.footer-nav-col h4,
.site-footer h4,
#main-footer h4,
footer h4,
.footer-col h4,
.footer-grid-5col h4 {
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* 2. Compact Store Buttons (Decreased Width) */
.footer-store-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 155px !important;
  align-items: flex-start !important;
}

.store-badge-card,
a.store-badge-card,
a.store-badge-card:visited,
a.store-badge-card:link,
.app-store-btn,
a.app-store-btn,
a.app-store-btn:visited,
a.app-store-btn:link,
.store-btn,
a.store-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background-color: #1E4841 !important;
  background: #1E4841 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 155px !important;
  min-width: 140px !important;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.store-badge-card:hover,
a.store-badge-card:hover,
.app-store-btn:hover,
a.app-store-btn:hover,
.store-btn:hover,
a.store-btn:hover {
  background-color: #14352F !important;
  background: #14352F !important;
  border-color: #00E599 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 14px rgba(0, 229, 153, 0.2) !important;
}

.store-svg,
.play-store-svg,
.apple-svg,
.store-badge-card svg,
.app-store-btn svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
}

.store-btn-text,
.badge-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.store-small,
.badge-sub {
  font-size: 0.56rem !important;
  color: #B5DDD3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  display: block !important;
}

.store-large,
.badge-main {
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  display: block !important;
}