/* ─────────────────────────────────────────────────────────────
   Goola brand overlay for Base44-imported static pages.
   Re-skins Tailwind utilities to the Goola purple + teal palette
   AND ports the full visual design language from workshops.astro.

   ARCHITECTURE:
   - All design-language rules are scoped to body.goola-v2
   - Color remaps (utility overrides) remain global — they only
     affect v2 pages because only v2 routes inject this file.
   ───────────────────────────────────────────────────────────── */

:root {
  --goola-purple: hsl(276, 63%, 24%);
  --goola-purple-light: hsl(271, 89%, 41%);
  --goola-purple-mid: hsl(273, 70%, 32%);
  --goola-teal: hsl(194, 63%, 64%);
  --goola-teal-deep: hsl(194, 70%, 38%);
  --goola-teal-light: hsl(194, 63%, 72%);

  /* Soft tints for backgrounds / icons */
  --goola-purple-50: hsl(271, 70%, 97%);
  --goola-purple-100: hsl(271, 70%, 92%);
  --goola-purple-200: hsl(271, 70%, 85%);
  --goola-purple-300: hsl(271, 80%, 75%);
  --goola-teal-50: hsl(194, 60%, 96%);
  --goola-teal-100: hsl(194, 60%, 88%);
  --goola-teal-200: hsl(194, 60%, 78%);
  --goola-teal-300: hsl(194, 60%, 68%);

  /* Brand gradient */
  --goola-grad: linear-gradient(90deg, var(--goola-purple) 0%, var(--goola-purple-light) 50%, var(--goola-teal) 100%);

  /* Page background */
  --page-bg: #f7f9fc;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — Heebo font + smooth scroll
   ═══════════════════════════════════════════════════════════════ */
* { font-family: 'Heebo', sans-serif !important; }

html { scroll-behavior: smooth; }
section { scroll-margin-top: 100px; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES (copied from AgentPageLayout.astro)
   ═══════════════════════════════════════════════════════════════ */
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-10px) }
}
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) rotate(0deg) }
  50% { transform: translate(-10px, -15px) rotate(5deg) }
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1) }
  50% { transform: scale(1.05) }
}
@keyframes float-reverse {
  0%, 100% { transform: translate(0, 0px) rotate(0deg) }
  50% { transform: translate(15px, -20px) rotate(-3deg) }
}

/* ─── Solid backgrounds ─────────────────────────────────────── */
.bg-blue-50    { background-color: var(--goola-purple-50)  !important; }
.bg-blue-100   { background-color: var(--goola-purple-100) !important; }
.bg-blue-500   { background-color: var(--goola-purple-light) !important; }
.bg-blue-600   { background-color: var(--goola-purple-light) !important; }
.bg-indigo-100 { background-color: var(--goola-purple-100) !important; }
.bg-purple-100 { background-color: var(--goola-purple-100) !important; }
.bg-purple-600 { background-color: var(--goola-purple) !important; }

.bg-green-50   { background-color: var(--goola-teal-50)   !important; }
.bg-green-100  { background-color: var(--goola-teal-100)  !important; }
.bg-green-500  { background-color: var(--goola-teal-deep) !important; }
.bg-green-600  { background-color: var(--goola-teal-deep) !important; }

/* ─── Solid text colors ─────────────────────────────────────── */
.text-blue-100   { color: var(--goola-purple-100) !important; }
.text-blue-200   { color: var(--goola-purple-200) !important; }
.text-blue-300   { color: var(--goola-purple-300) !important; }
.text-blue-600   { color: var(--goola-purple-light) !important; }
.text-blue-900   { color: var(--goola-purple) !important; }
.text-indigo-600 { color: var(--goola-purple-light) !important; }
.text-purple-300 { color: var(--goola-purple-300) !important; }
.text-purple-600 { color: var(--goola-purple-light) !important; }

.text-green-100  { color: var(--goola-teal-100) !important; }
.text-green-300  { color: var(--goola-teal-200) !important; }
.text-green-400  { color: var(--goola-teal) !important; }
.text-green-600  { color: var(--goola-teal-deep) !important; }
.text-green-700  { color: var(--goola-teal-deep) !important; }

/* ─── Borders + rings ───────────────────────────────────────── */
.border-blue-400  { border-color: var(--goola-teal) !important; }
.border-blue-600  { border-color: var(--goola-purple-light) !important; }
.border-indigo-600{ border-color: var(--goola-purple-light) !important; }
.border-green-600 { border-color: var(--goola-teal-deep) !important; }

/* ─── Gradients: from-* ─────────────────────────────────────── */
.from-blue-50 {
  --tw-gradient-from: var(--goola-purple-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(271 70% 97% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-300 {
  --tw-gradient-from: var(--goola-purple-300) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(271 80% 75% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-600 {
  --tw-gradient-from: var(--goola-purple-light) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(271 89% 41% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-700 {
  --tw-gradient-from: var(--goola-purple-mid) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(273 70% 32% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-900 {
  --tw-gradient-from: var(--goola-purple) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(276 63% 24% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-green-50 {
  --tw-gradient-from: var(--goola-teal-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(194 60% 96% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-green-600 {
  --tw-gradient-from: var(--goola-teal-deep) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(194 70% 38% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-green-700 {
  --tw-gradient-from: var(--goola-purple) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(276 63% 24% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ─── Gradients: via-* ───────────────────────────────────────── */
.via-blue-800 {
  --tw-gradient-to: hsl(273 70% 32% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--goola-purple-mid) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.via-indigo-900 {
  --tw-gradient-to: hsl(276 63% 24% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--goola-purple-mid) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.via-emerald-700 {
  --tw-gradient-to: hsl(271 89% 41% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--goola-purple-light) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* ─── Gradients: to-* ───────────────────────────────────────── */
.to-emerald-50  { --tw-gradient-to: var(--goola-teal-50) var(--tw-gradient-to-position) !important; }
.to-emerald-600 { --tw-gradient-to: var(--goola-teal-deep) var(--tw-gradient-to-position) !important; }
.to-emerald-700 { --tw-gradient-to: var(--goola-teal-deep) var(--tw-gradient-to-position) !important; }
.to-indigo-50   { --tw-gradient-to: var(--goola-purple-50) var(--tw-gradient-to-position) !important; }
.to-indigo-600  { --tw-gradient-to: var(--goola-purple-light) var(--tw-gradient-to-position) !important; }
.to-indigo-700  { --tw-gradient-to: var(--goola-purple) var(--tw-gradient-to-position) !important; }
.to-indigo-900  { --tw-gradient-to: var(--goola-purple) var(--tw-gradient-to-position) !important; }
.to-purple-300  { --tw-gradient-to: var(--goola-teal) var(--tw-gradient-to-position) !important; }
.to-purple-900  { --tw-gradient-to: var(--goola-purple-light) var(--tw-gradient-to-position) !important; }
.to-teal-700    { --tw-gradient-to: var(--goola-teal-deep) var(--tw-gradient-to-position) !important; }

/* ─── Hover gradient overrides ──────────────────────────────── */
.hover\:from-blue-700:hover {
  --tw-gradient-from: var(--goola-purple) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.hover\:to-indigo-700:hover { --tw-gradient-to: var(--goola-purple-light) var(--tw-gradient-to-position) !important; }
.hover\:bg-green-600:hover { background-color: var(--goola-purple) !important; }
.hover\:bg-green-50:hover  { background-color: var(--goola-purple-50) !important; }

/* ─── Red family → brand purple/teal ───────────────────────── */
.bg-red-50    { background-color: var(--goola-purple-50)  !important; }
.bg-red-100   { background-color: var(--goola-purple-100) !important; }
.text-red-100 { color: var(--goola-purple-100) !important; }
.text-red-500 { color: var(--goola-purple-light) !important; }
.text-red-600 { color: var(--goola-purple-light) !important; }
.border-red-600 { border-color: var(--goola-purple-light) !important; }

.from-red-600 {
  --tw-gradient-from: var(--goola-purple) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: hsl(276 63% 24% / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-orange-600 { --tw-gradient-to: var(--goola-purple-light) var(--tw-gradient-to-position) !important; }

/* ─── Orange family → brand ─────────────────────────────────── */
.bg-orange-100   { background-color: var(--goola-purple-100) !important; }
.bg-orange-600   { background-color: var(--goola-teal-deep) !important; }
.text-orange-600 { color: var(--goola-purple-light) !important; }

/* ─── Slate footer → goola purple ───────────────────────────── */
.bg-slate-900 { background-color: var(--goola-purple) !important; }

/* ─── Testimonial right-border accent (RTL = visual left) ───── */
.border-r-green-600 { border-right-color: var(--goola-teal) !important; }
.border-r-4 { border-right-width: 4px !important; }

/* ─── Hero radial overlays → goola palette ──────────────────── */
.bg-\[radial-gradient\(circle_at_30\%_50\%\,rgba\(96\,165\,250\,0\.15\)\,transparent_50\%\)\] {
  background-image: radial-gradient(circle at 30% 50%, hsl(271 89% 60% / 0.18), transparent 50%) !important;
}
.bg-\[radial-gradient\(circle_at_70\%_50\%\,rgba\(147\,51\,234\,0\.15\)\,transparent_50\%\)\] {
  background-image: radial-gradient(circle at 70% 50%, hsl(194 63% 64% / 0.18), transparent 50%) !important;
}

/* ─── Headline gradient text on dark hero ───────────────────── */
.bg-gradient-to-r.from-blue-300.to-purple-300.bg-clip-text {
  background-image: linear-gradient(90deg, hsl(271 80% 82%), hsl(194 70% 80%)) !important;
}

/* ─── Misc ───────────────────────────────────────────────────── */
.bg-blue-500\/20 { background-color: hsl(271 89% 41% / 0.20) !important; }

.bg-gradient-to-r.from-blue-700.to-indigo-700.bg-clip-text {
  background-image: linear-gradient(90deg, var(--goola-purple), var(--goola-teal-deep)) !important;
}

/* Amber/yellow hero box */
.bg-yellow-500\/20 { background-color: hsl(38 92% 60% / 0.18) !important; }
.border-yellow-400\/30 { border-color: hsl(38 92% 60% / 0.45) !important; }
.text-yellow-100 { color: hsl(38 92% 92%) !important; }
.text-yellow-300 { color: hsl(38 92% 80%) !important; }

/* ═══════════════════════════════════════════════════════════════
   WORKSHOPS DESIGN LANGUAGE — scoped to body.goola-v2
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SMOOTH SCROLL + BODY BASE ─────────────────────────────── */
.goola-v2 {
  background: var(--page-bg);
}

/* ── 2. HEADLINE GRADIENT TEXT ────────────────────────────────── */
/* Every h2/h3 in light sections picks up the gradient-text recipe */
.goola-v2 section.bg-red-50 h2,
.goola-v2 section.bg-gray-50 h2,
.goola-v2 section.bg-white h2,
.goola-v2 section.from-blue-50 h2,
.goola-v2 section.from-green-50 h2,
.goola-v2 section.bg-red-50 h3.text-gray-900,
.goola-v2 section.bg-gray-50 h3.text-gray-900,
.goola-v2 section.bg-white h3.text-gray-900,
.goola-v2 section.from-blue-50 h3.text-gray-900,
.goola-v2 section.from-green-50 h3.text-gray-900 {
  background: linear-gradient(90deg,
    hsl(280 19% 15%) 0%,
    var(--goola-purple-light) 50%,
    hsl(280 19% 15%) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.08)) !important;
  -webkit-text-fill-color: transparent !important;
}

/* h2 styled underline — decorative strip after each section h2 */
.goola-v2 section.bg-red-50 h2::after,
.goola-v2 section.bg-gray-50 h2::after,
.goola-v2 section.bg-white h2::after,
.goola-v2 section.from-blue-50 h2::after,
.goola-v2 section.from-green-50 h2::after {
  content: '';
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--goola-purple) 0%, var(--goola-purple-light) 30%, var(--goola-teal-light) 60%, transparent 100%);
  margin-right: auto; /* RTL: pushes to the start (right) */
}

/* ── 3. SECTION WATERMARK NUMBERS ─────────────────────────────── */
/* Counter-based section watermarks */
.goola-v2 main, .goola-v2 .min-h-screen > div, .goola-v2 body > div {
  counter-reset: section-num;
}

.goola-v2 section.bg-red-50,
.goola-v2 section.bg-gray-50,
.goola-v2 section.bg-white,
.goola-v2 section.from-blue-50,
.goola-v2 section.from-green-50 {
  counter-increment: section-num;
  position: relative;
  overflow: hidden;
}

.goola-v2 section.bg-red-50::after,
.goola-v2 section.bg-gray-50::after,
.goola-v2 section.bg-white::after,
.goola-v2 section.from-blue-50::after,
.goola-v2 section.from-green-50::after {
  /* Section watermark — large digit top-right, behind all content */
  /* Note: we use a separate technique since these sections also need ::after for decorations
     This gets handled via per-section ::before where possible */
}

/* Manual watermark numbers via ::before on each themed section
   (we can't use counter() in content: '' pseudo elements reliably
   cross-browser for decorative-only use, so we place a fixed digit
   per section type and rely on the visual position) */
.goola-v2 section.bg-red-50 {
  position: relative;
  overflow: hidden;
}
.goola-v2 section.bg-red-50::before {
  content: '02';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* ── 4. SECTION THEMED BACKGROUNDS (ported from workshops.astro) ─ */

/* Section 2 — "Problem" (bg-red-50) → workshop-themed-1 (warm amber) */
.goola-v2 section.bg-red-50 {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #f59e0b 10%, transparent) 0%,
      color-mix(in srgb, var(--goola-purple) 6%, transparent) 50%,
      color-mix(in srgb, #f59e0b 5%, transparent) 100%),
    var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}

/* Section 3 — "Solution" (bg-gray-50, first) → workshop-themed-2 (teal + dots) */
/* Section 8 — "Mid CTA" (bg-gray-50, second) → workshop-themed-1 (warm amber) */
/* Distinguish by nth-of-type — gray-50 appears at positions 3 and 8 in the DOM */
.goola-v2 section.bg-gray-50 {
  position: relative;
  overflow: hidden;
}

/* First gray-50 (section 3 — solution) */
.goola-v2 section.bg-gray-50:nth-of-type(3) {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--goola-teal) 12%, transparent) 0%,
      color-mix(in srgb, var(--goola-purple) 8%, transparent) 55%,
      color-mix(in srgb, var(--goola-teal-light) 7%, transparent) 100%),
    var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}
.goola-v2 section.bg-gray-50:nth-of-type(3)::before {
  content: '03';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* Radial dot pattern overlay */
.goola-v2 section.bg-gray-50:nth-of-type(3)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--goola-teal) 28%, transparent) 1.5px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Section 4 — Benefits grid (bg-white, first) → workshop-themed-3 (slate + paper grid) */
.goola-v2 section.bg-white:nth-of-type(4) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #64748b 5%, transparent) 0%,
      color-mix(in srgb, var(--goola-teal) 4%, transparent) 60%,
      color-mix(in srgb, #64748b 3%, transparent) 100%),
    #ffffff !important;
  background-color: #ffffff !important;
}
.goola-v2 section.bg-white:nth-of-type(4)::before {
  content: '04';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* Paper-grid lines */
.goola-v2 section.bg-white:nth-of-type(4)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #94a3b8 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #94a3b8 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Section 5 — Process steps (from-blue-50 to-indigo-50) → workshop-themed-4 (sunrise conic) */
.goola-v2 section.from-blue-50 {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, #f97316 6%, transparent) 0%,
      color-mix(in srgb, var(--goola-teal-light) 6%, transparent) 55%,
      color-mix(in srgb, #fbbf24 4%, transparent) 100%),
    var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}
.goola-v2 section.from-blue-50::before {
  content: '05';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* Conic sunrise glow */
.goola-v2 section.from-blue-50::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 270deg at 50% -20%,
    color-mix(in srgb, #f97316 8%, transparent),
    color-mix(in srgb, #fbbf24 6%, transparent),
    transparent 35%
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

/* Section 7 — Testimonials (from-green-50) → workshop-themed-2 (teal + dots) */
.goola-v2 section.from-green-50 {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--goola-teal) 12%, transparent) 0%,
      color-mix(in srgb, var(--goola-purple) 8%, transparent) 55%,
      color-mix(in srgb, var(--goola-teal-light) 7%, transparent) 100%),
    var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}
.goola-v2 section.from-green-50::before {
  content: '07';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* Radial dot pattern */
.goola-v2 section.from-green-50::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--goola-teal) 28%, transparent) 1.5px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Second bg-gray-50 (section 8 — mid CTA) → workshop-themed-1 (warm amber) */
.goola-v2 section.bg-gray-50:nth-of-type(8) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #f59e0b 10%, transparent) 0%,
      color-mix(in srgb, var(--goola-purple) 6%, transparent) 50%,
      color-mix(in srgb, #f59e0b 5%, transparent) 100%),
    var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}
.goola-v2 section.bg-gray-50:nth-of-type(8)::before {
  content: '08';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Section 9 — FAQ (bg-white, second) → workshop-themed-3 (slate + paper grid) */
.goola-v2 section.bg-white:nth-of-type(9) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #64748b 5%, transparent) 0%,
      color-mix(in srgb, var(--goola-teal) 4%, transparent) 60%,
      color-mix(in srgb, #64748b 3%, transparent) 100%),
    #ffffff !important;
  background-color: #ffffff !important;
}
.goola-v2 section.bg-white:nth-of-type(9)::before {
  content: '09';
  position: absolute;
  top: -0.1em;
  left: 0.05em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--goola-purple) 5%, transparent);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.goola-v2 section.bg-white:nth-of-type(9)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #94a3b8 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #94a3b8 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* ── 5. DARK SECTIONS — Ambient orbs (::before / ::after on wrappers) ── */

/* Section 1 — Hero (from-blue-900.via-blue-800.to-indigo-900) */
/* The section already has radial overlays — we enhance with orbs on the content wrapper */
.goola-v2 section.from-blue-900.via-blue-800 {
  position: relative;
}

/* Section 6 — Discovery call (from-green-700.via-emerald-700.to-teal-700) */
/* Section 10 — Final CTA (from-blue-900.via-indigo-900.to-purple-900) */
/* Ambient orbs as decoration — added via wrapper pseudo-elements */

/* ── 6. GLASS-LIGHT CARDS ─────────────────────────────────────── */
/* Every .rounded-xl.shadow-lg and .rounded-xl.shadow-xl in light sections */
.goola-v2 section.bg-red-50 .rounded-xl.shadow-lg,
.goola-v2 section.bg-red-50 .rounded-xl.shadow-xl,
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg,
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-xl,
.goola-v2 section.bg-white .rounded-xl.shadow-lg,
.goola-v2 section.bg-white .rounded-xl.shadow-xl,
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg,
.goola-v2 section.from-blue-50 .rounded-xl.shadow-xl,
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg,
.goola-v2 section.from-green-50 .rounded-xl.shadow-xl {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 4px 20px -6px color-mix(in srgb, var(--goola-purple) 12%, transparent) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.goola-v2 section.bg-red-50 .rounded-xl.shadow-lg:hover,
.goola-v2 section.bg-red-50 .rounded-xl.shadow-xl:hover,
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg:hover,
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-xl:hover,
.goola-v2 section.bg-white .rounded-xl.shadow-lg:hover,
.goola-v2 section.bg-white .rounded-xl.shadow-xl:hover,
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg:hover,
.goola-v2 section.from-blue-50 .rounded-xl.shadow-xl:hover,
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:hover,
.goola-v2 section.from-green-50 .rounded-xl.shadow-xl:hover {
  border-color: color-mix(in srgb, var(--goola-teal) 35%, transparent) !important;
  box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--goola-purple) 20%, transparent) !important;
  transform: translateY(-4px) !important;
}

/* ── 7. TOP ACCENT BAR on each card (topic-card recipe) ─────── */
.goola-v2 section.bg-red-50 .rounded-xl.shadow-lg,
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg,
.goola-v2 section.bg-white .rounded-xl.shadow-lg,
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg,
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg {
  position: relative;
  overflow: hidden;
}
.goola-v2 section.bg-red-50 .rounded-xl.shadow-lg::before,
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg::before,
.goola-v2 section.bg-white .rounded-xl.shadow-lg::before,
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg::before,
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--goola-purple) 0%, var(--goola-purple-light) 50%, var(--goola-teal) 100%);
  z-index: 1;
}

/* ── 8. PER-CARD GRADIENT TINTS (rotating workshop-index-card-bg-1..4) ── */
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg:nth-child(4n+1),
.goola-v2 section.bg-white .rounded-xl.shadow-lg:nth-child(4n+1),
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg:nth-child(4n+1),
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:nth-child(4n+1) {
  background: linear-gradient(135deg,
    color-mix(in srgb, #f59e0b 4%, white) 0%,
    color-mix(in srgb, var(--goola-purple) 4%, white) 100%) !important;
}
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg:nth-child(4n+2),
.goola-v2 section.bg-white .rounded-xl.shadow-lg:nth-child(4n+2),
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg:nth-child(4n+2),
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:nth-child(4n+2) {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--goola-teal) 5%, white) 0%,
    color-mix(in srgb, var(--goola-purple) 4%, white) 100%) !important;
}
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg:nth-child(4n+3),
.goola-v2 section.bg-white .rounded-xl.shadow-lg:nth-child(4n+3),
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg:nth-child(4n+3),
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:nth-child(4n+3) {
  background: linear-gradient(135deg,
    color-mix(in srgb, #64748b 4%, white) 0%,
    color-mix(in srgb, var(--goola-teal) 4%, white) 100%) !important;
}
.goola-v2 section.bg-gray-50 .rounded-xl.shadow-lg:nth-child(4n+4),
.goola-v2 section.bg-white .rounded-xl.shadow-lg:nth-child(4n+4),
.goola-v2 section.from-blue-50 .rounded-xl.shadow-lg:nth-child(4n+4),
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:nth-child(4n+4) {
  background: linear-gradient(135deg,
    color-mix(in srgb, #f97316 4%, white) 0%,
    color-mix(in srgb, var(--goola-teal-light) 5%, white) 100%) !important;
}

/* ── 9. ICON TILE BG → brand tints ──────────────────────────── */
/* Icon containers: w-12.h-12.rounded-xl (various Tailwind bg-*-100 tiles) */
.goola-v2 .w-12.h-12.rounded-xl.bg-blue-100,
.goola-v2 .w-16.h-16.rounded-xl.bg-blue-100 {
  background: var(--goola-purple-100) !important;
  color: var(--goola-purple-light) !important;
}
.goola-v2 .w-12.h-12.rounded-xl.bg-purple-100,
.goola-v2 .w-16.h-16.rounded-xl.bg-purple-100 {
  background: var(--goola-purple-100) !important;
  color: var(--goola-purple-light) !important;
}
.goola-v2 .w-12.h-12.rounded-xl.bg-green-100,
.goola-v2 .w-16.h-16.rounded-xl.bg-green-100 {
  background: var(--goola-teal-100) !important;
  color: var(--goola-teal-deep) !important;
}
.goola-v2 .w-12.h-12.rounded-xl.bg-indigo-100,
.goola-v2 .w-16.h-16.rounded-xl.bg-indigo-100 {
  background: var(--goola-purple-100) !important;
  color: var(--goola-purple) !important;
}
.goola-v2 .w-12.h-12.rounded-xl.bg-orange-100,
.goola-v2 .w-16.h-16.rounded-xl.bg-orange-100 {
  background: color-mix(in srgb, #f97316 10%, white) !important;
  color: var(--goola-teal-deep) !important;
}
.goola-v2 .w-12.h-12.rounded-xl.bg-red-100,
.goola-v2 .w-16.h-16.rounded-xl.bg-red-100 {
  background: var(--goola-purple-100) !important;
  color: var(--goola-purple) !important;
}

/* Step-circle numbered icons (rounded-full) */
.goola-v2 .w-12.h-12.rounded-full.bg-blue-600,
.goola-v2 .w-16.h-16.rounded-full.bg-blue-600 {
  background: linear-gradient(135deg, var(--goola-purple) 0%, var(--goola-purple-light) 100%) !important;
}
.goola-v2 .w-12.h-12.rounded-full.bg-purple-600,
.goola-v2 .w-16.h-16.rounded-full.bg-purple-600 {
  background: linear-gradient(135deg, var(--goola-purple-mid) 0%, var(--goola-purple-light) 100%) !important;
}
.goola-v2 .w-12.h-12.rounded-full.bg-green-600,
.goola-v2 .w-16.h-16.rounded-full.bg-green-600 {
  background: linear-gradient(135deg, var(--goola-teal-deep) 0%, var(--goola-teal) 100%) !important;
}
.goola-v2 .w-12.h-12.rounded-full.bg-orange-600,
.goola-v2 .w-16.h-16.rounded-full.bg-orange-600 {
  background: linear-gradient(135deg, var(--goola-purple) 0%, var(--goola-teal-deep) 100%) !important;
}

/* ── 10. GRADIENT BUTTONS ─────────────────────────────────────── */
/* Primary CTA buttons in light sections */
.goola-v2 section.bg-red-50 a.bg-green-500,
.goola-v2 section.bg-gray-50 a.bg-green-500,
.goola-v2 section.bg-white a.bg-green-500,
.goola-v2 section.from-blue-50 a.bg-green-500,
.goola-v2 section.from-green-50 a.bg-green-500 {
  background: linear-gradient(135deg, var(--goola-purple) 0%, var(--goola-purple-light) 50%, var(--goola-teal-deep) 100%) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--goola-purple) 30%, transparent) !important;
  color: white !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}
.goola-v2 section.bg-red-50 a.bg-green-500:hover,
.goola-v2 section.bg-gray-50 a.bg-green-500:hover,
.goola-v2 section.bg-white a.bg-green-500:hover,
.goola-v2 section.from-blue-50 a.bg-green-500:hover,
.goola-v2 section.from-green-50 a.bg-green-500:hover {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--goola-purple) 40%, transparent) !important;
  transform: translateY(-2px) !important;
}

/* Form submit buttons */
.goola-v2 button[type="submit"],
.goola-v2 input[type="submit"] {
  background: linear-gradient(90deg, var(--goola-purple) 0%, var(--goola-purple-light) 50%, var(--goola-teal) 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--goola-purple) 25%, transparent) !important;
}

/* ── 11. BULLET DOTS — gradient ──────────────────────────────── */
.goola-v2 section .w-2.h-2.rounded-full,
.goola-v2 section .w-3.h-3.rounded-full {
  background: linear-gradient(135deg, var(--goola-purple) 0%, var(--goola-teal) 100%) !important;
}

/* ── 12. TESTIMONIAL CARDS ───────────────────────────────────── */
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px) !important;
}
/* Testimonial border accents (even/odd) */
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:nth-child(odd) {
  border-right: 3px solid var(--goola-purple) !important;
}
.goola-v2 section.from-green-50 .rounded-xl.shadow-lg:nth-child(even) {
  border-left: 3px solid var(--goola-teal) !important;
}

/* ── 13. DARK SECTION POLISH ─────────────────────────────────── */
/* These are carried over from the previous iteration history */

/* Hero mini-tiles */
.goola-v2 section.from-blue-900.via-blue-800 .bg-white\/10.backdrop-blur-sm {
  background-color: hsl(271 63% 30% / 0.65) !important;
  border-color: hsl(194 63% 64% / 0.22) !important;
}
.goola-v2 section.from-blue-900.via-blue-800 .text-blue-300 {
  color: var(--goola-teal) !important;
}

/* Discovery section */
.goola-v2 section.from-green-700 .text-green-100,
.goola-v2 section.from-green-700 h2 .text-green-100 {
  color: rgba(255, 255, 255, 0.92) !important;
}
.goola-v2 section.from-green-700 .bg-white\/20 {
  background-color: hsl(194 55% 48% / 0.3) !important;
  border-color: hsl(194 65% 72% / 0.65) !important;
  color: hsl(194 70% 88%) !important;
  font-weight: 700 !important;
}
.goola-v2 section.from-green-700 .bg-white\/10.backdrop-blur-md {
  background-color: hsl(271 60% 22% / 0.82) !important;
  border: 1px solid hsl(194 63% 64% / 0.38) !important;
  border-top: 2px solid hsl(194 63% 64% / 0.6) !important;
  box-shadow:
    0 8px 40px hsl(271 89% 8% / 0.55),
    0 0 0 1px hsl(194 63% 64% / 0.1) inset !important;
}
.goola-v2 section.from-green-700 .bg-yellow-500\/20 {
  background-color: hsl(38 80% 52% / 0.2) !important;
  border-color: hsl(38 90% 68% / 0.5) !important;
}
.goola-v2 section.from-green-700 .text-yellow-100 {
  color: hsl(40 95% 90%) !important;
}
.goola-v2 section.from-green-700 .text-blue-300,
.goola-v2 section.from-green-700 .text-purple-300 {
  color: var(--goola-teal) !important;
}
.goola-v2 section.from-green-700 .text-blue-200 {
  color: hsl(194 60% 82%) !important;
}
.goola-v2 section.from-green-700 .text-green-300 {
  color: hsl(194 75% 72%) !important;
}
.goola-v2 section.from-green-700 .bg-white\/10.border.border-white\/40 {
  background-color: hsl(194 63% 50% / 0.18) !important;
  border-color: hsl(194 63% 70% / 0.65) !important;
  color: #fff !important;
}
.goola-v2 section.from-green-700 a.bg-green-500 {
  background: linear-gradient(135deg, hsl(194 70% 42%) 0%, hsl(194 68% 52%) 100%) !important;
  box-shadow: 0 6px 24px hsl(194 70% 38% / 0.55) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Bottom CTA section */
.goola-v2 section.from-blue-900.via-indigo-900 .bg-white\/10.backdrop-blur-md {
  background-color: hsl(271 60% 22% / 0.82) !important;
  border: 1px solid hsl(194 63% 64% / 0.38) !important;
  border-top: 2px solid hsl(194 63% 64% / 0.6) !important;
  box-shadow:
    0 8px 40px hsl(271 89% 8% / 0.55),
    0 0 0 1px hsl(194 63% 64% / 0.1) inset !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .bg-white\/10:not(.backdrop-blur-md) {
  background-color: hsl(270 50% 38% / 0.75) !important;
  border: 1px solid hsl(194 63% 64% / 0.4) !important;
  box-shadow: 0 2px 12px hsl(271 89% 8% / 0.3) !important;
  transition: all 0.2s ease !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .bg-white\/10:not(.backdrop-blur-md):hover,
.goola-v2 section.from-blue-900.via-indigo-900 a.bg-white\/10:hover {
  background-color: hsl(194 50% 36% / 0.35) !important;
  border-color: hsl(194 63% 64% / 0.65) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .text-blue-300,
.goola-v2 section.from-blue-900.via-indigo-900 .text-purple-300 {
  color: var(--goola-teal) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .text-blue-200,
.goola-v2 section.from-blue-900.via-indigo-900 .text-blue-100 {
  color: hsl(194 60% 82%) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 h2 .text-blue-300 {
  color: var(--goola-teal) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .bg-white\/10 h3 {
  color: rgba(255, 255, 255, 0.97) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .bg-white\/10 .text-lg {
  color: rgba(255, 255, 255, 0.97) !important;
  font-weight: 600 !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 .bg-white\/10 p {
  color: hsl(194 60% 80%) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 p.text-blue-100 {
  color: rgba(255, 255, 255, 0.82) !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 a.bg-green-500 {
  background: linear-gradient(135deg, var(--goola-teal-deep) 0%, hsl(194 70% 46%) 100%) !important;
  box-shadow: 0 6px 28px hsl(194 70% 38% / 0.5) !important;
  color: #fff !important;
}
.goola-v2 section.from-blue-900.via-indigo-900 svg.text-green-300 {
  color: var(--goola-teal) !important;
}

/* ── 14. AMBIENT ORBS ON DARK SECTIONS ───────────────────────── */
/* Hero (#1): orbs as wrapper child pseudo-elements */
/* We target the container divs inside these sections for orb effects
   since the section itself already has radial gradient children */

/* Discovery call section — wrap inner content to add orb feel */
.goola-v2 section.from-green-700 {
  position: relative;
  overflow: hidden; /* keep orb pseudo-elements from causing page-wide horizontal scroll */
}
/* Orb 1 — purple, top-right */
.goola-v2 section.from-green-700 > div:first-child {
  position: relative;
}
.goola-v2 section.from-green-700::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(271 89% 50% / 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: float-slow 8s ease-in-out infinite;
}
/* Orb 2 — teal, bottom-left */
.goola-v2 section.from-green-700::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(194 63% 60% / 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: float 6s ease-in-out infinite;
}

/* Bottom CTA orbs */
.goola-v2 section.from-blue-900.via-indigo-900 {
  position: relative;
  overflow: hidden; /* keep orb pseudo-elements from causing page-wide horizontal scroll */
}
.goola-v2 section.from-blue-900.via-indigo-900::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(271 89% 55% / 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: float-slow 10s ease-in-out infinite;
}
.goola-v2 section.from-blue-900.via-indigo-900::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(194 63% 60% / 0.20) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: float-reverse 7s ease-in-out infinite;
}

/* ── 14b. HERO BACKGROUND — full workshops-style decoration ───── */
/* The Base44 hero is a flat purple gradient. We layer on top:
   - a soft dot-grid texture
   - a faint diagonal hairline pattern
   - decorative SVG concentric rings (top-right) and connection nodes (bottom-left)
   - two animated ambient orbs (purple top-left, teal mid-right)
   All injected via pseudo-elements on the existing two radial-gradient
   overlay <div>s that the Base44 markup already provides — those divs
   sit absolutely inside the section so we get free decorative slots
   without having to mutate the HTML. */

.goola-v2 section.from-blue-900.via-blue-800 {
  position: relative;
  overflow: hidden;
}

/* Subtle radial dot grid — modern fintech texture, scoped to the hero */
.goola-v2 section.from-blue-900.via-blue-800 > div.absolute.inset-0:nth-of-type(1) {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 1.5px),
    radial-gradient(circle at 30% 50%, hsl(271 89% 60% / 0.20), transparent 50%) !important;
  background-size: 26px 26px, auto !important;
  background-position: 0 0, center !important;
}
.goola-v2 section.from-blue-900.via-blue-800 > div.absolute.inset-0:nth-of-type(2) {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 36px),
    radial-gradient(circle at 70% 50%, hsl(194 63% 64% / 0.18), transparent 55%) !important;
}

/* Decorative SVG: concentric rings — top-right corner */
.goola-v2 section.from-blue-900.via-blue-800::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 360px;
  height: 360px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><circle cx='150' cy='50' r='80' stroke='%2375c3e2' stroke-width='1.2' opacity='0.55'/><circle cx='150' cy='50' r='55' stroke='%23bb8efc' stroke-width='1.2' opacity='0.55'/><circle cx='150' cy='50' r='30' stroke='%2375c3e2' stroke-width='1' opacity='0.5'/><circle cx='150' cy='50' r='10' fill='%2375c3e2' opacity='0.35'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: float-slow 8s ease-in-out infinite;
}

/* Decorative SVG: connection nodes — bottom-left corner, pulse */
.goola-v2 section.from-blue-900.via-blue-800::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 280px;
  height: 280px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'><circle cx='20' cy='20' r='4' fill='%23bb8efc'/><circle cx='100' cy='20' r='4' fill='%2375c3e2'/><circle cx='60' cy='60' r='6' fill='%23bb8efc' opacity='0.7'/><circle cx='20' cy='100' r='4' fill='%2375c3e2'/><circle cx='100' cy='100' r='4' fill='%23bb8efc'/><line x1='20' y1='20' x2='60' y2='60' stroke='%23bb8efc' stroke-width='1' opacity='0.55'/><line x1='100' y1='20' x2='60' y2='60' stroke='%2375c3e2' stroke-width='1' opacity='0.55'/><line x1='60' y1='60' x2='20' y2='100' stroke='%2375c3e2' stroke-width='1' opacity='0.55'/><line x1='60' y1='60' x2='100' y2='100' stroke='%23bb8efc' stroke-width='1' opacity='0.55'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: pulse-soft 5s ease-in-out infinite;
}

/* Ambient orbs on the hero — placed on the inner relative wrapper so
   they sit above the two radial overlays and below the content z-index */
.goola-v2 section.from-blue-900.via-blue-800 > div.relative.z-10::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 6%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(271 89% 55% / 0.28) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  animation: float-slow 9s ease-in-out infinite;
}
.goola-v2 section.from-blue-900.via-blue-800 > div.relative.z-10::after {
  content: '';
  position: absolute;
  top: 40%;
  right: 8%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(194 63% 64% / 0.22) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  animation: float 7s ease-in-out infinite;
}

/* ── 15. DECORATIVE SVGs — Discovery, Final CTA ──────────────── */
/* Hero already styled above (section 14b).
   Discovery and final-CTA sections already get orb decoration in section 14. */

/* ── 16. CONTENT Z-INDEX PROTECTION ─────────────────────────── */
/* Ensure actual content stays above pseudo-element decorations */
.goola-v2 section .container,
.goola-v2 section > div.relative.z-10,
.goola-v2 section > .max-w-7xl,
.goola-v2 section > .max-w-6xl,
.goola-v2 section > .max-w-4xl,
.goola-v2 section .relative.z-10 {
  position: relative;
  z-index: 1;
}

/* ── 17. FAQ ACCORDION STYLING ───────────────────────────────── */
.goola-v2 section.bg-white .border.rounded-xl {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  border-color: color-mix(in srgb, var(--goola-purple) 12%, transparent) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.goola-v2 section.bg-white .border.rounded-xl:hover {
  border-color: color-mix(in srgb, var(--goola-teal) 30%, transparent) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--goola-purple) 10%, transparent) !important;
}

/* ── 18. GRADIENT TEXT on dark sections — already handled, but reinforce hero ── */
/* Hero h1 gradient span */
.goola-v2 section.from-blue-900.via-blue-800 h1 .bg-clip-text,
.goola-v2 section.from-blue-900.via-blue-800 .bg-clip-text {
  background-image: linear-gradient(90deg, hsl(271 80% 82%), hsl(194 70% 80%)) !important;
}

/* ── 19. PROBLEM SECTION (red-50 → themed-1) extra photo whisper ── */
/* bg-red-50 is already theme-colored. For the photo whisper effect
   we use the existing ::before for the watermark and rely on the
   gradient background for atmosphere. Extra detail: subtle amber
   inner glow to "warm up" the section just like couple-enjoying.jpg */
.goola-v2 section.bg-red-50 {
  box-shadow: inset 0 0 80px color-mix(in srgb, #f59e0b 8%, transparent) !important;
}

/* ── 20. STRUCTURED CONTACT INFO / PROCESS STEPS ────────────── */
/* Step number circles — gradient ring treatment */
.goola-v2 section.from-blue-50 .rounded-full.text-white {
  background: linear-gradient(135deg, var(--goola-purple) 0%, var(--goola-teal-deep) 100%) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--goola-purple) 30%, transparent) !important;
}

/* ── 21. WARNING CALLOUT CARD in problem section ─────────────── */
/* The gradient card (from-red-600 to-orange-600) inside section 2 */
.goola-v2 section.bg-red-50 .rounded-xl.from-red-600 {
  background: linear-gradient(135deg, var(--goola-purple) 0%, var(--goola-purple-light) 100%) !important;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--goola-purple) 35%, transparent) !important;
}

/* ── 22. RESPONSIVE RTL SAFETY ───────────────────────────────── */
@media (max-width: 768px) {
  /* Ensure watermark numbers don't obscure content on mobile */
  .goola-v2 section.bg-red-50::before,
  .goola-v2 section.bg-gray-50::before,
  .goola-v2 section.bg-white::before,
  .goola-v2 section.from-blue-50::before,
  .goola-v2 section.from-green-50::before {
    font-size: 4rem;
    opacity: 0.5;
  }
  /* Ambient orbs — shrink on mobile */
  .goola-v2 section.from-green-700::before,
  .goola-v2 section.from-blue-900.via-indigo-900::before {
    width: 180px;
    height: 180px;
  }
  .goola-v2 section.from-green-700::after,
  .goola-v2 section.from-blue-900.via-indigo-900::after {
    width: 140px;
    height: 140px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY NON-SCOPED RULES (kept for backward compat / fallback)
   These were in the original theme.css before v2-scoping was added.
   They're safe because this CSS file is ONLY loaded on v2 pages.
   ═══════════════════════════════════════════════════════════════ */

/* Section-level surface tweaks */
.bg-\[radial-gradient\(circle_at_30\%_50\%\,rgba\(96\,165\,250\,0\.15\)\,transparent_50\%\)\] {
  background-image: radial-gradient(circle at 30% 50%, hsl(271 89% 60% / 0.18), transparent 50%) !important;
}
.bg-\[radial-gradient\(circle_at_70\%_50\%\,rgba\(147\,51\,234\,0\.15\)\,transparent_50\%\)\] {
  background-image: radial-gradient(circle at 70% 50%, hsl(194 63% 64% / 0.18), transparent 50%) !important;
}
.bg-gradient-to-r.from-blue-300.to-purple-300.bg-clip-text {
  background-image: linear-gradient(90deg, hsl(271 80% 82%), hsl(194 70% 80%)) !important;
}
.bg-gradient-to-r.from-blue-700.to-indigo-700.bg-clip-text {
  background-image: linear-gradient(90deg, var(--goola-purple), var(--goola-teal-deep)) !important;
}

/* Dark section overrides — using class selectors for backward compat */
.from-green-700.via-emerald-700 .text-green-100,
.bg-gradient-to-br.from-green-700 .text-green-100 {
  color: rgba(255, 255, 255, 0.92) !important;
}
.from-green-700.via-emerald-700 .bg-white\/20,
.bg-gradient-to-br.from-green-700 .bg-white\/20 {
  background-color: hsl(194 55% 48% / 0.3) !important;
  border-color: hsl(194 65% 72% / 0.65) !important;
  color: hsl(194 70% 88%) !important;
  font-weight: 700 !important;
}
.from-green-700.via-emerald-700 .bg-yellow-500\/20,
.bg-gradient-to-br.from-green-700 .bg-yellow-500\/20 {
  background-color: hsl(38 80% 52% / 0.2) !important;
  border-color: hsl(38 90% 68% / 0.5) !important;
  box-shadow: 0 0 0 1px hsl(38 90% 65% / 0.2) inset !important;
}
.from-green-700.via-emerald-700 .bg-white\/10.backdrop-blur-md,
.bg-gradient-to-br.from-green-700 .bg-white\/10.backdrop-blur-md,
.from-blue-900.via-indigo-900 .bg-white\/10.backdrop-blur-md,
.bg-gradient-to-br.from-blue-900 .bg-white\/10.backdrop-blur-md {
  background-color: hsl(271 60% 22% / 0.82) !important;
  border: 1px solid hsl(194 63% 64% / 0.38) !important;
  border-top: 2px solid hsl(194 63% 64% / 0.6) !important;
  box-shadow:
    0 8px 40px hsl(271 89% 8% / 0.55),
    0 0 0 1px hsl(194 63% 64% / 0.1) inset,
    0 1px 0 hsl(194 63% 80% / 0.15) inset !important;
}
.from-blue-900.via-indigo-900 .bg-white\/10:not(.backdrop-blur-md),
.bg-gradient-to-br.from-blue-900 .bg-white\/10:not(.backdrop-blur-md) {
  background-color: hsl(271 55% 30% / 0.85) !important;
  border: 1px solid hsl(194 63% 64% / 0.35) !important;
  box-shadow: 0 2px 16px hsl(271 89% 8% / 0.35) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.from-blue-900.via-indigo-900 .bg-white\/10:not(.backdrop-blur-md):hover,
.bg-gradient-to-br.from-blue-900 .bg-white\/10:not(.backdrop-blur-md):hover {
  background-color: hsl(194 55% 34% / 0.3) !important;
  border-color: hsl(194 63% 64% / 0.55) !important;
}
.from-green-700.via-emerald-700 .bg-green-500,
.bg-gradient-to-br.from-green-700 .bg-green-500 {
  background: linear-gradient(135deg, var(--goola-teal-deep) 0%, hsl(194 70% 46% / 1) 100%) !important;
  box-shadow: 0 4px 20px hsl(194 70% 38% / 0.55), 0 2px 8px hsl(194 70% 38% / 0.35) !important;
  color: #fff !important;
}
.from-green-700.via-emerald-700 a.bg-green-500,
.bg-gradient-to-br.from-green-700 a.bg-green-500 {
  background: linear-gradient(135deg, hsl(194 70% 42%) 0%, hsl(194 68% 52%) 100%) !important;
  box-shadow: 0 6px 24px hsl(194 70% 38% / 0.55), 0 2px 8px hsl(194 70% 38% / 0.3) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.from-green-700.via-emerald-700 .bg-white\/10.backdrop-blur-md p,
.bg-gradient-to-br.from-green-700 .bg-white\/10.backdrop-blur-md p {
  color: rgba(255, 255, 255, 0.88) !important;
}
.from-green-700.via-emerald-700 .bg-white\/10.backdrop-blur-md .text-lg,
.bg-gradient-to-br.from-green-700 .bg-white\/10.backdrop-blur-md .text-lg {
  color: rgba(255, 255, 255, 0.9) !important;
}
.from-green-700.via-emerald-700 .text-blue-300,
.bg-gradient-to-br.from-green-700 .text-blue-300,
.from-blue-900.via-indigo-900 .text-blue-300,
.bg-gradient-to-br.from-blue-900 .text-blue-300 {
  color: var(--goola-teal) !important;
}
.from-green-700.via-emerald-700 .text-blue-200,
.bg-gradient-to-br.from-green-700 .text-blue-200,
.from-blue-900.via-indigo-900 .text-blue-200,
.bg-gradient-to-br.from-blue-900 .text-blue-200,
.from-blue-900.via-indigo-900 .text-blue-100,
.bg-gradient-to-br.from-blue-900 .text-blue-100 {
  color: hsl(194 60% 82%) !important;
}
.from-blue-900.via-indigo-900 h2 .text-blue-300,
.bg-gradient-to-br.from-blue-900 h2 .text-blue-300 {
  color: var(--goola-teal) !important;
}
.from-blue-900.via-indigo-900 .bg-green-500,
.bg-gradient-to-br.from-blue-900 .bg-green-500 {
  box-shadow: 0 4px 20px hsl(194 70% 38% / 0.45) !important;
}
.from-blue-900.via-blue-800 .bg-white\/10.backdrop-blur-sm,
.bg-gradient-to-br.from-blue-900.via-blue-800 .bg-white\/10.backdrop-blur-sm {
  background-color: hsl(271 63% 30% / 0.65) !important;
  border-color: hsl(194 63% 64% / 0.22) !important;
}
.from-blue-900.via-blue-800 .text-blue-300,
.bg-gradient-to-br.from-blue-900.via-blue-800 .text-blue-300 {
  color: var(--goola-teal) !important;
}
.from-green-700.via-emerald-700 .text-yellow-100,
.bg-gradient-to-br.from-green-700 .text-yellow-100 {
  color: hsl(40 95% 90%) !important;
}
.from-green-700.via-emerald-700 .text-green-300,
.bg-gradient-to-br.from-green-700 .text-green-300 {
  color: hsl(194 75% 72%) !important;
}
.from-green-700.via-emerald-700 svg.text-blue-300,
.bg-gradient-to-br.from-green-700 svg.text-blue-300 {
  color: hsl(194 70% 68%) !important;
}
.from-blue-900.via-indigo-900 .bg-white\/10 h3,
.bg-gradient-to-br.from-blue-900 .bg-white\/10 h3 {
  color: rgba(255, 255, 255, 0.97) !important;
}
.from-blue-900.via-indigo-900 .bg-white\/10 .text-lg,
.bg-gradient-to-br.from-blue-900 .bg-white\/10 .text-lg {
  color: rgba(255, 255, 255, 0.97) !important;
  font-weight: 600 !important;
}
.from-blue-900.via-indigo-900 .bg-white\/10 p,
.bg-gradient-to-br.from-blue-900 .bg-white\/10 p {
  color: hsl(194 60% 80%) !important;
}
.bg-gradient-to-br.from-blue-900.via-indigo-900,
section.bg-gradient-to-br.from-blue-900 {
  box-shadow: inset 0 0 120px hsl(271 89% 15% / 0.4) !important;
}
.from-blue-900.via-indigo-900 a.bg-green-500,
.bg-gradient-to-br.from-blue-900 a.bg-green-500 {
  background: linear-gradient(135deg, var(--goola-teal-deep) 0%, hsl(194 70% 46% / 1) 100%) !important;
  box-shadow: 0 6px 28px hsl(194 70% 38% / 0.5) !important;
  color: #fff !important;
}
.from-blue-900.via-indigo-900 p.text-blue-100,
.bg-gradient-to-br.from-blue-900 p.text-blue-100 {
  color: rgba(255, 255, 255, 0.82) !important;
}
.from-blue-900.via-indigo-900 .text-purple-300,
.bg-gradient-to-br.from-blue-900 .text-purple-300,
.from-green-700.via-emerald-700 .text-purple-300,
.bg-gradient-to-br.from-green-700 .text-purple-300 {
  color: var(--goola-teal) !important;
}
.from-blue-900.via-indigo-900 a.bg-white\/10,
.bg-gradient-to-br.from-blue-900 a.bg-white\/10 {
  background-color: hsl(270 50% 38% / 0.75) !important;
  border: 1px solid hsl(194 63% 64% / 0.4) !important;
  box-shadow: 0 2px 12px hsl(271 89% 8% / 0.3), inset 0 1px 0 hsl(194 63% 80% / 0.1) !important;
  transition: all 0.2s ease !important;
}
.from-blue-900.via-indigo-900 a.bg-white\/10:hover,
.bg-gradient-to-br.from-blue-900 a.bg-white\/10:hover {
  background-color: hsl(194 50% 36% / 0.35) !important;
  border-color: hsl(194 63% 64% / 0.65) !important;
  box-shadow: 0 4px 20px hsl(194 70% 38% / 0.25) !important;
}
.from-blue-900.via-indigo-900 svg.text-green-300,
.bg-gradient-to-br.from-blue-900 svg.text-green-300 {
  color: var(--goola-teal) !important;
}
.from-green-700.via-emerald-700 h2 .text-green-100,
.bg-gradient-to-br.from-green-700 h2 .text-green-100 {
  color: rgba(255, 255, 255, 0.90) !important;
  font-weight: 400 !important;
}
.from-green-700.via-emerald-700 .bg-white\/10.border.border-white\/40,
.bg-gradient-to-br.from-green-700 .bg-white\/10.border.border-white\/40 {
  background-color: hsl(194 63% 50% / 0.18) !important;
  border-color: hsl(194 63% 70% / 0.65) !important;
  color: #fff !important;
}
.from-green-700.via-emerald-700 .bg-white\/10.border.border-white\/40:hover,
.bg-gradient-to-br.from-green-700 .bg-white\/10.border.border-white\/40:hover {
  background-color: hsl(194 63% 50% / 0.32) !important;
}