/* ==========================================================================
   INSURE KARO - Ultra-Premium InsuTech Design System
   Unique, Modern, High-End Light Theme with Glassmorphism & Micro-Interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & Color System
   -------------------------------------------------------------------------- */
:root {
  /* Modern Typography Fonts */
  --font-head: "Plus Jakarta Sans", sans-serif;
  --font-body: "Outfit", sans-serif;

  /* Primary Brand Palette — only blue / green / white */
  --brand-primary: #13264b;
  --brand-primary-hover: #13264b;
  --brand-primary-light: #ffffff;
  --brand-primary-subtle: #ffffff;
  --brand-secondary: #0d6936;
  --brand-secondary-hover: #0d6936;
  --brand-secondary-light: #ffffff;

  --brand-navy-deep: #13264b;
  --brand-navy: #13264b;
  --brand-navy-light: #13264b;

  --brand-text-dark: #13264b;
  --brand-text-body: #13264b;
  --brand-text-muted: #13264b;
  --brand-text-subtle: #13264b;

  /* Accents map to green/blue only */
  --accent-orange: #0d6936;
  --accent-orange-hover: #0d6936;
  --accent-orange-light: #ffffff;
  --accent-green: #0d6936;
  --accent-green-light: #ffffff;
  --accent-purple: #13264b;
  --accent-purple-light: #ffffff;
  --accent-cyan: #13264b;
  --accent-cyan-light: #ffffff;
  --accent-amber: #0d6936;
  --accent-amber-light: #ffffff;

  /* Backgrounds & Glass */
  --bg-white: #ffffff;
  --bg-page: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-section-light: #ffffff;
  --bg-section-soft: #ffffff;
  --bg-section-dark: #13264b;
  --bg-section-darker: #13264b;
  --border-card: #13264b;
  --border-subtle: #13264b;
  --border-focus: #13264b;

  /* Shadows & Glows */
  --shadow-card: 0 4px 14px rgba(15, 23, 42, 0.05);
  --shadow-card-hover:
    0 14px 30px -4px rgba(19, 38, 75, 0.14),
    0 4px 8px -2px rgba(19, 38, 75, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 40px -8px rgba(10, 25, 47, 0.16);
  --shadow-glow-blue: 0 4px 18px rgba(19, 38, 75, 0.35);
  --shadow-glow-orange: 0 4px 18px rgba(13, 105, 54, 0.35);

  /* Radii & Transitions */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Global Resets & Typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--brand-text-body);
  background-color: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.pb-logo-name,
.hero-main-title,
.pb-section-main-title,
.pillar-title,
.bento-metric,
.pb-feat-title {
  font-family: var(--font-head);
  color: var(--brand-navy);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.pb-section-main-title {
  font-size: clamp(2.25rem, 4vw, 3.05rem);
}

.pb-section-main-title span:not(.text-gradient) {
  color: var(--brand-primary);
}

.pb-section-main-title .text-gradient {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #13264b 0%, #0d6936 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline;
}

.section-skin-dark .pb-section-main-title .text-gradient,
.section-skin-dark .text-gradient {
  background: linear-gradient(135deg, #8fa4c4 0%, #1a9a52 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--brand-primary-hover);
}

img {
  max-width: 100%;
  height: auto;
}

.text-gradient {
  background: linear-gradient(135deg, #13264b 0%, #0d6936 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-gradient-orange {
  background: linear-gradient(135deg, #0d6936 0%, #128a48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   3. Sticky Topbar + Dynamic Island Navbar
   -------------------------------------------------------------------------- */
:root {
  --pb-topbar-h: 46px;
}

.top-accent-line {
  display: none;
}

.pb-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  height: var(--pb-topbar-h);
  background: #13264b;
  color: #ffffff;
}

.pb-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  min-height: var(--pb-topbar-h);
  padding: 0 8px;
}

.pb-topbar-left,
.pb-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pb-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.pb-topbar-item i {
  font-size: 0.7rem;
  opacity: 0.95;
}

.pb-topbar-link {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pb-topbar-link:hover {
  color: #ffffff;
  opacity: 0.85;
}

.pb-topbar-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.pb-header {
  position: sticky;
  top: var(--pb-topbar-h);
  z-index: 1030;
  margin: 0;
  padding: 10px 14px 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
  will-change: transform;
}

.pb-header.is-hidden {
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
}

.pb-island {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid rgba(19, 38, 75, 0.1);
  border-radius: 999px;
  box-shadow:
    0 4px 12px rgba(19, 38, 75, 0.08),
    0 12px 32px rgba(19, 38, 75, 0.14),
    0 24px 48px rgba(19, 38, 75, 0.1);
}

.pb-navbar {
  padding: 6px 4px;
  min-height: 58px;
  width: 100%;
  flex-wrap: nowrap;
}

/* Brand */
.pb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 8px;
}

.pb-logo-img {
  display: block;
  height: 62px;
  width: auto;
  max-width: min(340px, 58vw);
  object-fit: contain;
}

.pb-logo-mark {
  width: 36px;
  height: 36px;
  background: var(--brand-primary);
  color: #ffffff;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.pb-logo-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pb-logo-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.pb-logo-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--brand-text-subtle);
  line-height: 1.2;
  white-space: nowrap;
}

/* Nav menu */
.pb-nav-collapse {
  gap: 10px;
}

.pb-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}

.pb-nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem !important;
  font-weight: 600;
  color: #13264b !important;
  padding: 8px 12px !important;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap !important;
  position: relative;
}

.pb-nav-link i {
  font-size: 0.78rem;
  color: #13264b;
  opacity: 0.75;
}

.pb-nav-link:hover {
  color: #0d6936 !important;
  background-color: rgba(13, 105, 54, 0.06);
}

.pb-nav-link:hover i {
  color: #0d6936;
  opacity: 1;
}

.pb-nav-link.active {
  color: #0d6936 !important;
  font-weight: 700;
  background-color: transparent;
}

.pb-nav-link.active i {
  color: #0d6936;
  opacity: 1;
}

.pb-nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: #0d6936;
}

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

/* Compact mode: auto-applies only when the nav has 8+ items (e.g. About page
   nav with About + Contact added), so Home/Contact pages with 7 items are untouched. */
.pb-nav-list:has(> li:nth-child(8)) {
  gap: 0;
}

.pb-nav-list:has(> li:nth-child(8)) .pb-nav-link {
  padding: 7px 9px !important;
  font-size: 0.8rem !important;
  gap: 4px;
}

.pb-nav-list:has(> li:nth-child(8)) .pb-nav-link i {
  display: none;
}

.pb-nav-search {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f4f8;
  color: #13264b;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.pb-nav-search:hover {
  background: #e8edf4;
  color: #0d6936;
}

.pb-btn-cta {
  background: #0d6936;
  color: #ffffff !important;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  box-shadow: none;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap !important;
  text-decoration: none;
}

.pb-btn-cta-agent {
  font-size: 0.75rem;
  padding: 10px 14px;
}

.pb-btn-cta:hover {
  background: #13264b;
  color: #ffffff !important;
  box-shadow: none;
  transform: none;
}

.pb-btn-cta i {
  font-size: 0.75rem;
}

/* Mobile toggler */
.pb-nav-toggler {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(19, 38, 75, 0.15);
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

.pb-nav-toggler span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--brand-navy);
  border-radius: 1px;
  transition: var(--transition);
}

.pb-nav-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(19, 38, 75, 0.15);
}

.pb-nav-toggler[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.pb-nav-toggler[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.pb-nav-toggler[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 992px) {
  .pb-nav-collapse {
    display: flex !important;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }

  .pb-nav-list {
    flex: 1;
    justify-content: center;
    margin: 0;
  }
}

@media (max-width: 1199.98px) {
  .pb-nav-link span {
    font-size: 0.8rem;
  }

  .pb-nav-link {
    padding: 8px 9px !important;
  }
}

@media (max-width: 991.98px) {
  .pb-topbar-left .pb-topbar-item:nth-child(n + 3),
  .pb-topbar-left .pb-topbar-sep:nth-child(n + 2) {
    display: none;
  }

  .pb-island {
    border-radius: 22px;
    padding: 0 10px;
  }

  .pb-header {
    padding: 8px 10px 0;
  }

  .pb-logo-img {
    height: 44px;
  }
}

@media (max-width: 575.98px) {
  .pb-topbar-left {
    display: none;
  }

  .pb-topbar-right {
    width: 100%;
    justify-content: center;
  }

  .pb-topbar-item {
    font-size: 0.7rem;
  }
}

.pb-helpline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-primary-subtle);
  border: 1px solid #d7e7fa;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-navy);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap !important;
  flex-shrink: 0;
}

.pb-helpline-pill:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0d6936;
  box-shadow: 0 0 0 rgba(13, 105, 54, 0.4);
  animation: pulseDot 2s infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 105, 54, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(13, 105, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 105, 54, 0);
  }
}

.pb-btn-signin {
  border: 1.5px solid var(--border-card);
  color: var(--brand-navy);
  background: #ffffff;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  white-space: nowrap !important;
  flex-shrink: 0;
}

.pb-btn-signin:hover {
  background: var(--bg-page);
  border-color: var(--brand-text-muted);
  color: var(--brand-navy);
}

/* --------------------------------------------------------------------------
   4. Hero Section (Ultra-Modern Asymmetric Split Layout)
   -------------------------------------------------------------------------- */
.hero-premium-section {
  position: relative;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(19, 38, 75, 0.04) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(13, 105, 54, 0.04) 0%,
      transparent 50%
    ),
    #ffffff;
  padding: 45px 0 35px;
  overflow: hidden;
}

/* Live Badge */
.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d7e5f9;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--brand-navy);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;

}

.hero-live-badge i {
  color: #ffb800;
}

/* Main Hero Typography */
.hero-main-title {
  font-size: 2.85rem;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.035em;
}

.hero-main-subtitle {
  font-size: 1.05rem;
  color: var(--brand-text-muted);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 580px;
}

/* Quick Quote Finder Widget */
.hero-quote-widget {
  background: #ffffff;
  border: 1.5px solid #d7e5f9;
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 24px;
}

.hero-widget-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.widget-tab-btn {
  border: 1px solid var(--border-card);
  background: #ffffff;
  color: var(--brand-text-body);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.widget-tab-btn:hover,
.widget-tab-btn.active {
  background: var(--brand-primary-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.hero-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-input {
  flex: 1;
  min-width: 170px;
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--brand-navy);
  outline: none;
  transition: var(--transition);
}

.hero-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(19, 38, 75, 0.12);
}

.hero-btn-submit {
  background: linear-gradient(135deg, #0d6936 0%, #128a48 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-glow-orange);
  transition: var(--transition);
  white-space: nowrap;
}

.hero-btn-submit:hover {
  background: linear-gradient(135deg, #0a542b 0%, #0a542b 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 105, 54, 0.4);
}

.hero-trust-proof-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -8px;
  background: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
}

.avatar-item:first-child {
  margin-left: 0;
}

.proof-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-navy);
  line-height: 1.2;
}

.proof-text span {
  display: block;
  font-size: 0.74rem;
  color: var(--brand-text-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Right Hero Showcase Composite Card
   -------------------------------------------------------------------------- */
.hero-showcase-wrapper {
  position: relative;
  padding: 20px;
}

.hero-main-card {
  background: #ffffff;
  border: 1.5px solid #d7e5f9;
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.hero-ambassador-cover {
  height: 260px;
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  margin-bottom: 18px;
}

/* Floating Glassmorphic Badges */
.floating-metric-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(215, 229, 249, 0.8);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  animation: floatSlow 4s ease-in-out infinite alternate;
}

.metric-top-left {
  top: 5px;
  left: -10px;
}

.metric-bottom-right {
  bottom: -40px;
  right: 5px;
  animation-delay: 2s;
}

@keyframes floatSlow {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.metric-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.metric-text h6 {
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 1px;
  color: var(--brand-navy);
}

.metric-text span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-green);
  display: block;
}

/* --------------------------------------------------------------------------
   5. Re-architected 6 High-Impact Product Category Pillars
   -------------------------------------------------------------------------- */
.category-pillars-section {
  padding: 35px 0 45px;
  background: #ffffff;
}

.section-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}

.pillar-card {
  background: #ffffff;
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Decorative background blob per card – subtle, not AI-looking */
.pillar-card::before {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  opacity: 0.07;
  transition: var(--transition);
  pointer-events: none;
}

.pillar-card::after {
  content: "";
  position: absolute;
  top: -20px;
  right: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 0.05;
  pointer-events: none;
}

/* Per-card themed background blobs */
.pillar-card.card-term::before {
  background: #13264b;
}
.pillar-card.card-term::after {
  background: #13264b;
}
.pillar-card.card-health::before {
  background: #0d6936;
}
.pillar-card.card-health::after {
  background: #0d6936;
}
.pillar-card.card-car::before {
  background: #0d6936;
}
.pillar-card.card-car::after {
  background: #0d6936;
}
.pillar-card.card-bike::before {
  background: #13264b;
}
.pillar-card.card-bike::after {
  background: #13264b;
}
.pillar-card.card-savings::before {
  background: #0d6936;
}
.pillar-card.card-savings::after {
  background: #0d6936;
}
.pillar-card.card-family::before {
  background: #0d6936;
}
.pillar-card.card-family::after {
  background: #0d6936;
}

.pillar-card:hover::before {
  opacity: 0.13;
  transform: scale(1.2);
}
.pillar-card:hover::after {
  opacity: 0.09;
}

.pillar-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

/* Term: Subtle blue tint on hover */
.pillar-card.card-term:hover {
  border-color: #13264b;
}
.pillar-card.card-health:hover {
  border-color: #0d6936;
}
.pillar-card.card-car:hover {
  border-color: #0d6936;
}
.pillar-card.card-bike:hover {
  border-color: #13264b;
}
.pillar-card.card-savings:hover {
  border-color: #0d6936;
}
.pillar-card.card-family:hover {
  border-color: #0d6936;
}

.pillar-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.pillar-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  transition: var(--transition);
}

.pillar-card:hover .pillar-icon-wrap {
  transform: scale(1.1);
}

.icon-blue-bg {
  background: #e8ecf3;
  color: #13264b;
}
.icon-green-bg {
  background: #e7f4ee;
  color: #0d6936;
}
.icon-orange-bg {
  background: #e7f4ee;
  color: #0d6936;
}
.icon-purple-bg {
  background: #e8ecf3;
  color: #13264b;
}
.icon-amber-bg {
  background: #e7f4ee;
  color: #0d6936;
}
.icon-teal-bg {
  background: #e7f4ee;
  color: #0d6936;
}

.pillar-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-blue {
  background: #e8ecf3;
  color: #13264b;
  border: 1px solid #bfdbfe;
}
.badge-green {
  background: #e7f4ee;
  color: #0d6936;
  border: 1px solid #a7f3d0;
}
.badge-orange {
  background: #e7f4ee;
  color: #0d6936;
  border: 1px solid #fecdd3;
}
.badge-purple {
  background: #e8ecf3;
  color: #13264b;
  border: 1px solid #ddd6fe;
}
.badge-amber {
  background: #e7f4ee;
  color: #0d6936;
  border: 1px solid #fde68a;
}
.badge-teal {
  background: #e7f4ee;
  color: #0d6936;
  border: 1px solid #99f6e4;
}

.pillar-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 4px;
}

.pillar-coverage {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 6px;
}

.pillar-perk {
  font-size: 0.82rem;
  color: var(--brand-text-muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

.pillar-footer-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.pillar-card:hover .pillar-footer-link {
  color: var(--brand-primary-hover);
  transform: translateX(4px);
}

/* Sub-categories Quick Strip */
.more-categories-strip {
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.more-cat-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.more-cat-pill {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-text-body);
  text-decoration: none;
  transition: var(--transition);
}

.more-cat-pill:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-primary-subtle);
}

/* --------------------------------------------------------------------------
   6. 3 Pastel Promo Cards
   -------------------------------------------------------------------------- */
.pb-featured-cards-row {
  margin-bottom: 45px;
}

.pb-pastel-card {
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  text-decoration: none;
}

.pb-pastel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12);
}

.pb-pastel-cyan {
  background: linear-gradient(135deg, #e8ecf3 0%, #d4dbe8 100%);
  border: 1.5px solid #bae6fd;
}
.pb-pastel-cyan .pb-pastel-badge {
  background: #1c3a6e;
  color: #ffffff;
}
.pb-pastel-cyan .pb-pastel-title {
  color: #0369a1;
}
.pb-pastel-cyan .pb-pastel-link {
  color: #1c3a6e;
}

.pb-pastel-purple {
  background: linear-gradient(135deg, #e8ecf3 0%, #d4dbe8 100%);
  border: 1.5px solid #e9d5ff;
}
.pb-pastel-purple .pb-pastel-badge {
  background: #13264b;
  color: #ffffff;
}
.pb-pastel-purple .pb-pastel-title {
  color: #581c87;
}
.pb-pastel-purple .pb-pastel-link {
  color: #13264b;
}

.pb-pastel-green {
  background: linear-gradient(135deg, #e7f4ee 0%, #c8e6d5 100%);
  border: 1.5px solid #bbf7d0;
}
.pb-pastel-green .pb-pastel-badge {
  background: #0d6936;
  color: #ffffff;
}
.pb-pastel-green .pb-pastel-title {
  color: #14532d;
}
.pb-pastel-green .pb-pastel-link {
  color: #0d6936;
}

.pb-pastel-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.pb-pastel-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 12px;
}

.pb-pastel-link {
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.pb-pastel-card:hover .pb-pastel-link {
  transform: translateX(4px);
}

.pb-pastel-3d-img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  margin-left: 12px;
  transition: var(--transition);
}

.pb-pastel-card:hover .pb-pastel-3d-img {
  transform: scale(1.08) rotate(3deg);
}

/* --------------------------------------------------------------------------
   7. Why Choose Insure Karo (Elevated Bento Trust Grid)
   -------------------------------------------------------------------------- */
.pb-why-choose-section {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(19, 38, 75, 0.03) 0%,
      transparent 60%
    ),
    #ffffff;
  padding: 70px 0;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}

.why-trust-points {
  list-style: none;
  margin: 24px 0 28px;
  padding: 0;
}

.why-trust-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-navy);
  margin-bottom: 14px;
}

.why-trust-points li i {
  color: #0d6936;
  font-size: 1.1rem;
  background: #e7f4ee;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Bento Trust Cards Grid */
.bento-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 576px) {
  .bento-trust-grid {
    grid-template-columns: 1fr;
  }
}

.bento-trust-card {
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-trust-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

/* 4 Bento Color Variations */
.bento-card-amber {
  background: linear-gradient(145deg, #fffdf7 0%, #e7f4ee 100%);
  border: 1.5px solid #fde68a;
}
.bento-card-amber .bento-icon-box {
  background: #c8e6d5;
  color: #0d6936;
}
.bento-card-amber .bento-metric {
  color: #b45309;
}
.bento-card-amber .bento-tag {
  background: #c8e6d5;
  color: #92400e;
  border: 1px solid #fde68a;
}

.bento-card-blue {
  background: linear-gradient(145deg, #f3f5f8 0%, #e8ecf3 100%);
  border: 1.5px solid #bfdbfe;
}
.bento-card-blue .bento-icon-box {
  background: #d4dbe8;
  color: #13264b;
}
.bento-card-blue .bento-metric {
  color: #0e1c38;
}
.bento-card-blue .bento-tag {
  background: #d4dbe8;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.bento-card-green {
  background: linear-gradient(145deg, #f9fdfb 0%, #e7f4ee 100%);
  border: 1.5px solid #a7f3d0;
}
.bento-card-green .bento-icon-box {
  background: #c8e6d5;
  color: #0d6936;
}
.bento-card-green .bento-metric {
  color: #047857;
}
.bento-card-green .bento-tag {
  background: #c8e6d5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.bento-card-purple {
  background: linear-gradient(145deg, #fcfaff 0%, #e8ecf3 100%);
  border: 1.5px solid #ddd6fe;
}
.bento-card-purple .bento-icon-box {
  background: #d4dbe8;
  color: #13264b;
}
.bento-card-purple .bento-metric {
  color: #6d28d9;
}
.bento-card-purple .bento-tag {
  background: #d4dbe8;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
}

.bento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.bento-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: var(--transition);
}

.bento-trust-card:hover .bento-icon-box {
  transform: scale(1.1);
}

.bento-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bento-metric {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.bento-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-navy);
  margin-bottom: 6px;
}

.bento-desc {
  font-size: 0.82rem;
  color: var(--brand-text-muted);
  line-height: 1.45;
  margin-bottom: 0;
}

.pb-claim-advisor-section {
  padding: 55px 0;
  background: #ffffff;
}
.pb-claim-advisor-box {
  background: linear-gradient(135deg, #e8ecf3 0%, #f0f7ff 100%);
  border: 1.5px solid #ddd6fe;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(19, 38, 75, 0.06);
}
.pb-badge-pill {
  background: #13264b;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}
.pb-advisor-title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 18px;
  line-height: 1.3;
}
.pb-checklist {
  list-style: none;
  margin-bottom: 24px;
}
.pb-checklist li {
  font-size: 0.92rem;
  color: var(--brand-text-dark);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pb-checklist li i {
  color: var(--accent-green);
  font-size: 1rem;
}

.pb-chat-mockup {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 18px;
  border: 1px solid var(--border-card);
  max-width: 380px;
  margin: 0 auto;
}
.pb-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.pb-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.pb-chat-msg {
  background: #f1f5f9;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 2px;
  font-size: 0.82rem;
  color: var(--brand-navy);
  margin-bottom: 10px;
  line-height: 1.45;
}
.pb-chat-msg-approved {
  background: #e7f4ee;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-weight: 600;
  border-radius: 14px 14px 2px 14px;
  margin-left: 20px;
}

.pb-mini-banners-section {
  padding: 20px 0 45px;
  background: #ffffff;
}
.pb-mini-banner {
  background: #f8fafc;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: var(--transition);
  height: 100%;
}
.pb-mini-banner:hover {
  border-color: var(--brand-primary);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.pb-mini-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}
.pb-mini-text h6 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-navy);
  margin-bottom: 2px;
}
.pb-mini-text p {
  font-size: 0.76rem;
  color: var(--brand-text-muted);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Smart Financial Calculators & Interactive Tool Experience
   -------------------------------------------------------------------------- */
.pb-calculators-section {
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(19, 38, 75, 0.03) 0%,
      transparent 50%
    ),
    #f8fafc;
  padding: 70px 0;
}

/* Interactive Calculator Container Widget */
.calc-interactive-box {
  background: #ffffff;
  border: 1.5px solid #d7e5f9;
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calc-widget-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.calc-tab-pill {
  background: #ffffff;
  border: 1px solid var(--border-card);
  color: var(--brand-text-body);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calc-tab-pill:hover,
.calc-tab-pill.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(19, 38, 75, 0.25);
}

.calc-slider-group {
  margin-bottom: 20px;
}

.calc-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-navy);
  margin-bottom: 8px;
}

.calc-range-input {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  accent-color: var(--brand-primary);
}

.calc-result-panel {
  background: linear-gradient(135deg, #e8ecf3 0%, #e7f4ee 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-top: 10px;
}

.calc-big-price {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: #0e1c38;
  line-height: 1;
}

/* Right Bento Calculators */
.calc-bento-card {
  background: #ffffff;
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: var(--transition);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

.calc-bento-card:hover {
  border-color: var(--brand-primary);
  transform: translateX(4px);
  box-shadow: var(--shadow-card-hover);
}

.calc-bento-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.calc-bento-text h5 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 2px;
}

.calc-bento-text p {
  font-size: 0.78rem;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
  line-height: 1.35;
}

.calc-bento-link {
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   9. Elevated Trust Promise Banner Strip
   -------------------------------------------------------------------------- */
.pb-promise-section {
  padding: 40px 0 60px;
  background: #ffffff;
}

.pb-promise-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 30px 24px;
  box-shadow: var(--shadow-sm);
}

.pb-promise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: center;
}

@media (max-width: 991px) {
  .pb-promise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 576px) {
  .pb-promise-grid {
    grid-template-columns: 1fr;
  }
}

.pb-promise-item {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pb-promise-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: var(--brand-primary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
  transition: var(--transition);
}

.pb-promise-item:hover .pb-promise-icon-box {
  transform: scale(1.1) rotate(-4deg);
  border-color: var(--brand-primary);
  color: #ffffff;
  background: var(--brand-primary);
}

.pb-promise-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 3px;
}

.pb-promise-desc {
  font-size: 0.74rem;
  color: var(--brand-text-muted);
  line-height: 1.4;
  margin-bottom: 0;
}

.pb-app-section {
  padding: 60px 0;
  background: #f0f6ff;
}

.pb-app-card {
  background: linear-gradient(135deg, #0a1628 0%, #0f2451 55%, #091a3d 100%);
  border-radius: var(--radius-xl);
  padding: 50px 48px;
  box-shadow: 0 20px 60px rgba(0, 40, 120, 0.22);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Blue aurora glow behind image */
.pb-app-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(19, 38, 75, 0.22) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.pb-app-card::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: 20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(0, 198, 255, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.pb-app-card h2 {
  color: #ffffff !important;
}
.pb-app-card .pb-section-desc {
  color: rgba(255, 255, 255, 0.65) !important;
}
.pb-app-card .pb-checklist li {
  color: rgba(255, 255, 255, 0.8);
}
.pb-app-card .pb-checklist li i {
  color: #1a9a52;
}

.pb-app-stat-row {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.pb-app-stat {
  display: flex;
  flex-direction: column;
}

.pb-app-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 2px;
}

.pb-app-stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pb-app-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 10px 18px;
  text-decoration: none;
  transition: var(--transition);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.pb-app-store-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  color: #ffffff;
}

.pb-app-store-btn .store-label-top {
  font-size: 0.6rem;
  display: block;
  opacity: 0.65;
  line-height: 1;
}

.pb-app-store-btn .store-label-main {
  font-size: 0.92rem;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}

.pb-app-img {
  max-width: 500px;
  border-radius: 20px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* --------------------------------------------------------------------------
   Partners — Full-width Mission-style Section
   -------------------------------------------------------------------------- */
.pb-partners-section {
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

.partners-head-wrap {
  padding: 56px 24px 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
}

.partners-head-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.partners-head-inner .section-tag-pill {
  display: inline-flex;
}

.partners-sub {
  font-size: 1.125rem;
  color: var(--brand-text-muted);
  margin: 0 0 22px;
  line-height: 1.65;
}

.partners-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.partners-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(19, 38, 75, 0.12);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.partners-trust-pill i {
  color: var(--brand-primary);
  font-size: 0.82rem;
}

.partners-trust-pill strong {
  color: var(--brand-navy);
  font-weight: 800;
}

.partners-marquee-zone {
  position: relative;
  padding: 32px 0 52px;
  background: linear-gradient(180deg, #eef4ff 0%, #e8f0fe 55%, #f0f6ff 100%);
  overflow: hidden;
}

.partners-zone-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(19, 38, 75, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 38, 75, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
  opacity: 0.7;
  pointer-events: none;
}

.partners-marquee-outer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  margin-bottom: 14px;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%
  );
}
.partners-marquee-outer:last-child {
  margin-bottom: 0;
}

.partners-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: partnersScrollLeft 36s linear infinite;
}
.partners-track.track-reverse {
  animation-name: partnersScrollRight;
  animation-duration: 40s;
}
.partners-marquee-outer:hover .partners-track {
  animation-play-state: paused;
}

@keyframes partnersScrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes partnersScrollRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.partner-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 9px 22px 9px 9px;
  box-shadow: 0 4px 14px rgba(19, 38, 75, 0.08);
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.partner-chip:hover {
  border-color: rgba(19, 38, 75, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(19, 38, 75, 0.14);
}

.partner-chip-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
.partner-chip-name {
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
}

.brand-hdfc .partner-chip-icon {
  background: #da291c;
  color: #ffffff;
}
.brand-hdfc .partner-chip-name {
  color: #002b49;
}
.brand-icici .partner-chip-icon {
  background: #b8281f;
  color: #f58220;
}
.brand-icici .partner-chip-name {
  color: #8c1d18;
}
.brand-tata .partner-chip-icon {
  background: #003b71;
  color: #ffffff;
}
.brand-tata .partner-chip-name {
  color: #003b71;
}
.brand-max .partner-chip-icon {
  background: #fdb913;
  color: #000000;
}
.brand-max .partner-chip-name {
  color: #1c3a6e;
}
.brand-star .partner-chip-icon {
  background: #0f52ba;
  color: #0d6936;
}
.brand-star .partner-chip-name {
  color: #0f52ba;
}
.brand-care .partner-chip-icon {
  background: #008779;
  color: #ffffff;
}
.brand-care .partner-chip-name {
  color: #008779;
}
.brand-bajaj .partner-chip-icon {
  background: #004a99;
  color: #ffffff;
}
.brand-bajaj .partner-chip-name {
  color: #004a99;
}
.brand-niva .partner-chip-icon {
  background: #16a34a;
  color: #ffffff;
}
.brand-niva .partner-chip-name {
  color: #13264b;
}
.brand-digit .partner-chip-icon {
  background: #0d6936;
  color: #ffffff;
}
.brand-digit .partner-chip-name {
  color: #0d6936;
}
.brand-sbi .partner-chip-icon {
  background: #22438c;
  color: #29b6f6;
}
.brand-sbi .partner-chip-name {
  color: #22438c;
}
.brand-kotak .partner-chip-icon {
  background: #ed1b24;
  color: #ffffff;
}
.brand-kotak .partner-chip-name {
  color: #13264b;
}
.brand-aditya .partner-chip-icon {
  background: #c5221f;
  color: #fdb913;
}
.brand-aditya .partner-chip-name {
  color: #88131b;
}
.brand-reliance .partner-chip-icon {
  background: #005a9c;
  color: #ffffff;
}
.brand-reliance .partner-chip-name {
  color: #005a9c;
}
.brand-chola .partner-chip-icon {
  background: #e11d48;
  color: #ffffff;
}
.brand-chola .partner-chip-name {
  color: #13264b;
}
.brand-iffco .partner-chip-icon {
  background: #047857;
  color: #ffffff;
}
.brand-iffco .partner-chip-name {
  color: #047857;
}
.brand-generali .partner-chip-icon {
  background: #dc2626;
  color: #ffffff;
}
.brand-generali .partner-chip-name {
  color: #dc2626;
}
.brand-sompo .partner-chip-icon {
  background: #1c3a6e;
  color: #ffffff;
}
.brand-sompo .partner-chip-name {
  color: #13264b;
}
.brand-navi .partner-chip-icon {
  background: #10b981;
  color: #ffffff;
}
.brand-navi .partner-chip-name {
  color: #064e3b;
}

@media (max-width: 576px) {

.pb-app-img {
      max-width: 100%;

}

  .partners-head-wrap {
    padding: 40px 18px 28px;
  }

  .partners-trust-row {
    gap: 8px;
  }

  .partners-trust-pill {
    padding: 6px 12px;
    font-size: 0.72rem;
  }

  .partners-marquee-outer {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
  .partner-chip {
    padding: 7px 16px 7px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Help & Support styles live inside unified .pb-footer (below)
   -------------------------------------------------------------------------- */

.pb-payment-strip {
  padding: 20px 0;
  background: #ffffff;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  text-align: center;
}
.pb-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-text-muted);
}

/* --------------------------------------------------------------------------
   10. Infinite Marquee Testimonials Experience
   -------------------------------------------------------------------------- */
.pb-testimonials-section {
  padding: 70px 0 60px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

/* Gradient Fade Masks on sides */
.marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(-90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-track-reverse {
  animation: marqueeScrollReverse 40s linear infinite;
}

.marquee-track-reverse:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeScrollReverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Unique Testimonial Cards */
.marquee-review-card {
  width: 360px;
  background: #ffffff;
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: var(--transition);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.marquee-review-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.review-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.review-user-info h6 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.verified-tag {
  font-size: 0.65rem;
  color: #0d6936;
  font-weight: 700;
  background: #e7f4ee;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.review-user-city {
  font-size: 0.72rem;
  color: var(--brand-text-muted);
}

.review-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  border: 1px solid #d7e7fa;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
  width: fit-content;
}

.review-body-text {
  font-size: 0.88rem;
  color: var(--brand-text-dark);
  line-height: 1.5;
  margin-bottom: 14px;
  font-style: normal;
}

.review-highlight-pill {
  background: #e7f4ee;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   11. Unified Premium Footer (Support + Links)
   -------------------------------------------------------------------------- */
.pb-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  padding: 0;
  font-size: 0.95rem;
  background: #13264b;
    margin: 10px; 
    border-radius: 15px;
}

.pb-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(143, 164, 196, 0.35) 30%, rgba(13, 105, 54, 0.45) 70%, transparent);
}

.footer-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ft-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}

.ft-glow-1 {
  width: 380px;
  height: 380px;
  top: -80px;
  left: -120px;
  background: rgba(13, 105, 54, 0.22);
}

.ft-glow-2 {
  width: 420px;
  height: 420px;
  top: 40px;
  right: -140px;
  background: rgba(61, 90, 138, 0.28);
}

.ft-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(61, 90, 138, 0.12);
  right: -8%;
  top: 58%;
  transform: translateY(-50%);
}

.ft-ring-1 {
  width: 280px;
  height: 280px;
  right: -4%;
}

.ft-ring-2 {
  width: 420px;
  height: 420px;
  right: -10%;
  border-color: rgba(61, 90, 138, 0.08);
}

.ft-ring-3 {
  width: 580px;
  height: 580px;
  right: -16%;
  border-color: rgba(61, 90, 138, 0.05);
}

.footer-inner,
.pb-footer > .container-xl {
  position: relative;
  z-index: 1;
  padding-top: 56px;
}

/* ---- Support band ---- */
.footer-support {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px 48px;
  align-items: center;
  padding-bottom: 48px;
}

.footer-support-copy {
  max-width: 540px;
}

.help-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 16px 10px 10px;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: #13264b;
  border: 1px solid #ffffff;
  border-radius: var(--radius-full);
  box-shadow: none;
}

.help-kicker i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d6936;
  color: #ffffff;
  font-size: 0.75rem;
  box-shadow: none;
}

.footer-support-title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 3.4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #ffffff;
}

.footer-support-title span {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #0d6936;
  color: #0d6936;
}

.help-lead {
  font-size: 1.125rem;
  color: #ffffff;
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 46ch;
}

.help-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.help-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 197, 255, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    background 0.35s ease;
}

.help-contact-item:hover {
  color: inherit;
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(148, 197, 255, 0.32);
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.5);
}

.help-contact-ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.help-contact-item:hover .help-contact-ico {
  transform: scale(1.05);
}

.help-ico-phone,
.help-ico-wa {
  background: #0d6936;
  color: #ffffff;
}

.help-contact-item:hover .help-ico-phone,
.help-contact-item:hover .help-ico-wa {
  background: #0d6936;
  color: #ffffff;
  box-shadow: none;
}

.help-contact-ico i,
.help-ico-phone i,
.help-ico-wa i,
.help-contact-ico i::before,
.help-ico-phone i::before,
.help-ico-wa i::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.help-contact-item small {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #7b8da6;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.help-contact-item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.help-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.help-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 197, 255, 0.12);
  border-radius: var(--radius-full);
}

.help-meta i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(13, 105, 54, 0.22);
  color: #7dcea0;
  font-size: 0.62rem;
}

/* Visual frame */
.footer-support-visual {
  position: relative;
  min-height: 360px;
}

.help-visual-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(148, 197, 255, 0.16);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  background:
    radial-gradient(ellipse 80% 70% at 60% 40%, rgba(61, 90, 138, 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #1a2f52 0%, #13264b 55%, #0c1830 100%);
}

.help-visual-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(8, 18, 32, 0.35) 0%, transparent 22%),
    linear-gradient(180deg, rgba(8, 18, 32, 0.2) 0%, transparent 18%, transparent 78%, rgba(8, 18, 32, 0.45) 100%);
  pointer-events: none;
}

.help-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: saturate(1.05) contrast(1.03);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.footer-support.is-revealed .help-visual-img {
  transform: scale(1.03);
}

.help-float-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(10, 18, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  font-size: 0.76rem;
  font-weight: 700;
  color: #f1f5f9;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  letter-spacing: -0.01em;
}

.help-float-online {
  top: 20px;
  left: 20px;
}

.help-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0d6936;
  box-shadow: 0 0 0 0 rgba(13, 105, 54, 0.5);
  animation: helpPulse 2s ease infinite;
}

@keyframes helpPulse {
  0% { box-shadow: 0 0 0 0 rgba(13, 105, 54, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(13, 105, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 105, 54, 0); }
}

@keyframes helpBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.help-float-claims {
  bottom: 20px;
  right: 20px;
  font-size: 0.74rem;
  color: #cbd5e1;
}

.help-float-claims i {
  color: #7dcea0;
  font-size: 0.85rem;
}

.help-float-claims strong {
  color: #f8fafc;
  font-weight: 800;
}

/* Reveal animations */
[data-reveal="help-split"] {
  opacity: 1;
  transform: none;
}

.footer-support .footer-support-copy,
.footer-support .footer-support-visual {
  will-change: opacity, transform;
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-support:not(.is-revealed) .footer-support-copy {
  opacity: 0;
  transform: translate3d(-8%, 0, 0);
}

.footer-support:not(.is-revealed) .footer-support-visual {
  opacity: 0;
  transform: translate3d(10%, 0, 0);
}

.footer-support.is-revealed .footer-support-copy,
.footer-support.is-revealed .footer-support-visual {
  opacity: 1;
  transform: none;
}

.footer-support .footer-support-copy > * {
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-support:not(.is-revealed) .footer-support-copy > * {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
}

.footer-support.is-revealed .footer-support-copy > * {
  opacity: 1;
  transform: none;
}

.footer-support.is-revealed .footer-support-copy > *:nth-child(1) { transition-delay: 0.18s; }
.footer-support.is-revealed .footer-support-copy > *:nth-child(2) { transition-delay: 0.28s; }
.footer-support.is-revealed .footer-support-copy > *:nth-child(3) { transition-delay: 0.38s; }
.footer-support.is-revealed .footer-support-copy > *:nth-child(4) { transition-delay: 0.48s; }
.footer-support.is-revealed .footer-support-copy > *:nth-child(5) { transition-delay: 0.58s; }

.footer-support .help-float-badge {
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-support:not(.is-revealed) .help-float-badge {
  opacity: 0;
  transform: translateY(12px);
}

.footer-support.is-revealed .help-float-online {
  transition-delay: 0.5s;
  animation: helpBadgeFloat 4.5s ease-in-out 0.9s infinite;
}

.footer-support.is-revealed .help-float-claims {
  transition-delay: 0.65s;
  animation: helpBadgeFloat 5s ease-in-out 1.1s infinite;
}

.footer-support.is-revealed .help-float-badge {
  opacity: 1;
  transform: none;
}

.footer-divider {
  height: 1px;
  margin: 0 0 40px;
  background: linear-gradient(90deg, transparent, rgba(148, 197, 255, 0.22) 20%, rgba(13, 105, 54, 0.28) 55%, rgba(148, 197, 255, 0.18) 80%, transparent);
}

.footer-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 0.75fr 0.75fr 1.2fr;
  gap: 36px 28px;
  padding-bottom: 40px;
}

.footer-col-title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f8fafc;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 14px;
}

.footer-brand-logo {
  display: block;
  height: 74px;
  width: auto;
  max-width: min(320px, 62vw);
  object-fit: cover;
}

.footer-brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1c3a6e, #13264b);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(19, 38, 75, 0.4);
}

.footer-brand-name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}

.footer-brand-name em {
  font-style: normal;
  color: #3d5a8a;
}

.footer-brand-tag {
  margin: 0 0 16px;
  max-width: 320px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #ffffff;
}

.footer-helpline-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: color 0.2s;
}

.footer-helpline-mini:hover {
  color: #0d6936;
}

.footer-helpline-mini i {
  color: #0d6936;
}

.footer-col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 550;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}

.footer-col-links a:hover {
  color: #0d6936;
  transform: translateX(3px);
}

.footer-news-text {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffff;
}

.footer-news-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}

.footer-news-form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 197, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.footer-news-form input::placeholder {
  color: #64748b;
}

.footer-news-form input:focus {
  border-color: rgba(125, 206, 160, 0.55);
  background: rgba(255, 255, 255, 0.09);
}

.footer-news-form button {
  flex-shrink: 0;
  height: 46px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #1c3a6e, #0d6936);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(13, 105, 54, 0.28);
  transition: var(--transition);
}

.footer-news-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(13, 105, 54, 0.4);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(148, 197, 255, 0.12);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.footer-bottom-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 0.2s;
}

.footer-bottom-links a:hover {
  color: #0d6936;
}

.footer-copy {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: #ffffff;
}

.footer-socials {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--transition);
}

.footer-socials a:hover {
  background: #0d6936;
  border-color: #0d6936;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .footer-inner,
  .pb-footer > .container-xl {
    padding-top: 44px;
  }

  .footer-support {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 36px;
  }

  .footer-support-copy {
    max-width: none;
  }

  .footer-support-visual,
  .help-visual-frame {
    min-height: 300px;
  }

  .help-contact-row {
    grid-template-columns: 1fr;
  }

  .footer-support:not(.is-revealed) .footer-support-copy,
  .footer-support:not(.is-revealed) .footer-support-visual {
    transform: translate3d(0, 28px, 0);
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }

  .footer-col-brand,
  .footer-col-news {
    grid-column: 1 / -1;
  }

  .footer-news-form {
    max-width: 100%;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .footer-bottom-links,
  .footer-socials {
    justify-content: center;
  }

  .footer-copy {
    order: 3;
  }
}

@media (max-width: 575px) {
  .footer-inner,
  .pb-footer > .container-xl {
    padding-top: 36px;
  }

  .footer-support-title {
    font-size: 1.65rem;
  }

  .footer-support-visual,
  .help-visual-frame {
    min-height: 260px;
  }

  .help-float-online {
    top: 14px;
    left: 14px;
  }

  .help-float-claims {
    bottom: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-news-form {
    flex-direction: column;
  }

  .footer-news-form input,
  .footer-news-form button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-pulse,
  .footer-support.is-revealed .help-float-online,
  .footer-support.is-revealed .help-float-claims {
    animation: none !important;
  }

  .footer-support .footer-support-copy,
  .footer-support .footer-support-visual,
  .footer-support .footer-support-copy > *,
  .footer-support .help-float-badge,
  .footer-support .help-visual-img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.pb-floating-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pb-btn-whatsapp {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  transition: var(--transition);
}
.pb-btn-whatsapp:hover {
  transform: scale(1.1);
  color: #ffffff;
}
.pb-btn-scroll {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1c3a6e;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}
.pb-btn-scroll.visible {
  opacity: 1;
  visibility: visible;
}
.pb-btn-scroll:hover {
  background: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   Modals — clean, professional (Quote / Agent / Sign In)
   -------------------------------------------------------------------------- */
.pb-modal .modal-dialog-pb {
  max-width: 440px;
  margin: 1rem auto;
}

.pb-modal .modal-dialog-pb-sm {
  max-width: 380px;
}

.modal-content-pb {
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: #ffffff;
}

.modal-header-pb {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header-pb-text {
  min-width: 0;
  flex: 1;
}

.modal-header-pb .modal-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-navy);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.modal-subtitle {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brand-text-muted);
  margin: 0;
}

.modal-subtitle strong {
  font-weight: 600;
  color: var(--brand-text-body);
}

.modal-header-pb .modal-title #modalProductTitle,
.modal-header-pb .modal-subtitle #modalProductTitle {
  color: var(--brand-primary);
  font-weight: 600;
}

.btn-close-pb {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 2px 0 0;
  border-radius: 8px;
  background-color: transparent;
  border: none;
  opacity: 0.45;
  transition: var(--transition);
  box-sizing: border-box;
}

.btn-close-pb:hover {
  opacity: 0.8;
  background-color: var(--bg-page);
}

.btn-close-pb:focus {
  box-shadow: 0 0 0 3px rgba(19, 38, 75, 0.15);
  opacity: 0.8;
}

.modal-body-pb {
  padding: 20px 24px 24px;
  background: #ffffff;
}

.pb-modal-form .row.g-3 {
  --bs-gutter-y: 1rem;
}

.pb-plan-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
}

.pb-plan-tag-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-text-subtle);
  flex-shrink: 0;
}

.pb-plan-tag-value {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-navy);
  outline: none;
  cursor: default;
}

.pb-modal-form .row {
  margin-bottom: 0;
}

.pb-field {
  margin-bottom: 0;
}

.pb-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-text-body);
  margin-bottom: 6px;
}

.pb-input,
.pb-modal-form .form-control.pb-input,
.pb-modal-form .form-select.pb-input {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-card);
  background: #ffffff;
  color: var(--brand-navy);
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.5rem 0.875rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pb-input::placeholder {
  color: var(--brand-text-subtle);
}

.pb-input:hover,
.pb-modal-form .form-control.pb-input:hover,
.pb-modal-form .form-select.pb-input:hover {
  border-color: #cbd5e1;
}

.pb-input:focus,
.pb-modal-form .form-control.pb-input:focus,
.pb-modal-form .form-select.pb-input:focus {
  border-color: var(--brand-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(19, 38, 75, 0.1);
  outline: none;
}

.pb-field-hint {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--brand-text-subtle);
  line-height: 1.45;
}

.pb-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 20px;
  cursor: pointer;
}

.pb-consent-input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--brand-primary);
}

.pb-consent-text {
  font-size: 0.8125rem;
  color: var(--brand-text-muted);
  line-height: 1.45;
}

.pb-modal-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: var(--transition);
}

.pb-modal-btn-primary {
  color: #ffffff;
  background: var(--brand-primary);
}

.pb-modal-btn-primary:hover {
  background: var(--brand-primary-hover);
  color: #ffffff;
}

.pb-modal-btn-primary:active {
  transform: scale(0.99);
}

.pb-modal-footnote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 0.75rem;
  color: var(--brand-text-subtle);
  line-height: 1.45;
  text-align: center;
  justify-content: center;
}

.pb-modal-footnote i {
  font-size: 0.7rem;
  margin-top: 2px;
  color: var(--accent-green);
}

.pb-modal.fade .modal-dialog {
  transform: translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-modal.show .modal-dialog {
  transform: none;
}

.modal-backdrop.show {
  opacity: 0.4;
}

@media (max-width: 575.98px) {
  .pb-modal .modal-dialog-pb,
  .pb-modal .modal-dialog-pb-sm {
    max-width: calc(100% - 20px);
    margin: 0.5rem auto;
  }

  .modal-header-pb {
    padding: 20px 20px 0;
  }

  .modal-body-pb {
    padding: 16px 20px 20px;
  }

  .modal-header-pb .modal-title {
    font-size: 1.1rem;
  }

  .modal-subtitle {
    font-size: 0.8125rem;
  }
}

.pb-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1090;
  background: #ffffff;
  border-left: 4px solid #0d6936;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(120%);
  transition: var(--transition);
}
.pb-toast.show {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   19. Scroll-Triggered Section Reveal Animations (Unique Per Section)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="fade-up"] {
  transform: translateY(52px);
}

[data-reveal="fade-left"] {
  transform: translateX(-64px);
}

[data-reveal="fade-right"] {
  transform: translateX(64px);
}

[data-reveal="zoom-in"] {
  transform: scale(0.94);
}

/* Mission section: left + right halves meet in the center */
[data-reveal="mission-split"] {
  opacity: 1;
  transform: none;
}

/* Footer support band: parent stays visible; children animate */
[data-reveal="help-split"] {
  opacity: 1;
  transform: none;
}

.mission-section .mission-features,
.mission-section .mission-panel,
.mission-section .partners-orbit-copy,
.mission-section .partners-orbit-visual,
.mission-section .partners-orbit-head,
.mission-section .partners-orbit-stage {
  will-change: opacity, transform;
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.mission-section:not(.is-revealed) .mission-features,
.mission-section:not(.is-revealed) .partners-orbit-copy,
.mission-section:not(.is-revealed) .partners-orbit-head {
  opacity: 0;
  transform: translate3d(-10%, 0, 0) scale(0.985);
}

.mission-section:not(.is-revealed) .mission-panel,
.mission-section:not(.is-revealed) .partners-orbit-visual,
.mission-section:not(.is-revealed) .partners-orbit-stage {
  opacity: 0;
  transform: translate3d(12%, 0, 0) scale(0.985);
}

.mission-section.is-revealed .mission-features,
.mission-section.is-revealed .mission-panel,
.mission-section.is-revealed .partners-orbit-copy,
.mission-section.is-revealed .partners-orbit-visual,
.mission-section.is-revealed .partners-orbit-head,
.mission-section.is-revealed .partners-orbit-stage {
  opacity: 1;
  transform: none;
}

.mission-section .brand-logo-card {
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.mission-section:not(.is-revealed) .brand-logo-card {
  opacity: 0;
  transform: translate3d(-28px, 12px, 0);
}

.mission-section.is-revealed .brand-logo-card {
  opacity: 1;
  transform: none;
}

.mission-section.is-revealed .brand-logo-card:hover {
  transition-delay: 0s;
  transform: translateY(-5px) scale(1.02);
}

.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(1) { transition-delay: 0.12s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(2) { transition-delay: 0.18s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(3) { transition-delay: 0.24s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(4) { transition-delay: 0.3s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(5) { transition-delay: 0.36s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(6) { transition-delay: 0.42s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(7) { transition-delay: 0.48s; }
.mission-section.is-revealed .brand-panel.active .brand-logo-card:nth-child(8) { transition-delay: 0.54s; }

.mission-section .brand-cat-tab {
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.mission-section:not(.is-revealed) .brand-cat-tab {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.mission-section.is-revealed .brand-cat-tab {
  opacity: 1;
  transform: none;
}

.mission-section.is-revealed .brand-cat-tab:nth-child(1) { transition-delay: 0.1s; }
.mission-section.is-revealed .brand-cat-tab:nth-child(2) { transition-delay: 0.14s; }
.mission-section.is-revealed .brand-cat-tab:nth-child(3) { transition-delay: 0.18s; }
.mission-section.is-revealed .brand-cat-tab:nth-child(4) { transition-delay: 0.22s; }
.mission-section.is-revealed .brand-cat-tab:nth-child(5) { transition-delay: 0.26s; }
.mission-section.is-revealed .brand-cat-tab:nth-child(6) { transition-delay: 0.3s; }
.mission-section.is-revealed .brand-cat-tab:nth-child(7) { transition-delay: 0.34s; }

.mission-section .mission-panel-inner > * {
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.mission-section:not(.is-revealed) .mission-panel-inner > * {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
}

.mission-section.is-revealed .mission-panel-inner > * {
  opacity: 1;
  transform: none;
}

.mission-section.is-revealed .mission-panel-inner > *:nth-child(1) { transition-delay: 0.22s; }
.mission-section.is-revealed .mission-panel-inner > *:nth-child(2) { transition-delay: 0.34s; }
.mission-section.is-revealed .mission-panel-inner > *:nth-child(3) { transition-delay: 0.46s; }
.mission-section.is-revealed .mission-panel-inner > *:nth-child(4) { transition-delay: 0.58s; }
.mission-section.is-revealed .mission-panel-inner > *:nth-child(5) { transition-delay: 0.7s; }

.mission-section .mission-panel-arrow {
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.mission-section:not(.is-revealed) .mission-panel-arrow {
  opacity: 0;
  transform: translate3d(40px, 24px, 0) scale(0.92);
}

.mission-section.is-revealed .mission-panel-arrow {
  opacity: 1;
  transform: none;
}

@media (max-width: 991px) {
  .mission-section:not(.is-revealed) .mission-features {
    transform: translate3d(0, 36px, 0) scale(0.98);
  }

  .mission-section:not(.is-revealed) .mission-panel {
    transform: translate3d(0, 48px, 0) scale(0.98);
  }

  .mission-section:not(.is-revealed) .brand-logo-card {
    transform: translate3d(0, 18px, 0);
  }

  .mission-section:not(.is-revealed) .mission-panel-inner > * {
    transform: translate3d(0, 18px, 0);
  }
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .mf-orb {
    animation: none !important;
  }

  .mission-section .mission-features,
  .mission-section .mission-panel,
  .mission-section .brand-logo-card,
  .mission-section .brand-cat-tab,
  .mission-section .mission-panel-inner > *,
  .mission-section .mission-panel-arrow {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   20. Navbar - Mobile Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .pb-navbar {
    flex-wrap: wrap;
    min-height: 52px;
    padding: 8px 0;
  }

  .pb-nav-collapse {
    margin-top: 8px;
    padding: 10px 4px 12px;
    border-top: 1px solid rgba(19, 38, 75, 0.1);
  }

  .pb-nav-list {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    margin: 0;
    gap: 2px;
  }

  .pb-nav-link {
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 12px;
  }

  .pb-nav-link.active::after {
    display: none;
  }

  .pb-nav-actions {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(19, 38, 75, 0.1);
    justify-content: stretch;
  }

  .pb-nav-search {
    display: none;
  }

  .pb-btn-cta {
    width: 100%;
    background: #0d6936;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-family: var(--font-head);
    font-weight: 700;
  }
}

@media (max-width: 420px) {
  .pb-logo-img {
    height: 36px;
    max-width: min(180px, 58vw);
  }

  .footer-brand-logo {
    height: 42px;
  }

  .pb-logo-name {
    font-size: 0.9375rem;
  }

  .pb-logo-tag {
    font-size: 0.625rem;
  }

  .pb-logo-mark {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   PLATFORM HERO + COVERFOX PRODUCT CARDS — FIXED LAYOUT
   ========================================================================== */

.platform-hero-section {
  position: relative;
  padding: 40px 0 44px;
  overflow: hidden;
  background: #13264b;
    margin: 10px; 
    border-radius: 10px;
}



.platform-hero-inner {
  position: relative;
  z-index: 1;
}

.platform-hero-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}

.platform-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #13264b;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(8, 16, 32, 0.25);
  backdrop-filter: blur(8px);
}

.platform-hero-title {
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.platform-hero-sub {
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}

.platform-hero-section .text-gradient {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #0d6936;
  background-clip: unset;
  color: #0d6936;
}

/* Premium animated border — clipped to card, visible brand shimmer */
.platform-hub-border {
  --hub-border-width: 3px;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--hub-border-width);
  border-radius: 31px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(19, 38, 75, 0.28) 0%,
    rgba(61, 90, 138, 0.45) 45%,
    rgba(13, 105, 54, 0.22) 75%,
    rgba(13, 105, 54, 0.24) 100%
  );
  box-shadow:
    0 0 0 1px rgba(19, 38, 75, 0.14),
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 24px 56px -20px rgba(15, 23, 42, 0.2),
    0 0 32px -8px rgba(19, 38, 75, 0.22);
}

/* Soft glow layer — stays inside card (overflow hidden) */
.platform-hub-border::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 205deg,
    rgba(19, 38, 75, 0.2) 222deg,
    rgba(13, 105, 54, 0.55) 252deg,
    rgba(19, 38, 75, 0.7) 272deg,
    rgba(13, 105, 54, 0.45) 288deg,
    rgba(19, 38, 75, 0.25) 302deg,
    transparent 318deg,
    transparent 360deg
  );
  filter: blur(5px);
  opacity: 0.95;
  animation: hubBorderRotate 6.5s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* Bright sharp shimmer on the border ring */
.platform-hub-border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 208deg,
    rgba(19, 38, 75, 0.18) 222deg,
    rgba(19, 38, 75, 0.55) 242deg,
    rgba(13, 105, 54, 0.92) 262deg,
    #ffffff 272deg,
    rgba(19, 38, 75, 0.95) 278deg,
    rgba(13, 105, 54, 0.65) 290deg,
    rgba(19, 38, 75, 0.35) 304deg,
    transparent 320deg,
    transparent 360deg
  );
  animation: hubBorderRotate 6.5s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes hubBorderRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-hub-border::before,
  .platform-hub-border::after {
    animation: none;
  }

  .platform-hub-border::before {
    opacity: 0.55;
  }

  .platform-hub-border::after {
    opacity: 0;
  }
}

/* Unified Buy / Pay hub */
.platform-hub {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.platform-hub-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 14px 0;
  background: linear-gradient(180deg, #e8ecf3 0%, #eef4fc 100%);
  border-bottom: 1px solid #e8eef7;
}

.hub-tab {
  border: none;
  background: transparent;
  padding: 14px 16px 16px;
  font-family: var(--font-head);
  color: var(--brand-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 16px 16px 0 0;
  border-bottom: 3px solid transparent;
  position: relative;
}

.hub-tab-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-text-muted);
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: var(--transition);
  flex-shrink: 0;
}

.hub-tab-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
}

.hub-tab-txt strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.hub-tab-txt small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-text-subtle);
  font-family: var(--font-body);
}

.hub-tab.active {
  color: var(--brand-primary);
  background: #fff;
  border-bottom-color: var(--brand-primary);
  box-shadow: 0 -2px 16px rgba(19, 38, 75, 0.06);
}

.hub-tab.active .hub-tab-ico {
  background: linear-gradient(145deg, #1c3a6e, #13264b);
  color: #fff;
  box-shadow: 0 8px 18px rgba(19, 38, 75, 0.35);
}

.hub-tab.active .hub-tab-txt small {
  color: rgba(19, 38, 75, 0.7);
}



.platform-hub-body {
  padding: 28px 28px 24px;
  background: #fff;
}

.hub-panel {
  display: none;
  animation: hubFade 0.35s ease;
}

.hub-panel.active {
  display: block;
}

@keyframes hubFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hub-quick-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.hub-quick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 128px;
  padding: 12px 8px 12px;
  border-radius: 16px;
  border: 1.5px solid #e8eef7;
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
  text-decoration: none;
  color: var(--brand-navy);
  transition: var(--transition);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.hub-quick::before {
  content: "";
  position: absolute;
  inset: auto 12% -30% 12%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 38, 75, 0.12) 0%, transparent 70%);
  pointer-events: none;
  transition: var(--transition);
}

.hub-quick-img {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.14));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: auto;
}

.hub-quick-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.hub-quick-go {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-primary);
  opacity: 0;
  transform: translate(4px, -4px);
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(19, 38, 75, 0.15);
}

.hub-quick-health { --tile-accent: #13264b; }
.hub-quick-life { --tile-accent: #0d6936; }
.hub-quick-term { --tile-accent: #1c3a6e; }
.hub-quick-car { --tile-accent: #0d6936; }
.hub-quick-bike { --tile-accent: #13264b; }

.hub-quick:hover {
  border-color: rgba(19, 38, 75, 0.4);
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, #fff 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f0f7ff 100%);
  transform: translateY(-7px);
  box-shadow: 0 18px 36px rgba(19, 38, 75, 0.16);
  color: var(--tile-accent, var(--brand-primary));
}

@supports (border-color: color-mix(in srgb, red 50%, blue)) {
  .hub-quick:hover {
    border-color: color-mix(in srgb, var(--tile-accent, #13264b) 45%, #e8eef7);
    background:
      radial-gradient(ellipse 90% 70% at 50% 18%, #fff 0%, transparent 60%),
      linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tile-accent, #13264b) 8%, #f3f5f8) 100%);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--tile-accent, #13264b) 18%, transparent);
  }
}

.hub-quick:hover::before {
  background: radial-gradient(circle, rgba(19, 38, 75, 0.2) 0%, transparent 70%);
}

.hub-quick:hover .hub-quick-img {
  transform: scale(1.1) translateY(-4px);
}

.hub-quick:hover .hub-quick-go {
  opacity: 1;
  transform: none;
}

.hub-buy-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  border-top: 1px dashed #e8eef7;
  margin-top: 2px;
  padding-top: 20px;
}

.hub-main-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #13264b 0%, #13264b 55%, #13264b 140%);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  box-shadow: 0 10px 24px rgba(19, 38, 75, 0.35);
  transition: var(--transition);
}

.hub-main-cta:hover {
  gap: 12px;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(19, 38, 75, 0.42);
}

.hub-buy-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-text-muted);
  background: #f8fafc;
  border: 1px solid #e8ecf3;
  padding: 8px 14px;
  border-radius: var(--radius-full);
}

.hub-buy-hint i {
  color: var(--accent-amber);
}

.hub-pay-shell {
  max-width: 640px;
  margin: 0 auto;
}

.hub-pay-intro {
  text-align: center;
  margin-bottom: 20px;
}

.hub-pay-intro h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--brand-navy);
}

.hub-pay-intro p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--brand-text-muted);
}

.hub-pay-form {
  max-width: 100%;
  margin: 0 auto;
}

.hub-pay-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.hub-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.hub-field span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-text-muted);
  letter-spacing: 0.02em;
}

.platform-pay-form input {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 0.92rem;
  outline: none;
  transition: var(--transition);
  background: #f8fafc;
}

.platform-pay-form input:focus {
  border-color: var(--accent-orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 105, 54, 0.12);
}

.hub-pay-form button {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-orange), #0a542b);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-glow-orange);
  transition: var(--transition);
}

.hub-pay-form button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.hub-pay-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--brand-text-muted);
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hub-pay-note i {
  color: var(--accent-green);
}

.platform-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: none;
  margin: 0;
  background: #13264b;
  border-radius: 0;
  overflow: hidden;
  border: none;
  border-top: 1px solid #ffffff;
  box-shadow: none;
}

.platform-trust-item {
  text-align: left;
  background: transparent;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}

.platform-trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: #ffffff;
  opacity: 0.25;
}

.trust-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d6936;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 0.95rem;
  box-shadow: none;
  flex-shrink: 0;
}

.trust-ico i,
.trust-ico i::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.platform-trust-item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.platform-trust-item span:not(.trust-ico) {
  font-size: 0.88rem;
  color: #ffffff;
  font-weight: 600;
}

/* Coverfox-style product cards — tabbed, 3 per row */
.cf-products-section {
  padding: 48px 0 56px;
  background: #ffffff;
}

.cf-products-head {
  text-align: center;
  margin-bottom: 24px;
}

.cf-products-head .section-tag-pill {
  display: inline-flex;
}

.cf-products-sub {
  font-size: 1.125rem;
  color: var(--brand-text-muted);
  margin: 0;
  line-height: 1.65;
}

.cf-plan-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 28px;
  max-width: 720px;
}

.cf-plan-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(19, 38, 75, 0.12);
  background: #f4f7fb;
  color: #13264b;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cf-plan-tab i {
  font-size: 0.85rem;
  color: #0d6936;
}

.cf-plan-tab:hover {
  border-color: rgba(13, 105, 54, 0.35);
  transform: translateY(-1px);
}

.cf-plan-tab.active {
  background: #13264b;
  color: #ffffff;
  border-color: #13264b;
  box-shadow: 0 10px 24px rgba(19, 38, 75, 0.22);
}

.cf-plan-tab.active i {
  color: #7dcea0;
}

.cf-plan-panel {
  display: none;
}

.cf-plan-panel.active {
  display: block;
  animation: cfPlanFade 0.28s ease;
}

@keyframes cfPlanFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cf-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin: 0;
}

.cf-insurance-card {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 280px;
  background:
    linear-gradient(145deg, #ffffff 0%, #f7faf8 55%, #eef5f0 100%);
  border: 1px solid rgba(19, 38, 75, 0.08);
  border-radius: 22px;
  padding: 0;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 28px rgba(19, 38, 75, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cf-insurance-card:hover {
  transform: translateY(-8px);
  border-color: rgba(13, 105, 54, 0.28);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.95) inset,
    0 22px 48px rgba(19, 38, 75, 0.16);
}

.cf-insurance-card.cf-card--featured {
  border-color: rgba(13, 105, 54, 0.45);
  background:
    linear-gradient(145deg, #ffffff 0%, #eef8f1 48%, #dff0e6 100%);
  box-shadow:
    0 0 0 2px rgba(13, 105, 54, 0.18),
    0 14px 36px rgba(13, 105, 54, 0.16);
}

.cf-insurance-card.cf-card--featured:hover {
  box-shadow:
    0 0 0 2px rgba(13, 105, 54, 0.28),
    0 24px 48px rgba(13, 105, 54, 0.22);
}

.cf-card-content {
  position: relative;
  z-index: 4;
  padding: 22px 22px 0;
  max-width: 58%;
}

.cf-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-orange);
  background: var(--accent-orange-light);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.cf-card-badge.badge-green {
  color: var(--accent-green);
  background: var(--accent-green-light);
}

.cf-card-badge.badge-purple {
  color: var(--accent-purple);
  background: var(--accent-purple-light);
}

.cf-card-badge.badge-blue {
  color: var(--brand-primary);
  background: var(--brand-primary-light);
}

.cf-card-title {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cf-card-price {
  font-size: 0.9rem;
  color: var(--brand-text-muted);
  margin-bottom: 14px;
}

.cf-card-price strong {
  color: var(--brand-navy);
  font-weight: 800;
}

.cf-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-primary);
  transition: gap 0.2s;
}

.cf-insurance-card:hover .cf-card-link {
  gap: 8px;
}

.cf-card-stripe {
  position: absolute;
  right: 32%;
  top: 0;
  width: 48px;
  height: 68%;
  background: linear-gradient(180deg, var(--brand-primary), #0047b3);
  border-radius: 0 0 6px 6px;
  z-index: 1;
  pointer-events: none;
}

.cf-card-stripe.stripe-green {
  background: linear-gradient(180deg, var(--accent-green), #047857);
}

.cf-card-stripe.stripe-purple {
  background: linear-gradient(180deg, var(--accent-purple), #6d28d9);
}

.cf-card-stripe.stripe-orange {
  background: linear-gradient(180deg, var(--accent-orange), #0a542b);
}

.cf-card-stripe.stripe-teal {
  background: linear-gradient(180deg, #1c3a6e, #0369a1);
}

.cf-card-asset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  object-position: bottom right;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.35s ease;
  filter: drop-shadow(0 10px 18px rgba(19, 38, 75, 0.12));
}

.cf-insurance-card:hover .cf-card-asset {
  transform: scale(1.06) translateY(-6px);
}

/* Vehicle card chips */
.cf-card-vehicle {
  cursor: default;
}

.cf-vehicle-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.cf-vehicle-chips button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-card);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-navy);
  cursor: pointer;
  transition: var(--transition);
  width: fit-content;
}

.cf-vehicle-chips button:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}

/* ==========================================================================
   OUR MISSION — Full-width Section Split
   ========================================================================== */

.mission-section {
  padding: 0;
  background: #13264b;
}

/* --------------------------------------------------------------------------
   Partners orbit redesign — header + rail + large logos
   -------------------------------------------------------------------------- */
.partners-orbit-section {
  position: relative;
  overflow: visible;
  padding: 64px 0 72px;
  background:
    radial-gradient(ellipse 50% 55% at 62% 58%, rgba(13, 105, 54, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 35% 40% at 8% 18%, rgba(59, 139, 255, 0.14) 0%, transparent 55%),
    #13264b;
}

.partners-orbit-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.partners-orbit-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px 28px;
  align-items: stretch;
  padding: 22px 24px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.partners-orbit-head-copy .section-tag-pill {
  margin-bottom: 14px;
}

.partners-orbit-head-copy .pb-section-main-title {
  color: #ffffff;
  margin: 0 0 10px;
  font-size: clamp(2.25rem, 4vw, 3.05rem);
}

.partners-orbit-head-copy .pb-section-main-title .text-gradient,
.partners-orbit-head-copy .pb-section-main-title span {
  color: #0d6936;
  -webkit-text-fill-color: #0d6936;
  background: none;
}

.partners-orbit-sub {
  margin: 0;
  max-width: 540px;
  color: rgba(232, 238, 247, 0.9);
  font-size: 1.125rem;
  line-height: 1.65;
}

.partners-orbit-head-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

.partners-orbit-stat {
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(4, 12, 28, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.partners-orbit-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 4px;
}

.partners-orbit-stat span {
  font-size: 0.78rem;
  color: rgba(186, 214, 255, 0.82);
}

.partners-orbit-cta {
  grid-column: 1 / -1;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #0d6936;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 12px 28px rgba(13, 105, 54, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
}

.partners-orbit-cta:hover {
  background: #128a48;
  color: #fff;
  transform: translateY(-2px);
}

.partners-orbit-cta i,
.partners-orbit-cta:hover i {
  background: transparent;
  color: #ffffff;
  box-shadow: none;
}

.partners-orbit-stage {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 560px;
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(8, 16, 32, 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
  overflow: visible;
}

.brand-orbit-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 20px;
  background: rgba(4, 12, 28, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
}

.brand-orbit-label {
  margin: 0 0 8px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(186, 214, 255, 0.72);
}

.brand-orbit-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(232, 238, 247, 0.88);
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.brand-orbit-tab i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(13, 105, 54, 0.22);
  color: #7dcea0;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.brand-orbit-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.brand-orbit-tab.active {
  background: #0d6936;
  color: #ffffff;
  border-color: #0d6936;
  box-shadow: 0 10px 22px rgba(13, 105, 54, 0.35);
}

.brand-orbit-tab.active i {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.brand-orbit-tab--fire.active {
  background: #0d6936;
  color: #ffffff;
  border-color: #0d6936;
}

.brand-orbit-tab--fire.active i {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.partners-orbit-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  overflow: visible;
}

.brand-orbit {
  --orbit-size: 520px;
  --orbit-radius: 200px;
  position: relative;
  width: min(var(--orbit-size), 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: min(var(--orbit-size), 70vw);
  margin: 0 auto;
  overflow: visible;
}

.brand-orbit-glow {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(13, 105, 54, 0.28) 0%, transparent 68%),
    radial-gradient(circle, rgba(59, 139, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: brandOrbitPulse 6s ease-in-out infinite;
}

.brand-orbit::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(125, 206, 160, 0.32);
  pointer-events: none;
}

.brand-orbit::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.brand-orbit-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: brandOrbitSpin 48s linear infinite;
  will-change: transform;
}

.brand-orbit:hover .brand-orbit-track {
  animation-play-state: paused;
}

.brand-orbit-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  transform: rotate(calc(var(--i, 0) * 1deg)) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--i, 0) * -1deg));
  z-index: 3;
}

.brand-orbit-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(19, 38, 75, 0.08);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(255, 255, 255, 0.08);
  animation: brandOrbitCounter 48s linear infinite;
  will-change: transform;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.brand-orbit:hover .brand-orbit-item-inner {
  animation-play-state: paused;
}

.brand-orbit-item:hover .brand-orbit-item-inner {
  transform: scale(1.08);
  box-shadow:
    0 16px 32px rgba(13, 105, 54, 0.3),
    0 0 0 5px rgba(125, 206, 160, 0.28);
}

.brand-orbit-item img {
  max-width: 92%;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.brand-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 20px 16px;
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(19, 38, 75, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 0 12px rgba(13, 105, 54, 0.1),
    0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.brand-orbit-core-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0d6936;
  color: #fff;
  font-size: 0.95rem;
}

.brand-orbit-core-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.brand-orbit-core-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(186, 214, 255, 0.88);
}

@keyframes brandOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes brandOrbitCounter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes brandOrbitPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-orbit-track,
  .brand-orbit-item-inner,
  .brand-orbit-glow {
    animation: none !important;
  }
}

@media (max-width: 991.98px) {
  .partners-orbit-head {
    grid-template-columns: 1fr;
  }

  .partners-orbit-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .brand-orbit-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    height: auto;
  }

  .brand-orbit-label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
  }

  .brand-orbit-tab {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    font-size: 0.75rem;
    text-align: center;
  }

  .partners-orbit-visual {
    min-height: 460px;
  }

  .brand-orbit {
    --orbit-size: 440px;
    --orbit-radius: 168px;
  }

  .brand-orbit-item {
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
  }

  .brand-orbit-item img {
    max-height: 48px;
  }
}

@media (max-width: 575.98px) {
  .partners-orbit-section {
    padding: 48px 0 52px;
  }

  .brand-orbit-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partners-orbit-visual {
    min-height: 400px;
  }

  .brand-orbit {
    --orbit-size: 340px;
    --orbit-radius: 128px;
  }

  .brand-orbit-item {
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
  }

  .brand-orbit-item-inner {
    padding: 6px;
    border-radius: 16px;
  }

  .brand-orbit-item img {
    max-height: 42px;
  }

  .brand-orbit-core {
    width: 140px;
    height: 140px;
    padding: 12px 10px;
  }

  .brand-orbit-core-title {
    font-size: 0.8rem;
  }

  .partners-orbit-head-stats {
    grid-template-columns: 1fr;
  }
}

.mission-shell {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 560px;
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: none;
}

.mission-features {
  position: relative;
  background: #13264b;
  padding: 56px 28px 56px max(0.75rem, calc(50vw - 570px));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
}

.mission-features-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mf-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.9;
  animation: mfOrbFloat 14s ease-in-out infinite;
}

.mf-orb-a {
  width: 340px;
  height: 340px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(59, 139, 255, 0.45) 0%, rgba(19, 38, 75, 0.08) 45%, transparent 70%);
  animation-duration: 16s;
}

.mf-orb-b {
  width: 280px;
  height: 280px;
  right: 8%;
  bottom: -60px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.32) 0%, rgba(13, 105, 54, 0.06) 50%, transparent 70%);
  animation-duration: 18s;
  animation-delay: -4s;
}

.mf-orb-c {
  width: 180px;
  height: 180px;
  top: 42%;
  left: 48%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.22) 0%, transparent 68%);
  animation-duration: 12s;
  animation-delay: -7s;
}

.mf-beam {
  position: absolute;
  top: -20%;
  left: 35%;
  width: 2px;
  height: 140%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(61, 90, 138, 0.35) 35%,
    rgba(56, 189, 248, 0.45) 50%,
    rgba(61, 90, 138, 0.2) 65%,
    transparent 100%
  );
  transform: rotate(18deg);
  filter: blur(8px);
  opacity: 0.55;
}

.mf-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

@keyframes mfOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(18px, -14px, 0) scale(1.06); }
  70% { transform: translate3d(-12px, 10px, 0) scale(0.96); }
}

.mission-features-inner {
  width: 100%;
  max-width: 720px;
  margin-left: 0;
}

.brand-stage {
  position: relative;
  z-index: 1;
  padding: 26px 24px 28px;
  border-radius: 28px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(19, 38, 75, 0.06) 100%);
  border: 1px solid rgba(148, 197, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 80px -20px rgba(19, 38, 75, 0.35);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.brand-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, transparent 28%, transparent 72%, rgba(56, 189, 248, 0.08) 100%);
  opacity: 0.9;
}

.brand-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.65), transparent);
  pointer-events: none;
}

@media (min-width: 1400px) {
  .mission-features {
    padding-left: max(0.75rem, calc(50vw - 660px));
  }
}

.mission-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(61, 90, 138, 0.22) 1px, transparent 1px),
    linear-gradient(rgba(19, 38, 75, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 38, 75, 0.06) 1px, transparent 1px);
  background-size: 22px 22px, 56px 56px, 56px 56px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 90% 80% at 40% 45%, #000 10%, transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}


.brand-cat-head {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}

.brand-cat-label {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(186, 214, 255, 0.78);
}

.brand-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(4, 12, 28, 0.45);
  border: 1px solid rgba(148, 197, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) inset;
}

.brand-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(226, 232, 240, 0.78);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.brand-cat-tab i {
  font-size: 0.78rem;
  opacity: 0.85;
}

.brand-cat-tab:hover {
  border-color: rgba(61, 90, 138, 0.35);
  background: rgba(19, 38, 75, 0.14);
  color: #fff;
}

.brand-cat-tab.active {
  background: linear-gradient(145deg, #1c3a6e, #13264b);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 10px 24px rgba(19, 38, 75, 0.45);
}

.brand-panel-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding: 12px 4px 14px;
  border-bottom: 1px solid rgba(148, 197, 255, 0.18);
}

.brand-panel-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-shadow: 0 0 28px rgba(59, 139, 255, 0.35);
}

.brand-panel-count {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(186, 214, 255, 0.85);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(19, 38, 75, 0.16);
  border: 1px solid rgba(61, 90, 138, 0.25);
}

.brand-panels {
  position: relative;
  z-index: 1;
  min-height: 300px;
}

.brand-panel {
  display: none;
  animation: brandPanelFade 0.35s ease;
}

.brand-panel.active {
  display: block;
}

@keyframes brandPanelFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  padding-top: 16px;
}

.brand-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(0, 0, 0, 0.22);
  cursor: default;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.brand-logo-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 36px rgba(19, 38, 75, 0.28);
  border-color: rgba(19, 38, 75, 0.25);
}

.brand-logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: center;
  filter: none;
  pointer-events: none;
  user-select: none;
}

.brand-wm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1.15;
}

.brand-wm .wm-text {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1c3a6e;
}

.brand-wm .wm-text b {
  font-weight: 800;
}

.brand-wm .wm-ico,
.brand-wm .wm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-wm .wm-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
}

.brand-wm--digit .wm-text {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0d6936;
  text-transform: lowercase;
}

.brand-wm--star .wm-ico {
  color: #e63946;
  font-size: 1rem;
}

.brand-wm--star .wm-text b {
  color: #e63946;
}

.brand-wm--care .wm-badge {
  background: linear-gradient(145deg, #00b4c4, #008a96);
}

.brand-wm--care .wm-text {
  color: #0f766e;
}

.brand-wm--care .wm-text b {
  color: #0d6936;
}

.brand-wm--niva .wm-text {
  color: #0f766e;
}

.brand-wm--niva .wm-text b {
  color: #0d6936;
}

.brand-wm--aditya .wm-text {
  font-size: 0.82rem;
  color: #7f1d1d;
}

.brand-wm--aditya .wm-text b {
  color: #c8102e;
}

.brand-wm--manipal .wm-text {
  font-size: 0.84rem;
  color: #0c4a6e;
}

.brand-wm--manipal .wm-accent {
  color: #1c3a6e;
  font-weight: 800;
}

.brand-wm--reliance .wm-text {
  font-size: 0.84rem;
  color: #1e3a5f;
}

.brand-wm--reliance .wm-text b {
  color: #00529b;
}

.brand-wm--hdfc .wm-text {
  color: #003399;
}

.brand-wm--hdfc .wm-text b {
  color: #0047ab;
}

.brand-wm--icici .wm-text {
  color: #1c3a6e;
}

.brand-wm--icici .wm-text b {
  color: #f58220;
}

.brand-wm--max .wm-text {
  color: #0f766e;
}

.brand-wm--max .wm-text b {
  color: #009688;
}

.brand-wm--sbi .wm-text {
  color: #1e3a5f;
}

.brand-wm--sbi .wm-text b {
  color: #224f9a;
}

.brand-wm--bajaj .wm-text {
  font-size: 0.82rem;
  color: #1e3a5f;
}

.brand-wm--bajaj .wm-text b {
  color: #0e1c38;
}

.brand-wm--kotak .wm-text {
  color: #1c3a6e;
}

.brand-wm--kotak .wm-text b {
  color: #ed1c24;
}

.brand-wm--tata .wm-text {
  color: #13264b;
}

.brand-wm--tata .wm-text b {
  color: #13264b;
}

.brand-wm--pnb .wm-text {
  color: #1e3a5f;
}

.brand-wm--pnb .wm-text b {
  color: #00467f;
}

.brand-wm--iffco .wm-text {
  font-size: 0.84rem;
  color: #14532d;
}

.brand-wm--iffco .wm-text b {
  color: #228b22;
}

.brand-wm--chola .wm-text {
  color: #1e3a5f;
}

.brand-wm--chola .wm-text b {
  color: #c2410c;
}

.brand-wm--navi .wm-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #4f46e5;
  text-transform: lowercase;
}

.brand-wm--acko .wm-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #162a4f;
  text-transform: lowercase;
}

.brand-wm--newindia .wm-text {
  color: #7f1d1d;
}

.brand-wm--newindia .wm-text b {
  color: #b91c1c;
}

.brand-wm--canara .wm-text {
  font-size: 0.84rem;
  color: #1e3a5f;
}

.brand-wm--canara .wm-text b {
  color: #0369a1;
}

@media (max-width: 1200px) {
  .brand-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .brand-logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .brand-logo-card {
    min-height: 76px;
    padding: 12px 10px;
    border-radius: 14px;
  }

  .brand-logo-img {
    max-height: 42px;
  }

  .brand-wm .wm-text {
    font-size: 0.78rem;
  }

  .brand-wm--digit .wm-text,
  .brand-wm--navi .wm-text,
  .brand-wm--acko .wm-text {
    font-size: 1.05rem;
  }

  .brand-cat-tab {
    padding: 8px 11px;
    font-size: 0.74rem;
  }

  .brand-panel-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .brand-panels {
    min-height: 240px;
  }
}

.mission-panel {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #e8ecf3 55%, #eaf2ff 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 64px clamp(28px, 5vw, 72px) 64px clamp(36px, 5vw, 64px);
  overflow: hidden;
  border-radius: 100px 0 0 100px;
  margin-left: -48px;
  z-index: 2;
  box-shadow: none;
}

.mission-panel-arrow {
  position: absolute;
  right: 4%;
  bottom: -12%;
  width: min(320px, 42vw);
  height: min(320px, 42vw);
  opacity: 0.1;
  background: linear-gradient(145deg, #13264b, #3d5a8a);
  clip-path: polygon(50% 0%, 100% 70%, 72% 70%, 72% 100%, 28% 100%, 28% 70%, 0% 70%);
  pointer-events: none;
  transform: rotate(-8deg);
}

.mission-panel-inner {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.mission-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.mission-text {
  margin: 0 0 28px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--brand-text-muted);
}

.mission-text strong {
  color: var(--brand-primary);
  font-weight: 800;
}

.mission-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(19, 38, 75, 0.12);
  border-bottom: 1px solid rgba(19, 38, 75, 0.12);
}

.mission-stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brand-navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mission-stats span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.mission-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #1d4ed8 0%, #13264b 100%);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(19, 38, 75, 0.32);
  transition: var(--transition);
}

.mission-cta i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mission-cta:hover {
  gap: 14px;
  transform: translateY(-2px);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(19, 38, 75, 0.42);
}

@media (max-width: 991px) {
  .mission-shell {
    grid-template-columns: 1fr;
  }

  .mission-panel {
    margin-left: 0;
    border-radius: 0;
    padding: 48px 24px;
    order: -1;
    justify-content: center;
  }

  .mission-panel-inner {
    max-width: 560px;
    width: 100%;
  }

  .mission-features {
    padding: 36px 20px 44px;
    justify-content: center;
  }

  .mission-features-inner {
    max-width: 640px;
    margin: 0 auto;
  }

  .brand-stage {
    padding: 20px 16px 22px;
    border-radius: 22px;
  }
}

@media (max-width: 575px) {
  .mission-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mission-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   BECOME AN AGENT — Visual-first premium B2B (graphics + motion)
   ========================================================================== */

.agent-join-section {
  position: relative;
  padding: 72px 0 80px;
  overflow: hidden;
  background: #ffffff;
  color: #13264b;
}

.agent-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.agent-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
  mix-blend-mode: multiply;
  animation: agentBgDrift 28s ease-in-out infinite alternate;
}

.agent-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.agent-glow-a {
  width: 560px;
  height: 560px;
  top: -200px;
  left: -140px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.14) 0%, transparent 70%);
  animation: agentGlowDrift 12s ease-in-out infinite alternate;
}

.agent-glow-b {
  width: 480px;
  height: 480px;
  bottom: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(19, 38, 75, 0.1) 0%, transparent 70%);
  animation: agentGlowDrift 15s ease-in-out 0.8s infinite alternate-reverse;
}

.agent-glow-c {
  width: 280px;
  height: 280px;
  top: 42%;
  left: 46%;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.1) 0%, transparent 70%);
  animation: agentGlowDrift 10s ease-in-out 0.4s infinite alternate;
}

.agent-beam {
  position: absolute;
  width: 2px;
  height: 140%;
  top: -20%;
  background: linear-gradient(180deg, transparent, rgba(13, 105, 54, 0.22), transparent);
  filter: blur(1px);
  animation: agentBeamSweep 9s linear infinite;
}

.agent-beam-a { left: 18%; animation-delay: 0s; }
.agent-beam-b { left: 78%; animation-delay: 3.5s; opacity: 0.6; }
.agent-beam-c { left: 48%; animation-delay: 1.8s; opacity: 0.45; width: 1px; }

.agent-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d6936;
  box-shadow: 0 0 12px rgba(13, 105, 54, 0.45);
  animation: agentParticleFloat 5.5s ease-in-out var(--d) infinite;
}

.agent-orbit {
  position: absolute;
  right: -12%;
  top: -6%;
  width: min(640px, 58vw);
  height: auto;
  opacity: 0.28;
  animation: agentOrbitSpin 40s linear infinite;
}

.agent-orbit-ring {
  stroke: rgba(13, 105, 54, 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 8 16;
}

.agent-orbit-ring--b {
  stroke: rgba(19, 38, 75, 0.16);
  stroke-dasharray: 2 20;
  animation: agentOrbitDash 22s linear infinite reverse;
}

.agent-orbit-ring--c {
  stroke: rgba(13, 105, 54, 0.14);
  stroke-dasharray: 1 28;
}

.agent-orbit-dot { fill: #0d6936; }
.agent-orbit-dot--b { fill: #13264b; opacity: 0.55; }

@keyframes agentBgDrift {
  0% { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, 1%); }
}

@keyframes agentGlowDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(28px, -20px) scale(1.08); }
}

@keyframes agentBeamSweep {
  0% { transform: translateY(-10%) rotate(8deg); opacity: 0; }
  15% { opacity: 0.7; }
  50% { opacity: 0.35; }
  85% { opacity: 0.6; }
  100% { transform: translateY(10%) rotate(8deg); opacity: 0; }
}

@keyframes agentParticleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  50% { transform: translateY(-18px) scale(1.35); opacity: 1; }
}

@keyframes agentOrbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes agentOrbitDash {
  to { stroke-dashoffset: -360; }
}

.agent-inner {
  position: relative;
  z-index: 1;
}

/* Top ticker */
.agent-ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 12px 0;
  border-top: 1px solid rgba(19, 38, 75, 0.08);
  border-bottom: 1px solid rgba(19, 38, 75, 0.08);
  background: rgba(13, 105, 54, 0.04);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.agent-ticker-track {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: agentTicker 28s linear infinite;
}

.agent-ticker-track span {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0d6936;
  white-space: nowrap;
}

@keyframes agentTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Cinema split */
.agent-cinema {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.2fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  min-height: 620px;
}

.agent-cinema-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.agent-join-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #13264b;
}

.agent-join-title span {
  color: #0d6936;
  -webkit-text-fill-color: #0d6936;
}

.agent-join-lead {
  margin: 0;
  max-width: 36ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #13264b;
  opacity: 1;
}

.agent-join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.agent-join-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  padding: 16px 28px;
  border-radius: var(--radius-full);
  background: #0d6936;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 14px 36px rgba(13, 105, 54, 0.4);
  transition: background 0.25s ease, transform 0.25s ease, gap 0.25s ease;
}

.agent-join-cta:hover {
  gap: 14px;
  background: #128a48;
  transform: translateY(-2px);
  color: #fff;
}

.agent-join-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: #13264b;
  background: #ffffff;
  border: 1.5px solid #13264b;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.agent-join-secondary:hover {
  color: #ffffff;
  background: #13264b;
  border-color: #13264b;
  transform: translateY(-1px);
}

/* Who is eligible */
.agent-eligible {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f3f5f8;
  border: 1px solid rgba(19, 38, 75, 0.1);
}

.agent-eligible-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: #13264b;
  line-height: 1.2;
}

.agent-eligible-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.agent-eligible-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: #0d6936;
  border: 1.5px solid #0d6936;
  box-shadow: 0 4px 12px rgba(13, 105, 54, 0.22);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.agent-eligible-tags span:hover {
  background: #0a552b;
  border-color: #0a552b;
  box-shadow: 0 6px 16px rgba(13, 105, 54, 0.3);
  transform: translateY(-1px);
}

.agent-eligible-tags span:last-child {
  background: #ffffff;
  border-color: rgba(13, 105, 54, 0.45);
  color: #0d6936;
  box-shadow: none;
}

.agent-eligible-tags span:last-child:hover {
  background: rgba(13, 105, 54, 0.08);
  border-color: #0d6936;
  box-shadow: none;
  transform: translateY(-1px);
}

/* Visual stage mosaic */
.agent-cinema-stage {
  position: relative;
  min-height: 580px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1.1fr 0.9fr;
  gap: 14px;
  padding: 14px;
}

.agent-stage-frame {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(19, 38, 75, 0.1);
  background:
    linear-gradient(145deg, rgba(13, 105, 54, 0.06), transparent 42%),
    #f8fafc;
  box-shadow:
    0 24px 60px rgba(19, 38, 75, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 0;
  pointer-events: none;
}

.agent-stage-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 2px dashed rgba(13, 105, 54, 0.58);
  animation: agentFrameDash 18s linear infinite;
}

@keyframes agentFrameDash {
  to { stroke-dashoffset: -120; }
}

.agent-orb {
  position: absolute;
  left: 42%;
  top: 34%;
  z-index: 5;
  width: 168px;
  height: 168px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.agent-shot {
  z-index: 2;
}

.agent-orb-halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(13, 105, 54, 0.35);
  animation: agentHaloPulse 3.2s ease-out infinite;
}

.agent-orb-halo--b {
  inset: -24px;
  border-color: rgba(13, 105, 54, 0.2);
  animation-delay: 0.6s;
}

.agent-orb-halo--c {
  inset: -40px;
  border-color: rgba(19, 38, 75, 0.12);
  animation-delay: 1.2s;
}

@keyframes agentHaloPulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.18); opacity: 0; }
}

.agent-orb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.agent-orb-track {
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(19, 38, 75, 0.12);
  stroke-width: 8;
}

.agent-orb-arc {
  fill: none;
  stroke: #0d6936;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 490;
  stroke-dashoffset: 490;
  animation: agentOrbFill 2s ease-out 0.2s forwards, agentOrbSpin 12s linear 2.2s infinite;
  filter: drop-shadow(0 0 10px rgba(13, 105, 54, 0.35));
}

.agent-orb-arc-soft {
  fill: none;
  stroke: rgba(13, 105, 54, 0.22);
  stroke-width: 4;
  stroke-dasharray: 8 14;
  animation: agentOrbitDash 10s linear infinite;
}

@keyframes agentOrbFill {
  to { stroke-dashoffset: 55; }
}

@keyframes agentOrbSpin {
  to { stroke-dashoffset: -435; }
}

.agent-orb-core {
  position: relative;
  z-index: 2;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f3f5f8 70%);
  border: 1px solid rgba(13, 105, 54, 0.35);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.75),
    0 18px 40px rgba(19, 38, 75, 0.18),
    inset 0 0 18px rgba(13, 105, 54, 0.06);
  /* animation: agentOrbBob 4s ease-in-out infinite; */
}

.agent-orb-core strong {
  font-family: var(--font-head);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  color: #0d6936;
  text-shadow: none;
}

.agent-orb-core span {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #13264b;
}

@keyframes agentOrbBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.agent-orb-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0d6936;
  box-shadow: 0 0 10px rgba(13, 105, 54, 0.55);
}

.agent-orb-spark--a {
  top: 8%;
  right: 18%;
  animation: agentSpark 2.8s ease-in-out infinite;
}

.agent-orb-spark--b {
  bottom: 14%;
  left: 10%;
  animation: agentSpark 3.4s ease-in-out 0.5s infinite;
}

.agent-orb-spark--c {
  top: 46%;
  right: -2%;
  animation: agentSpark 3s ease-in-out 1s infinite;
}

@keyframes agentSpark {
  0%, 100% { transform: scale(0.6); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 1; }
}

.agent-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(19, 38, 75, 0.1);
  box-shadow: 0 18px 44px rgba(19, 38, 75, 0.14);
  background: #f3f5f8;
}

.agent-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-shot:hover img {
  transform: scale(1.06);
}

.agent-shot--hero {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 560px;
}

.agent-shot--hero img {
  min-height: 560px;
}

.agent-shot--deal,
.agent-shot--earn {
  min-height: 250px;
}

.agent-shot--deal img,
.agent-shot--earn img {
  min-height: 250px;
}

.agent-shot-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -30%;
  background: linear-gradient(180deg, transparent, rgba(13, 105, 54, 0.14), transparent);
  animation: agentScan 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.agent-shot-glow {
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 55%;
  background: radial-gradient(ellipse at center, rgba(13, 105, 54, 0.28), transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: agentShotGlow 3.5s ease-in-out infinite;
}

@keyframes agentShotGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

@keyframes agentScan {
  0% { top: -30%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.6; }
  100% { top: 105%; opacity: 0; }
}

.agent-join-live {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #0d6936;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.agent-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: agentLivePulse 1.8s ease-out infinite;
}

@keyframes agentLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.agent-shot figcaption:not(.agent-join-live) {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(19, 38, 75, 0.1);
  backdrop-filter: blur(8px);
}

.agent-shot figcaption strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0d6936;
}

.agent-shot figcaption span {
  font-size: 0.78rem;
  font-weight: 600;
  color: #13264b;
}

/* Floating HUD cards */
.agent-hud {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  animation: agentHudFloat 5s ease-in-out infinite;
}

.agent-hud i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(13, 105, 54, 0.12);
  color: #0d6936;
  font-size: 0.95rem;
}

.agent-hud strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: #13264b;
  line-height: 1.1;
}

.agent-hud span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #13264b;
  /* opacity: 0.75; */
}

.agent-hud--a {
  top: 8%;
  right: 4%;
  animation-delay: 0s;
}

.agent-hud--b {
  bottom: 38%;
  left: -2%;
  animation-delay: 0.8s;
}

.agent-hud--c {
  bottom: 6%;
  right: 18%;
  animation-delay: 1.4s;
}

.agent-hud--d {
  top: 46%;
  right: -4%;
  animation-delay: 0.4s;
}

@keyframes agentHudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Bottom benefit strip */
.agent-benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.agent-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(19, 38, 75, 0.1);
  box-shadow: 0 10px 28px rgba(19, 38, 75, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.agent-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 105, 54, 0.35);
  box-shadow: 0 16px 34px rgba(13, 105, 54, 0.12);
}

.agent-benefit i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(13, 105, 54, 0.1);
  color: #0d6936;
  font-size: 1rem;
  flex-shrink: 0;
}

.agent-benefit span {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: #13264b;
  line-height: 1.3;
}

@media (max-width: 991.98px) {
  .agent-cinema {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .agent-cinema-copy {
    text-align: center;
    align-items: center;
  }

  .agent-join-lead {
    max-width: 42ch;
  }

  .agent-join-actions {
    justify-content: center;
  }

  .agent-eligible {
    text-align: center;
  }

  .agent-eligible-tags {
    justify-content: center;
  }

  .agent-benefit-strip {
    grid-template-columns: 1fr 1fr;
  }

  .agent-cinema-stage {
    min-height: 480px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 200px;
  }

  .agent-shot--hero {
    grid-column: 1 / span 2;
    grid-row: 1;
    min-height: 280px;
  }

  .agent-shot--hero img {
    min-height: 280px;
  }

  .agent-orb {
    width: 140px;
    height: 140px;
    left: 50%;
    top: 42%;
  }

  .agent-orb-core {
    width: 100px;
    height: 100px;
  }

  .agent-orb-core strong {
    font-size: 1.9rem;
  }

  .agent-hud--b {
    left: 4%;
  }

  .agent-hud--d {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .agent-join-section {
    padding: 52px 0 56px;
  }

  .agent-cinema-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .agent-shot--hero,
  .agent-shot--deal,
  .agent-shot--earn {
    grid-column: 1;
    grid-row: auto;
    min-height: 220px;
  }

  .agent-shot--hero img,
  .agent-shot--deal img,
  .agent-shot--earn img {
    min-height: 220px;
  }

  .agent-orb {
    top: 18%;
    width: 120px;
    height: 120px;
  }

  .agent-hud--a { top: 4%; right: 2%; }
  .agent-hud--b { display: none; }
  .agent-hud--c { bottom: 28%; right: 4%; }

  .agent-benefit-strip {
    grid-template-columns: 1fr;
  }

  .agent-eligible {
    width: 100%;
  }

  .agent-join-cta,
  .agent-join-secondary {
    width: 100%;
  }

  .agent-orbit,
  .agent-beam {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-bg-photo,
  .agent-glow,
  .agent-beam,
  .agent-particle,
  .agent-orbit,
  .agent-orbit-ring--b,
  .agent-orb-halo,
  .agent-orb-arc,
  .agent-orb-arc-soft,
  .agent-orb-core,
  .agent-orb-spark,
  .agent-shot-scan,
  .agent-shot-glow,
  .agent-live-dot,
  .agent-hud,
  .agent-ticker-track,
  .agent-shot img {
    animation: none !important;
    transition: none !important;
  }

  .agent-orb-arc {
    stroke-dashoffset: 55;
  }
}

body.theme-dark .agent-join-section {
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(61, 90, 138, 0.2) 0%, transparent 55%),
    linear-gradient(180deg, #162a4f 0%, #1c3a6e 100%) !important;
}


.brand-pnb .partner-chip-icon {
  background: #003366 !important;
}

@media (max-width: 991px) {
  .hub-quick-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hub-quick {
    min-height: 120px;
  }

  .hub-quick-img {
    width: 60px;
    height: 60px;
  }

  .hub-tab-txt small {
    display: none;
  }

  .hub-pay-fields {
    grid-template-columns: 1fr;
  }

  .platform-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-trust-item:nth-child(2)::after {
    display: none;
  }

  .cf-products-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .cf-plan-tabs {
    gap: 8px;
  }

  .cf-plan-tab {
    padding: 10px 14px;
    font-size: 0.84rem;
  }
}

@media (max-width: 575px) {
  .platform-hub {
    border-radius: 22px;
  }

  .platform-hub-tabs {
    padding: 10px 10px 0;
    gap: 4px;
  }

  .hub-tab {
    padding: 12px 8px 14px;
    gap: 8px;
  }

  .hub-tab-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.8rem;
  }

  .hub-tab-txt strong {
    font-size: 0.78rem;
  }

  .platform-hub-body {
    padding: 18px 14px 18px;
  }

  .hub-quick-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .hub-quick {
    min-height: 118px;
    padding: 12px 8px 10px;
    border-radius: 14px;
  }

  .hub-quick-img {
    width: 56px;
    height: 56px;
  }

  .hub-buy-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-main-cta {
    justify-content: center;
  }

  .hub-buy-hint {
    justify-content: center;
  }

  .platform-trust-item {
    padding: 14px 10px;
    gap: 8px;
  }

  .platform-trust-item:not(:last-child)::after {
    display: none;
  }

  .trust-ico {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .cf-products-grid {
    grid-template-columns: 1fr;
  }

  .cf-plan-tabs {
    width: 100%;
  }

  .cf-plan-tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .cf-insurance-card {
    min-height: 260px;
  }

  .cf-card-content {
    max-width: 55%;
  }

  .cf-card-asset {
    max-height: 130px;
  }
}

/* ==========================================================================
   HEALTH INSURANCE — Clean equal pathways grid
   ========================================================================== */

.hi-section {
  position: relative;
  padding: 64px 0 72px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 10px;
  border-radius: 10px;
}

.hi-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hi-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.hi-orb-a {
  width: 380px;
  height: 380px;
  top: -100px;
  left: -60px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.1) 0%, transparent 70%);
  animation: hiOrbDrift 12s ease-in-out infinite alternate;
}

.hi-orb-b {
  width: 320px;
  height: 320px;
  bottom: -80px;
  right: -40px;
  background: radial-gradient(circle, rgba(19, 38, 75, 0.1) 0%, transparent 70%);
  animation: hiOrbDrift 14s ease-in-out 1s infinite alternate-reverse;
}

.hi-grid-fade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(19, 38, 75, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 38, 75, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, #000 15%, transparent 75%);
  opacity: 0.45;
}

@keyframes hiOrbDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(18px, -14px) scale(1.05); }
}

.hi-inner {
  position: relative;
  z-index: 1;
}

.hi-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 32px;
}

.hi-head .section-tag-pill {
  margin-bottom: 14px;
}

.hi-sub {
  margin: 12px 0 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #13264b;
}

/* Full-bleed deck — same pattern as Motor mi-deck */
.hi-deck {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.hi-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hi-marquee {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.hi-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  padding: 8px 16px 14px;
  will-change: transform;
  animation: hiMarqueeSlide 48s linear infinite;
}

.hi-slider.is-paused .hi-grid,
.hi-slider:hover .hi-grid,
.hi-slider:focus-within .hi-grid {
  animation-play-state: paused;
}

@keyframes hiMarqueeSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hi-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 560px;
  width: 560px;
  max-width: 560px;
  min-height: 260px;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  color: #13264b;
  background: #ffffff;
  isolation: isolate;
  border: 1px solid #13264b;
  box-shadow: 0 8px 28px -18px rgba(19, 38, 75, 0.35);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.4s ease;
}

.hi-tile:hover {
  color: #13264b;
  transform: translateY(-4px);
  border-color: #0d6936;
  box-shadow: 0 18px 40px -20px rgba(19, 38, 75, 0.4);
}

.hi-tile-body {
  position: relative;
  z-index: 2;
  flex: 1 1 52%;
  min-width: 0;
  padding: 24px 22px 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
}

.hi-tile-media {
  position: relative;
  z-index: 1;
  flex: 0 0 48%;
  width: 48%;
  align-self: stretch;
  min-height: 260px;
  overflow: hidden;
  background: #e8eef5;
}

.hi-tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hi-tile:hover .hi-tile-media img {
  transform: scale(1.06);
}

.hi-tile-veil {
  display: none;
}

.hi-tile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(13, 105, 54, 0.1);
  border: 1px solid rgba(13, 105, 54, 0.28);
  color: #0d6936;
}

.hi-tile-title {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.28rem, 1.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #13264b;
}

.hi-tile-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3a4a66;
  max-width: 28ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hi-tile-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(19, 38, 75, 0.12);
}

.hi-tile-price {
  font-size: 0.95rem;
  color: #3a4a66;
}

.hi-tile-price strong {
  color: #0d6936;
  font-weight: 800;
  font-size: 1.12rem;
}

.hi-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0d6936;
  border: 1px solid #0d6936;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hi-tile-cta i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hi-tile:hover .hi-tile-cta {
  background: #13264b;
  border-color: #13264b;
}

.hi-tile:hover .hi-tile-cta i {
  transform: translateX(4px);
}

.hi-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
  margin-bottom: 8px;
  padding-top: 24px;
  border-top: 1px solid #13264b;
}

.hi-trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #13264b;
  background: #ffffff;
  border: 1px solid #13264b;
}

.hi-trust-bar i {
  color: #0d6936;
  font-size: 1rem;
}

.hi-section .hi-tile {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.4s ease;
}

.hi-section.is-revealed .hi-tile {
  opacity: 1;
  transform: none;
}

.hi-section.is-revealed .hi-tile--individual { transition-delay: 0.06s; }
.hi-section.is-revealed .hi-tile--family { transition-delay: 0.12s; }
.hi-section.is-revealed .hi-tile--portability { transition-delay: 0.18s; }
.hi-section.is-revealed .hi-tile--topup { transition-delay: 0.24s; }

.hi-section.is-revealed .hi-tile:hover {
  transform: translateY(-4px);
}

@media (max-width: 1199px) {
  .hi-tile {
    flex-basis: 500px;
    width: 500px;
    max-width: 500px;
    min-height: 240px;
  }

  .hi-grid {
    animation-duration: 42s;
  }
}

@media (max-width: 991px) {
  .hi-section {
    padding: 48px 0 56px;
  }

  .hi-deck {
    padding: 0 8px;
  }

  .hi-slider {
    gap: 8px;
  }

  .hi-slider-btn {
    width: 38px;
    height: 38px;
  }

  .hi-tile {
    flex-basis: 440px;
    width: 440px;
    max-width: 440px;
    min-height: 220px;
  }

  .hi-tile-body {
    padding: 20px 16px 18px 20px;
  }

  .hi-tile-title {
    font-size: 1.25rem;
  }

  .hi-tile-desc {
    font-size: 0.9rem;
  }

  .hi-grid {
    animation-duration: 36s;
    gap: 16px;
  }
}

@media (max-width: 675px) {
  .hi-deck {
    padding: 0 4px;
  }

  .hi-slider-btn {
    width: 34px;
    height: 34px;
  }

  .hi-tile {
    flex-direction: column;
    flex-basis: 280px;
    width: 280px;
    max-width: 280px;
    min-height: 0;
  }

  .hi-tile-body {
    flex: 1 1 auto;
    padding: 18px 16px 16px;
    order: 2;
  }

  .hi-tile-media {
    position: relative;
    flex: 0 0 160px;
    width: 100%;
    height: 160px;
    min-height: 160px;
    order: 1;
  }

  .hi-tile-desc {
    max-width: none;
    font-size: 0.9rem;
    -webkit-line-clamp: 2;
  }

  .hi-tile-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hi-tile-title {
    font-size: 1.2rem;
  }

  .hi-tile-cta {
    font-size: 0.88rem;
    padding: 9px 16px;
  }

  .hi-grid {
    animation-duration: 28s;
    gap: 12px;
  }

  .hi-head {
    margin-bottom: 22px;
  }

  .hi-trust-bar {
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    justify-content: center;
  }

  .hi-trust-bar span {
    flex: 1 1 calc(50% - 8px);
    font-size: 0.95rem;
    padding: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-orb,
  .hi-section .hi-tile,
  .hi-tile-media img {
    animation: none !important;
    transition: none !important;
  }

  .hi-grid {
    animation: none !important;
    transform: none !important;
  }

  .hi-section .hi-tile {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   LIFE INSURANCE — Compact dark expand rail
   ========================================================================== */

.li-section {
  position: relative;
  padding: 64px 0 68px;
  overflow: hidden;
  background: #13264b;
  color: #ffffff;
  margin: 0 10px;
  border-radius: 10px;
}

.li-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.li-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.li-glow-a {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -80px;
  background: radial-gradient(circle, rgba(28, 58, 110, 0.26) 0%, transparent 68%);
  animation: liGlowDrift 14s ease-in-out infinite alternate;
}

.li-glow-b {
  width: 320px;
  height: 320px;
  bottom: -100px;
  right: -60px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.14) 0%, transparent 68%);
  animation: liGlowDrift 16s ease-in-out 1s infinite alternate-reverse;
}

.li-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.li-star {
  fill: rgba(186, 230, 253, 0.85);
  animation: liTwinkle 3.5s ease-in-out infinite;
}

.li-star:nth-child(2) { animation-delay: 0.5s; }
.li-star:nth-child(3) { animation-delay: 1s; }
.li-star:nth-child(4) { animation-delay: 1.4s; }
.li-star:nth-child(5) { animation-delay: 0.7s; }
.li-star:nth-child(6) { animation-delay: 1.8s; }

.li-star-line {
  fill: none;
  stroke: rgba(125, 211, 252, 0.18);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  animation: liLineDash 18s linear infinite;
}

@keyframes liGlowDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -18px) scale(1.06); }
}

@keyframes liTwinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes liLineDash {
  to { stroke-dashoffset: -120; }
}

.li-inner {
  position: relative;
  z-index: 1;
}

.li-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}

.li-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #13264b;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: none;
}

.li-tag svg,
.li-tag i {
  color: #0d6936;
  flex-shrink: 0;
}

.li-tag svg path {
  stroke: #0d6936;
}

.li-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
}

.li-title span {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #0d6936;
  color: #0d6936;
}

.li-sub {
  margin: 12px 0 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #ffffff;
}

/* Expand rail — one viewport, hover widens active panel */
.li-rail {
  display: flex;
  gap: 12px;
  height: min(420px, 58vh);
  min-height: 360px;
}

.li-panel {
  position: relative;
  flex: 1 1 88px;
  min-width: 88px;
  overflow: hidden;
  border-radius: 22px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
  transition:
    flex 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.45s ease;
}

.li-panel.is-active,
.li-rail:hover .li-panel:hover {
  flex: 2.4 1 0;
  border-color: rgba(61, 90, 138, 0.4);
  box-shadow:
    0 20px 48px -16px rgba(19, 38, 75, 0.4),
    0 0 0 1px rgba(61, 90, 138, 0.15);
}

.li-rail:hover .li-panel.is-active:not(:hover) {
  flex: 1 1 88px;
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
}

.li-panel-bg {
  position: absolute;
  inset: 0;
}

.li-panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: saturate(1.05);
}

.li-panel.is-active .li-panel-bg img,
.li-panel:hover .li-panel-bg img {
  transform: scale(1.06);
}

.li-panel-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.2) 0%, rgba(7, 11, 20, 0.45) 40%, rgba(7, 11, 20, 0.92) 100%);
}

.li-panel-index {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.li-panel-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ffffff;
  background: #13264b;
  border: 1px solid #ffffff;
  padding: 12px 10px;
  border-radius: 12px;
  text-shadow: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  line-height: 1;
}

.li-panel.is-active .li-panel-label,
.li-panel:hover .li-panel-label {
  opacity: 0;
}

.li-panel-content {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.35s ease 0.08s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.li-panel.is-active .li-panel-content,
.li-panel:hover .li-panel-content {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.li-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfdbfe;
  background: rgba(28, 58, 110, 0.18);
  border: 1px solid rgba(61, 90, 138, 0.3);
  backdrop-filter: blur(8px);
}

.li-badge-gold {
  color: #fde68a;
  background: rgba(13, 105, 54, 0.16);
  border-color: rgba(251, 191, 36, 0.32);
}

.li-badge-cyan {
  color: #a5f3fc;
  background: rgba(6, 182, 212, 0.16);
  border-color: rgba(34, 211, 238, 0.32);
}

.li-badge-rose {
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(13, 105, 54, 0.32);
}

.li-panel-title {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.15;
}

.li-panel-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 32ch;
}

.li-panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
}

.li-panel-meta strong {
  color: #fff;
  font-weight: 800;
}

.li-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 800;
  color: #8fa4c4;
  white-space: nowrap;
}

.li-panel-cta i {
  transition: transform 0.3s ease;
}

.li-panel:hover .li-panel-cta i {
  transform: translateX(4px);
}

.li-footer-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.li-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 18px 20px;
  text-align: center;
  position: relative;
  color: #ffffff;
  background: #13264b;
  border: 1.5px solid #ffffff;
  border-radius: 18px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.li-stat:hover {
  border-color: #0d6936;
  transform: translateY(-3px);
}

.li-stat:not(:last-child)::after {
  display: none;
}

.li-stat-icon {
  flex: none;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #0d6936;
  border: 2px solid #ffffff;
  color: #ffffff;
  line-height: 1;
  box-sizing: border-box;
}

.li-stat-icon i,
.li-stat-icon svg {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.li-stat-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.li-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.li-stat span {
  display: block;
  font-size: 0.86rem;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.li-stat i {
  color: #ffffff;
  font-size: 1.2rem;
}

/* Reveal */
.li-section .li-panel {
  opacity: 0;
  transform: translateY(24px);
}

.li-section.is-revealed .li-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    flex 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.45s ease;
}

.li-section.is-revealed .li-panel:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s, 0s; }
.li-section.is-revealed .li-panel:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
.li-section.is-revealed .li-panel:nth-child(3) { transition-delay: 0.14s, 0.14s, 0s, 0s, 0s; }
.li-section.is-revealed .li-panel:nth-child(4) { transition-delay: 0.2s, 0.2s, 0s, 0s, 0s; }

@media (max-width: 991px) {
  .li-section {
    padding: 52px 0 56px;
  }

  .li-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
    gap: 12px;
  }

  .li-panel,
  .li-panel.is-active,
  .li-rail:hover .li-panel:hover,
  .li-rail:hover .li-panel.is-active:not(:hover) {
    flex: none;
    min-height: 260px;
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
  }

  .li-panel-label {
    display: none;
  }

  .li-panel-content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 575px) {
  .li-rail {
    grid-template-columns: 1fr;
  }

  .li-panel {
    min-height: 240px;
  }

  .li-footer-bar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }

  .li-stat {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 16px 18px;
    gap: 14px;
  }

  .li-stat-copy {
    align-items: flex-start;
  }

  .li-stat-icon {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .li-glow,
  .li-star,
  .li-star-line,
  .li-section .li-panel,
  .li-panel-bg img {
    animation: none !important;
    transition: none !important;
  }

  .li-section .li-panel {
    opacity: 1 !important;
    transform: none !important;
  }
}

body.theme-dark .li-section {
  background:
        radial-gradient(ellipse 55% 45% at 12% 0%, rgba(61, 90, 138, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 90% 100%, rgba(13, 105, 54, 0.18) 0%, transparent 50%),
    linear-gradient(165deg, #0c1830 0%, #13264b 45%, #0c1830 100%);
}


/* ==========================================================================
   VEHICLE INSURANCE — Chat-style compact boards + half-phone mockup
   ========================================================================== */

.vi-section {
  position: relative;
  padding: 56px 0 64px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #eef4ff 48%, #f8fafc 100%);
}

.vi-section-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 12% 18%, rgba(19, 38, 75, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 38% at 88% 62%, rgba(19, 38, 75, 0.06) 0%, transparent 55%);
}

.vi-section-inner {
  position: relative;
  z-index: 1;
}

.vi-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.vi-section-head .section-tag-pill {
  display: inline-flex;
}

.vi-section-sub {
  font-size: 0.95rem;
  color: var(--brand-text-muted);
  margin: 0;
  line-height: 1.55;
}

.vi-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Compact unified board */
.vi-board {
  position: relative;
  background: #fff;
  border-radius: 24px;
  overflow: visible;
  border: 1.5px solid rgba(19, 38, 75, 0.08);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.07);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.vi-section.is-revealed .vi-board {
  opacity: 1;
  transform: none;
}

.vi-section.is-revealed .vi-board:nth-child(1) { transition-delay: 0.06s; }
.vi-section.is-revealed .vi-board:nth-child(2) { transition-delay: 0.14s; }
.vi-section.is-revealed .vi-board:nth-child(3) { transition-delay: 0.22s; }

.vi-board.is-active,
.vi-board:hover {
  box-shadow: 0 20px 56px rgba(19, 38, 75, 0.11);
}

.vi-board--2w { --vi-accent: #13264b; --vi-accent-soft: #e8ecf3; --vi-chat-user: #13264b; }
.vi-board--3w { --vi-accent: #0d6936; --vi-accent-soft: #e7f4ee; --vi-chat-user: #0d6936; }
.vi-board--4w { --vi-accent: #13264b; --vi-accent-soft: #e8ecf3; --vi-chat-user: #13264b; }



.vi-board-inner {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 44%);
  align-items: center;
  min-height: 0;
}

.vi-board--flip .vi-board-visual {
  order: -1;
}

/* Content side */
.vi-board-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px 28px;
  gap: 18px;
}

.vi-board-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

.vi-board-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--vi-accent-soft);
  color: var(--vi-accent);
  border: 1px solid color-mix(in srgb, var(--vi-accent) 12%, transparent);
}

.vi-board-badge.badge-green {
  background: var(--accent-green-light);
  color: var(--accent-green);
  border-color: rgba(13, 105, 54, 0.12);
}

.vi-board-badge.badge-blue {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border-color: rgba(19, 38, 75, 0.12);
}

.vi-board-title {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  font-weight: 800;
  color: var(--brand-navy);
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vi-board-title i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--vi-accent);
  background: var(--vi-accent-soft);
  flex-shrink: 0;
}

.vi-board-desc {
  font-size: 0.83rem;
  color: var(--brand-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}

/* Premium plan picker cards */
.vi-plan-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vi-plan-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px 14px 18px;
  border-radius: 16px;
  border: 1.5px solid #e8edf3;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
  font-family: inherit;
  overflow: hidden;
}

.vi-plan-card-accent {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--vi-accent);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.vi-plan-card:hover {
  border-color: color-mix(in srgb, var(--vi-accent) 28%, #e8edf3);
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.vi-plan-card.is-active {
  border-color: color-mix(in srgb, var(--vi-accent) 45%, transparent);
  background: linear-gradient(135deg, #fff 0%, var(--vi-accent-soft) 100%);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--vi-accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vi-plan-card.is-active .vi-plan-card-accent {
  opacity: 1;
  transform: scaleY(1);
}

.vi-plan-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: var(--transition);
}

.vi-plan-card-icon img {
  display: block;
  width: 30px;
  height: auto;
}

.vi-plan-card-icon--muted {
  color: #94a3b8;
  font-size: 1rem;
}

.vi-plan-card.is-active .vi-plan-card-icon {
  background: #fff;
  border-color: color-mix(in srgb, var(--vi-accent) 18%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--vi-accent) 12%, transparent);
}

.vi-plan-card.is-active .vi-plan-card-icon--muted {
  color: var(--vi-accent);
}

.vi-plan-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vi-plan-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vi-plan-card-body strong {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-navy);
  line-height: 1.2;
}

.vi-plan-card-tag {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--vi-accent) 12%, #fff);
  color: var(--vi-accent);
  border: 1px solid color-mix(in srgb, var(--vi-accent) 18%, transparent);
  white-space: nowrap;
}

.vi-plan-card-body small {
  font-size: 0.73rem;
  color: var(--brand-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vi-plan-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.vi-plan-card-price {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--vi-accent);
  white-space: nowrap;
  line-height: 1;
}

.vi-plan-card-price span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.vi-plan-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  transition: var(--transition);
}

.vi-plan-card-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--vi-accent);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vi-plan-card.is-active .vi-plan-card-radio {
  border-color: var(--vi-accent);
}

.vi-plan-card.is-active .vi-plan-card-radio::after {
  transform: scale(1);
}

.vi-board-foot {
  padding-top: 6px;
}

.vi-board-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--vi-accent), color-mix(in srgb, var(--vi-accent) 78%, #000));
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--vi-accent) 28%, transparent);
  transition: var(--transition);
}

.vi-board-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--vi-accent) 34%, transparent);
}

.vi-board-cta--green {
  background: linear-gradient(135deg, #0d6936, #10b981);
  box-shadow: 0 6px 20px rgba(13, 105, 54, 0.28);
}

.vi-board-cta--green:hover {
  box-shadow: 0 10px 28px rgba(13, 105, 54, 0.36);
}

.vi-board-cta--blue {
  background: linear-gradient(135deg, #13264b, #1c3a6e);
  box-shadow: 0 6px 20px rgba(19, 38, 75, 0.28);
}

.vi-board-cta--blue:hover {
  box-shadow: 0 10px 28px rgba(19, 38, 75, 0.36);
}

/* Phone visual — full device, not clipped */
.vi-board-visual {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 32px;
  background: linear-gradient(160deg, #f1f5f9 0%, #e8eef8 100%);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  min-height: 0;
  align-self: stretch;
}

.vi-board--flip .vi-board-visual {
  border-left: none;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
}

.vi-phone-half {
  position: relative;
  margin: 0;
  filter: drop-shadow(0 22px 40px rgba(15, 23, 42, 0.18));
  flex-shrink: 0;
}

.vi-board.is-active .vi-phone-half {
  animation: viPhoneFloat 5s ease-in-out infinite;
}

@keyframes viPhoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.vi-phone-shell {
  position: relative;
  width: 252px;
  padding: 10px;
  border-radius: 40px;
  background: linear-gradient(160deg, #1a2744 0%, #13264b 55%, #0a1224 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.vi-phone-island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #050a14;
  border-radius: 16px;
  z-index: 3;
}

.vi-phone-screen {
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(165deg, #fdf2f8 0%, #e8ecf3 55%, #f8fafc 100%);
  aspect-ratio: 400 / 720;
}

.vi-phone-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  border: none;
  pointer-events: none;
  background: linear-gradient(165deg, #fdf2f8 0%, #e8ecf3 55%, #f8fafc 100%);
}

@media (max-width: 991px) {
  .vi-board-inner {
    grid-template-columns: 1fr;
  }

  .vi-board--flip .vi-board-visual {
    order: -1;
  }

  .vi-board-visual {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(19, 38, 75, 0.06);
    padding: 24px 16px 28px;
  }

  .vi-phone-half {
    margin: 0;
  }

  .vi-board-content {
    padding: 24px 20px 22px;
  }

  .vi-plan-card {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 12px 14px 12px 16px;
  }

  .vi-plan-card-meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 56px;
    margin-top: -2px;
  }

  .vi-plan-card-radio {
    order: 2;
  }
}

@media (max-width: 575px) {
  .vi-section { padding: 40px 0 48px; }

  .vi-phone-shell {
    width: 248px;
    border-radius: 36px;
  }

  .vi-phone-screen { border-radius: 26px; }
  .vi-phone-island { width: 64px; height: 18px; top: 14px; }

  .vi-plan-card-body small {
    white-space: normal;
    -webkit-line-clamp: 3;
  }

  .vi-plan-card-meta {
    padding-left: 0;
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vi-phone-half {
    animation: none !important;
  }
}

/* ==========================================================================
   20. ABOUT US PAGE
   ========================================================================== */

/* Hero */
.about-hero-section {
  padding-bottom: 20px;
}

.about-hero-head {
  max-width: 760px;
}

.about-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}

.about-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-navy);
}

.about-hero-link i {
  color: var(--brand-primary);
  font-size: 0.8rem;
  transition: var(--transition);
}

.about-hero-link:hover {
  color: var(--brand-primary);
}

.about-hero-link:hover i {
  transform: translateY(3px);
}

.about-hero-stats-card {
  max-width: 1000px;
  margin: 30px auto 0;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(28px);
}

.about-hero-stats-card .platform-trust-strip {
  border-top: none;
}

/* Generic section rhythm */
.about-section {
  padding: 64px 0;
  background: #ffffff;
}

.about-section-alt {
  background: var(--bg-page);
}

.about-section-head {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}

.about-section-head.align-left {
  margin: 0 0 36px;
  text-align: left;
}

.about-section-sub {
  color: var(--brand-text-muted);
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}

/* Split (image + copy) layout — reused for Story & Leadership */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-split.reverse .about-split-visual {
  order: 2;
}

.about-split-kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}

.about-split-copy h2 {
  margin-bottom: 16px;
}

.about-split-copy p {
  color: var(--brand-text-body);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-split-copy .pb-checklist {
  margin-top: 20px;
  margin-bottom: 0;
}

.about-split-visual {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #e8ecf3;
  box-shadow: var(--shadow-lg);
}

.about-split-visual img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* How It Works — visual "journey" timeline with SVG path backdrop */
/* CTA banner */
.about-cta-section {
  padding: 8px 0 64px;
  background: #ffffff;
}

.about-cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 52px 40px;
  text-align: center;
  background: radial-gradient(circle at 15% 20%, rgba(19, 38, 75, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(13, 105, 54, 0.3) 0%, transparent 45%),
    linear-gradient(135deg, var(--brand-navy-deep) 0%, var(--brand-navy) 100%);
  box-shadow: var(--shadow-lg);
}

.about-cta-banner h2 {
  color: #ffffff;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin-bottom: 12px;
}

.about-cta-banner p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 1rem;
}

.about-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.about-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--brand-navy) !important;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.about-btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.25);
}

.about-btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.about-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* Reveal wiring for About sections */
.about-hero-stats-card,
.about-split-visual,
.about-split-copy > *,
.about-stat {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-revealed .about-hero-stats-card {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

[data-reveal].is-revealed .about-split-visual {
  opacity: 1;
  transform: none;
}

[data-reveal].is-revealed .about-split-copy > * {
  opacity: 1;
  transform: none;
}

[data-reveal].is-revealed .about-split-copy > *:nth-child(1) { transition-delay: 0.08s; }
[data-reveal].is-revealed .about-split-copy > *:nth-child(2) { transition-delay: 0.16s; }
[data-reveal].is-revealed .about-split-copy > *:nth-child(3) { transition-delay: 0.24s; }
[data-reveal].is-revealed .about-split-copy > *:nth-child(4) { transition-delay: 0.32s; }
[data-reveal].is-revealed .about-split-copy > *:nth-child(5) { transition-delay: 0.4s; }

[data-reveal].is-revealed .about-stat {
  opacity: 1;
  transform: none;
}

[data-reveal].is-revealed .about-stat:nth-child(1) { transition-delay: 0.04s; }
[data-reveal].is-revealed .about-stat:nth-child(2) { transition-delay: 0.1s; }
[data-reveal].is-revealed .about-stat:nth-child(3) { transition-delay: 0.16s; }
[data-reveal].is-revealed .about-stat:nth-child(4) { transition-delay: 0.22s; }
[data-reveal].is-revealed .about-stat:nth-child(5) { transition-delay: 0.28s; }
[data-reveal].is-revealed .about-stat:nth-child(6) { transition-delay: 0.34s; }

@media (max-width: 991px) {
  .about-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-split.reverse .about-split-visual {
    order: 0;
  }

  .about-split-visual {
    min-height: 300px;
  }

  .about-split-visual img {
    min-height: 300px;
  }
}

@media (max-width: 576px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-cta-banner {
    padding: 40px 22px;
  }

  .about-section {
    padding: 48px 0;
  }
}


/* ==========================================================================
   MOTOR INSURANCE — Full-width left / right showroom
   ========================================================================== */

.mi-section {
  position: relative;
  padding: 64px 0 72px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 10px;
  border-radius: 10px;

}

.mi-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mi-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.mi-glow-a {
  width: 480px;
  height: 480px;
  top: -160px;
  right: -100px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.1) 0%, transparent 68%);
  animation: miGlowDrift 16s ease-in-out infinite alternate;
}

.mi-glow-b {
  width: 360px;
  height: 360px;
  bottom: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(19, 38, 75, 0.08) 0%, transparent 68%);
  animation: miGlowDrift 14s ease-in-out 1s infinite alternate-reverse;
}

@keyframes miGlowDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-20px, 16px) scale(1.05); }
}

.mi-inner {
  position: relative;
  z-index: 1;
}

.mi-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 32px;
}

.mi-head .section-tag-pill {
  margin-bottom: 14px;
}

.mi-sub {
  margin: 12px 0 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #13264b;
}

.mi-deck {
  position: relative;
  z-index: 1;
  width: 100%;
}

.mi-viewport {
  position: relative;
  width: 100%;
  height: clamp(420px, 48vw, 540px);
  min-height: 420px;
  overflow: hidden;
  background: #13264b;
  border-radius: 10px;
  /* border-top: 1.5px solid #13264b; */
  /* border-bottom: 1.5px solid #13264b; */
}

.mi-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(340px, 1.15fr);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
  
}

.mi-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.mi-panel-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px) clamp(28px, 5vw, 72px);
  background: #13264b;
  border-radius: 10px;
  color: #ffffff;
  /* border-right: 1.5px solid #0d6936; */
  
}

.mi-panel-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #13264b;
  /* border-radius: 10px; */
  
}

.mi-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mi-panel.is-active .mi-panel-media img {
  animation: miMediaIn 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes miMediaIn {
  from { transform: scale(1.04); opacity: 0.85; }
  to { transform: scale(1); opacity: 1; }
}

.mi-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #0d6936;
  border: 1px solid #ffffff;
  color: #ffffff;
  margin-bottom: 16px;
  
}

.mi-panel-title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: #ffffff;
}

.mi-panel-desc {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.55;
  color: #ffffff;
  opacity: 0.88;
  max-width: 40ch;
}

.mi-panel-perks {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mi-panel-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
}

.mi-panel-perks i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  background: #0d6936;
  color: #ffffff;
  flex-shrink: 0;
}

.mi-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.mi-panel-price {
  font-size: 0.95rem;
  color: #ffffff;
  opacity: 0.9;
}

.mi-panel-price strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
}

.mi-panel-price small {
  font-size: 0.85rem;
  opacity: 0.75;
}

.mi-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #0d6936;
  border: 1px solid #0d6936;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mi-panel-cta i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: transform 0.3s ease, color 0.25s ease;
}

.mi-panel-cta:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #13264b !important;
  -webkit-text-fill-color: #13264b !important;
}

.mi-panel-cta:hover i {
  color: #13264b !important;
  -webkit-text-fill-color: #13264b !important;
  transform: translateX(4px);
}

.mi-deck-bottom {
  position: relative;
  z-index: 3;
  margin-top: -36px;
  padding-bottom: 8px;
}

.mi-lanes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  z-index: 5;
}

.mi-lane {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border-radius: 18px;
  border: 1.5px solid #13264b;
  background: #ffffff;
  box-shadow: 0 12px 32px -14px rgba(19, 38, 75, 0.28);
  cursor: pointer;
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.35s ease, background 0.25s ease;
}

.mi-lane:hover {
  transform: translateY(-4px);
  border-color: #0d6936;
}

.mi-lane.is-active {
  background: #13264b;
  border-color: #0d6936;
  box-shadow: 0 0 0 2px rgba(13, 105, 54, 0.25), 0 18px 40px -12px rgba(19, 38, 75, 0.4);
  transform: translateY(-6px);
}

.mi-lane-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #13264b;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mi-lane-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mi-lane-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mi-lane-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0d6936;
}

.mi-lane.is-active .mi-lane-num {
  color: #0d6936;
}

.mi-lane-meta strong {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: #13264b;
  line-height: 1.2;
}

.mi-lane.is-active .mi-lane-meta strong {
  color: #ffffff;
}

.mi-lane-meta small {
  font-size: 0.72rem;
  color: #13264b;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-lane.is-active .mi-lane-meta small {
  color: #ffffff;
  opacity: 0.8;
}

.mi-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 28px;
}

.mi-trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #13264b;
  font-size: 0.82rem;
  font-weight: 600;
  color: #13264b;
}

.mi-trust-bar i {
  color: #0d6936;
}

.mi-section .mi-viewport,
.mi-section .mi-lane {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mi-section.is-revealed .mi-viewport {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

.mi-section.is-revealed .mi-lane {
  opacity: 1;
  transform: none;
}

.mi-section.is-revealed .mi-lane:nth-child(1) { transition-delay: 0.14s; }
.mi-section.is-revealed .mi-lane:nth-child(2) { transition-delay: 0.2s; }
.mi-section.is-revealed .mi-lane:nth-child(3) { transition-delay: 0.26s; }
.mi-section.is-revealed .mi-lane:nth-child(4) { transition-delay: 0.32s; }

.mi-section.is-revealed .mi-lane.is-active { transform: translateY(-6px); }
.mi-section.is-revealed .mi-lane:hover { transform: translateY(-4px); }
.mi-section.is-revealed .mi-lane.is-active:hover { transform: translateY(-6px); }

@media (max-width: 991px) {
  .mi-section { padding: 48px 0 56px; }
  .mi-viewport {
    height: auto;
    min-height: 0;
  }
  .mi-panel {
    position: relative;
    display: none;
    grid-template-columns: 1fr;
  }
  .mi-panel.is-active { display: grid; }
  .mi-panel-copy {
    border-right: none;
    border-bottom: 1.5px solid #0d6936;
    padding: 28px 22px 24px;
  }
  .mi-panel-media {
    min-height: 260px;
    aspect-ratio: 16 / 10;
  }
  .mi-deck-bottom { margin-top: 16px; }
  .mi-lanes { grid-template-columns: 1fr 1fr; }
  .mi-section.is-revealed .mi-lane,
  .mi-section.is-revealed .mi-lane.is-active,
  .mi-section.is-revealed .mi-lane:hover,
  .mi-lane.is-active { transform: none; }
}

@media (max-width: 575px) {
  .mi-lanes { grid-template-columns: 1fr; gap: 10px; }
  .mi-panel-title { font-size: 1.5rem; }
  .mi-panel-media { min-height: 220px; }
  .mi-trust-bar span { font-size: 0.75rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-glow,
  .mi-panel,
  .mi-panel-media img,
  .mi-section .mi-viewport,
  .mi-section .mi-lane {
    animation: none !important;
    transition: none !important;
  }
  .mi-section .mi-viewport,
  .mi-section .mi-lane {
    opacity: 1 !important;
    transform: none !important;
  }
}

 /* ==========================================================================
   TRAVEL INSURANCE — Boarding Pass Gate (unique layout)
   ========================================================================== */

.ti-section {
  position: relative;
  padding: 60px 0 68px;
  overflow: hidden;
  background: #13264b;
  color: #ffffff;
  margin: 0 10px;
  border-radius: 10px;
}

.ti-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ti-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
}

.ti-aurora-a {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.22) 0%, transparent 68%);
  animation: tiAurora 18s ease-in-out infinite alternate;
}

.ti-aurora-b {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -100px;
  background: radial-gradient(circle, rgba(61, 90, 138, 0.28) 0%, transparent 68%);
  animation: tiAurora 15s ease-in-out 1s infinite alternate-reverse;
}

.ti-route-map {
  position: absolute;
  inset: 12% 0 auto;
  width: 100%;
  height: 42%;
  opacity: 0.35;
}

.ti-route-path {
  stroke: rgba(125, 206, 160, 0.45);
  stroke-width: 2;
  stroke-dasharray: 10 14;
  animation: tiRouteDash 28s linear infinite;
}

.ti-route-dot {
  fill: #7dcea0;
  opacity: 0.7;
}

@keyframes tiAurora {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -18px) scale(1.06); }
}

@keyframes tiRouteDash {
  to { stroke-dashoffset: -400; }
}

.ti-inner {
  position: relative;
  z-index: 1;
}

.ti-shell {
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) 1.2fr;
  gap: clamp(36px, 4.5vw, 56px);
  align-items: center;
  padding: 8px 0;
}

.ti-intro {
  position: relative;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ti-intro-copy {
  text-align: left;
  padding: 4px 4px 0;
}

.ti-gate-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #13264b;
  background: #ffffff;
  border: 1px solid #ffffff;
  margin-bottom: 14px;
}

.ti-gate-pill i {
  color: #0d6936;
}

.ti-intro-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
}

.ti-intro-title span {
  color: #0d6936;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #0d6936;
}

.ti-sub {
  margin: 12px 0 0;
  max-width: 42ch;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #ffffff;
}

.ti-visual {
  position: relative;
  min-height: 460px;
  padding: 28px 12px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ti-flight-arc {
  position: absolute;
  inset: 8% 4% auto;
  width: 92%;
  height: 55%;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.ti-flight-arc-path {
  stroke: rgba(125, 206, 160, 0.55);
  stroke-width: 2.5;
  stroke-dasharray: 8 12;
  animation: tiRouteDash 22s linear infinite;
}

.ti-flight-arc-dot {
  fill: #7dcea0;
}

.ti-stack-card {
  position: absolute;
  z-index: 1;
  width: min(280px, 72%);
  aspect-ratio: 1.6 / 1;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(145deg, rgba(28, 58, 110, 0.95) 0%, rgba(19, 38, 75, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.5);
}

.ti-stack-card--back {
  transform: rotate(10deg) translate(42px, -18px);
}

.ti-stack-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #7dcea0;
}

.ti-stack-route {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ti-stack-route i {
  font-size: 0.85rem;
  color: #7dcea0;
}

.ti-stack-seat {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #98a6bb;
}

.ti-passport {
  position: relative;
  width: min(300px, 78%);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 32px 64px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 40px rgba(13, 105, 54, 0.18);
  transform: rotate(-7deg);
  animation: tiPassportFloat 6s ease-in-out infinite;
}

.ti-passport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ti-passport-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 35%,
    transparent 60%,
    rgba(125, 206, 160, 0.14) 100%
  );
  pointer-events: none;
}

.ti-passport-chip {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12, 24, 48, 0.82);
  border: 1px solid rgba(125, 206, 160, 0.4);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #c8e6d5;
}

.ti-passport-chip i {
  color: #7dcea0;
}

@keyframes tiPassportFloat {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-10px); }
}

.ti-stamp {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed rgba(125, 206, 160, 0.55);
  background: rgba(19, 38, 75, 0.78);
  backdrop-filter: blur(8px);
  color: #7dcea0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}

.ti-stamp strong {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.ti-stamp span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 5px;
  color: #c8e6d5;
}

.ti-stamp i {
  font-size: 1.15rem;
  margin-bottom: 2px;
}

.ti-stamp--a {
  top: 4%;
  left: 0;
  transform: rotate(-18deg);
  animation: tiStampBob 5s ease-in-out infinite;
}

.ti-stamp--b {
  top: 6%;
  right: 0;
  transform: rotate(14deg);
  animation: tiStampBob 5.5s ease-in-out 0.4s infinite;
}

.ti-stamp--c {
  bottom: 16%;
  left: -2%;
  transform: rotate(-8deg);
  border-color: rgba(143, 164, 196, 0.55);
  color: #8fa4c4;
  animation: tiStampBob 6s ease-in-out 0.8s infinite;
}

.ti-stamp--c span {
  color: #b7c2d4;
}

@keyframes tiStampBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.ti-radar {
  position: absolute;
  right: 0;
  bottom: 10%;
  z-index: 3;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 24, 48, 0.7);
  border: 1px solid rgba(13, 105, 54, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.ti-radar-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(125, 206, 160, 0.25);
}

.ti-radar-ring:nth-child(2) {
  inset: 26px;
  border-color: rgba(125, 206, 160, 0.4);
}

.ti-radar-ping {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(125, 206, 160, 0.55);
  animation: tiRadarPing 2.4s ease-out infinite;
}

.ti-radar i {
  position: relative;
  z-index: 1;
  color: #7dcea0;
  font-size: 1.25rem;
  animation: tiRadarPulse 2.4s ease-in-out infinite;
}

@keyframes tiRadarPing {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes tiRadarPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.ti-float-badge {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(12, 24, 48, 0.88);
  border: 1px solid rgba(125, 206, 160, 0.4);
  backdrop-filter: blur(10px);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  color: #e8eef7;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.ti-float-badge--live {
  right: 8%;
  top: 42%;
}

.ti-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: tiLivePulse 1.8s ease-out infinite;
}

@keyframes tiLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.ti-dest-chips {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(12, 24, 48, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.ti-dest-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #e8eef7;
  white-space: nowrap;
}

.ti-dest-chips i {
  color: #7dcea0;
  font-size: 0.7rem;
}

.ti-intro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ti-intro-stats div {
  padding: 16px 12px;
  border-radius: 14px;
  background: #13264b;
  border: 1px solid #ffffff;
  text-align: center;
}

.ti-intro-stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.ti-intro-stats span {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Boarding passes stack */
.ti-passes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  perspective: 1200px;
}

.ti-pass {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 132px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background: #13264b;
  border: 1px solid #ffffff;
  box-shadow: none;
  transform-origin: left center;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.45s ease,
    background 0.3s ease;
}

.ti-pass:hover,
.ti-pass.is-active {
  color: #fff;
  border-color: rgba(13, 105, 54, 0.55);
  box-shadow:
    0 0 0 1px rgba(13, 105, 54, 0.25),
    0 24px 50px -18px rgba(0, 0, 0, 0.55);
  transform: translateX(10px) rotateY(-2deg);
}

.ti-pass.is-active {
  background: #13264b;
}

.ti-pass-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px;
  background: #0d6936;
  border-right: 2px dashed #ffffff;
}

.ti-pass-stub-code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #ffffff;
}

.ti-barcode {
  width: 28px;
  height: 40px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.85) 0 2px,
    transparent 2px 4px,
    rgba(255, 255, 255, 0.5) 4px 5px,
    transparent 5px 7px
  );
  opacity: 0.55;
  border-radius: 2px;
}

.ti-pass-stub-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #7dcea0;
  font-size: 0.85rem;
}

.ti-pass-main {
  display: grid;
  grid-template-columns: 140px 1fr;
  min-width: 0;
}

.ti-pass-media {
  position: relative;
  overflow: hidden;
  min-height: 132px;
}

.ti-pass-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ti-pass:hover .ti-pass-media img,
.ti-pass.is-active .ti-pass-media img {
  transform: scale(1.08);
}

.ti-pass-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px 18px 18px;
  min-width: 0;
}

.ti-pass-route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7dcea0;
}

.ti-pass-route i {
  font-size: 0.65rem;
  opacity: 0.8;
}

.ti-pass-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1.2;
}

.ti-pass-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(200, 210, 224, 0.85);
}

.ti-pass-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ti-pass-price {
  font-size: 0.82rem;
  color: rgba(200, 210, 224, 0.8);
}

.ti-pass-price strong {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #7dcea0;
}

.ti-pass-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
}

.ti-pass-cta i {
  color: #7dcea0;
  transition: transform 0.25s ease;
}

.ti-pass:hover .ti-pass-cta i,
.ti-pass.is-active .ti-pass-cta i {
  transform: translateX(4px);
}

/* Staggered idle tilt for uniqueness */
.ti-pass:nth-child(1) { transform: translateX(0); }
.ti-pass:nth-child(2) { transform: translateX(18px); }
.ti-pass:nth-child(3) { transform: translateX(8px); }
.ti-pass:nth-child(4) { transform: translateX(26px); }

.ti-pass:nth-child(1):hover,
.ti-pass:nth-child(1).is-active { transform: translateX(14px) rotateY(-2deg); }
.ti-pass:nth-child(2):hover,
.ti-pass:nth-child(2).is-active { transform: translateX(28px) rotateY(-2deg); }
.ti-pass:nth-child(3):hover,
.ti-pass:nth-child(3).is-active { transform: translateX(20px) rotateY(-2deg); }
.ti-pass:nth-child(4):hover,
.ti-pass:nth-child(4).is-active { transform: translateX(36px) rotateY(-2deg); }

/* Reveal */
.ti-section .ti-visual,
.ti-section .ti-intro-copy,
.ti-section .ti-pass {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.45s ease,
    background 0.3s ease;
}

.ti-section.is-revealed .ti-visual {
  opacity: 1;
  transform: none;
  transition-delay: 0.06s;
}

.ti-section.is-revealed .ti-intro-copy {
  opacity: 1;
  transform: none;
  transition-delay: 0.14s;
}

.ti-section.is-revealed .ti-pass {
  opacity: 1;
}

.ti-section.is-revealed .ti-pass:nth-child(1) {
  transform: translateX(0);
  transition-delay: 0.12s;
}
.ti-section.is-revealed .ti-pass:nth-child(2) {
  transform: translateX(18px);
  transition-delay: 0.2s;
}
.ti-section.is-revealed .ti-pass:nth-child(3) {
  transform: translateX(8px);
  transition-delay: 0.28s;
}
.ti-section.is-revealed .ti-pass:nth-child(4) {
  transform: translateX(26px);
  transition-delay: 0.36s;
}

.ti-section.is-revealed .ti-pass:nth-child(1):hover,
.ti-section.is-revealed .ti-pass:nth-child(1).is-active {
  transform: translateX(14px) rotateY(-2deg);
}
.ti-section.is-revealed .ti-pass:nth-child(2):hover,
.ti-section.is-revealed .ti-pass:nth-child(2).is-active {
  transform: translateX(28px) rotateY(-2deg);
}
.ti-section.is-revealed .ti-pass:nth-child(3):hover,
.ti-section.is-revealed .ti-pass:nth-child(3).is-active {
  transform: translateX(20px) rotateY(-2deg);
}
.ti-section.is-revealed .ti-pass:nth-child(4):hover,
.ti-section.is-revealed .ti-pass:nth-child(4).is-active {
  transform: translateX(36px) rotateY(-2deg);
}

@media (max-width: 991px) {
  .ti-section {
    padding: 64px 0 72px;
  }

  .ti-shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ti-intro {
    max-width: 480px;
    margin: 0 auto;
  }

  .ti-visual {
    min-height: 420px;
  }

  .ti-passport {
    width: min(280px, 72%);
  }

  .ti-intro-copy {
    text-align: center;
    padding: 0;
  }

  .ti-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .ti-gate-pill {
    margin-left: auto;
    margin-right: auto;
  }

  .ti-pass,
  .ti-pass:nth-child(n) {
    transform: none !important;
  }

  .ti-section.is-revealed .ti-pass:nth-child(n),
  .ti-section.is-revealed .ti-pass:nth-child(n):hover,
  .ti-section.is-revealed .ti-pass:nth-child(n).is-active {
    transform: translateY(-4px) !important;
  }
}

@media (max-width: 640px) {
  .ti-pass {
    grid-template-columns: 56px 1fr;
  }

  .ti-pass-main {
    grid-template-columns: 1fr;
  }

  .ti-pass-media {
    display: none;
  }

  .ti-pass-stub-code {
    font-size: 0.65rem;
  }

  .ti-visual {
    min-height: 380px;
    padding-bottom: 28px;
  }

  .ti-passport {
    width: min(240px, 70%);
  }

  .ti-stack-card--back {
    transform: rotate(8deg) translate(28px, -12px);
    width: min(240px, 70%);
  }

  .ti-dest-chips {
    gap: 4px;
    padding: 6px;
  }

  .ti-dest-chips span {
    padding: 6px 8px;
    font-size: 0.62rem;
  }

  .ti-stamp {
    width: 72px;
    height: 72px;
  }

  .ti-radar {
    width: 84px;
    height: 84px;
  }

  .ti-float-badge--live {
    top: 38%;
    right: 2%;
    font-size: 0.7rem;
    padding: 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-aurora,
  .ti-route-path,
  .ti-flight-arc-path,
  .ti-passport,
  .ti-stamp,
  .ti-radar-ping,
  .ti-radar i,
  .ti-live-dot,
  .ti-section .ti-visual,
  .ti-section .ti-intro-copy,
  .ti-section .ti-pass,
  .ti-pass-media img {
    animation: none !important;
    transition: none !important;
  }

  .ti-section .ti-visual,
  .ti-section .ti-intro-copy,
  .ti-section .ti-pass {
    opacity: 1 !important;
    transform: none !important;
  }
}

body.theme-dark .ti-section {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(13, 105, 54, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, #13264b 0%, #0c1830 100%);
}


/* ==========================================================================
   SECTION SKINS — Insure Karo dark / light rhythm
   ========================================================================== */
.section-skin-light {
  background: #ffffff !important;
  color: var(--brand-text-body);
}

.section-skin-soft {
  background: #f3f5f8 !important;
  color: var(--brand-text-body);
}

.section-skin-dark {
  background: #13264b !important;
  color: #c5cedc;
}

.section-skin-darker {
  background: #0c1830 !important;
  color: #c5cedc;
}

.section-skin-dark .pb-section-main-title,
.section-skin-darker .pb-section-main-title,
.section-skin-dark h1,
.section-skin-dark h2,
.section-skin-dark h3,
.section-skin-darker h1,
.section-skin-darker h2,
.section-skin-darker h3 {
  color: #ffffff;
}

.section-skin-dark .pb-section-desc,
.section-skin-dark p,
.section-skin-darker .pb-section-desc,
.section-skin-darker p {
  color: #b7c2d4;
}

.section-skin-dark .section-tag-pill,
.section-skin-darker .section-tag-pill {
  background: rgba(13, 105, 54, 0.22);
  color: #7dcea0;
  border-color: rgba(13, 105, 54, 0.35);
}

/* Help/support is now part of .pb-footer */

/* About / contact alternating skins */
.about-section-alt {
  background: #f3f5f8;
}

.about-hero-section .about-hero-link {
  color: #ffffff;
}

.about-hero-section .about-hero-link i {
  color: #7dcea0;
}

.about-hero-section .about-hero-link:hover {
  color: #c8e6d5;
}

/* Dark theme: alternate between navy depths using logo blue */
body.theme-dark .platform-hero-section,
body.theme-dark .mission-section,
body.theme-dark .li-section,
body.theme-dark .ti-section,
body.theme-dark .sme-section,
body.theme-dark .pb-footer {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(13, 105, 54, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #13264b 0%, #0c1830 100%) !important;
}

body.theme-dark .cf-products-section,
body.theme-dark .hi-section,
body.theme-dark .mi-section,
body.theme-dark .ei-section,
body.theme-dark .agent-join-section {
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(61, 90, 138, 0.25) 0%, transparent 55%),
    linear-gradient(180deg, #162a4f 0%, #1c3a6e 100%) !important;
}

body.theme-dark .pb-btn-cta {
  background: linear-gradient(135deg, #13264b 0%, #1c3a6e 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(19, 38, 75, 0.28);
  transition: var(--transition);
}

body.theme-dark .pb-btn-cta:hover {
  background: linear-gradient(135deg, #0d6936 0%, #128a48 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(13, 105, 54, 0.35);
  transform: translateY(-1px);
}

body.theme-dark .pb-header {
  background: rgba(12, 24, 48, 0.9);
  border-bottom: 1px solid rgba(143, 164, 196, 0.12);
}

body.theme-dark .pb-nav-link.active {
  color: #7dcea0 !important;
  background-color: rgba(13, 105, 54, 0.16);
}


/* ==========================================================================
   EMPLOYEE INSURANCE — Staff Cover Roster (desk + featured stage)
   ========================================================================== */

.ei-section {
  position: relative;
  padding: 72px 0 80px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f7f9fc 0%, #ffffff 42%, #ffffff 100%);
}

.ei-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ei-orb {
  position: absolute;
  border-radius: 50%;
}

.ei-orb-a {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.11) 0%, transparent 70%);
  animation: eiOrbDrift 14s ease-in-out infinite alternate;
}

.ei-orb-b {
  width: 340px;
  height: 340px;
  bottom: -100px;
  right: -60px;
  background: radial-gradient(circle, rgba(19, 38, 75, 0.1) 0%, transparent 70%);
  animation: eiOrbDrift 11s ease-in-out 0.8s infinite alternate-reverse;
}

.ei-line-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(19, 38, 75, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 38, 75, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 10%, transparent 72%);
  opacity: 0.9;
}

@keyframes eiOrbDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-18px, 14px) scale(1.05); }
}

.ei-inner {
  position: relative;
  z-index: 1;
}

.ei-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}

.ei-head .section-tag-pill {
  margin-bottom: 14px;
}

.ei-intro-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--brand-navy);
}

.ei-intro-title span {
  color: var(--brand-secondary);
}

.ei-sub {
  margin: 12px auto 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--brand-text-muted);
  max-width: 52ch;
}

.ei-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-navy);
}

.ei-metrics strong {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--brand-secondary);
  margin-right: 4px;
}

.ei-metrics-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(13, 105, 54, 0.45);
}

.ei-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #0d6936;
  box-shadow: 0 0 0 0 rgba(13, 105, 54, 0.5);
  animation: eiLivePulse 1.8s ease-out infinite;
}

@keyframes eiLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(13, 105, 54, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(13, 105, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 105, 54, 0); }
}

/* Stage: featured desk + staff roster */
.ei-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: clamp(18px, 2.5vw, 28px);
  align-items: stretch;
}

.ei-feature {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background: #13264b;
  box-shadow: 0 24px 48px -28px rgba(19, 38, 75, 0.55);
}

.ei-feature-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.45s;
}

.ei-feature-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 1;
}

.ei-feature-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.ei-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ei-feature-panel.is-active .ei-feature-media img {
  transform: scale(1);
}

.ei-feature-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 40%, rgba(19, 38, 75, 0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(12, 24, 48, 0.35) 100%);
  pointer-events: none;
}

.ei-feature-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  background:
    linear-gradient(160deg, #16305c 0%, #13264b 55%, #0f1f3d 100%);
  color: #ffffff;
}

.ei-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(13, 105, 54, 0.28);
  border: 1px solid rgba(125, 206, 160, 0.35);
}

.ei-feature-kicker i {
  color: #7dcea0;
}

.ei-feature-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
}

.ei-feature-desc {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 36ch;
}

.ei-feature-perks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ei-feature-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.ei-feature-perks i {
  color: #7dcea0;
  font-size: 0.78rem;
}

.ei-feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 10px;
}

.ei-feature-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.ei-feature-price strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-inline: 4px;
}

.ei-feature-price small {
  font-size: 0.85rem;
  opacity: 0.75;
}

.ei-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  color: #ffffff;
  background: #0d6936;
  border: 1px solid #0d6936;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ei-feature-cta:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #13264b;
  transform: translateY(-2px);
}

.ei-feature-cta i {
  font-size: 0.78rem;
  transition: transform 0.3s ease;
}

.ei-feature-cta:hover i {
  transform: translateX(4px);
}

/* Roster sidebar */
.ei-roster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(19, 38, 75, 0.1);
  box-shadow: 0 18px 40px -28px rgba(19, 38, 75, 0.35);
}

.ei-roster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid rgba(19, 38, 75, 0.08);
  margin-bottom: 4px;
}

.ei-roster-head strong {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.ei-roster-head > span:last-child {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

.ei-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}

.ei-row:hover {
  background: rgba(19, 38, 75, 0.03);
  border-color: rgba(19, 38, 75, 0.08);
}

.ei-row.is-active {
  background: rgba(13, 105, 54, 0.06);
  border-color: rgba(13, 105, 54, 0.35);
  box-shadow: 0 10px 24px -18px rgba(13, 105, 54, 0.55);
  transform: translateX(2px);
}

.ei-row-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(19, 38, 75, 0.08);
}

.ei-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ei-row.is-active .ei-row-thumb img,
.ei-row:hover .ei-row-thumb img {
  transform: scale(1.08);
}

.ei-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ei-row-code {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

.ei-row-meta strong {
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--brand-navy);
  letter-spacing: -0.01em;
}

.ei-row-meta small {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(19, 38, 75, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ei-row-price {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-navy);
  white-space: nowrap;
}

.ei-row-price small {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(19, 38, 75, 0.55);
  margin-left: 1px;
}

.ei-row.is-active .ei-row-price {
  color: var(--brand-secondary);
}

.ei-roster-foot {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(19, 38, 75, 0.04) 0%, rgba(13, 105, 54, 0.06) 100%);
  border: 1px solid rgba(19, 38, 75, 0.08);
}

.ei-roster-team {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.ei-roster-foot strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 2px;
}

.ei-roster-foot span {
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(19, 38, 75, 0.65);
  line-height: 1.35;
}

.ei-trust-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(19, 38, 75, 0.1);
}

.ei-trust-rail span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-navy);
}

.ei-trust-rail i {
  color: var(--brand-secondary);
}

@media (max-width: 1199.98px) {
  .ei-feature-panel {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

@media (max-width: 991.98px) {
  .ei-stage {
    grid-template-columns: 1fr;
  }

  .ei-feature {
    min-height: 0;
  }

  .ei-feature-panel {
    position: relative;
    inset: auto;
    display: none;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .ei-feature-panel.is-active {
    display: grid;
  }
}

@media (max-width: 767.98px) {
  .ei-feature-panel,
  .ei-feature-panel.is-active {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ei-feature-media {
    min-height: 220px;
    max-height: 240px;
  }

  .ei-feature-veil {
    background: linear-gradient(180deg, transparent 30%, rgba(19, 38, 75, 0.5) 100%);
  }

  .ei-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .ei-row-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
}

@media (max-width: 575.98px) {
  .ei-section {
    padding: 56px 0 64px;
  }

  .ei-metrics {
    gap: 8px 10px;
    font-size: 0.84rem;
  }

  .ei-metrics-dot {
    display: none;
  }

  .ei-roster {
    padding: 12px;
  }

  .ei-roster-foot {
    grid-template-columns: 1fr;
  }

  .ei-roster-team {
    width: 100%;
    height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ei-orb,
  .ei-live-dot,
  .ei-feature-panel,
  .ei-feature-media img,
  .ei-row,
  .ei-row-thumb img,
  .ei-feature-cta {
    animation: none !important;
    transition: none !important;
  }
}

body.theme-dark .ei-section {
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(61, 90, 138, 0.2) 0%, transparent 55%),
    linear-gradient(180deg, #162a4f 0%, #1c3a6e 100%) !important;
}

body.theme-dark .ei-intro-title,
body.theme-dark .ei-metrics,
body.theme-dark .ei-trust-rail span,
body.theme-dark .ei-roster-head strong,
body.theme-dark .ei-row-meta strong,
body.theme-dark .ei-row-price,
body.theme-dark .ei-roster-foot strong {
  color: #fff;
}

body.theme-dark .ei-sub,
body.theme-dark .ei-row-meta small,
body.theme-dark .ei-roster-foot span {
  color: #98a6bb;
}

body.theme-dark .ei-roster,
body.theme-dark .ei-row.is-active,
body.theme-dark .ei-roster-foot {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .ei-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .ei-trust-rail {
  border-top-color: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   SME INSURANCE — Clean stage: hero left + dual vertical + bottom LTR
   ========================================================================== */

.sme-section {
  position: relative;
  padding: 56px 0 48px;
  overflow: hidden;
  background: #13264b;
  color: #c5cedc;
  margin: 0 10px; 
  border-radius: 10px;
}

.sme-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sme-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.sme-glow-a {
  width: 480px;
  height: 480px;
  top: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(13, 105, 54, 0.28) 0%, transparent 70%);
}

.sme-glow-b {
  width: 400px;
  height: 400px;
  bottom: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(61, 90, 138, 0.35) 0%, transparent 70%);
}

.sme-inner {
  position: relative;
  z-index: 1;
}

.sme-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 24px;
}

.sme-head .section-tag-pill {
  margin-bottom: 14px;
}

.sme-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
}

.sme-title span {
  color: #0d6936;
}

.sme-sub {
  margin: 10px 0 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #ffffff;
}

/* Main stage: building left + 2 vertical marquees (~3 cards tall) */
.sme-stage {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) 1.3fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
  margin-bottom: 22px;
  height: 540px;
}

.sme-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(125, 206, 160, 0.28);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}

.sme-hero--fire {
  border-color: rgba(13, 105, 54, 0.55);
  box-shadow:
    0 0 0 2px rgba(13, 105, 54, 0.35),
    0 16px 40px rgba(13, 105, 54, 0.28),
    0 14px 36px rgba(0, 0, 0, 0.22);
}

.sme-hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0d6936;
  background: #ffffff;
  border: 1px solid rgba(13, 105, 54, 0.25);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  margin-bottom: 4px;
}

.sme-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sme-hero:hover img {
  transform: scale(1.05);
}

.sme-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 24, 48, 0.12) 0%, rgba(12, 24, 48, 0.72) 100%);
  pointer-events: none;
}

.sme-hero-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sme-hero-copy strong {
  font-family: var(--font-head);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7dcea0;
}

.sme-hero-copy > span {
  font-size: 1.05rem;
  font-weight: 600;
  color: #c5cedc;
}

.sme-hero-cta {
  margin-top: 10px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #0d6936;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  transition: background 0.25s ease, transform 0.25s ease;
}

.sme-hero-cta:hover {
  background: #128a48;
  color: #fff;
  transform: translateY(-2px);
}

.sme-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.sme-vert {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 24, 48, 0.35);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.sme-vert.is-paused .sme-vert-track,
.sme-vert:hover .sme-vert-track,
.sme-vert:focus-within .sme-vert-track {
  animation-play-state: paused;
}

.sme-vert-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  width: 100%;
  animation: smeVertUp 28s linear infinite;
}

.sme-vert--down .sme-vert-track {
  animation-name: smeVertDown;
}

@keyframes smeVertUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes smeVertDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* Vertical cards — larger readable type, ~3 visible */
.sme-vcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(12, 24, 48, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.sme-vcard:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(125, 206, 160, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.sme-vcard--featured {
  border-color: rgba(13, 105, 54, 0.65);
  background: rgba(13, 105, 54, 0.28);
  box-shadow:
    0 0 0 2px rgba(125, 206, 160, 0.35),
    0 12px 28px rgba(13, 105, 54, 0.3);
  transform: scale(1.02);
}

.sme-vcard--featured:hover {
  border-color: rgba(125, 206, 160, 0.8);
  box-shadow:
    0 0 0 2px rgba(125, 206, 160, 0.5),
    0 16px 32px rgba(13, 105, 54, 0.35);
}

.sme-vcard-badge--hot {
  color: #ffffff;
  background: #0d6936;
  border-color: #0d6936;
}

.sme-action-chips a.sme-chip--fire {
  background: #0d6936;
  color: #ffffff;
  border-color: #0d6936;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(13, 105, 54, 0.35);
}

.sme-action-chips a.sme-chip--fire:hover {
  background: #128a48;
  color: #ffffff;
}

.sme-vcard-media {
  height: 88px;
  overflow: hidden;
}

.sme-vcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.sme-vcard:hover .sme-vcard-media img {
  transform: scale(1.07);
}

.sme-vcard-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sme-vcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c8e6d5;
  background: rgba(13, 105, 54, 0.35);
  border: 1px solid rgba(125, 206, 160, 0.3);
}

.sme-vcard-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.sme-vcard-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(232, 238, 247, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sme-vcard-price {
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(232, 238, 247, 0.95);
}

.sme-vcard-price strong {
  color: #7dcea0;
  font-weight: 800;
  font-size: 1.05rem;
}

/* Bottom action band */
.sme-action-band {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(220px, 1.4fr) auto;
  gap: 16px 22px;
  align-items: center;
  margin-bottom: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(13, 105, 54, 0.18) 0%, rgba(12, 24, 48, 0.55) 55%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(125, 206, 160, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.sme-action-title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.sme-action-lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #98a6bb;
}

.sme-action-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sme-action-chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  color: #e8eef7;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sme-action-chips a i {
  color: #7dcea0;
  font-size: 0.85rem;
}

.sme-action-chips a:hover {
  color: #fff;
  background: rgba(13, 105, 54, 0.3);
  border-color: rgba(125, 206, 160, 0.45);
  transform: translateY(-1px);
}

.sme-action-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: #0d6936;
  border: 1px solid transparent;
  transition: background 0.25s ease, transform 0.25s ease;
}

.sme-action-cta:hover {
  background: #128a48;
  color: #fff;
  transform: translateY(-2px);
}

.sme-action-cta i {
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}

.sme-action-cta:hover i {
  transform: translateX(3px);
}

.sme-trust-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sme-trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #c5cedc;
}

.sme-trust-bar i {
  color: #7dcea0;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .sme-stage {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sme-hero {
    height: 260px;
  }

  .sme-cols {
    height: 480px;
  }

  .sme-action-band {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sme-action-chips {
    justify-content: center;
  }

  .sme-action-cta {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .sme-section {
    padding: 44px 0 40px;
  }

  .sme-cols {
    grid-template-columns: 1fr;
    height: 460px;
  }

  .sme-vert:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sme-vert-track,
  .sme-vcard,
  .sme-vcard-media img,
  .sme-hero img,
  .sme-action-chips a,
  .sme-action-cta {
    animation: none !important;
    transition: none !important;
  }
}

body.theme-dark .sme-section {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(13, 105, 54, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, #13264b 0%, #0c1830 100%) !important;
}