/* =====================================================
   THEME.CSS -- Premium Indigo/Blue Fintech UI
   Primary:   #6366f1 (indigo)
   Secondary: #0ea5e9 (sky blue)
   Accent:    #f59e0b (amber -- limited)
   Navbar:    #0f172a (deep navy)
   WhatsApp:  #25D366 preserved (NOT overridden)
===================================================== */

/* =====================================================
   1. CSS CUSTOM PROPERTY OVERRIDES
===================================================== */
:root {
  /* ---- Navbar ---- */
  --nav-bg-fallback:        #0f172a;
  --nav-bg-glass:           rgba(15, 23, 42, 0.97);
  --nav-border:             1px solid rgba(99, 102, 241, 0.20);
  --nav-shadow:             0 2px 20px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(99, 102, 241, 0.15);
  --brand-color:            #ffffff;
  --brand-highlight:        #6366f1;
  --link-color:             rgba(255, 255, 255, 0.82);
  --link-hover-color:       #cbd5f5;
  --link-active-color:      #6366f1;
  --dropdown-item-hover-bg: #f8fafc;
  --badge-bg:               #6366f1;
  --cta-bg:                 #6366f1;
  --cta-hover-bg:           #4f46e5;
  --cta-radius:             10px;

  /* ---- Hero ---- */
  --hero-highlight:         #6366f1;
  --tagline-color:          #6366f1;
  --tagline-bg:             rgba(99, 102, 241, 0.08);
  --input-focus-border:     #6366f1;

  /* ---- Vehicle page tokens ---- */
  --vi-green:               #6366f1;
  --vi-green-dark:          #4f46e5;
  --vi-green-light:         #f1f5f9;
  --vi-green-mid:           #a5b4fc;

  /* ---- Life page tokens ---- */
  --li-green:               #6366f1;
  --li-green-dark:          #4f46e5;
  --li-green-light:         #f1f5f9;
  --li-green-mid:           #a5b4fc;

  /* ---- Health page tokens ---- */
  --hi-green:               #6366f1;
  --hi-green-dark:          #4f46e5;
  --hi-green-mid:           #a5b4fc;
  --hi-green-pale:          #f1f5f9;
  --hi-green-ice:           #f8fafc;

  /* ---- Travel page tokens ---- */
  --ti-green:               #6366f1;
  --ti-green-dark:          #4f46e5;
  --ti-green-mid:           #a5b4fc;
  --ti-green-pale:          #f1f5f9;

  /* ---- AI Advisor tokens ---- */
  --ai-green:               #6366f1;
  --ai-green-pale:          #f1f5f9;
}

/* =====================================================
   2. NAVBAR -- Deep Navy + Indigo Glow Border
===================================================== */
.navbar {
  background-color: #0f172a !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(99, 102, 241, 0.15) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.navbar__logo,
.navbar__brand-name {
  color: #ffffff;
}
.navbar__logo-icon svg {
  filter: drop-shadow(0 2px 6px rgba(96, 165, 250, 0.35));
}
.navbar__logo:hover .navbar__logo-icon svg {
  filter: drop-shadow(0 3px 12px rgba(96, 165, 250, 0.55));
}
.navbar__link {
  color: rgba(255, 255, 255, 0.82) !important;
}
.navbar__link:hover {
  color: #cbd5f5 !important;
}
.navbar__link::after {
  background: #6366f1 !important;
}
.navbar__link--active {
  color: #ffffff !important;
}
.navbar__link--active::after {
  background: #6366f1 !important;
  width: 100% !important;
}
.navbar__dropdown-btn {
  color: rgba(255, 255, 255, 0.82) !important;
}
.navbar__dropdown-btn:hover {
  color: #cbd5f5 !important;
}
.navbar__dropdown {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}
.navbar__dropdown-link {
  color: #374151;
}
.navbar__dropdown-link:hover {
  background: #f8fafc;
  color: #0f172a;
}
.navbar__cta {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.30) !important;
  transition: all 0.22s ease !important;
}
.navbar__cta:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.45) !important;
  transform: translateY(-1px) !important;
}
.navbar__mobile-menu {
  background: #0f172a;
  border-top: 1px solid rgba(99, 102, 241, 0.15);
}
.navbar__mobile-link,
.navbar__mobile-dropdown-btn {
  color: rgba(255, 255, 255, 0.82);
}
.navbar__mobile-link:hover,
.navbar__mobile-dropdown-btn:hover {
  color: #cbd5f5;
  background: rgba(99, 102, 241, 0.10);
}
.navbar__hamburger span {
  background-color: #ffffff;
}

/* =====================================================
   3. HERO SECTION
===================================================== */
.hero__btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-color: transparent;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.30);
}
.hero__btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 8px 26px rgba(99, 102, 241, 0.42);
  transform: scale(1.05);
}
.hero__form-btn {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  border-color: transparent;
}
.hero__form-btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}
.hero__form-input:focus,
.hero__form-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* =====================================================
   4. SECTION LABELS
===================================================== */
.section__label {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =====================================================
   5. INSURANCE CARDS
===================================================== */
.insurance__card::before {
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
}
.insurance__card:hover {
  border-color: rgba(99, 102, 241, 0.20);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(99, 102, 241, 0.12);
}
.insurance__card:hover .insurance__card-icon {
  background: #ede9fe;
  border-color: rgba(99, 102, 241, 0.12);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15);
}
.insurance__card-link {
  color: #6366f1;
}
.insurance__card:hover .insurance__card-link {
  color: #4f46e5;
}

/* =====================================================
   6. PARTNERS & WHY CARDS
===================================================== */
.companies__badge:hover {
  border-color: #6366f1;
  color: #6366f1;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.14);
}
.why__card:hover {
  border-color: rgba(99, 102, 241, 0.14);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 36px rgba(99, 102, 241, 0.10);
}
.why__card:hover .why__card-icon {
  background: #ede9fe;
  border-color: rgba(99, 102, 241, 0.12);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.14);
}

/* =====================================================
   7. CALCULATOR -- Fintech Premium Redesign
===================================================== */

/* Tab buttons */
.calculator__type-tab:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f8fafc;
  transform: scale(1.04);
}
.calculator__type-tab--active {
  border-color: #6366f1;
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.28);
}
.calculator__type-tab--active:hover {
  opacity: 0.92;
  transform: none;
}

/* Slider bubble */
.calculator__slider-bubble {
  background: #f8fafc;
  border-color: #c7d2fe;
  color: #4f46e5;
  font-weight: 600;
}

/* Slider track -- indigo gradient */
.calculator__range {
  background: linear-gradient(
    to right,
    #6366f1 0%,
    #6366f1 var(--progress, 20%),
    #e2e8f0 var(--progress, 20%),
    #e2e8f0 100%
  );
}

/* Slider thumb -- white circle with shadow */
.calculator__range::-webkit-slider-thumb {
  background: #ffffff;
  border: 2px solid #6366f1;
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.28),
    0 0 0 3px rgba(99, 102, 241, 0.10);
}
.calculator__range::-webkit-slider-thumb:hover {
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.38),
    0 0 0 5px rgba(99, 102, 241, 0.14);
}
.calculator__range::-moz-range-thumb {
  background: #ffffff !important;
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.calculator__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.18);
}

/* Result card -- glass fintech white */
.calculator__result-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 40px rgba(99, 102, 241, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* Price -- gradient text big & bold */
.calculator__result-amount,
.calculator__result-price,
.calculator__premium,
.calculator__result-num {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Trust badges via CSS */
.calculator__result-card::after {
  content: "\2714\00A0 Trusted by 10,000+ customers\A\2714\00A0 Instant policy approval";
  white-space: pre;
  display: block;
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 14px;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* Result CTA -- gradient glow button */
.calculator__result-cta {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  color: #ffffff;
  border-radius: 10px;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.28);
  transition: all 0.25s ease;
}
.calculator__result-cta:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 26px rgba(99, 102, 241, 0.45);
  transform: scale(1.05);
}

/* =====================================================
   8. CLAIM CARDS
===================================================== */
.claim__card::before {
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
}
.claim__card:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 36px rgba(99, 102, 241, 0.12);
}
.claim__card-number {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  color: #ffffff;
}
.claim__btn:not(.claim__btn--outline) {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  border-color: transparent;
  color: #ffffff;
}
.claim__btn:not(.claim__btn--outline):hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}
.claim__btn--outline {
  color: #6366f1;
  border-color: #6366f1;
  border-radius: 10px;
}
.claim__btn--outline:hover {
  background: rgba(99, 102, 241, 0.07);
  color: #4f46e5;
}

/* =====================================================
   9. CTA SECTION
===================================================== */
.cta__label {
  color: #6366f1;
}
.cta__btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
  transform: scale(1.05);
}
.cta__btn--outline:hover {
  border-color: #6366f1;
  color: #6366f1;
}

/* =====================================================
   10. MODAL
===================================================== */
.modal__close:hover {
  background: #6366f1;
  color: #ffffff;
}
.modal__input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.modal__submit {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.modal__submit:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}
.modal__link {
  color: #6366f1;
}

/* =====================================================
   11. FAQ HOVER
===================================================== */
.faq__item:hover {
  border-color: rgba(99, 102, 241, 0.22);
}

/* =====================================================
   12. FOOTER -- Readable + Interactive
===================================================== */
.footer {
  color: #475569;
}
.footer p,
.footer span,
.footer address {
  color: #475569;
  line-height: 1.75;
}
.footer__link {
  color: #0f172a;
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
  transition: width 0.25s ease;
}
.footer__link:hover {
  color: #6366f1;
}
.footer__link:hover::after {
  width: 100%;
}
.footer__social:hover {
  background: #ede9fe;
  border-color: #c7d2fe;
  color: #6366f1;
  transform: scale(1.08);
}

/* =====================================================
   13. SCROLL-TO-TOP -- Indigo gradient circle
===================================================== */
.scroll-to-top {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.32);
}
.scroll-to-top:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.50);
  transform: scale(1.08);
}

/* =====================================================
   14. VEHICLE PAGE -- vi-*
===================================================== */
.vi-hero::before {
  background: radial-gradient(
    ellipse 80% 60% at 70% 50%,
    rgba(99, 102, 241, 0.05) 0%,
    transparent 70%
  );
}
.vi-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.26);
  border-radius: 10px;
  color: #ffffff;
}
.vi-btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
  transform: scale(1.05);
}
.vi-btn--white {
  color: #6366f1;
}
.vi-btn--white:hover {
  background: #f8fafc;
}
.vi-type-card__cta {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.vi-type-card__cta:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}
.vi-type-card--featured {
  border-color: rgba(99, 102, 241, 0.24);
}

/* =====================================================
   15. LIFE PAGE -- li-*
===================================================== */
.li-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.26);
  border-radius: 10px;
  color: #ffffff;
}
.li-btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
  transform: scale(1.05);
}
.li-plan-card__cta {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.li-plan-card__cta:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}

/* =====================================================
   16. HEALTH PAGE -- hi-*
===================================================== */
.hi-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.26);
  border-radius: 10px;
  color: #ffffff;
}
.hi-btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
  transform: scale(1.05);
}
.hi-plan-card__cta {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.hi-plan-card__cta:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}

/* =====================================================
   17. TRAVEL PAGE -- ti-*
===================================================== */
.ti-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.26);
  border-radius: 10px;
  color: #ffffff;
}
.ti-btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
  transform: scale(1.05);
}
.ti-plan-card__cta {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.ti-plan-card__cta:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}

/* =====================================================
   18. CLAIM PAGE -- cl-*
===================================================== */
.cl-btn {
  border-radius: 10px;
}
.cl-hero,
.cl-accordion__panel-header--active,
.cl-tab--active,
.cl-progress__step--active .cl-progress__dot {
  background: #1f2937;
}
.cl-section-label,
.cl-hero__tag {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}
.cl-accordion__icon {
  color: #6366f1;
}

/* =====================================================
   19. AI ADVISOR PAGE -- ai-*
===================================================== */
.ai-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.26);
  border-radius: 10px;
  color: #ffffff;
}
.ai-btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
  transform: scale(1.05);
}

/* =====================================================
   20. CONTACT PAGE -- co-*
===================================================== */
.co-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.co-btn--primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}
.co-btn--wa {
  border-radius: 10px;
  /* WhatsApp green preserved -- background not overridden */
}
.co-form__submit {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  border-radius: 10px;
  color: #ffffff;
}
.co-form__submit:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.38);
  transform: scale(1.05);
}
.co-form__input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

/* =====================================================
   21. GLOBAL FORM INPUTS
===================================================== */
input:focus,
select:focus,
textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

/* =====================================================
   22. SECTION BACKGROUNDS -- alternating
===================================================== */
.insurance  { background: #f8fafc; }
.companies  { background: #ffffff; }
.why        { background: #f8fafc; }
.calculator { background: #ffffff; }
.whatsapp   { background: #f8fafc; }

/* =====================================================
   23. WHATSAPP SECTION BUBBLES
   .whatsapp__btn NOT overridden -- keeps #25D366
===================================================== */
.whatsapp__bubble--in {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.whatsapp__bubble--out {
  background: #1f2937;
  color: #ffffff;
}

/* =====================================================
   24. ICON BACKGROUNDS -- soft slate
===================================================== */
.insurance__card-icon,
.why__card-icon,
.vi-type-icon,
.li-icon,
.hi-icon,
.ti-icon,
.ai-know-card__icon,
.co-card-icon,
.cl-type-card__icon,
.cl-support-card__icon {
  background: #f1f5f9;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* =====================================================
   25. CARD HOVER -- lift + indigo tint shadow
===================================================== */
.why__card:hover,
.insurance__card:hover,
.claim__card:hover,
.vi-type-card:hover,
.vi-addon:hover,
.vi-tax-card:hover,
.li-plan-card:hover,
.li-tax-card:hover,
.hi-plan-card:hover,
.hi-tax-card:hover,
.ti-plan-card:hover,
.ti-why-card:hover,
.cl-type-card:hover,
.cl-support-card:hover,
.ai-suggest-card:hover,
.ai-know-card:hover,
.co-card:hover,
.co-support-card:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 36px rgba(99, 102, 241, 0.12);
  transform: translateY(-4px);
}

/* =====================================================
   26. BUTTON HOVER -- unified indigo glow
===================================================== */
.navbar__cta:hover,
.hero__btn--primary:hover,
.vi-btn--primary:hover,
.vi-type-card__cta:hover,
.li-btn--primary:hover,
.li-plan-card__cta:hover,
.hi-btn--primary:hover,
.hi-plan-card__cta:hover,
.ti-btn--primary:hover,
.ti-plan-card__cta:hover,
.ai-btn--primary:hover,
.co-btn--primary:hover,
.co-form__submit:hover,
.cta__btn--primary:hover,
.claim__btn:not(.claim__btn--outline):hover,
.calculator__result-cta:hover,
.modal__submit:hover,
.scroll-to-top:hover {
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.40);
}

/* =====================================================
   27. TYPOGRAPHY ENHANCEMENTS
===================================================== */
h1, h2, h3, h4, h5, h6 {
  color: #0f172a;
  letter-spacing: -0.025em;
}

/* Gradient text for heading highlights */
.hero__title-highlight,
.section__highlight,
.cta__title-highlight {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =====================================================
   28. PREMIUM POLISH ADDITIONS
===================================================== */

/* -- Hero form submit: replace green with indigo gradient -- */
.hero__form-submit {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28) !important;
  letter-spacing: 0.04em !important;
  transition: all 0.25s ease !important;
}
.hero__form-submit:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%) !important;
  box-shadow: 0 8px 26px rgba(99, 102, 241, 0.44) !important;
  transform: scale(1.04) !important;
}
.hero__form-submit:active {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.20) !important;
}

/* -- Enquiry form disclaimer + links -- */
.hero__form-disclaimer {
  color: #64748b;
  font-size: 0.71rem;
  margin-top: 10px;
  line-height: 1.65;
  text-align: center;
}
.hero__form-link {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
}
.hero__form-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
  transition: width 0.22s ease;
}
.hero__form-link:hover {
  color: #4f46e5;
}
.hero__form-link:hover::after {
  width: 100%;
}

/* Trust line in form card */
.hero__form-card::after {
  content: "\2714 Secure & Trusted Insurance Platform";
  display: block;
  text-align: center;
  font-size: 0.70rem;
  color: #16a34a;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* -- Logo: gradient text for "SB Tech" -- */
.navbar__logo-highlight {
  background: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.navbar__logo-text {
  background: linear-gradient(135deg, #ffffff 30%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
}

.navbar__logo-highlight {
  background: linear-gradient(135deg, #60a5fa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Logo SVG shield: blue gradient -- */
.navbar__logo-icon svg path:first-child {
  fill: url(#logo-grad);
}
.footer__logo-icon svg path:first-child {
  fill: #6366f1;
}

/* -- Social media icons: real brand colors -- */
.footer__social[aria-label="Instagram"] {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: transparent;
  color: #ffffff;
}
.footer__social[aria-label="Facebook"] {
  background: #1877F2;
  border-color: #1877F2;
  color: #ffffff;
}
.footer__social[aria-label="YouTube"] {
  background: #FF0000;
  border-color: #FF0000;
  color: #ffffff;
}
.footer__social[aria-label="LinkedIn"] {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #ffffff;
}
.footer__social[aria-label="WhatsApp"] {
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
}
.footer__social[aria-label="Twitter"],
.footer__social[aria-label="X"] {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* Brand social hover: scale + glow only, preserve brand bg */
.footer__social[aria-label="Instagram"]:hover,
.footer__social[aria-label="Facebook"]:hover,
.footer__social[aria-label="YouTube"]:hover,
.footer__social[aria-label="LinkedIn"]:hover,
.footer__social[aria-label="WhatsApp"]:hover,
.footer__social[aria-label="Twitter"]:hover,
.footer__social[aria-label="X"]:hover {
  background: inherit;
  border-color: inherit;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

/* Default (non-branded) social hover: indigo tint */
.footer__social:hover {
  background: #ede9fe;
  border-color: #c7d2fe;
  color: #6366f1;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
}

/* -- Footer logo text: indigo for "SB Tech" strong -- */
.footer__logo strong {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Footer bottom links (Privacy + Terms) -- */
.footer__bottom-link {
  color: #475569;
  text-decoration: none;
  font-size: 0.82rem;
  position: relative;
  transition: color 0.2s ease;
}
.footer__bottom-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
  transition: width 0.22s ease;
}
.footer__bottom-link:hover {
  color: #6366f1;
}
.footer__bottom-link:hover::after {
  width: 100%;
}

.policy-link {
  color: var(--color-primary, #3730a3);
  font-weight: 600;
}

/* -- Global micro transitions on cards -- */
.why__card,
.insurance__card,
.vi-type-card,
.li-plan-card,
.hi-plan-card,
.ti-plan-card,
.cl-type-card,
.co-card,
.ai-know-card,
.ai-suggest-card,
.co-support-card,
.companies__badge {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.22s ease;
}

/* -- Remove any lingering green from footer hover -- */
.footer__social:not([aria-label]):hover {
  background: #ede9fe;
  border-color: #c7d2fe;
  color: #6366f1;
}

/* =====================================================
   29. CALCULATOR SWITCH FADE ANIMATION
===================================================== */
.calculator__sliders {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.calculator__sliders.calc-switching {
  opacity: 0;
  transform: translateY(4px);
}