/* DreamKaar - Drive Your Dreams
   Blue + Orange | Bright Modern Theme
   ===================================== */

:root {
  --blue-900: #0D47A1;
  --blue-700: #1565C0;
  --blue-600: #1976D2;
  --blue-500: #2196F3;
  --blue-100: #BBDEFB;
  --blue-50: #E3F2FD;
  --orange-600: #FB8C00;
  --orange-500: #FF9800;
  --orange-400: #FFA726;
  --orange-100: #FFE0B2;
  --green-600: #43A047;
  --green-500: #4CAF50;
  --red-500: #F44336;
  --gray-900: #1a1a2e;
  --gray-800: #2d2d44;
  --gray-700: #444;
  --gray-600: #666;
  --gray-400: #999;
  --gray-200: #e0e0e0;
  --gray-100: #f5f5f5;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.15);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

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

img { max-width: 100%; }

/* ========== NAVBAR ========== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 0;
  transition: box-shadow .3s;
}
.navbar.scrolled { box-shadow: var(--shadow-md); }

.nav-content {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; max-width: 1200px; margin: 0 auto; padding: 0 20px;
}

.logo-container img { height: 40px; }

.nav-menu {
  display: flex; align-items: center; gap: 8px;
}
.nav-link {
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 14px; color: var(--gray-700);
  transition: all .2s;
}
.nav-link:hover { background: var(--blue-50); color: var(--blue-700); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  border: none; cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--blue-700); color: var(--white);
}
.btn-primary:hover { background: var(--blue-900); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-orange {
  background: var(--orange-500); color: var(--white);
}
.btn-orange:hover { background: var(--orange-600); transform: translateY(-1px); }

.btn-outline {
  background: transparent; color: var(--blue-700);
  border: 2px solid var(--blue-700);
}
.btn-outline:hover { background: var(--blue-700); color: var(--white); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }

.mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gray-700); }

/* ========== HERO CAROUSEL ========== */
.hero-carousel {
  position: relative;
  margin-top: 68px;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 620px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-50), var(--orange-100));
}
.carousel-track {
  display: flex; height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-slide {
  min-width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.carousel-slide img {
  width: 100%; height: 100%; object-fit: cover;
}
.carousel-slide .slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13,71,161,0.7) 0%, transparent 60%);
  display: flex; align-items: center; padding: 0 60px;
}
.slide-content {
  max-width: 480px; color: var(--white);
}
.slide-content h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; line-height: 1.2; }
.slide-content p { font-size: 18px; opacity: 0.9; margin-bottom: 24px; }

.carousel-nav {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.5); border: none; cursor: pointer;
  transition: all .3s;
}
.carousel-dot.active { background: var(--orange-500); width: 28px; border-radius: 5px; }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.9); border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 18px; color: var(--blue-700);
  box-shadow: var(--shadow-md);
  transition: all .2s;
}
.carousel-arrow:hover { background: var(--blue-700); color: var(--white); }
.carousel-arrow.prev { left: 20px; }
.carousel-arrow.next { right: 20px; }

/* ========== VALUE PROPOSITION BAR ========== */
.value-bar {
  background: var(--white);
  padding: 36px 0;
  border-bottom: 1px solid var(--gray-200);
}
.value-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.value-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.value-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.value-icon.blue { background: var(--blue-50); color: var(--blue-700); }
.value-icon.orange { background: var(--orange-100); color: var(--orange-600); }
.value-icon.green { background: #E8F5E9; color: var(--green-600); }
.value-item h4 { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.value-item p { font-size: 13px; color: var(--gray-600); }

/* ========== CAR LISTINGS ========== */
.cars-section {
  padding: 60px 0;
  background: var(--gray-100);
}
.section-header {
  text-align: center; margin-bottom: 36px;
}
.section-header h2 {
  font-size: 32px; font-weight: 700; color: var(--gray-900);
}
.section-header h2 span { color: var(--orange-500); }
.section-header p { color: var(--gray-600); font-size: 16px; margin-top: 8px; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 28px;
}
.filter-btn {
  padding: 8px 20px; border-radius: 20px;
  border: 1.5px solid var(--gray-200); background: var(--white);
  font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--gray-600); transition: all .2s;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--blue-700); color: var(--white); border-color: var(--blue-700);
}

.search-bar {
  max-width: 480px; margin: 0 auto 28px;
  position: relative;
}
.search-bar input {
  width: 100%; padding: 12px 20px 12px 44px;
  border: 1.5px solid var(--gray-200); border-radius: 30px;
  font-size: 14px; background: var(--white);
  outline: none;
}
.search-bar input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-50); }
.search-bar i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }

.cars-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ========== CAR CARD ========== */
.car-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .3s ease;
  border: 1px solid var(--gray-200);
}
.car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.car-card-header { position: relative; height: 180px; background: var(--gray-100); overflow: hidden; }
.car-card-image { width: 100%; height: 100%; object-fit: cover; }

.discount-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--green-500); color: var(--white);
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
}
.discount-tier-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; color: var(--white);
}
.tier-premium { background: var(--orange-500); }
.tier-super { background: var(--blue-700); }
.tier-mega { background: var(--red-500); }

.car-card-body { padding: 16px; }
.car-name { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.car-segment { font-size: 12px; color: var(--gray-600); margin-bottom: 10px; }
.car-price { font-size: 14px; font-weight: 600; color: var(--blue-700); margin-bottom: 12px; }

.car-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.car-badge {
  font-size: 11px; padding: 3px 8px;
  border-radius: 4px; background: var(--gray-100);
  color: var(--gray-600);
}
.car-badge.express { background: var(--green-500); color: var(--white); }

.car-actions { display: flex; gap: 8px; }
.car-actions .btn { flex: 1; justify-content: center; font-size: 12px; padding: 8px 10px; }

/* ========== BOOKING FLOW (AckoDrive-style) ========== */
.booking-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  justify-content: center; align-items: center;
}
.booking-modal.active { display: flex; }

.booking-panel {
  background: var(--white); border-radius: var(--radius-lg);
  max-width: 520px; width: 90%; max-height: 90vh;
  overflow-y: auto; box-shadow: var(--shadow-xl);
}
.booking-header {
  padding: 20px 24px; border-bottom: 1px solid var(--gray-200);
  display: flex; justify-content: space-between; align-items: center;
}
.booking-header h3 { font-size: 18px; }
.booking-step-indicator {
  font-size: 13px; color: var(--blue-700); font-weight: 600;
}
.booking-close {
  background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gray-400);
}
.booking-body { padding: 24px; }

.booking-car-info {
  display: flex; gap: 16px; align-items: center;
  padding: 16px; background: var(--gray-100); border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.booking-car-info img { width: 100px; height: 60px; object-fit: cover; border-radius: 8px; }
.booking-car-name { font-weight: 700; font-size: 16px; }
.booking-car-price { font-size: 14px; color: var(--blue-700); font-weight: 600; }

.step-question {
  font-size: 22px; font-weight: 700; color: var(--gray-900);
  margin-bottom: 12px;
}
.step-subtitle { font-size: 14px; color: var(--gray-600); margin-bottom: 20px; }

.option-btns {
  display: flex; gap: 12px; margin-bottom: 20px;
}
.option-btn {
  flex: 1; padding: 14px; text-align: center;
  border: 2px solid var(--gray-200); border-radius: var(--radius-md);
  font-weight: 600; font-size: 15px; cursor: pointer;
  background: var(--white); transition: all .2s;
}
.option-btn:hover { border-color: var(--blue-500); }
.option-btn.selected { border-color: var(--blue-700); background: var(--blue-50); color: var(--blue-700); }

.info-box {
  padding: 14px 16px; background: var(--blue-50); border-radius: var(--radius-md);
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px; font-size: 13px; color: var(--gray-700);
}
.info-box i { color: var(--blue-700); margin-top: 2px; }

.finance-benefits { margin-bottom: 20px; }
.finance-benefit {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0; font-size: 14px;
}
.finance-benefit i { color: var(--green-500); }

.bank-logos {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; font-size: 13px; color: var(--gray-600);
}

.booking-footer {
  padding: 16px 24px; border-top: 1px solid var(--gray-200);
  display: flex; gap: 12px;
}
.booking-footer .btn { flex: 1; justify-content: center; }

/* ========== PAYMENT SECTION ========== */
.payment-section {
  padding: 60px 0; background: var(--white);
}
.payment-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 36px;
}
.payment-tier {
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 32px 24px;
  text-align: center; position: relative;
  transition: all .3s;
}
.payment-tier:hover { border-color: var(--blue-500); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.payment-tier.featured {
  border-color: var(--orange-500);
  box-shadow: var(--shadow-lg);
}
.payment-tier.featured::before {
  content: 'MOST POPULAR';
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--orange-500); color: var(--white);
  padding: 4px 16px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.tier-name { font-size: 14px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 1px; }
.tier-price { font-size: 36px; font-weight: 800; color: var(--gray-900); margin: 12px 0; }
.tier-price span { font-size: 16px; color: var(--gray-400); }
.tier-discount { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.tier-discount.green { color: var(--green-600); }
.tier-discount.blue { color: var(--blue-700); }
.tier-discount.orange { color: var(--orange-600); }
.tier-features { list-style: none; margin-bottom: 24px; text-align: left; }
.tier-features li {
  padding: 8px 0; font-size: 14px; color: var(--gray-700);
  display: flex; gap: 8px; align-items: center;
}
.tier-features li i { color: var(--green-500); font-size: 13px; }

/* ========== QUERY FORM ========== */
.query-section {
  padding: 60px 0;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  color: var(--white);
}
.query-form {
  max-width: 600px; margin: 36px auto 0;
  display: grid; gap: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; font-weight: 500; opacity: 0.9; }
.form-group input, .form-group select, .form-group textarea {
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: var(--white); font-size: 14px;
  outline: none; font-family: inherit;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.5); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--orange-500); background: rgba(255,255,255,0.15);
}
.form-group select option { color: var(--gray-900); background: var(--white); }

/* ========== EMI CALCULATOR ========== */
.emi-section { padding: 60px 0; background: var(--gray-100); }
.emi-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

/* left & right cards */
.emi-sliders { display:flex; flex-direction:column; gap:20px; background:var(--white); padding:28px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.emi-card-head { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:var(--gray-900); padding-bottom:8px; border-bottom:1px solid var(--gray-100); }
.emi-card-head i { color:var(--blue-700); }
.slider-group label { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:13.5px; color:var(--gray-700); margin-bottom:11px; }
.slider-group label > span { background:var(--blue-50); color:var(--blue-700); font-weight:700; font-size:13px; padding:4px 12px; border-radius:20px; }
.slider-group input[type="range"] { width:100%; height:7px; border-radius:6px; -webkit-appearance:none; appearance:none; background:var(--gray-200); outline:none; cursor:pointer; }
.slider-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; cursor:pointer; border:4px solid var(--blue-700); box-shadow:0 2px 7px rgba(21,101,192,.4); transition:transform .1s; }
.slider-group input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.12); }
.slider-group input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--blue-700); box-shadow:0 2px 7px rgba(21,101,192,.4); cursor:pointer; }
.slider-ends { display:flex; justify-content:space-between; font-size:11px; color:var(--gray-400); margin-top:7px; }

.emi-results { background:var(--white); padding:28px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.emi-monthly { text-align:center; margin-bottom:16px; }
.emi-monthly .label { font-size:13px; color:var(--gray-500); }
.emi-monthly .amount { font-size:38px; font-weight:800; color:var(--blue-700); letter-spacing:-.5px; }
.emi-breakdown { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.emi-item { text-align:center; background:var(--gray-100); border-radius:12px; padding:13px 8px; }
.emi-item .label { font-size:11px; color:var(--gray-500); margin-bottom:4px; }
.emi-item .value { font-size:15px; font-weight:700; color:var(--gray-900); }

/* ========== PROCESS / HOW IT WORKS ========== */
.process-section { padding: 60px 0; }
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 36px;
}
.process-step {
  text-align: center; padding: 28px 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: all .3s;
}
.process-step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.step-number {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; margin: 0 auto 12px;
}
.process-step h4 { font-size: 15px; margin-bottom: 6px; }
.process-step p { font-size: 13px; color: var(--gray-600); }

/* ========== REVIEWS ========== */
.reviews-section { padding: 60px 0; background: var(--blue-50); }
.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 36px;
}
.review-card {
  background: var(--white); padding: 24px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.review-stars { color: var(--orange-500); margin-bottom: 12px; }
.review-text { font-size: 14px; color: var(--gray-700); margin-bottom: 14px; font-style: italic; }
.review-author { font-weight: 700; font-size: 14px; }
.review-source { font-size: 12px; color: var(--gray-400); }

/* ========== FOOTER ========== */
.footer {
  background: var(--gray-900); color: rgba(255,255,255,0.7);
  padding: 48px 0 24px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 36px;
}
.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 12px; }
.footer-brand img { height: 58px; }
.footer h4 { color: var(--white); font-size: 15px; margin-bottom: 14px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer ul a { font-size: 13px; transition: color .2s; }
.footer ul a:hover { color: var(--orange-500); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px; text-align: center; font-size: 12px;
}

/* ========== WHATSAPP FLOAT ========== */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 9000;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: var(--shadow-lg);
  transition: transform .3s;
}
.whatsapp-float:hover { transform: scale(1.1); }

/* ========== CALL-NOW FLOAT (Indian B2B closes on the phone) ========== */
.call-float {
  position: fixed; bottom: 90px; right: 24px; z-index: 9000;
  width: 56px; height: 56px; border-radius: 50%;
  background: #0B2447; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; box-shadow: var(--shadow-lg); transition: transform .3s;
}
.call-float:hover { transform: scale(1.1); }

/* ========== LOADING OVERLAY ========== */
.loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(255,255,255,0.95);
  flex-direction: column; align-items: center; justify-content: center;
}
.loading-overlay.active { display: flex; }
.loading-overlay h3 { font-size: 22px; font-weight: 700; margin-top: 24px; }
.loading-overlay p { color: var(--gray-600); font-size: 15px; margin-top: 8px; }
.spinner {
  width: 40px; height: 40px; border: 4px solid var(--gray-200);
  border-top-color: var(--blue-700); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin-top: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== HERO (Option B — clean image + caption) ========== */
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,16,28,.92) 0%, rgba(12,16,28,.6) 38%, rgba(12,16,28,.06) 66%, transparent 100%); }
.hero-cap { position:absolute; top:50%; left:7%; transform:translateY(-50%); max-width:46%; color:#fff; z-index:2; }
.hero-kicker { font-size:13px; letter-spacing:3px; color:#d6953f; font-weight:600; margin-bottom:10px; }
.hero-cap h2 { font-size:42px; font-weight:800; line-height:1.05; margin-bottom:10px; color:#fff; }
.hero-save { font-size:27px; font-weight:700; margin-bottom:8px; color:#fff; }
.hero-save b { color:#ffb866; }
.hero-cap p { font-size:16px; opacity:.9; margin-bottom:22px; line-height:1.5; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1.6px solid rgba(255,255,255,.55); }
.btn-ghost:hover { background:#fff; color:var(--blue-900); }
.hero-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.hero-chip { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff; font-size:12px; font-weight:500; padding:5px 11px; border-radius:20px; backdrop-filter:blur(2px); }
.hero-chip i { color:#ffb866; font-size:10px; margin-right:3px; }
/* Slides without a clean (text-free) render fall back to the existing baked creative — hide our caption so text never overlaps the baked artwork. */
.carousel-slide.is-baked .hero-scrim,
.carousel-slide.is-baked .hero-cap { display:none; }

/* ========== RESERVE / PRICE-LOCK TOKEN ========== */
.reserve-wrap { display:grid; grid-template-columns:0.9fr 1.1fr; gap:28px; align-items:center; margin-top:36px; }
.reserve-card { position:relative; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:34px 28px; box-shadow:var(--shadow-lg); text-align:center; }
.reserve-badge { position:absolute; top:16px; right:16px; background:rgba(67,160,71,.12); color:var(--green-600); font-size:12px; font-weight:600; padding:5px 10px; border-radius:20px; }
.reserve-from { font-size:14px; color:var(--gray-600); margin-top:6px; }
.reserve-value { font-size:52px; font-weight:800; color:var(--blue-900); line-height:1.1; }
.reserve-tagline { font-size:13px; color:var(--gray-600); margin:6px auto 18px; max-width:320px; }
.reserve-benefits { list-style:none; text-align:left; max-width:330px; margin:0 auto 22px; padding:0; }
.reserve-benefits li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gray-700); padding:7px 0; }
.reserve-benefits li i { color:var(--orange-500); width:18px; text-align:center; }
.reserve-how { padding:8px 4px; }
.reserve-how h3 { font-size:20px; margin-bottom:18px; color:var(--blue-900); }
.reserve-step { display:flex; gap:14px; margin-bottom:18px; align-items:flex-start; }
.reserve-step > span { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--blue-700); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
.reserve-step strong { display:block; font-size:15px; color:var(--gray-800); margin-bottom:2px; }
.reserve-step p { font-size:13.5px; color:var(--gray-600); margin:0; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .nav-menu { display: none; }
  .nav-menu.active {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--white); padding: 16px; border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
  }
  .mobile-menu-toggle { display: block; }
  .nav-actions .btn-outline { display: none; }

  .hero-carousel { aspect-ratio: 16 / 9; max-height: 360px; min-height: 260px; }
  .slide-content h2 { font-size: 22px; }
  .carousel-slide .slide-overlay { padding: 0 24px; }

  .value-grid { grid-template-columns: 1fr 1fr; }
  .cars-grid { grid-template-columns: 1fr; }
  .payment-tiers { grid-template-columns: 1fr; }
  .emi-wrapper { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .option-btns { flex-direction: column; }

  .hero-cap { max-width: 88%; left: 6%; }
  .hero-cap h2 { font-size: 25px; }
  .hero-save { font-size: 19px; }
  .hero-cap p { font-size: 13px; }
  .reserve-wrap { grid-template-columns: 1fr; }
  /* --- mobile polish --- */
  .container { padding-left: 16px; padding-right: 16px; }
  .brand-filter, .filter-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; }
  .brand-filter::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
  .brand-chip, .filter-btn { flex: 0 0 auto; }
  .carousel-arrow { width: 40px; height: 40px; z-index: 5; }
  .bq-card { padding: 20px; }
  .section-header h2 { font-size: 26px; }
}

/* ========== EMI — credit profile + lender offers ========== */
.credit-group { display:flex; flex-direction:column; gap:8px; }
.credit-group > label { font-weight:600; font-size:14px; }
.credit-group small { font-weight:400; color:var(--gray-600); }
.emi-select { width:100%; padding:11px 12px; border:1.5px solid var(--gray-200); border-radius:10px; font-size:14px; background:#fff; color:var(--gray-900); }
.cibil-check { align-self:flex-start; background:none; border:none; color:var(--blue-700); font-size:13px; font-weight:600; cursor:pointer; padding:2px 0; }
.cibil-check:hover { text-decoration:underline; }
.bank-chips { display:flex; flex-wrap:wrap; gap:8px; }
.bank-chip { border:1.5px solid var(--gray-200); background:#fff; color:var(--gray-700); border-radius:20px; padding:7px 14px; font-size:13px; cursor:pointer; transition:all .15s; }
.bank-chip:hover { border-color:var(--blue-700); }
.bank-chip.active { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }

.emi-monthly .amount .per { font-size:16px; font-weight:600; color:var(--gray-600); }
.emi-monthly .best-rate { font-size:13px; color:var(--gray-600); margin-top:4px; }
#bestBankLabel { color:var(--orange-500); font-weight:600; }

.emi-offers-wrap { grid-column:1 / -1; margin-top:8px; }
.emi-offers-title { font-size:17px; margin-bottom:14px; color:var(--blue-900); }
.emi-offers { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.offer { position:relative; border:1.5px solid var(--gray-200); border-radius:14px; padding:16px; background:#fff; display:flex; flex-direction:column; gap:6px; transition:all .15s; }
.offer.best { border-color:var(--orange-500); box-shadow:0 6px 20px rgba(255,152,0,.12); }
.offer.ineligible { opacity:.6; }
.offer-bank { font-weight:700; font-size:15px; color:var(--gray-900); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.offer-rate { font-size:26px; font-weight:800; color:var(--blue-700); }
.offer-rate small, .offer-emi small { font-size:12px; font-weight:600; color:var(--gray-600); }
.offer-emi { font-size:18px; font-weight:700; color:var(--gray-900); }
.offer-meta { font-size:12px; color:var(--gray-600); }
.offer-meta .ok { color:var(--green-600); font-weight:600; }
.offer-meta .no { color:#c0392b; font-weight:600; }
.b-mine { background:rgba(21,101,192,.1); color:var(--blue-700); font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.b-best { background:var(--orange-500); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.offer-apply { margin-top:6px; text-align:center; background:var(--blue-700); color:#fff; border-radius:8px; padding:8px; font-size:13px; font-weight:600; }
.offer-apply:hover { background:var(--blue-900); }
.emi-disclaimer { font-size:12px; color:var(--gray-600); margin-top:14px; line-height:1.5; }

/* CIBIL soft-pull modal (bureau hook) */
.cibil-modal { display:none; position:fixed; inset:0; z-index:100000; background:rgba(10,15,28,.6); align-items:center; justify-content:center; padding:16px; }
.cibil-modal.active { display:flex; }
.cibil-panel { background:#fff; border-radius:16px; padding:28px 24px; max-width:420px; width:100%; position:relative; box-shadow:var(--shadow-xl); }
.cibil-panel h3 { font-size:20px; margin-bottom:6px; color:var(--blue-900); }
.cibil-panel > p { font-size:13.5px; color:var(--gray-600); margin-bottom:16px; }
.cibil-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:26px; line-height:1; color:var(--gray-400); cursor:pointer; }
.emi-input { width:100%; padding:12px; border:1.5px solid var(--gray-200); border-radius:10px; font-size:14px; margin-bottom:12px; }
.cibil-consent { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--gray-600); margin-bottom:16px; }
.cibil-soon { font-size:12px; color:var(--gray-600); margin-top:14px; line-height:1.5; }

/* ========== DISCOUNT INTEL (real savings proof) ========== */
.intel-section { padding:64px 0; background:linear-gradient(180deg,#ffffff,#f5f8fc); }
.intel-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:30px 0 36px; }
.istat { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:22px 16px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.istat .iv { font-size:30px; font-weight:800; color:var(--blue-900); line-height:1.1; }
.istat .il { font-size:12.5px; color:var(--gray-600); margin-top:6px; }
.proof-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.proof-card { background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.05); transition:all .15s; }
.proof-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.proof-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.proof-model { font-weight:700; font-size:16px; color:var(--gray-900); }
.proof-verified { font-size:11px; font-weight:600; color:var(--green-600); white-space:nowrap; }
.proof-variant { font-size:12.5px; color:var(--gray-600); margin:2px 0 12px; }
.proof-save { font-size:15px; color:var(--gray-700); margin-bottom:10px; }
.proof-save b { font-size:22px; color:var(--orange-500); }
.proof-save small { color:var(--green-600); font-weight:600; font-size:13px; }
.proof-prices { display:flex; flex-direction:column; gap:3px; font-size:12.5px; margin-bottom:10px; }
.pp-otr { color:var(--gray-600); text-decoration:line-through; }
.pp-dk { color:var(--blue-700); font-weight:700; }
.proof-breakup { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.proof-breakup span { font-size:11px; background:#eaf2fd; color:var(--blue-700); padding:3px 8px; border-radius:8px; }
.proof-cust { font-size:12px; color:var(--gray-600); font-style:italic; }

/* ========== MARKET INSIDER (authority) ========== */
.insider-section { padding:64px 0; background:var(--white); }
.climate-card { display:grid; grid-template-columns:1.3fr 1fr; border:1px solid var(--gray-200); border-radius:18px; overflow:hidden; margin:30px 0 26px; box-shadow:var(--shadow-md); }
.climate-now { padding:28px; }
.cl-rating { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 12px; border-radius:20px; background:#eef1f5; color:var(--gray-700); margin-bottom:8px; }
.cl-peak,.cl-festive { background:rgba(46,125,50,.12); color:#2e7d32; }
.cl-strong,.cl-good { background:rgba(67,160,71,.14); color:#388e3c; }
.cl-moderate,.cl-building { background:rgba(251,140,0,.16); color:#e67e00; }
.cl-lean { background:rgba(229,57,53,.12); color:#E53935; }
.cl-month { font-size:13px; color:var(--gray-600); }
.cl-head { font-size:21px; font-weight:700; color:var(--gray-900); margin:6px 0 14px; }
.cl-gauge { height:10px; background:var(--gray-200); border-radius:5px; overflow:hidden; }
.cl-fill { height:100%; border-radius:5px; transition:width .6s; }
.cl-tip { font-size:13px; color:var(--gray-600); margin-top:14px; line-height:1.5; }
.cl-tip i { color:var(--orange-500); }
.climate-rec { padding:28px; background:var(--blue-900); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.rec-label { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; opacity:.7; }
.rec-text { font-size:16px; line-height:1.5; margin-top:8px; }
.cal-title { font-weight:700; font-size:16px; color:var(--blue-900); margin:24px 0 12px; }
.cal-strip { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; align-items:end; }
.cal-cell { text-align:center; }
.cal-bar { height:90px; display:flex; align-items:flex-end; background:#eef1f5; border-radius:6px; overflow:hidden; }
.cal-bar > div { width:100%; border-radius:6px 6px 0 0; transition:height .5s; }
.cal-cell.cur .cal-bar { outline:2px solid var(--orange-500); outline-offset:1px; }
.cal-m { font-size:11px; color:var(--gray-600); margin-top:5px; }
.cal-cell.cur .cal-m { color:var(--orange-500); font-weight:700; }
.model-chips { display:flex; flex-wrap:wrap; gap:8px; }
.model-chip { font-size:13px; background:#eef1f5; border:1px solid var(--gray-200); border-radius:20px; padding:7px 13px; color:var(--gray-700); }
.model-chip small { color:var(--blue-700); font-weight:600; }

@media (max-width: 768px) {
  .intel-stats { grid-template-columns:1fr 1fr; }
  .climate-card { grid-template-columns:1fr; }
  .cal-bar { height:70px; }
}

/* ===== car card: specs + dealer-vs-DreamKaar + compare ===== */
.compare-chk { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.92); border:1px solid var(--gray-200); border-radius:20px; padding:4px 10px; font-size:11px; font-weight:600; color:var(--gray-700); cursor:pointer; z-index:2; }
.compare-chk input { accent-color:var(--blue-700); cursor:pointer; margin:0; }
.car-specs { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px; }
.car-specs .spec { font-size:12px; color:var(--gray-700); background:var(--gray-100,#f1f4f8); border-radius:8px; padding:4px 9px; }
.car-specs .spec i { color:var(--blue-700); margin-right:4px; font-size:11px; }
.dvu { display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#fbf4ec,#f1f6ff); border:1px solid var(--gray-200); border-radius:12px; padding:10px 12px; margin:10px 0 14px; }
.dvu-col { display:flex; flex-direction:column; gap:2px; flex:1; }
.dvu-h { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--gray-600); display:flex; align-items:center; gap:4px; }
.dvu-v { font-size:14px; font-weight:700; color:var(--gray-700); }
.dvu-v i { font-size:11px; margin-right:3px; }
.dvu-col.us .dvu-v.hot { color:var(--green-600); }
.dvu-logo { height:16px; width:16px; object-fit:contain; flex:none; }
.dvu-sep { color:var(--orange-500); font-size:13px; }

/* ===== brands strip ===== */
.brands-section { padding:32px 0 8px; background:var(--white); }
.brands-title { text-align:center; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--gray-600); margin-bottom:18px; }
.brands-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.brand { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:104px; height:84px; padding:10px 16px; background:#fff; border:1px solid var(--gray-200); border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); transition:all .15s; }
.brand:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.brand img { max-height:40px; max-width:90px; object-fit:contain; }
.brand span { display:none; } /* real brand logos now replace the text names */

/* ===== Lending-partner bank pills ===== */
.bank-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.bank-pill { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--gray-200); border-radius:30px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--gray-800); box-shadow:0 2px 8px rgba(0,0,0,.05); transition:transform .15s, box-shadow .15s; }
.bank-pill::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--bk,#1565C0); flex:none; }
.bank-pill:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.bank-pill-more { color:var(--gray-500); font-weight:500; }
.bank-pill-more::before { display:none; }

/* ===== Unified brand filter chips ===== */
.brand-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:14px; }
.brand-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid var(--gray-200); border-radius:24px; padding:6px 13px; font-size:13px; font-weight:600; color:var(--gray-700); cursor:pointer; transition:all .15s; }
.brand-chip img { height:18px; width:auto; max-width:34px; object-fit:contain; }
.brand-chip:hover { border-color:var(--blue-700); }
.brand-chip.active { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }
.brand-chip.active img { filter:brightness(0) invert(1); }

/* ===== Beat Your Quote (competitive quote match) ===== */
.bq-section { padding:60px 0; background:linear-gradient(135deg,#0d2a4a,#1565C0); color:#fff; }
.bq-wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; }
.bq-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.15); padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:700; letter-spacing:.3px; }
.bq-left h2 { font-size:34px; font-weight:800; margin:16px 0 12px; line-height:1.15; color:#fff; }
.bq-left h2 span { color:var(--orange-400); }
.bq-left > p { font-size:15px; color:rgba(255,255,255,.88); margin-bottom:18px; line-height:1.6; }
.bq-points { list-style:none; display:flex; flex-direction:column; gap:10px; }
.bq-points li { display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color:rgba(255,255,255,.95); }
.bq-points i { color:var(--orange-400); margin-top:3px; }
.bq-card { background:#fff; color:var(--gray-800); border-radius:18px; padding:26px; box-shadow:var(--shadow-xl); }
.bq-card h3 { font-size:19px; font-weight:700; color:var(--gray-900); margin-bottom:14px; }
.bq-card form { display:flex; flex-direction:column; gap:11px; }
.bq-card input, .bq-card select { width:100%; padding:12px 13px; border:1.5px solid var(--gray-200); border-radius:10px; font-size:14px; color:var(--gray-900); background:#fff; }
.bq-row { display:flex; gap:11px; } .bq-row input { flex:1; min-width:0; }
.bq-file { display:flex; align-items:center; gap:8px; border:1.5px dashed #cbd5e1; border-radius:10px; padding:12px 13px; font-size:13.5px; color:var(--gray-600); cursor:pointer; }
.bq-file:hover { border-color:var(--blue-700); color:var(--blue-700); }
.bq-wa { text-align:center; font-size:13.5px; color:#1aa64b; font-weight:700; text-decoration:none; margin-top:2px; }
.bq-fine { font-size:11.5px; color:var(--gray-400); margin-top:12px; text-align:center; }
.bq-success { text-align:center; padding:24px 6px; }
.bq-success i { font-size:46px; color:var(--green-500); }
.bq-success h3 { font-size:20px; margin:10px 0 6px; color:var(--gray-900); }
.bq-success p { font-size:14px; color:var(--gray-600); line-height:1.6; }
@media (max-width:768px){ .bq-wrap { grid-template-columns:1fr; gap:24px; } .bq-left h2 { font-size:25px; } }

/* ===== compare tray ===== */
.compare-tray { position:fixed; left:50%; transform:translateX(-50%) translateY(160%); bottom:18px; z-index:9000; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--gray-200); box-shadow:var(--shadow-xl); border-radius:14px; padding:10px 14px; max-width:94vw; transition:transform .3s; }
.compare-tray.active { transform:translateX(-50%) translateY(0); }
.ct-label { font-weight:700; font-size:13px; color:var(--blue-900); white-space:nowrap; }
.ct-label i { color:var(--orange-500); }
.ct-items { display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; }
.ct-chip { display:flex; align-items:center; gap:6px; background:var(--gray-100,#f1f4f8); border-radius:18px; padding:5px 10px; font-size:12px; color:var(--gray-700); white-space:nowrap; }
.ct-chip i { cursor:pointer; color:var(--gray-600); font-size:11px; }
.ct-chip i:hover { color:#c0392b; }
.ct-actions { display:flex; gap:8px; white-space:nowrap; }

/* ===== compare modal ===== */
.compare-modal { display:none; position:fixed; inset:0; z-index:100001; background:rgba(10,15,28,.6); align-items:center; justify-content:center; padding:16px; }
.compare-modal.active { display:flex; }
.cm-panel { background:#fff; border-radius:16px; padding:24px; max-width:900px; width:100%; max-height:88vh; overflow:auto; position:relative; box-shadow:var(--shadow-xl); }
.cm-panel h3 { font-size:20px; color:var(--blue-900); margin-bottom:16px; }
.cm-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:26px; line-height:1; color:var(--gray-400); cursor:pointer; }
.cm-table { overflow-x:auto; }
table.cmp { width:100%; border-collapse:collapse; min-width:480px; }
table.cmp th, table.cmp td { padding:10px 12px; text-align:center; border-bottom:1px solid var(--gray-200); font-size:13px; }
table.cmp thead img { width:90px; height:56px; object-fit:cover; border-radius:8px; display:block; margin:0 auto 6px; }
table.cmp thead th div { font-weight:700; font-size:13px; color:var(--gray-900); }
table.cmp tbody th { text-align:left; font-size:12px; color:var(--gray-600); font-weight:600; white-space:nowrap; }

/* ===== EMI donut — principal vs interest (SVG, rounded segments) ===== */
.emi-ring { width:188px; height:188px; margin:6px auto 16px; position:relative; }
.emi-donut { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; filter:drop-shadow(0 6px 16px rgba(21,101,192,.18)); }
.emi-donut circle { fill:none; }
.ed-track { stroke:var(--gray-200); stroke-width:11; }
.ed-seg { stroke-width:13; stroke-linecap:round; transition:stroke-dasharray .55s ease, stroke-dashoffset .55s ease; }
.ed-principal { stroke:var(--blue-700); }
.ed-interest  { stroke:var(--copper,#BB7536); }
.emi-ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.err-pct { font-size:30px; font-weight:800; color:var(--copper,#BB7536); line-height:1; }
.err-label { font-size:11px; color:var(--gray-600); margin-top:3px; }
.emi-legend { display:flex; justify-content:center; gap:18px; margin-bottom:6px; }
.el-item { font-size:12.5px; color:var(--gray-700); display:flex; align-items:center; gap:6px; }
.el-dot { width:11px; height:11px; border-radius:3px; display:inline-block; }
.el-principal { background:var(--blue-700); }
.el-interest { background:var(--copper,#BB7536); }

@media (max-width:768px){
  .compare-tray { bottom:10px; gap:10px; padding:8px 10px; }
  .ct-label { display:none; }
  table.cmp thead img { width:64px; height:42px; }
}

/* ===== IPI™ discount-intelligence heatmap ===== */
.ipi-wrap { margin-top:10px; }
.ipi-sub { font-size:13px; color:var(--gray-600); margin:-4px 0 14px; max-width:680px; }
.ipi-scroll { overflow-x:auto; border:1px solid var(--gray-200); border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.ipi-table { width:100%; border-collapse:collapse; min-width:640px; }
.ipi-table thead th { background:#f5f8fc; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--gray-600); text-align:left; padding:11px 14px; }
.ipi-table td { padding:12px 14px; border-top:1px solid var(--gray-200); font-size:13.5px; color:var(--gray-700); vertical-align:middle; }
.ipi-rank { color:var(--gray-400); font-weight:700; }
.ipi-model b { display:block; font-size:14px; color:var(--gray-900); }
.ipi-model span { font-size:11.5px; color:var(--gray-600); }
.ipi-pill { display:inline-block; min-width:38px; text-align:center; font-weight:800; font-size:14px; padding:5px 10px; border-radius:20px; }
.ipi-disc { font-weight:700; color:var(--green-600); }
.ipi-confbar { display:inline-block; vertical-align:middle; width:64px; height:6px; background:var(--gray-200); border-radius:3px; overflow:hidden; margin-right:6px; }
.ipi-confbar > div { height:100%; background:var(--blue-700); border-radius:3px; }
.ipi-confnum { font-size:12px; color:var(--gray-600); }
.ipi-action { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:20px; white-space:nowrap; }
.ipi-action i { font-size:10px; }
.ipi-buy { background:rgba(46,125,50,.12); color:#2e7d32; }
.ipi-neg { background:rgba(230,126,0,.14); color:#e67e00; }
.ipi-wait { background:rgba(192,57,43,.12); color:#c0392b; }

/* ===== insurance-as-a-service widget ===== */
.ins-wrap { display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; margin-top:30px; }
.ins-controls { background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.ins-opts { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.ins-opt { font-size:14px; color:var(--gray-700); display:flex; align-items:center; gap:8px; cursor:pointer; }
.ins-opt input { accent-color:var(--blue-700); }
.ins-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:14px; }
.ins-card { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.04); display:flex; flex-direction:column; gap:6px; }
.ins-card.best { border-color:var(--green-600); box-shadow:0 6px 18px rgba(67,160,71,.12); }
.ins-name { font-weight:700; font-size:15px; color:var(--gray-900); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ins-best { background:var(--green-600); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.ins-prem { font-size:24px; font-weight:800; color:var(--blue-700); }
.ins-prem small { font-size:12px; font-weight:600; color:var(--gray-600); }
.ins-meta { font-size:12px; color:var(--gray-600); }
@media (max-width:768px){ .ins-wrap { grid-template-columns:1fr; } }