/* ==========================================================================
   GoBill widgets — heroes, cards, CTAs, stats, badges, posts
   ========================================================================== */

/* ---------- Hero slider ---------- */
.gb-hero {
  position: relative;
  background: var(--gb-hero-bg, #efeffe);
  overflow: hidden;
}
.gb-hero__track { position: relative; }
.gb-hero__slide {
  display: none;
  padding-block: clamp(48px, 6vw, 88px);
  animation: gb-fade .5s var(--gb-ease) both;
}
.gb-hero__slide.is-active { display: block; }
@keyframes gb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gb-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.gb-hero__heading {
  font-size: var(--gb-fs-h1);
  color: var(--gb-hero-heading, var(--gb-h1-color));
  margin-bottom: 20px;
}
.gb-hero__subtitle {
  font-size: var(--gb-fs-lead);
  color: var(--gb-hero-text, var(--gb-text-body));
  max-width: 46ch;
  margin-bottom: 32px;
}
.gb-hero__visual { position: relative; }
.gb-hero__media {
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--gb-shadow-lift);
  min-height: 240px;
}
.gb-hero__media--video { background: #000; }
.gb-hero__img { width: 100%; height: 100%; object-fit: cover; }
.gb-hero__media--video .gb-hero__img { display: block; }
.gb-hero__card {
  position: relative;
  margin: 16px auto 0 auto;
  max-width: 88%;
  background: #fff;
  border-radius: var(--gb-radius-card);
  padding: 22px 26px;
  box-shadow: var(--gb-shadow-hero-card);
  font-size: var(--gb-fs-sm);
  color: var(--gb-text-body);
  line-height: 1.55;
}
.gb-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 48px !important; height: 48px !important; border: 0 !important; border-radius: 9999px !important;
  background: #fff !important; color: var(--gb-navy) !important;
  box-shadow: 0 10px 24px -14px rgba(17,21,39,.45) !important; cursor: pointer; z-index: 3;
  transition: background var(--gb-dur) var(--gb-ease), color var(--gb-dur) var(--gb-ease);
}
.gb-hero__arrow:hover, .gb-hero__arrow:focus-visible { background: var(--gb-indigo) !important; color: #fff !important; outline: none; box-shadow: 0 0 0 10px rgba(91,79,232,.12),0 14px 30px -12px rgba(91,79,232,.8) !important; }
.gb-hero__arrow:active { transform: translateY(-50%) scale(.95); }
.gb-hero__arrow--prev { left: 16px; }
.gb-hero__arrow--next { right: 16px; }
.gb-hero__dots {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
}
.gb-hero__dot {
  width: 10px !important; height: 10px !important;
  border: 0 !important; border-radius: 99px !important;
  padding: 0 !important; margin: 0 !important;
  background: rgba(10, 6, 85, .22) !important;
  cursor: pointer; outline: none !important;
  box-shadow: none !important;
  transition: all var(--gb-dur) var(--gb-ease);
  display: block !important;
}
.gb-hero__dot.is-active { width: 28px !important; background: var(--gb-primary) !important; }

@media (max-width: 900px) {
  .gb-hero__inner { grid-template-columns: 1fr; }
  .gb-hero__card { margin-inline: auto; max-width: 100%; }
  .gb-hero__arrow { display: none; }
}

/* Mobile: match the target screenshot layout. */
@media (max-width: 767px) {
  .gb-hero__slide {
    padding-block: 28px 20px;
  }
  /* Larger font so the heading wraps to 2 lines (matches screenshot 2 & 3) */
  .gb-hero__heading {
    font-size: 38px !important;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    line-height: 1.15;
  }
  .gb-hero__subtitle {
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 100%;
    line-height: 1.5;
  }
  /* Stack CTA buttons vertically, left-aligned pills (matches screenshot 2 & 3) */
  .gb-hero__slide .gb-btn-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .gb-hero__slide .gb-btn-row .gb-btn {
    width: auto !important;
    min-width: 220px;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 28px !important;
  }
  /* Show slider arrows on mobile so user can swipe/tap (matches screenshot 2 & 3) */
  .gb-hero__arrow { display: flex !important; }
  /* Allow border-radius on image to be visible */
  .gb-hero { overflow: visible; }
  /* Inset the image from screen edges with rounded corners — matches screenshot 2 */
  .gb-hero__visual {
    padding-inline: 16px;
  }
  .gb-hero__media {
    border-radius: 20px !important;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  /* Caption card sits clearly below the image with breathing room */
  .gb-hero__card {
    margin: 40px 16px 0;
    padding: 18px 20px;
    font-size: 14px;
    position: relative;
    z-index: 2;
  }
  /* Pagination dots: take out of absolute positioning so they flow below the card */
  .gb-hero__dots {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 16px 0 8px !important;
  }
}

/* ---------- Slide 2: Steps full-width layout ---------- */
.gb-hero__slide--steps {
  height: auto !important;
  min-height: 0 !important;
}
.gb-hero__steps-full {
  width: 100%;
  padding-top: 32px;
  padding-bottom: 48px;
  text-align: center;
}
.gb-hero__steps-eyebrow {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gb-primary);
  letter-spacing: .04em;
  margin: 0 0 12px;
}
.gb-hero__steps-heading {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--gb-navy, #0a0655);
  line-height: 1.25;
  margin: 0 auto 28px;
  max-width: 720px;
}
.gb-hero__steps-card {
  background: rgba(255,255,255,.6);
  border-radius: 20px;
  padding: 32px 28px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px rgba(10,6,85,.08);
  border: 1px solid rgba(255,255,255,.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(100%2C90%2C200%2C0.15)'/%3E%3Ccircle cx='0' cy='0' r='1' fill='rgba(100%2C90%2C200%2C0.1)'/%3E%3Ccircle cx='60' cy='0' r='1' fill='rgba(100%2C90%2C200%2C0.1)'/%3E%3Ccircle cx='0' cy='60' r='1' fill='rgba(100%2C90%2C200%2C0.1)'/%3E%3Ccircle cx='60' cy='60' r='1' fill='rgba(100%2C90%2C200%2C0.1)'/%3E%3C/svg%3E");
}
.gb-hero__steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px;
  text-align: left;
}
.gb-hero__steps-divider {
  border: none;
  border-top: 2px dashed rgba(100,90,200,.35);
  margin: 20px 0;
}
.gb-hero__step {
  color: var(--gb-navy, #0a0655);
  font-size: .8rem;
  line-height: 1.5;
}
.gb-hero__step-label {
  display: block;
  font-style: italic;
  font-weight: 600;
  color: var(--gb-primary);
  margin-bottom: 2px;
  font-size: .75rem;
}
.gb-hero__step strong {
  display: block;
  font-weight: 700;
  font-style: italic;
  font-size: .8rem;
  margin-bottom: 5px;
  color: var(--gb-navy, #0a0655);
}
.gb-hero__step p {
  margin: 0;
  color: rgba(10,6,85,.7);
  font-size: .73rem;
}
.gb-hero__steps-btn {
  font-size: 1rem !important;
  padding: 16px 48px !important;
  border-radius: 50px !important;
}
@media (max-width: 900px) {
  .gb-hero__steps-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .gb-hero__steps-grid { grid-template-columns: 1fr; }
}

/* ---------- Slide 3: Dashboard layout ---------- */
.gb-hero__slide--dash { height: auto !important; min-height: 0 !important; }
.gb-hero__dash-full {
  width: 100%; padding-top: 28px; padding-bottom: 40px; text-align: center;
}
.gb-hero__dash-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(10,6,85,.1);
  padding: 20px 20px 16px;
  text-align: left;
  font-size: .82rem;
}
/* Header */
.gb-dash__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.gb-dash__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 3px; color: #111; }
.gb-dash__subtitle { margin: 0; color: #444; font-size: .8rem; }
.gb-dash__ai-btn {
  background: #1a7a5e; color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
/* Performance score band */
.gb-dash__perf {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid #e8e8f0; border-radius: 10px; padding: 12px 14px;
  margin-bottom: 12px;
}
.gb-dash__perf-score { min-width: 90px; }
.gb-dash__perf-label { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: #888; margin-bottom: 2px; }
.gb-dash__big-num { display: block; font-size: 2rem; font-weight: 800; line-height: 1; }
.gb-dash__big-num--red { color: #e53935; }
.gb-dash__status--red { display: block; color: #e53935; font-weight: 700; font-size: .8rem; }
.gb-dash__trend { display: block; font-size: .7rem; color: #1a7a5e; margin-top: 2px; }
.gb-dash__perf-metrics { flex: 1; display: flex; gap: 12px; justify-content: space-around; }
.gb-dash__perf-metric { text-align: center; font-size: .7rem; color: #666; }
.gb-dash__perf-metric span { display: block; margin-bottom: 2px; }
.gb-dash__perf-metric strong { display: block; font-size: 1.2rem; font-weight: 800; }
.gb-dash__col--red { color: #e53935; }
.gb-dash__col--orange { color: #f57c00; }
.gb-dash__col--gray { color: #555; }
.gb-dash__delta { font-size: .65rem; font-weight: 600; display: block; }
.gb-dash__delta--up { color: #1a7a5e; }
.gb-dash__delta--down { color: #e53935; }
.gb-dash__view-btn {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 7px 12px; font-size: .75rem; cursor: pointer; white-space: nowrap; color: #333;
}
/* 3 metric cards */
.gb-dash__metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 10px; }
.gb-dash__metric-card {
  border: 1px solid #e8e8f0; border-radius: 10px; padding: 12px 14px;
}
.gb-dash__metric-label { display: block; font-size: .7rem; color: #666; margin-bottom: 4px; }
.gb-dash__metric-val { display: block; font-size: 1.5rem; font-weight: 800; color: #111; line-height: 1.1; }
.gb-dash__metric-delta { display: block; font-size: .7rem; font-weight: 600; margin-bottom: 6px; }
.gb-dash__metric-card p { margin: 0 0 10px; font-size: .72rem; color: #555; line-height: 1.4; }
.gb-dash__action-btn {
  width: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 7px;
  padding: 6px; font-size: .72rem; cursor: pointer; color: #333;
}
/* KPI pills */
.gb-dash__kpi-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.gb-dash__kpi {
  flex: 1; min-width: 60px;
  border: 1px solid #e8e8f0; border-radius: 9px; padding: 8px 10px;
  text-align: center;
}
.gb-dash__kpi--warn { background: #fffde7; border-color: #f9a825; }
.gb-dash__kpi-label { display: block; font-size: .55rem; font-weight: 700; letter-spacing: .04em; color: #888; margin-bottom: 3px; }
.gb-dash__kpi strong { display: block; font-size: .95rem; font-weight: 800; color: #111; }
.gb-dash__kpi em { display: block; font-size: .65rem; font-style: normal; }
.gb-dash__kpi .gb-dash__delta--up { color: #1a7a5e; }
.gb-dash__kpi .gb-dash__delta--down { color: #e53935; }
/* AI Insights */
.gb-dash__insights-hdr {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.gb-dash__insights-title { font-weight: 700; font-size: .85rem; color: #111; }
.gb-dash__insights-more { font-size: .75rem; color: #1a7a5e; text-decoration: none; }
.gb-dash__insight-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.gb-dash__insight {
  border-radius: 10px; padding: 12px 14px; border: 1px solid;
}
.gb-dash__insight--risk { background: #fff5f5; border-color: #ffd0d0; }
.gb-dash__insight--trend { background: #fffde7; border-color: #ffe082; }
.gb-dash__insight--opp { background: #f1fff8; border-color: #a7f3d0; }
.gb-dash__insight-tags { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.gb-dash__insight strong { display: block; font-size: .8rem; margin-bottom: 3px; color: #111; }
.gb-dash__insight p { margin: 0; font-size: .72rem; color: #555; }
.gb-dash__tag { font-size: .62rem; font-weight: 700; border-radius: 4px; padding: 2px 5px; }
.gb-dash__tag--risk { color: #e53935; }
.gb-dash__tag--trend { color: #f57c00; }
.gb-dash__tag--opp { color: #1a7a5e; }
.gb-dash__tag--conf { background: #e8f5e9; color: #1a7a5e; }
.gb-dash__tag--med { background: #fff3e0; color: #e65100; }
.gb-dash__tag--dept { background: #ede7f6; color: #4527a0; }
@media (max-width: 800px) {
  .gb-dash__metric-row { grid-template-columns: 1fr; }
  .gb-dash__insight-cards { grid-template-columns: 1fr; }
  .gb-dash__perf { flex-wrap: wrap; }
  .gb-dash__perf-metrics { flex-wrap: wrap; }
}


.gb-phero { position: relative; }
.gb-phero__bg {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw;
  background-size: cover; background-position: center;
  filter: blur(5px); transform: scale(1.02);
}
.gb-phero__overlay {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw;
  background: linear-gradient(120deg, var(--gb-navy), var(--gb-primary));
}
/* Rounded card variant (when used inside a section with padding) */
.gb-section .gb-phero--has-bg.gb-phero--card .gb-phero__bg,
.gb-section .gb-phero--has-bg.gb-phero--card .gb-phero__overlay {
  left: 0; width: 100%;
  border-radius: var(--gb-radius-card);
}
.gb-phero--has-bg { padding: clamp(120px, 10vw, 160px) 24px; color: #fff; }
.gb-phero--has-bg :is(h1, h2, h3) { color: #fff; }
.gb-phero--has-bg p { color: var(--gb-text-on-dark-muted); }
.gb-phero__inner { position: relative; z-index: 2; display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.gb-phero--image-right .gb-phero__inner { grid-template-columns: 1.05fr .95fr; }
.gb-phero--image-left .gb-phero__inner { grid-template-columns: .95fr 1.05fr; }
.gb-phero--image-left .gb-phero__media { order: -1; }
.gb-phero--align-center .gb-phero__copy { text-align: center; }
.gb-phero--align-center .gb-btn-row { justify-content: center; }
.gb-phero--align-right .gb-phero__copy { text-align: right; }
.gb-phero--align-right .gb-btn-row { justify-content: flex-end; }
.gb-phero--centered .gb-phero__copy { max-width: 800px; margin-inline: auto; }
/* Page hero type, measured from gobill.co: 54px/800 heading, 22px subtitle. */
.gb-phero__heading {
  margin-bottom: 16px;
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.375rem);  /* -> 54px */
  font-weight: 800;
  line-height: 1.15;
}
.gb-phero__subtitle {
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);  /* -> 22px */
  max-width: 520px;
  line-height: 1.5;
}
.gb-phero--align-center .gb-phero__subtitle { margin-inline: auto; }
.gb-phero__desc { margin-block: 16px; }
.gb-phero__media img { border-radius: var(--gb-radius-card); box-shadow: var(--gb-shadow-lift); width: 100%; }
.gb-phero .gb-btn-row { margin-top: 28px; }

/* ==================================================================
   GoBill — AI hero section
   ================================================================== */

.gb-ai-hero {
  --gb-indigo: #5b4fe8;
  --gb-indigo-bright: #6f63f8;
  --gb-indigo-soft: #a89dff;
  --gb-bg-1: #2b2a78;
  --gb-bg-2: #141233;
  --gb-bg-3: #05050d;

  position: relative;
  overflow: hidden;
  padding: 120px 24px 110px;
  text-align: center;
  background:
    radial-gradient(58% 46% at 50% 6%, rgba(111, 99, 248, 0.32), transparent 72%),
    linear-gradient(135deg, var(--gb-bg-1) 0%, var(--gb-bg-2) 48%, var(--gb-bg-3) 100%);
}

.gb-ai-hero__glow {
  position: absolute;
  inset-inline: 0;
  top: -120px;
  margin-inline: auto;
  width: min(900px, 90%);
  height: 480px;
  border-radius: 9999px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(111, 99, 248, 0.22), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.gb-ai-hero__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}

.gb-ai-hero__eyebrow {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gb-indigo-soft);
}

.gb-ai-hero__title {
  margin: 20px 0 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.gb-ai-hero__subtitle {
  margin: 28px auto 0;
  max-width: 620px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #b9bdea;
}

.gb-ai-hero__cta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  padding: 18px 40px;
  border: 0;
  border-radius: 9999px;
  background: var(--gb-indigo-bright);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 18px 40px -12px rgba(111, 99, 248, 0.55);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.gb-ai-hero__cta:hover,
.gb-ai-hero__cta:focus-visible {
  background: #7d72fa;
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -10px rgba(111, 99, 248, 0.7);
  outline: none;
  color: #ffffff;
}

.gb-ai-hero__cta:active {
  transform: translateY(0);
}

/* ---------- broadcast icon ---------- */

.gb-ai-hero__signal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 56px auto 0;
  border-radius: 9999px;
  border: 1px solid rgba(160, 150, 255, 0.35);
  color: #c9c4ff;
}

.gb-ai-hero__signal::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 9999px;
  border: 1px solid rgba(160, 150, 255, 0.16);
  animation: gb-hero-pulse 2.6s ease-out infinite;
}

.gb-ai-hero__signal svg {
  width: 34px;
  height: 34px;
}

@keyframes gb-hero-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  80% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gb-ai-hero__signal::before {
    animation: none;
  }
  .gb-ai-hero__cta {
    transition: none;
  }
}

@media (max-width: 640px) {
  .gb-ai-hero {
    padding: 90px 20px 80px;
  }
  .gb-ai-hero__subtitle {
    font-size: 16px;
  }
  .gb-ai-hero__cta {
    padding: 16px 32px;
    font-size: 15px;
  }
}

/* ==================================================================
   GoBill Hero Series — full-width blurred dark banner
   ================================================================== */

.gb-hs-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  text-align: center;
  background-color: #0c0f2e;
}

/* Blurred background image */
.gb-hs-hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: var(--gb-hs-bg);
  background-size: cover;
  background-position: center;
  filter: blur(4px) brightness(0.45);
  transform: scale(1.05);
  z-index: 0;
}

/* Dark gradient overlay for better text contrast */
.gb-hs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 12, 46, 0.55) 0%,
    rgba(10, 12, 46, 0.72) 100%);
  z-index: 1;
}

.gb-hs-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
}

.gb-hs-hero__eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  padding: 5px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.gb-hs-hero__heading {
  margin: 0 0 20px;
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
}

.gb-hs-hero__subtitle {
  margin: 0 auto 36px;
  max-width: 580px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(200, 210, 255, 0.85);
}

.gb-hs-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 9999px;
  background: rgba(109, 99, 248, 0.75);
  backdrop-filter: blur(6px);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.gb-hs-hero__btn:hover,
.gb-hs-hero__btn:focus-visible {
  background: rgba(109, 99, 248, 1);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  color: #ffffff;
  outline: none;
}

@media (max-width: 640px) {
  .gb-hs-hero {
    padding: 60px 20px;
  }
  .gb-hs-hero__subtitle {
    font-size: 15px;
  }
}

@keyframes gb-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes gb-btn-glow {
  0% { box-shadow: 0 0 15px 0 rgba(109, 106, 255, 0.4); }
  50% { box-shadow: 0 0 35px 5px rgba(109, 106, 255, 0.9); }
  100% { box-shadow: 0 0 15px 0 rgba(109, 106, 255, 0.4); }
}

.gb-phero__bottom-icon {
  margin-top: 48px;
  display: flex;
  justify-content: inherit;
}
.gb-phero--align-center .gb-phero__bottom-icon { justify-content: center; }
.gb-phero__icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #4f46e5;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: gb-pulse-ring 2.5s infinite;
}
.gb-phero__icon-circle i,
.gb-phero__icon-circle svg {
  width: 32px;
  height: 32px;
  color: #c7d2fe;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-phero .gb-btn--primary {
  animation: gb-btn-glow 3s infinite;
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: 999px;
}
@media (max-width: 860px) {
  .gb-phero--image-right .gb-phero__inner,
  .gb-phero--image-left .gb-phero__inner { grid-template-columns: 1fr; }
  .gb-phero--image-left .gb-phero__media { order: 0; }
}

/* ---------- Feature cards ---------- */
.gb-cards { display: grid; gap: var(--gb-gap); }
:where(.gb-cards) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-cards__item {
  --gb-card-accent: var(--gb-primary);
  background: #fff; border-radius: var(--gb-radius-card); padding: 28px;
  transition: transform var(--gb-dur) var(--gb-ease), box-shadow var(--gb-dur) var(--gb-ease);
  display: flex; flex-direction: column; gap: 10px;
}
.gb-cards--raised .gb-cards__item { box-shadow: var(--gb-shadow-lift); }
.gb-cards--raised .gb-cards__item:hover { transform: translateY(-6px); box-shadow: var(--gb-shadow-testimonial); }
.gb-cards--outline .gb-cards__item { border: 1px solid rgba(10, 6, 85, .12); }
.gb-cards--outline .gb-cards__item:hover { border-color: var(--gb-card-accent); }
.gb-cards--plain .gb-cards__item { background: transparent; padding: 0; }
.gb-cards--filled .gb-cards__item { background: var(--gb-violet-soft); }
.gb-cards--filled-navy .gb-cards__item { 
  background: var(--gb-navy-deep, #050230); color: #fff; 
  padding: clamp(32px, 4vw, 64px); min-height: 280px;
  border-radius: var(--gb-radius-card, 20px);
  box-shadow: var(--gb-shadow-lift);
}
.gb-cards--filled-navy .gb-cards__item:nth-child(1) { background: linear-gradient(135deg, var(--gb-violet), var(--gb-primary)); }
.gb-cards--filled-navy .gb-cards__title,
.gb-cards--filled-navy .gb-cards__text,
.gb-cards--filled-navy .gb-cards__more { color: #fff; }
.gb-cards--filled-navy .gb-cards__header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.gb-cards--filled-navy .gb-cards__title { margin: 0; font-size: 1.5rem; }
.gb-cards--filled-navy .gb-cards__icon { margin: 0; background: rgba(255, 255, 255, 0.15); color: #fff; }
.gb-cards--align-center .gb-cards__item { text-align: center; align-items: center; }
/* Make the header a flex column so the icon block is centred the same way
   as the title text. Without this the icon stays left-aligned in a plain
   block context while text-align:center only centres the inline title text. */
.gb-cards--align-center .gb-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gb-cards__icon {
  width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gb-violet), var(--gb-navy));
  color: #fff; margin-bottom: 16px;
}
.gb-cards--icon-rounded .gb-cards__icon { border-radius: 16px; }
.gb-cards--icon-circle .gb-cards__icon { border-radius: 50%; }
.gb-cards--icon-none .gb-cards__icon { background: none; width: auto; height: auto; }
.gb-cards__icon img { width: 32px; height: 32px; object-fit: contain; }
/* Normalise all icon images to white so they are consistent on the
   violet→navy gradient circle/rounded background. Dark navy icons and
   white-stroke icons both become pure white (transparent pixels unchanged). */
.gb-cards--icon-circle .gb-cards__icon img,
.gb-cards--icon-rounded .gb-cards__icon img {
  filter: brightness(0) invert(1);
}
.gb-cards__title { font-size: 1.125rem; margin: 0; color: var(--gb-text-dark); }
.gb-cards__text { font-size: var(--gb-fs-sm); color: var(--gb-text-body); margin: 0; }
.gb-cards__more {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--gb-fs-sm); font-weight: 600; color: var(--gb-primary); text-decoration: none;
}
.gb-cards__more:hover { color: var(--gb-violet-deep); }
.gb-cards.horizontal .gb-cards__item { padding: 16px 20px; }
.gb-cards.horizontal .gb-cards__header { display: flex; align-items: center; gap: 16px; margin: 0; }
.gb-cards.horizontal .gb-cards__icon { margin: 0; flex: 0 0 40px; width: 40px; height: 40px; }
.gb-cards.horizontal .gb-cards__title { font-size: 1rem; font-weight: 500; }
.gb-section--navy .gb-cards--plain .gb-cards__title,
.gb-section--violet .gb-cards--plain .gb-cards__title { color: #fff; }

.gb-cards__number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #e0e2fb; 
  margin-bottom: 12px;
  line-height: 1;
}

/* ---------- CTA ---------- */
.gb-cta { text-align: center; }
.gb-cta--boxed {
  background: var(--gb-cta-bg, var(--gb-primary-alt));
  color: var(--gb-cta-fg, #fff);
  border-radius: var(--gb-radius-card);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 72px);
}
.gb-cta__icon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18); color: var(--gb-cta-fg, #fff);
}
.gb-cta__icon--img {
  width: auto; height: auto; border-radius: 0; background: none;
}
.gb-cta__heading { color: var(--gb-cta-fg, inherit); margin-bottom: 12px; font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; }
.gb-cta__text { color: var(--gb-cta-fg, inherit); max-width: 62ch; margin: 0 auto 28px; font-size: 1.125rem; }
.gb-cta .gb-btn-row { justify-content: center; }

.gb-cta-split {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; background: var(--gb-violet-soft); border-radius: var(--gb-radius-card);
  padding: clamp(28px, 3.5vw, 44px);
}
.gb-cta-split__copy h2 { margin-bottom: 6px; }
.gb-cta-split__copy p { margin: 0; }

/* ---------- Trust badges ---------- */
.gb-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 44px);
  list-style: none; margin: 0; padding: 0;
}
.gb-badges__item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; max-width: 150px;
}
.gb-badges__circle {
  width: 68px; height: 68px; border-radius: 50%; background: #fff; color: var(--gb-primary);
  display: grid; place-items: center; box-shadow: var(--gb-shadow-card);
}
.gb-badges__circle img { width: 34px; height: 34px; object-fit: contain; }
.gb-badges__short { font-weight: 700; font-size: 1.125rem; color: var(--gb-navy); }
.gb-badges__label { font-size: var(--gb-fs-sm); font-weight: 600; line-height: 1.35; }
.gb-section--violet .gb-badges__label, .gb-section--navy .gb-badges__label { color: #fff; }

/* ---------- Stats ---------- */
.gb-stats { display: grid; gap: var(--gb-gap); text-align: center; }
:where(.gb-stats) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-stats__item { padding: 0; }
.gb-stats--boxed .gb-stats__item {
  background: #111042;
  border-radius: 12px;
  padding: 48px 24px;
  box-shadow: 0 10px 30px rgba(17,16,66,0.15);
}
.gb-stats__value { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; color: #7c5cff; line-height: 1.1; margin-bottom: 16px; }
.gb-stats__label { font-weight: 500; color: #fff; font-size: 0.95rem; line-height: 1.4; margin-top: 0; }
.gb-stats__note { font-size: var(--gb-fs-sm); color: rgba(255,255,255,0.7); margin-top: 4px; }
.gb-section--navy .gb-stats__label, .gb-section--violet .gb-stats__label { color: #fff; }
.gb-section--navy .gb-stats__value, .gb-section--violet .gb-stats__value { color: #fff; }

/* ---------- Post grid ---------- */
.gb-posts { display: grid; gap: var(--gb-gap); }
:where(.gb-posts) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-posts__item {
  background: #fff; border-radius: var(--gb-radius-card); overflow: hidden;
  box-shadow: var(--gb-shadow-lift);
  transition: transform var(--gb-dur) var(--gb-ease), box-shadow var(--gb-dur) var(--gb-ease);
}
.gb-posts__item:hover { transform: translateY(-6px); box-shadow: var(--gb-shadow-testimonial); }
.gb-posts__link { display: block; height: 100%; }
.gb-posts__media { aspect-ratio: 16 / 10; background: var(--gb-violet-soft); position: relative; overflow: hidden; }
.gb-posts__media img { width: 100%; height: 100%; object-fit: cover; }
.gb-posts__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  font-size: var(--gb-fs-sm); font-weight: 600; color: var(--gb-navy); text-align: center;
}
.gb-posts__body { padding: 20px 22px 24px; }
.gb-posts__title { font-size: 1.0625rem; margin-bottom: 8px; }
.gb-posts__excerpt { font-size: var(--gb-fs-sm); color: var(--gb-text-body); }
.gb-posts__date { font-size: .8125rem; color: var(--gb-text-muted); margin: 0; }
.gb-posts__empty { text-align: center; color: var(--gb-text-muted); }

/* ---------- Testimonials ---------- */
.gb-tst { display: grid; gap: var(--gb-gap); }
:where(.gb-tst) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-tst__item {
  background: #fff; border-radius: var(--gb-radius-card); padding: 26px;
  box-shadow: var(--gb-shadow-lift); margin: 0; display: flex; flex-direction: column; gap: 14px;
}
.gb-tst__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gb-tst__who { display: flex; align-items: center; gap: 12px; }
.gb-tst__avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--gb-violet-soft);
}
.gb-tst__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gb-tst__avatar--initial { font-weight: 700; color: var(--gb-primary); }
.gb-tst__meta { display: flex; flex-direction: column; }
.gb-tst__name { font-weight: 600; color: var(--gb-navy); font-size: .9375rem; }
.gb-tst__role { font-size: .8125rem; color: var(--gb-text-muted); }
.gb-tst__mark { color: var(--gb-violet-soft); flex: 0 0 auto; }
.gb-tst__stars { display: flex; gap: 2px; color: #f5a623; }
.gb-tst__quote { margin: 0; font-size: var(--gb-fs-sm); color: var(--gb-text-body); font-style: italic; }
.gb-tst__quote p:last-child { margin-bottom: 0; }

/* ---------- Checklist ---------- */
.gb-checklist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.gb-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--gb-fs-sm); color: var(--gb-text-body); }
.gb-checklist__icon {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gb-primary) 14%, transparent); color: var(--gb-primary);
}
.gb-section--navy .gb-checklist li, .gb-section--violet .gb-checklist li { color: var(--gb-text-on-dark-muted); }
.gb-section--navy .gb-checklist__icon, .gb-section--violet .gb-checklist__icon { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Media + text ---------- */
.gb-mt { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; grid-template-columns: 1fr 1fr; }
.gb-mt--text-wide { grid-template-columns: .8fr 1.2fr; }
.gb-mt--media-wide { grid-template-columns: 1.2fr .8fr; }
.gb-mt--right .gb-mt__media { order: 2; }
.gb-mt__media { margin: 0; }
.gb-mt__media img { width: 100%; border-radius: var(--gb-radius-card); box-shadow: var(--gb-shadow-lift); }
.gb-mt__media figcaption { font-size: .8125rem; color: var(--gb-text-muted); margin-top: 10px; }
/* Placeholder or explicit background card */
.gb-mt__media--placeholder,
.gb-mt__media-wrap.gb-mt__media--card {
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--gb-violet), var(--gb-navy));
  box-shadow: 0 12px 40px rgba(108,92,231,0.30);
  padding: 16px;
  overflow: hidden;
}
.gb-mt__media--placeholder {
  min-height: 320px;
}
@media (min-width: 640px) {
  .gb-mt__media-wrap.gb-mt__media--card {
    padding: 24px;
  }
}
.gb-mt__media-wrap.gb-mt__media--card img {
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.gb-mt__placeholder-inner {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
  color: #fff;
}
.gb-mt__placeholder-inner svg { width: 56px; height: 56px; opacity: .9; }
.gb-mt__body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .gb-mt, .gb-mt--text-wide, .gb-mt--media-wide { grid-template-columns: 1fr; }
  .gb-mt--right .gb-mt__media { order: 0; }
}

/* ---------- FAQ / Accordion ---------- */
/* FAQ — card style */
.gb-faq { border-top: none; display: flex; flex-direction: column; gap: 14px; }
.gb-faq__item {
  border-bottom: none;
  background: #ffffff; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20,10,60,0.06); overflow: hidden;
}
.gb-faq__q { margin: 0; }
.gb-faq__trigger {
  width: 100% !important; background: transparent !important; border: none !important;
  padding: 22px 26px !important; margin: 0 !important;
  cursor: pointer !important; display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 16px !important;
  text-align: left; font-size: 1rem; font-weight: 800;
  color: #1e1a4d; font-family: inherit; box-sizing: border-box !important;
  outline: none; transition: color .2s ease;
}
.gb-faq__trigger:hover { color: var(--gb-primary, #6C5CE7); }
.gb-faq__trigger:focus-visible { outline: 2px solid var(--gb-primary, #6C5CE7); outline-offset: -2px; }
.gb-faq__trigger > span:first-child { flex: 1; }
/* Chevron circle */
.gb-faq__icon {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #f0eff5;
  transition: background .2s ease;
}
.gb-faq__icon::before {
  content: '';
  display: block; width: 8px; height: 8px;
  border-right: 2.3px solid #1e1a4d; border-bottom: 2.3px solid #1e1a4d;
  transform: rotate(45deg); margin-top: -3px;
  transition: transform .25s ease, border-color .2s ease;
}
.gb-faq__item.is-open .gb-faq__trigger { color: #6C5CE7; }
.gb-faq__item.is-open .gb-faq__icon { background: #6C5CE7; }
.gb-faq__item.is-open .gb-faq__icon::before { transform: rotate(-135deg); margin-top: 3px; border-color: #ffffff; }
/* Answer panel */
.gb-faq__a { overflow: hidden; }
.gb-faq__a[hidden] { display: none; }
.gb-faq__a-inner { padding: 0 26px 24px; color: #4a4560; line-height: 1.65; font-size: 0.9rem; }
/* Numbered badge variant */
.gb-faq--numbered { counter-reset: gb-faq-n; }
.gb-faq--numbered .gb-faq__item { counter-increment: gb-faq-n; }
.gb-faq--numbered .gb-faq__trigger::before {
  content: counter(gb-faq-n);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px; background: #eeeffe; color: #665ffd;
  font-size: .85rem; font-weight: 700; letter-spacing: 0;
}

/* ---------- Sitemap ---------- */
.gb-sitemap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gb-gap, 24px);
  align-items: start;
}
.gb-sitemap__col {
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 12px rgba(20, 10, 60, 0.05);
}
.gb-sitemap__title {
  font-size: 1.1rem; font-weight: 800;
  color: #1e1a4d; margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #e8e7f4;
}
.gb-sitemap__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.gb-sitemap__list li { display: flex; align-items: center; gap: 8px; }
.gb-sitemap__list li::before {
  content: '';
  display: inline-block; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid var(--gb-primary-alt, #4b47c9);
  border-bottom: 2px solid var(--gb-primary-alt, #4b47c9);
  transform: rotate(-45deg);
}
.gb-sitemap__list a {
  font-size: 0.9rem; color: #3d3a5e; text-decoration: none;
  transition: color .2s;
}
.gb-sitemap__list a:hover { color: var(--gb-primary, #6C5CE7); }



/* ---------- Contact info ---------- */
.gb-info { display: grid; gap: var(--gb-gap); list-style: none; margin: 0; padding: 0; }
:where(.gb-info) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-info__item {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border-radius: var(--gb-radius-card); padding: 24px; box-shadow: var(--gb-shadow-lift);
}
.gb-info__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--gb-violet-soft); color: var(--gb-primary);
}
.gb-info__body { display: flex; flex-direction: column; gap: 4px; }
.gb-info__label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gb-text-muted); font-weight: 600; }
.gb-info__value { font-weight: 600; color: var(--gb-navy); }
a.gb-info__value:hover { color: var(--gb-primary); }

/* Responsive fallbacks at ZERO specificity (:where) so any Elementor column
   control — desktop, tablet or mobile — always wins over these defaults. */
@media (max-width: 900px) {
  :where(.gb-cards, .gb-stats, .gb-posts, .gb-tst, .gb-info) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  :where(.gb-cards, .gb-stats, .gb-posts, .gb-tst, .gb-info) { grid-template-columns: minmax(0, 1fr); }
}

/* Collapse split layouts to a single column when no image has been set yet. */
:where(.gb-mt--no-media) { grid-template-columns: minmax(0, 1fr); }
.gb-mt--no-media .gb-mt__copy { max-width: 820px; }
.gb-hero__visual:empty { display: none; }
:where(.gb-hero__inner:has(.gb-hero__visual:empty)) { grid-template-columns: minmax(0, 1fr); }

/* Hero slide: per-slide background layers set via repeater controls. */
.gb-hero__slide { position: relative; background-repeat: no-repeat; }
.gb-hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.gb-hero__slide > .gb-container { position: relative; z-index: 1; }
/* Per-slide text alignment. */
.gb-hero__copy--center .gb-hero__subtitle { margin-inline: auto; }
.gb-hero__copy--center .gb-btn-row { justify-content: center; }
.gb-hero__copy--right .gb-hero__subtitle { margin-inline: auto 0; }
.gb-hero__copy--right .gb-btn-row { justify-content: flex-end; }

/* Hero headings are visually identical whether they render as H1 or H2. */
h2.gb-hero__heading { font-size: var(--gb-fs-h1); line-height: var(--gb-lh-tight); margin-bottom: 20px; color: var(--gb-hero-heading, var(--gb-h1-color)); }

/* ==========================================================================
   AI Optimization hero section — gb-ai-opt
   Matches the "Billing to Brilliance: Powered by AI." design:
   full-width dark navy/indigo gradient, centered copy, pulsing icon circle.
   ========================================================================== */

.gb-ai-opt {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 96px);
  background: linear-gradient(
    160deg,
    var(--gb-ai-opt-bg-start, #0d0b5e) 0%,
    var(--gb-ai-opt-bg-end,   #1e1080) 60%,
    #12106a 100%
  );
  text-align: center;
  color: #fff;
  /* Extend the background to the viewport edges even when inside a boxed container */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* Decorative radial blobs */
.gb-ai-opt__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: .35;
}
.gb-ai-opt__blob--1 {
  width: 520px; height: 520px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, #4d46e0 0%, transparent 70%);
}
.gb-ai-opt__blob--2 {
  width: 400px; height: 400px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, #635efa 0%, transparent 70%);
}

/* Inner container */
.gb-ai-opt__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow label */
.gb-ai-opt__eyebrow {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(165, 180, 252, 0.35);
  color: #a5b4fc;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Heading */
.gb-ai-opt__heading {
  margin: 0 auto 20px;
  max-width: 760px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--gb-ai-opt-heading, #ffffff);
}

/* Subtitle */
.gb-ai-opt__subtitle {
  margin: 0 auto 36px;
  max-width: 560px;
  font-size: clamp(1rem, .9rem + .4vw, 1.1875rem);
  line-height: 1.65;
  color: var(--gb-ai-opt-text, rgba(255, 255, 255, 0.85));
}

/* CTA button row */
.gb-ai-opt .gb-btn-row {
  justify-content: center;
  margin-bottom: 0;
}

/* Override primary button with the glowing animation used on other hero sections */
.gb-ai-opt .gb-btn--primary {
  animation: gb-btn-glow 3s infinite;
}

/* Bottom animated icon circle */
.gb-ai-opt__bottom-icon {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.gb-ai-opt__icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(129, 140, 248, 0.5);
  background: transparent;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--gb-dur) var(--gb-ease);
  text-decoration: none;
}
.gb-ai-opt__icon-circle:hover {
  transform: scale(1.05);
}
.gb-ai-opt__icon-circle i,
.gb-ai-opt__icon-circle svg {
  width: 32px;
  height: 32px;
  color: #c7d2fe;
  pointer-events: none;
  font-size: 32px; /* In case it's a font icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 600px) {
  .gb-ai-opt__blob--1 { width: 300px; height: 300px; }
  .gb-ai-opt__blob--2 { width: 240px; height: 240px; }
}

/* ---------- Episode Hero ---------- */

/* Outer wrapper — no extra padding, gb-section already handles it */
.gb-ep-wrap {
  padding: 0;
  margin: 100px 0; /* Add explicit spacing */
  background: transparent;
}

/* Navy outer frame */
.gb-ep-frame {
  max-width: 1150px;
  margin: 0 auto;
  background: transparent;
  padding: 0;
}

/* White inner card */
.gb-ep-inner {
  background: #ffffff;
  border-radius: 18px;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  flex-wrap: wrap;
  box-shadow: 0 30px 60px rgba(18,10,63,0.15);
}

/* ---- Left column ---- */
.gb-ep-left {
  flex: 1 1 420px;
  min-width: 300px;
  padding: 28px 28px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #272B57; /* Dark blue background */
  border-right: 1px solid #1f2246;
}

.gb-ep-slider {
  overflow: hidden;
}

/* Slides */
.gb-ep-slide {
  display: none;
}
.gb-ep-slide:first-child,
.gb-ep-slide[aria-hidden="false"],
.gb-ep-slide:not([aria-hidden]) {
  display: block;
}
.gb-hero__slide.gb-ep-slide[aria-hidden="true"] {
  display: none;
}

.gb-ep-slide__img {
  border-radius: 14px 14px 0 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  position: relative !important;
  width: 100% !important;
}

.gb-ep-slide__img img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

.gb-ep-slide__caption {
  background: #ffffff;
  padding: 14px 20px;
  border-radius: 0 0 14px 14px;
  font-size: 13px;
  font-style: italic;
  color: #4a4f78;
}

/* Nav: prev / counter / next */
.gb-ep-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 0 0;
}

.gb-ep-nav__prev {
  all: unset !important;
  cursor: pointer !important;
  background: #3a3f70 !important; /* Lighter button for dark bg */
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transition: opacity .2s;
  box-sizing: border-box !important;
}
.gb-ep-nav__prev:hover { opacity: .85; }

.gb-ep-nav__count {
  font-size: 13px;
  color: #b0b4d4; /* Lighter text for dark bg */
  font-weight: 600;
  text-align: center;
}

.gb-ep-nav__next {
  all: unset !important;
  cursor: pointer !important;
  background: #22b06b !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transition: opacity .2s;
  box-sizing: border-box !important;
}
.gb-ep-nav__next:hover { opacity: .85; }

/* ---- Right column ---- */
.gb-ep-right {
  flex: 1 1 420px;
  min-width: 300px;
  padding: 40px 40px 40px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gb-ep-right__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #6C5CE7;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.gb-ep-right__heading {
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #161327;
  margin: 0 0 22px;
  line-height: 1.25;
}

/* Villain / Hero badges */
.gb-ep-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.gb-ep-badge--villain { background: #fdecec; }
.gb-ep-badge--hero    { background: #eeecfb; }

.gb-ep-badge__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gb-ep-badge--villain .gb-ep-badge__icon { background: #f6c9c9; color: #c0392b; }
.gb-ep-badge--hero    .gb-ep-badge__icon { background: #d8d3f7; color: #4a3fc9; }

.gb-ep-badge__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.gb-ep-badge--villain .gb-ep-badge__label { color: #c0392b; }
.gb-ep-badge--hero    .gb-ep-badge__label { color: #4a3fc9; }

.gb-ep-badge__text {
  font-size: 14.5px;
  font-weight: 700;
  color: #161327;
}

/* Transcript toggle — override base .gb-faq__trigger which adds border/box */
.gb-ep-transcript { margin-top: 4px; margin-bottom: 0; }

.gb-ep-transcript .gb-faq__item {
  border-bottom: none !important;
}

.gb-ep-transcript__trigger,
.gb-ep-transcript .gb-faq__trigger {
  all: unset !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  font-family: inherit !important;
}
.gb-ep-transcript__label {
  font-size: 13.5px;
  font-weight: 700;
  color: #6C5CE7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gb-ep-transcript__chevron {
  color: #6C5CE7;
  transition: transform .2s ease;
}

.gb-ep-transcript__trigger[aria-expanded="true"] .gb-ep-transcript__chevron {
  transform: rotate(180deg);
}

.gb-ep-transcript__trigger[aria-expanded="false"] .gb-ep-transcript__text--open,
.gb-ep-transcript__trigger[aria-expanded="true"] .gb-ep-transcript__text--closed {
  display: none;
}

/* Transcript cards */
.gb-ep-transcript__content {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gb-ep-tcard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 12px;
  padding: 14px 16px;
}
.gb-ep-tcard--warning { background: #fdf3e3; }
.gb-ep-tcard--danger  { background: #fdecec; }
.gb-ep-tcard--success { background: #e7f7ee; }

.gb-ep-tcard__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gb-ep-tcard--warning .gb-ep-tcard__icon { background: #f6e0b8; color: #a5710f; }
.gb-ep-tcard--danger  .gb-ep-tcard__icon { background: #f6c9c9; color: #c0392b; }
.gb-ep-tcard--success .gb-ep-tcard__icon { background: #bfe9d3; color: #1e9e63; }

.gb-ep-tcard__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gb-ep-tcard--warning .gb-ep-tcard__title { color: #a5710f; }
.gb-ep-tcard--danger  .gb-ep-tcard__title { color: #c0392b; }
.gb-ep-tcard--success .gb-ep-tcard__title { color: #1e9e63; }

.gb-ep-tcard__text {
  font-size: 13px;
  line-height: 1.55;
  color: #4a4560;
}

/* Divider + CTA */
.gb-ep-right__divider {
  border-top: 1px solid #edecf5;
  margin: 20px 0 22px;
}

.gb-ep-right__cta {
  align-self: flex-start;
  display: inline-block;
  background: #6C5CE7;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  padding: 14px 26px;
  border-radius: 24px;
  transition: opacity .2s;
}
.gb-ep-right__cta:hover { opacity: .9; color: #ffffff; }

/* Responsive */
@media (max-width: 991px) {
  .gb-ep-inner { flex-direction: column; }
  .gb-ep-right { padding: 32px 28px 40px; }
}

.gb-ep-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.gb-ep-hero__left {
  background-color: var(--gb-navy);
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  padding: 0;
  color: #fff;
  box-shadow: var(--gb-shadow-lift);
}
.gb-ep-hero__media {
  position: relative;
}
.gb-ep-hero__media img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
}
.gb-ep-hero__caption {
  font-size: 0.95rem;
  font-style: italic;
  text-align: left;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  border-radius: 0;
  margin: 0;
}
.gb-ep-hero__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
.gb-ep-hero__arrow {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s;
}
.gb-ep-hero__arrow:hover {
  background: rgba(255, 255, 255, 0.2);
}
.gb-ep-hero__arrow--next {
  background: var(--gb-green);
  color: #fff;
}
.gb-ep-hero__arrow--next:hover {
  background: var(--gb-green-hover);
}
.gb-ep-hero__count {
  font-size: 0.875rem;
  color: var(--gb-text-on-dark-muted);
}
.gb-ep-hero__eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gb-primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gb-ep-hero__heading {
  margin-bottom: 24px;
  font-size: clamp(2rem, 3vw, 2.5rem);
}
.gb-ep-hero__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.gb-ep-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
}
.gb-ep-card--danger {
  background: #FFF1F1;
}
.gb-ep-card--primary {
  background: #F2F2FF;
}
.gb-ep-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-ep-card--danger .gb-ep-card__icon { background: #FFE0E0; color: #D32F2F; }
.gb-ep-card--primary .gb-ep-card__icon { background: #E0E0FF; color: var(--gb-primary); }
.gb-ep-card__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.gb-ep-card--danger .gb-ep-card__title { color: #D32F2F; }
.gb-ep-card--primary .gb-ep-card__title { color: var(--gb-primary); }
.gb-ep-card__text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gb-navy);
}


/* =========================================================================
   Site Header widget — nav caret & dropdown
   Duplicated from theme.css so the widget works even before theme.css loads.
   ========================================================================= */
.gb-menu .gb-menu__caret {
  display: inline-flex; flex-shrink: 0;
  width: 12px; height: 12px;
  transition: transform 0.22s ease;
}
/* Arrow flips when the dropdown is open */
.gb-menu > li.gb-open > a .gb-menu__caret { transform: rotate(180deg); }

/* Sub-menu visibility */
.gb-menu .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  list-style: none; margin: 0; padding: 10px;
  background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
  z-index: 999;
}
.gb-menu > li.gb-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Hover opens on desktop — top-level and nested */
@media (hover: hover) {
  .gb-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .gb-menu > li:hover > a .gb-menu__caret { transform: rotate(180deg); }
  .gb-menu .sub-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}