/* /* ===========================================
   COMPONENT: Visual Effects (scoped, v3 — god-level intensity)
   Apply classes in HTML only. Does NOT touch any existing CSS file.
   =========================================== */

/* ── Keyframes ── */
@keyframes fx-heroGrad {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%       { background-position: 10% 20%, 80% 10%, 60% 80%; }
}
@keyframes fx-orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: .7; }
  50%       { transform: translate(20px, -25px) scale(1.1); opacity: 1; }
}
@keyframes fx-orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1);       opacity: .6; }
  50%       { transform: translate(-18px, 20px) scale(1.08); opacity: .9; }
}
@keyframes fx-shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}
@keyframes fx-fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fx-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-9px) rotate(.3deg); }
}
@keyframes fx-shine {
  0%   { left: -120%; }
  100% { left: 200%; }
}
@keyframes fx-gradText {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes fx-gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes fx-meshDrift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 100% 0%, 50% 50%; }
  33%       { background-position: 4% 8%,  96% 92%, 92%  4%, 54% 46%; }
  66%       { background-position: 8% 4%,  92% 96%, 96%  8%, 46% 54%; }
}
@keyframes fx-badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,139,127,.65); }
  70%       { box-shadow: 0 0 0 12px rgba(14,139,127,0); }
}
@keyframes fx-ripple {
  0%   { transform: scale(0); opacity: .6; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes fx-iconBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30%       { transform: scale(1.25) rotate(-8deg); }
  60%       { transform: scale(.95) rotate(4deg); }
}

/* ──────────────────────────────────────────
   HERO EFFECTS
   ────────────────────────────────────────── */

/* Radial gradient overlay — add .fx-hero-grad to .hero */
.fx-hero-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 5%  50%, rgba(15,159,143,.36)  0%, transparent 48%),
    radial-gradient(ellipse at 95% 15%, rgba(11,125,114,.28)   0%, transparent 42%),
    radial-gradient(ellipse at 50% 100%,rgba(6,95,70,.32)     0%, transparent 52%),
    radial-gradient(ellipse at 80% 60%, rgba(52,211,153,.16)  0%, transparent 40%),
    linear-gradient(103deg, rgba(3,12,8,.68) 0%, rgba(6,20,13,.58) 42%, rgba(10,26,18,.48) 100%);
  background-size: 200% 200%;
  animation: fx-heroGrad 14s ease-in-out infinite;
  pointer-events: none;
}

/* Teal orb — add .fx-orb-tl .fx-orb-br to .hero-content */
.fx-orb-tl { position: relative; }
.fx-orb-tl::before {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,139,127,.34), transparent 70%);
  top: -110px; left: -110px;
  filter: blur(56px);
  pointer-events: none;
  animation: fx-orbFloat 8s ease-in-out infinite;
  z-index: 0;
}

/* Green orb — bottom-right */
.fx-orb-br::after {
  content: "";
  position: absolute;
  width: 336px; height: 336px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,125,114,.30), transparent 70%);
  bottom: -78px; right: -56px;
  filter: blur(62px);
  pointer-events: none;
  animation: fx-orbFloat2 10s ease-in-out infinite;
  z-index: 0;
}

/* ──────────────────────────────────────────
   GENERIC CARD BASE
   ────────────────────────────────────────── */

.fx-card {}

/* Shimmer top bar (generic) */
.fx-shimmer-top { position: relative; overflow: hidden; }
.fx-shimmer-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, #0e8b7f, #63d6ca, #0e8b7f) 200% 50% / 300% 100%;
  animation: fx-shimmer 3s linear infinite;
}

/* Shine sweep on hover — put <div class="fx-shine-layer"> inside card */
.fx-shine-wrap { position: relative; overflow: hidden; }
.fx-shine-layer {
  position: absolute;
  top: -50%; left: -120%;
  width: 60%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 10;
}
.fx-shine-wrap:hover .fx-shine-layer { animation: fx-shine .55s ease forwards; }

/* Fade-up entrance */
.fx-fade-up { animation: fx-fadeUp .6s ease both; }
.fx-fade-up:nth-child(1)  { animation-delay: .04s; }
.fx-fade-up:nth-child(2)  { animation-delay: .10s; }
.fx-fade-up:nth-child(3)  { animation-delay: .16s; }
.fx-fade-up:nth-child(4)  { animation-delay: .22s; }
.fx-fade-up:nth-child(5)  { animation-delay: .28s; }
.fx-fade-up:nth-child(6)  { animation-delay: .34s; }
.fx-fade-up:nth-child(7)  { animation-delay: .40s; }
.fx-fade-up:nth-child(8)  { animation-delay: .46s; }
.fx-fade-up:nth-child(9)  { animation-delay: .52s; }
.fx-fade-up:nth-child(10) { animation-delay: .58s; }

/* Float loop */
.fx-float { animation: fx-float 5s ease-in-out infinite; }

/* ──────────────────────────────────────────
   SECTION BACKGROUNDS
   ────────────────────────────────────────── */

/* Teal-mint — light sections (treatments) */
.fx-mesh-teal {
  background:
    radial-gradient(ellipse 80% 42% at 50% 0%,  rgba(255,255,255,.14) 0%, transparent 65%),
    radial-gradient(ellipse 85% 70% at 0%   0%,   rgba(94,234,212,.82)  0%, transparent 53%),
    radial-gradient(ellipse 78% 64% at 100% 100%, rgba(134,239,172,.74)  0%, transparent 53%),
    radial-gradient(ellipse 65% 54% at 100% 0%,   rgba(147,197,253,.58)  0%, transparent 50%),
    radial-gradient(ellipse 58% 50% at 50%  58%,  rgba(167,243,208,.62)  0%, transparent 54%),
    linear-gradient(135deg, #8DE0D5 0%, #bae6fd 60%, #d1fae5 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 22s ease-in-out infinite;
}

/* Navy animated — dark CTA / trust sections */
.fx-mesh-navy {
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(14,139,127,.45)  0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 85% 50%, rgba(124,58,237,.36)  0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 50% 96%, rgba(15,118,110,.30)  0%, transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #111827 55%, #0d1f1c 100%);
  background-size: 200% 200%;
  animation: fx-gradFlow 8s ease infinite;
}

/* Lavender-blue — specialty / service sections */
.fx-mesh-purple {
  background:
    radial-gradient(ellipse 78% 62% at 10% 90%, rgba(233,213,255,.75) 0%, transparent 56%),
    radial-gradient(ellipse 72% 58% at 90% 10%, rgba(191,219,254,.68) 0%, transparent 56%),
    radial-gradient(ellipse 58% 50% at 50% 50%, rgba(243,232,255,.58) 0%, transparent 60%),
    radial-gradient(ellipse 52% 44% at 50% 0%,  rgba(224,242,254,.48) 0%, transparent 52%),
    #faf5ff;
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 24s ease-in-out infinite;
}

/* Amber-lime — values (secondary tier, softer) */
.fx-mesh-amber {
  background:
    radial-gradient(ellipse 80% 42% at 50% 0%,  rgba(255,255,255,.14) 0%, transparent 65%),
    radial-gradient(ellipse 78% 62% at 0%   0%,   rgba(253,230,138,.40) 0%, transparent 56%),
    radial-gradient(ellipse 72% 58% at 100% 100%, rgba(254,215,170,.34) 0%, transparent 56%),
    radial-gradient(ellipse 58% 50% at 50%  50%,  rgba(254,249,195,.30) 0%, transparent 60%),
    #fefce8;
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 20s ease-in-out infinite;
}

/* Pink-violet — testimonials (elevated tier) */
.fx-mesh-pink {
  background:
    radial-gradient(ellipse 80% 44% at 50% 0%,  rgba(255,255,255,.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 66% at 0%   45%, rgba(252,231,243,.96) 0%, transparent 54%),
    radial-gradient(ellipse 74% 62% at 100% 55%, rgba(237,233,254,.92) 0%, transparent 54%),
    radial-gradient(ellipse 62% 52% at 50%  0%,  rgba(253,242,248,.80) 0%, transparent 50%),
    radial-gradient(ellipse 48% 40% at 75%  80%, rgba(251,207,232,.60) 0%, transparent 52%),
    linear-gradient(135deg, #fce7f3 0%, #ede9fe 55%, #f5f3ff 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 24s ease-in-out infinite;
}

/* Sky-green — how-it-works / steps (secondary tier) */
.fx-mesh-sky {
  background:
    radial-gradient(ellipse 80% 42% at 50% 0%,  rgba(255,255,255,.14) 0%, transparent 65%),
    radial-gradient(ellipse 78% 62% at 5%   5%,  rgba(204,251,241,.58) 0%, transparent 56%),
    radial-gradient(ellipse 72% 58% at 95%  95%, rgba(187,247,208,.52) 0%, transparent 56%),
    radial-gradient(ellipse 58% 50% at 50%  50%, rgba(167,243,208,.40) 0%, transparent 60%),
    #f0fdf4;
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 22s ease-in-out infinite;
}

/* Teal→blue→purple — Mission/Vision + FAQ (medium tier) */
.fx-mv-section-bg {
  background:
    radial-gradient(ellipse 80% 44% at 50% 0%,  rgba(255,255,255,.16) 0%, transparent 65%),
    radial-gradient(ellipse 95% 75% at 0%   0%,   rgba(14,139,127,.60)  0%, transparent 52%),
    radial-gradient(ellipse 85% 68% at 100% 100%, rgba(59,130,246,.52)  0%, transparent 52%),
    radial-gradient(ellipse 75% 60% at 100% 0%,   rgba(124,58,237,.34)  0%, transparent 50%),
    radial-gradient(ellipse 65% 55% at 50%  65%,  rgba(14,165,233,.42)  0%, transparent 55%),
    linear-gradient(135deg, #A6EDE6 0%, #dbeafe 55%, #ede9fe 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 22s ease-in-out infinite;
}

/* ──────────────────────────────────────────
   TEXT EFFECTS
   ────────────────────────────────────────── */

.fx-grad-text {
  background: linear-gradient(135deg, #0f172a 0%, #0e8b7f 50%, #7c3aed 100%) 0% 50% / 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-gradText 6s ease infinite;
}
.fx-grad-text-teal {
  background: linear-gradient(135deg, #63d6ca, #0e8b7f, #0C7F74) 0% 50% / 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-gradText 5s ease infinite;
}

/* ──────────────────────────────────────────
   BADGE PULSE / RIPPLE
   ────────────────────────────────────────── */

.fx-badge-pulse { animation: fx-badgePulse 3s ease infinite; }

.fx-ripple {
  position: absolute;
  border-radius: 50%;
  width: 80px; height: 80px;
  margin-left: -40px; margin-top: -40px;
  background: rgba(255,255,255,.55);
  pointer-events: none;
  animation: fx-ripple .6s ease-out forwards;
  z-index: 20;
}

/* ──────────────────────────────────────────
   VALUE CARDS  — add .fx-value-card to .value-card
   KEY: background + background-size must be on same rule to avoid
        the shorthand reset bug that breaks the shimmer animation.
   ────────────────────────────────────────── */

.fx-value-card {
  will-change: auto;
}
.fx-value-card:hover {
  animation: none;
}

.fx-value-card::after {
  content: none;
  animation: none;
  background: none;
}

/* STEP CARDS  — add .fx-step-card to .step-card
   ────────────────────────────────────────── */

.fx-step-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  backdrop-filter: blur(22px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.04);
  border-style: solid; border-width: 1px;
  border-color: rgba(255,255,255,.95) rgba(255,255,255,.55) rgba(255,255,255,.42) rgba(255,255,255,.55);
  filter: brightness(1.02);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, filter .35s ease;
  will-change: transform;
  animation: fx-fadeUp .5s ease both;
}
.fx-step-card:hover {
  transform: translateY(-11px) scale(1.032);
  box-shadow:
    0 6px 16px rgba(14,139,127,.42),
    0 20px 44px rgba(59,130,246,.30),
    0 32px 60px rgba(124,58,237,.20),
    0 48px 76px rgba(14,139,127,.10);
  filter: brightness(1.06);
}
.fx-step-card:hover .step-number { animation: fx-iconBounce .5s ease; }

/* Solid diagonal wash per step */
.fx-step-card:nth-child(1)  { background: linear-gradient(135deg,rgba(204,251,241,1) 0%,rgba(186,230,253,.50) 60%,rgba(204,251,241,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(14,139,127,.46),  0 5px 14px rgba(14,139,127,.38),  0 14px 36px rgba(14,139,127,.24), 0 30px 60px rgba(14,139,127,.12); }
.fx-step-card:nth-child(2)  { background: linear-gradient(135deg,rgba(237,233,254,1) 0%,rgba(199,210,254,.50) 60%,rgba(237,233,254,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(124,58,237,.46), 0 5px 14px rgba(124,58,237,.38), 0 14px 36px rgba(124,58,237,.24), 0 30px 60px rgba(124,58,237,.12); }
.fx-step-card:nth-child(3)  { background: linear-gradient(135deg,rgba(252,231,243,1) 0%,rgba(251,207,232,.50) 60%,rgba(252,231,243,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(236,72,153,.46), 0 5px 14px rgba(236,72,153,.38), 0 14px 36px rgba(236,72,153,.24), 0 30px 60px rgba(236,72,153,.12); }
.fx-step-card:nth-child(4)  { background: linear-gradient(135deg,rgba(255,237,213,1) 0%,rgba(254,240,138,.50) 60%,rgba(255,237,213,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(249,115,22,.46), 0 5px 14px rgba(249,115,22,.38), 0 14px 36px rgba(249,115,22,.24), 0 30px 60px rgba(249,115,22,.12); }
.fx-step-card:nth-child(5)  { background: linear-gradient(135deg,rgba(224,242,254,1) 0%,rgba(186,230,253,.50) 60%,rgba(224,242,254,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(14,165,233,.46), 0 5px 14px rgba(14,165,233,.38), 0 14px 36px rgba(14,165,233,.24), 0 30px 60px rgba(14,165,233,.12); }
.fx-step-card:nth-child(6)  { background: linear-gradient(135deg,rgba(187,247,208,1) 0%,rgba(167,243,208,.50) 60%,rgba(187,247,208,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(15,159,143,.46), 0 5px 14px rgba(15,159,143,.38), 0 14px 36px rgba(15,159,143,.24), 0 30px 60px rgba(15,159,143,.12); }
.fx-step-card:nth-child(7)  { background: linear-gradient(135deg,rgba(245,243,255,1) 0%,rgba(221,214,254,.50) 60%,rgba(245,243,255,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(139,92,246,.46), 0 5px 14px rgba(139,92,246,.38), 0 14px 36px rgba(139,92,246,.24), 0 30px 60px rgba(139,92,246,.12); }
.fx-step-card:nth-child(8)  { background: linear-gradient(135deg,rgba(255,228,230,1) 0%,rgba(254,205,211,.50) 60%,rgba(255,228,230,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(244,63,94,.46),  0 5px 14px rgba(244,63,94,.38),  0 14px 36px rgba(244,63,94,.24),  0 30px 60px rgba(244,63,94,.12); }
.fx-step-card:nth-child(9)  { background: linear-gradient(135deg,rgba(207,250,254,1) 0%,rgba(165,243,252,.50) 60%,rgba(207,250,254,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(6,182,212,.46),  0 5px 14px rgba(6,182,212,.38),  0 14px 36px rgba(6,182,212,.24),  0 30px 60px rgba(6,182,212,.12); }
.fx-step-card:nth-child(10) { background: linear-gradient(135deg,rgba(220,252,231,1) 0%,rgba(237,233,254,.50) 60%,rgba(220,252,231,.36) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(14,139,127,.46),  0 5px 14px rgba(14,139,127,.38),  0 14px 36px rgba(14,139,127,.24),  0 30px 60px rgba(14,139,127,.12); }

/* Shimmer bar — background + size together */
.fx-step-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  animation: fx-shimmer 3s linear infinite;
}
.fx-step-card:nth-child(1)::before  { background: linear-gradient(90deg, #0e8b7f, #06b6d4, #0e8b7f) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(2)::before  { background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(3)::before  { background: linear-gradient(90deg, #ec4899, #f9a8d4, #ec4899) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(4)::before  { background: linear-gradient(90deg, #f97316, #fbbf24, #f97316) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(5)::before  { background: linear-gradient(90deg, #0ea5e9, #7dd3fc, #0ea5e9) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(6)::before  { background: linear-gradient(90deg, #0F9F8F, #7DD8CE, #0F9F8F) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(7)::before  { background: linear-gradient(90deg, #8b5cf6, #c4b5fd, #8b5cf6) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(8)::before  { background: linear-gradient(90deg, #f43f5e, #fda4af, #f43f5e) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(9)::before  { background: linear-gradient(90deg, #06b6d4, #67e8f9, #06b6d4) 200% 50% / 300% 100%; }
.fx-step-card:nth-child(10)::before { background: linear-gradient(90deg, #0e8b7f, #7c3aed, #0e8b7f) 200% 50% / 300% 100%; }

/* Stagger */
.fx-step-card:nth-child(1)  { animation-delay: .04s; }
.fx-step-card:nth-child(2)  { animation-delay: .09s; }
.fx-step-card:nth-child(3)  { animation-delay: .14s; }
.fx-step-card:nth-child(4)  { animation-delay: .19s; }
.fx-step-card:nth-child(5)  { animation-delay: .24s; }
.fx-step-card:nth-child(6)  { animation-delay: .29s; }
.fx-step-card:nth-child(7)  { animation-delay: .34s; }
.fx-step-card:nth-child(8)  { animation-delay: .39s; }
.fx-step-card:nth-child(9)  { animation-delay: .44s; }
.fx-step-card:nth-child(10) { animation-delay: .49s; }

/* ──────────────────────────────────────────
   TESTIMONIAL CARDS  — add .fx-testimonial-card
   ────────────────────────────────────────── */

.fx-testimonial-card {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(210%) brightness(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(210%) brightness(1.06);
  border-style: solid; border-width: 1px;
  border-color: rgba(255,255,255,.95) rgba(255,255,255,.55) rgba(255,255,255,.42) rgba(255,255,255,.55);
  filter: brightness(1.03);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, filter .35s ease;
  will-change: transform;
  animation: fx-fadeUp .6s ease both;
}
.fx-testimonial-card:hover {
  transform: translateY(-9px) scale(1.022);
  box-shadow:
    0 6px 16px rgba(124,58,237,.44),
    0 18px 42px rgba(59,130,246,.32),
    0 30px 58px rgba(236,72,153,.22),
    0 48px 76px rgba(124,58,237,.12);
  filter: brightness(1.06);
}

/* Solid diagonal wash + inset glow */
.fx-testimonial-card:nth-child(1) {
  background: linear-gradient(135deg, rgba(252,231,243,1) 0%, rgba(251,207,232,.54) 58%, rgba(252,231,243,.38) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(236,72,153,.50), 0 6px 18px rgba(236,72,153,.42), 0 18px 44px rgba(236,72,153,.28), 0 38px 72px rgba(236,72,153,.14);
}
.fx-testimonial-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(237,233,254,1) 0%, rgba(221,214,254,.54) 58%, rgba(237,233,254,.38) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(124,58,237,.50), 0 6px 18px rgba(124,58,237,.42), 0 18px 44px rgba(124,58,237,.28), 0 38px 72px rgba(124,58,237,.14);
}
.fx-testimonial-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(224,242,254,1) 0%, rgba(186,230,253,.54) 58%, rgba(224,242,254,.38) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(14,165,233,.50), 0 6px 18px rgba(14,165,233,.42), 0 18px 44px rgba(14,165,233,.28), 0 38px 72px rgba(14,165,233,.14);
}

/* Shimmer bar — background + size together */
.fx-testimonial-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  animation: fx-shimmer 4s linear infinite;
}
.fx-testimonial-card:nth-child(1)::before { background: linear-gradient(90deg, #ec4899, #f43f5e, #ec4899) 200% 50% / 300% 100%; }
.fx-testimonial-card:nth-child(2)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed) 200% 50% / 300% 100%; }
.fx-testimonial-card:nth-child(3)::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8, #0ea5e9) 200% 50% / 300% 100%; }

/* Inner orb glow */
.fx-testimonial-card::after {
  content: "";
  position: absolute;
  width: 148px; height: 148px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .50;
  bottom: -34px; right: -22px;
  pointer-events: none;
  animation: fx-orbFloat 7s ease-in-out infinite;
  z-index: 0;
}
.fx-testimonial-card:nth-child(1)::after { background: #ec4899; }
.fx-testimonial-card:nth-child(2)::after { background: #7c3aed; }
.fx-testimonial-card:nth-child(3)::after { background: #0ea5e9; }

/* Stagger */
.fx-testimonial-card:nth-child(1) { animation-delay: .05s; }
.fx-testimonial-card:nth-child(2) { animation-delay: .13s; }
.fx-testimonial-card:nth-child(3) { animation-delay: .21s; }

/* ──────────────────────────────────────────
   MISSION / VISION SECTION
   Add .fx-mv-card to each .mv-card
   Add .fx-mv-trust to .mission-vision-trust
   ────────────────────────────────────────── */

.fx-mv-card {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04);
  background: linear-gradient(135deg, rgba(204,251,241,.88) 0%, rgba(219,234,254,.72) 55%, rgba(237,233,254,.50) 100%);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(14,139,127,.28),
    0 18px 52px rgba(14,139,127,.22),
    0 4px 16px rgba(59,130,246,.12);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, filter .35s ease;
  will-change: transform;
}
.fx-mv-card:hover {
  transform: translateY(-8px) scale(1.016);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(14,139,127,.45),
    0 6px 20px rgba(14,139,127,.26),
    0 20px 48px rgba(59,130,246,.20),
    0 30px 64px rgba(124,58,237,.12);
  filter: brightness(1.04);
}

/* Animated top shimmer bar */
.fx-mv-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #0e8b7f, #63d6ca, #7c3aed, #0e8b7f) 200% 50% / 300% 100%;
  animation: fx-shimmer 4s linear infinite;
}

/* Corner orb */
.fx-mv-card::after {
  content: "";
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #0e8b7f 30%, #3b82f6 100%);
  filter: blur(48px);
  opacity: .38;
  bottom: -40px; right: -28px;
  pointer-events: none;
  animation: fx-orbFloat 9s ease-in-out infinite;
  z-index: 0;
}

/* Icon gets gradient fill + glow on the card */
.fx-mv-card .mv-card-icon {
  background: linear-gradient(135deg, #0e8b7f, #63d6ca);
  color: #fff;
  box-shadow: 0 6px 20px rgba(14,139,127,.38);
  border-radius: 14px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.fx-mv-card:hover .mv-card-icon {
  transform: scale(1.12) rotate(-5deg);
  box-shadow: 0 10px 28px rgba(14,139,127,.50);
}

/* Trust strip glass pill */
.fx-mv-trust {
  background: linear-gradient(135deg, rgba(204,251,241,.75) 0%, rgba(219,234,254,.65) 60%, rgba(237,233,254,.50) 100%);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 6px 28px rgba(14,139,127,.16), 0 2px 8px rgba(59,130,246,.10), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ──────────────────────────────────────────
   DOCTOR / EXPERIENCE SECTION
   Add .fx-doctor-section to the section
   Add .fx-doctor-inner to .doctor-feature-inner
   Add .fx-doctor-content to .doctor-feature-content
   Add .fx-doctor-stats to .doctor-stats
   Add .fx-doctor-stat to each .doctor-stat
   ────────────────────────────────────────── */

/* Section: teal→blue→purple (tier 1 — elevated) */
.fx-doctor-section {
  background:
    radial-gradient(ellipse 80% 48% at 50% 0%,  rgba(255,255,255,.20) 0%, transparent 65%),
    radial-gradient(ellipse 95% 80% at 0%   45%, rgba(14,139,127,.68)  0%, transparent 52%),
    radial-gradient(ellipse 90% 75% at 100% 55%, rgba(124,58,237,.60)  0%, transparent 52%),
    radial-gradient(ellipse 75% 62% at 55%  0%,  rgba(59,130,246,.56)  0%, transparent 50%),
    radial-gradient(ellipse 65% 55% at 50%  100%,rgba(14,165,233,.44)  0%, transparent 50%),
    linear-gradient(135deg, #8DE0D5 0%, #bfdbfe 50%, #ddd6fe 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
  animation: fx-meshDrift 20s ease-in-out infinite;
}

/* Inner grid: 2-column layout */
.fx-doctor-inner {
  grid-template-columns: 420px 1fr;
  max-width: unset;
  margin-left: unset;
  margin-right: unset;
}

/* Single merged glass card wrapping image + content */
.fx-doctor-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, transparent 10%),
    linear-gradient(135deg, rgba(204,251,241,.93) 0%, rgba(186,230,253,.84) 38%, rgba(219,234,254,.80) 65%, rgba(237,233,254,.60) 100%);
  backdrop-filter: blur(40px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.05);
  border-radius: 1.5rem;
  /* Gradient border: faint teal→blue→purple edges */
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    /* top-edge glass highlight */
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 2px 10px rgba(255,255,255,.24),
    /* directional border tints (gradient border feel) */
    inset  1px 0 0 rgba(14,139,127,.20),
    inset -1px 0 0 rgba(59,130,246,.16),
    inset 0 -1px 0 rgba(124,58,237,.12),
    /* external colored glow layers */
    0 6px 24px rgba(14,139,127,.34),
    0 20px 60px rgba(59,130,246,.26),
    0 44px 88px rgba(124,58,237,.18);
  gap: 0;
  align-items: stretch;
  transition: box-shadow .4s ease, filter .4s ease;
}
.fx-doctor-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 2px 10px rgba(255,255,255,.30),
    inset  1px 0 0 rgba(14,139,127,.32),
    inset -1px 0 0 rgba(59,130,246,.24),
    inset 0 -1px 0 rgba(124,58,237,.18),
    0 8px 30px rgba(14,139,127,.40),
    0 24px 72px rgba(59,130,246,.30),
    0 48px 96px rgba(124,58,237,.20);
  filter: brightness(1.04);
}
/* Shine sweep on hover (::after is free on this card) */
.fx-doctor-card::after {
  content: "";
  position: absolute;
  top: -50%; left: -120%;
  width: 55%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 10;
}
.fx-doctor-card:hover::after {
  animation: fx-shine .65s ease forwards;
}
.fx-doctor-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #0e8b7f, #63d6ca, #7c3aed, #0e8b7f) 200% 50% / 300% 100%;
  animation: fx-shimmer 4s linear infinite;
  z-index: 10;
}

/* Image: flush left, fills full card height */
.fx-doctor-card .doctor-feature-img {
  position: relative;
  border-radius: calc(1.5rem - 1px) 0 0 calc(1.5rem - 1px);
  overflow: hidden;
  box-shadow: none;
  align-self: stretch;
}
/* Radial glow behind image */
.fx-doctor-card .doctor-feature-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(14,139,127,.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(124,58,237,.22) 0%, transparent 55%);
  pointer-events: none;
}
/* Soft right-edge blend into card */
.fx-doctor-card .doctor-feature-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, transparent 48%, rgba(186,230,253,.45) 72%, rgba(204,251,241,.75) 100%);
  pointer-events: none;
}
.fx-doctor-card .doctor-feature-img img {
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Content: padding only, no extra glass */
.fx-doctor-card .doctor-feature-content {
  padding: 2.5rem;
}

@media (max-width: 1024px) {
  .fx-doctor-card .doctor-feature-img {
    border-radius: calc(1.5rem - 1px) calc(1.5rem - 1px) 0 0;
  }
  .fx-doctor-card .doctor-feature-img img { min-height: 280px; height: auto; }
}

@media (max-width: 768px) {
  .fx-doctor-card {
    grid-template-columns: 1fr;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    overflow: visible;
    gap: .75rem;
  }
  .fx-doctor-card::before,
  .fx-doctor-card::after {
    display: none;
  }
  .fx-doctor-card .doctor-feature-img {
    border-radius: 1.25rem;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 8px 22px rgba(14,139,127,.16), 0 14px 34px rgba(59,130,246,.12);
  }
  .fx-doctor-card .doctor-feature-img::after {
    background: linear-gradient(to right, transparent 56%, rgba(186,230,253,.24) 100%);
  }
  .fx-doctor-card .doctor-feature-img img {
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    object-fit: cover;
    object-position: center 20%;
  }
  .fx-doctor-card .doctor-feature-content {
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(219,234,254,.86) 0%, rgba(237,233,254,.8) 100%);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 8px 22px rgba(59,130,246,.1);
  }
}

/* Stat cards: three equal glass tiles */
.fx-doctor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0;
  border: none;
  margin-bottom: 1.5rem;
}
.fx-doctor-stat {
  background: linear-gradient(135deg, rgba(204,251,241,.90) 0%, rgba(186,230,253,.40) 100%);
  border: 1px solid rgba(14,139,127,.28);
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 4px 18px rgba(14,139,127,.14);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  will-change: transform;
}
.fx-doctor-stat:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 30px rgba(14,139,127,.22);
}

.section-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.08);
}

@media (max-width: 640px) {
  .fx-doctor-card {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fx-doctor-card .doctor-feature-img {
    border-radius: calc(1.5rem - 1px) calc(1.5rem - 1px) 0 0;
  }
  .fx-doctor-card .doctor-feature-img img {
    height: 240px;
    min-height: 240px;
    max-height: 240px;
    object-fit: cover;
    object-position: center 18%;
  }
  .fx-doctor-card .doctor-feature-content {
    padding: 1rem 1rem 1.25rem;
  }
  .fx-doctor-card .doctor-feature-content h2 {
    font-size: 1.85rem;
    line-height: 1.1;
    margin-bottom: .6rem;
  }
  .fx-doctor-card .doctor-feature-content p {
    margin-bottom: .9rem;
    font-size: .98rem;
    line-height: 1.5;
  }
  .fx-doctor-card .doctor-points {
    gap: .45rem;
    margin-bottom: .9rem;
  }
  .fx-doctor-card .doctor-points .doctor-point {
    font-size: .96rem;
  }
  .fx-doctor-card .doctor-feature-badge {
    display: none;
  }
  .fx-doctor-stats { grid-template-columns: repeat(3, 1fr); gap: .625rem; }
  .fx-doctor-content { padding: 1.5rem; }
  .fx-doctor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-doctor-stat {
    padding: .9rem .65rem;
  }
  .fx-doctor-stat strong {
    font-size: 2rem;
    line-height: 1;
  }
  .fx-doctor-stat span {
    font-size: .74rem;
    letter-spacing: .04em;
  }

  /* All horizontal carousel cards — remove colored glow on mobile */
  .fx-step-card {
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: none !important;
  }
  .fx-step-card::before {
    opacity: .2;
    height: 2px;
  }
  .fx-step-card:hover {
    transform: none;
    filter: none;
    box-shadow: none !important;
  }

  /* Our Purpose cards — remove outer teal glow + clip orb bleed */
  .fx-mv-card {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(14,139,127,.22) !important;
    overflow: hidden;
  }
  .fx-mv-card::after {
    display: none;
  }
  .fx-mv-card:hover {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(14,139,127,.28) !important;
    filter: none;
  }

  /* Our Commitment cards — remove hover shadow, soften border */
  .fx-value-card,
  .value-card {
    box-shadow: none !important;
  }
  .fx-value-card:hover,
  .value-card:hover {
    transform: none;
    box-shadow: none !important;
    filter: none;
  }
}

@media (max-width: 380px) {
  .fx-doctor-card .doctor-feature-img img {
    height: 210px;
    min-height: 210px;
    max-height: 210px;
    object-fit: cover;
    object-position: center 16%;
  }
  .fx-doctor-card .doctor-feature-content h2 {
    font-size: 1.65rem;
  }
  .fx-doctor-card .doctor-feature-content p,
  .fx-doctor-card .doctor-points .doctor-point {
    font-size: .92rem;
  }
  .fx-doctor-stats {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fx-hero-grad::before,
  .fx-orb-tl::before, .fx-orb-br::after,
  .fx-float, .fx-fade-up, .fx-badge-pulse,
  .fx-grad-text, .fx-grad-text-teal,
  .fx-mesh-navy,
  .fx-value-card, .fx-value-card::before, .fx-value-card::after,
  .fx-step-card,  .fx-step-card::before,
  .fx-testimonial-card, .fx-testimonial-card::before, .fx-testimonial-card::after,
  .fx-mv-card, .fx-mv-card::before, .fx-mv-card::after,
  .fx-mv-section-bg,
  .fx-doctor-section, .fx-doctor-card::before, .fx-doctor-card::after,
  .fx-doctor-stat {
    animation: none;
    transition: none;
  } */
}