.fancy-section {
  --fancy-blue:         #0066CC;
  --fancy-blue-strong:  #00337E;
  --fancy-blue-soft:    #0066CC40;
  --fancy-teal:         #005c80;
  --fancy-teal-soft:    #005c8040;
	--fancy-teal-light:    #005c801c;
  --fancy-yellow:       #FFC600;
  --fancy-yellow-soft:  #FFC60040;
	--fancy-yellow-light:    #FFC6001c;
  --fancy-ink:          #000;
  --fancy-ink-2:        #444;
  --fancy-muted:        #666;
  --fancy-line:         #EFF1F3;
  --fancy-line-dashed:  #cccccc;
  --fancy-card-bg:      #0066CC1c;
  --fancy-card-border:  #0066CC40;
  --fancy-white:        #FFFFFF;
  --fancy-shadow:       0 8px 24px rgba(15, 27, 45, 0.06);
  --fancy-shadow-hover: 0 14px 34px rgba(15, 27, 45, 0.10);
  --fancy-radius:       20px;
  --fancy-radius-sm:    15px;
  
  /* Motion tokens — tweaked for a smooth, natural feel matching Interactive. */
  --fancy-ease:         cubic-bezier(0.42, 0, 0.24, 1);
  --fancy-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --fancy-move:         720ms;   /* tab position rotation */
  --fancy-quick:        320ms;   /* small state changes */
  --fancy-fade:         420ms;   /* card + label fades */

  color: var(--fancy-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(48px, 8vw, 96px) 20px;
  background: var(--fancy-white);
  box-sizing: border-box;
  position: relative;
}
.fancy-section *, .fancy-section *::before, .fancy-section *::after { box-sizing: border-box; }

/* --------------------------- Container / header --------------------------- */
.fancy-container { max-width: 1180px; margin: 0 auto; position: relative; }

.fancy-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 40px;
}
.fancy-title {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--fancy-ink);
}
.fancy-title .fancy-title-accent { color: var(--fancy-blue); }
.fancy-subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--fancy-muted);
  margin: 0;
}

/* ============================================================
   TAB CAROUSEL — desktop triangular rotation
   ============================================================ */
.fancy-tabs-wrap { position: relative; margin-top: 8px; }

.fancy-tabs {
  position: relative;
  width: 100%;
  max-width: 780px;
  height: 250px;
  margin: 0 auto 0;
}

/* Connector SVG sits behind the tabs and stretches to fit */
.fancy-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.fancy-connectors .fancy-line {
  stroke: var(--fancy-line-dashed);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  fill: none;
  opacity: 0.85;
  transition: stroke var(--fancy-move) var(--fancy-ease),
              stroke-width var(--fancy-move) var(--fancy-ease),
              opacity var(--fancy-move) var(--fancy-ease);
}
.fancy-connectors .fancy-line.is-active {
  stroke-width: 2;
  opacity: 1;
}

/* Colour lines touching the active tab. */
.fancy-tabs[data-active="ai"]        .fancy-line.is-active { stroke: var(--fancy-teal); }
.fancy-tabs[data-active="strategic"] .fancy-line.is-active { stroke: var(--fancy-yellow); }
.fancy-tabs[data-active="revenue"]   .fancy-line.is-active { stroke: var(--fancy-blue); }

/* ------------------------------ Tab (button) ----------------------------- */
button.fancy-tab {
  appearance: none;
  background-color: transparent !important;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  will-change: transform;

  /* Center the tab (based on its own box) on the (tab-x, tab-y) point. */
  transform: translate3d(var(--tab-x, 0px), var(--tab-y, 0px), 0) translate(-50%, -50%);
  transition: transform var(--fancy-move) var(--fancy-ease);
}

/* Focus ring on the CIRCLE for keyboard users */
.fancy-tab:focus-visible .fancy-tab-circle {
  outline: 3px solid var(--fancy-blue);
  outline-offset: 4px;
}

/* --- The circle (icon container) --- */
.fancy-tab-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition:
    transform var(--fancy-move) var(--fancy-ease),
    box-shadow var(--fancy-quick) var(--fancy-ease),
    background-color var(--fancy-quick) var(--fancy-ease),
    filter var(--fancy-quick) var(--fancy-ease);
}

/* Outer LIGHT RING around every circle (Interactive signature). Uses box-shadow so
   it doesn't affect layout; the ring uses each pillar's soft tint. */
.fancy-tab--ai        .fancy-tab-circle { background: var(--fancy-teal);   color: var(--fancy-teal);   box-shadow: 0 0 0 6px var(--fancy-teal-soft); }
.fancy-tab--strategic .fancy-tab-circle { background: var(--fancy-yellow); color: var(--fancy-yellow); box-shadow: 0 0 0 6px var(--fancy-yellow-soft); }
.fancy-tab--revenue   .fancy-tab-circle { background: var(--fancy-blue);   color: var(--fancy-blue);   box-shadow: 0 0 0 6px var(--fancy-blue-soft); }

.fancy-tab-circle img,
.fancy-tab-circle svg.fancy-tab-icon {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
  transition: transform var(--fancy-quick) var(--fancy-ease-out);
  z-index: 2;
}
.fancy-tab-circle .fancy-tab-icon path,
.fancy-tab-circle .fancy-tab-icon circle,
.fancy-tab-circle .fancy-tab-icon rect,
.fancy-tab-circle .fancy-tab-icon polyline,
.fancy-tab-circle .fancy-tab-icon line {
  stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.fancy-tab-circle .fancy-tab-icon--filled path { fill: #fff; stroke: none; }

/* Portrait-style photo fills the whole circle for strategic when overridden */
.fancy-tab-circle.has-photo { padding: 0; }
.fancy-tab-circle.has-photo img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}

/* Pulsing halo layer sits behind the circle (visible when active) */
.fancy-tab-circle::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--fancy-quick) var(--fancy-ease), transform var(--fancy-quick) var(--fancy-ease);
  z-index: 1;
  pointer-events: none;
}

/* Hover / focus subtle emphasis (only when tab is not active) */
.fancy-tab:not([aria-selected="true"]):hover .fancy-tab-circle,
.fancy-tab:not([aria-selected="true"]):focus-visible .fancy-tab-circle {
  transform: scale(1.05);
}
.fancy-tab:not([aria-selected="true"]):hover .fancy-tab-circle::before,
.fancy-tab:not([aria-selected="true"]):focus-visible .fancy-tab-circle::before {
  opacity: 0.12;
  transform: scale(1);
}

/* --- The label --- */
.fancy-tab-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d(var(--label-x, 0px), var(--label-y, 0px), 0) translate(-50%, -50%);
  transition:
    transform var(--fancy-move) var(--fancy-ease),
    color var(--fancy-quick) var(--fancy-ease),
    font-size var(--fancy-quick) var(--fancy-ease);

  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fancy-ink);
  white-space: nowrap;
  z-index: 3;
  /* Halo so labels stay readable when they cross dashed lines. */
  text-shadow:
    0 0 6px #fff, 0 0 6px #fff,
    0 0 10px #fff, 0 0 10px #fff;
}

/* Active tab (slot C) — boost label size + color */
.fancy-tab[data-slot="C"] .fancy-tab-label {
  font-size: 20px;
  color: var(--fancy-ink);
}

/* Slot A: label aligned to the RIGHT so it reads towards the circle */
.fancy-tab[data-slot="A"] .fancy-tab-label { text-align: right; right:0; left:auto;}
/* Slot B: label aligned to the LEFT so it reads towards the circle */
.fancy-tab[data-slot="B"] .fancy-tab-label { text-align: left; left:100%;}
/* Slot C: centred */
.fancy-tab[data-slot="C"] .fancy-tab-label { text-align: center; }

/* Non-active tabs dim slightly */
.fancy-tab[aria-selected="false"] .fancy-tab-circle {
  filter: saturate(0.85) brightness(0.98);
}

/* Active state — halo pulses gently, icon scales up */
.fancy-tab[aria-selected="true"] .fancy-tab-circle {
  transform: scale(1.08);
}
.fancy-tab[aria-selected="true"] .fancy-tab-circle::before {
  opacity: 0.28;
  transform: scale(1);
  animation: fancy-pulse 2.2s ease-in-out infinite;
}
.fancy-tab[aria-selected="true"] .fancy-tab-circle img,
.fancy-tab[aria-selected="true"] .fancy-tab-circle svg.fancy-tab-icon {
  transform: scale(1.08);
}

/* Extra glow-ring on active */
.fancy-tab--ai[aria-selected="true"]        .fancy-tab-circle { box-shadow: 0 0 0 8px var(--fancy-teal-soft),   0 12px 30px rgba(47, 191, 176, 0.28); }
.fancy-tab--strategic[aria-selected="true"] .fancy-tab-circle { box-shadow: 0 0 0 8px var(--fancy-yellow-soft), 0 12px 30px rgba(197, 139, 198, 0.32); }
.fancy-tab--revenue[aria-selected="true"]   .fancy-tab-circle { box-shadow: 0 0 0 8px var(--fancy-blue-soft),   0 12px 30px rgba(31, 109, 235, 0.26); }

@keyframes fancy-pulse {
  0%, 100% { opacity: 0.20; transform: scale(0.94); }
  50%      { opacity: 0.35; transform: scale(1.10); }
}

/* ============================================================
   CONTENT CARD & PANELS
   ============================================================ */
.fancy-card {
  position: relative;
  margin-top: 0;
  border-radius: var(--fancy-radius);
  background: var(--fancy-card-bg);
  border: 1px solid var(--fancy-card-border);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px);
  box-shadow: var(--fancy-shadow);
  overflow: hidden;
  transition: background-color var(--fancy-fade) var(--fancy-ease), border-color var(--fancy-fade) var(--fancy-ease);
}

/* Softly tint the card according to the active pillar. */
.fancy-tabs-wrap[data-active="ai"]        .fancy-card { background: var(--fancy-teal-light); border-color: --fancy-teal-soft; }
.fancy-tabs-wrap[data-active="strategic"] .fancy-card { background: var(--fancy-yellow-light); border-color: var(--fancy-yellow-soft); }
.fancy-tabs-wrap[data-active="revenue"]   .fancy-card { background: var(--fancy-card-bg); border-color: var(--fancy-blue-soft); }

.fancy-panels {
  position: relative;
  min-height: 300px;
}

.fancy-panel {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--fancy-fade) var(--fancy-ease),
    transform var(--fancy-fade) var(--fancy-ease),
    visibility 0s linear var(--fancy-fade);
}
.fancy-panel[data-active="true"] {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--fancy-fade) var(--fancy-ease),
    transform var(--fancy-fade) var(--fancy-ease),
    visibility 0s linear 0s;
}

/* ============================================================
   PAGINATION DOTS
   ============================================================ */
.fancy-dots {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px;
}
.fancy-dots button.fancy-dot {
  appearance: none;
  background: var(--fancy-line-dashed);
  border: 0; 
	padding: 0 !important;
  width: 10px; height: 10px; border-radius: 50%;
  cursor: pointer;
  transition: background var(--fancy-quick) var(--fancy-ease), width var(--fancy-quick) var(--fancy-ease);
}
.fancy-dot:hover { background: rgba(15, 27, 45, 0.28); }
.fancy-dots button.fancy-dot[aria-current="true"] {
  background: var(--fancy-blue);
  width: 24px;
  border-radius: 6px;
}
.fancy-tabs-wrap[data-active="ai"] .fancy-dots button.fancy-dot[aria-current="true"] { background: var(--fancy-teal); }
.fancy-tabs-wrap[data-active="strategic"] .fancy-dots button.fancy-dot[aria-current="true"] { background: var(--fancy-yellow); }
.fancy-dots button.fancy-dot:focus-visible { outline: 2px solid var(--fancy-blue); outline-offset: 3px; }

/* ============================================================
   RESPONSIVE — TABLET & MOBILE (single-DOM, no duplicated markup)
   ============================================================ */
@media (max-width: 900px) {
  .fancy-tabs { max-width: 620px; height: 300px; }
  .fancy-tab-circle { width: 82px; height: 82px; }
  .fancy-tab-circle img,
  .fancy-tab-circle svg.fancy-tab-icon { width: 40px; height: 40px; }
  .fancy-tab-label { font-size: 15px; }
  .fancy-tab[data-slot="C"] .fancy-tab-label { font-size: 17px; }
  .fancy-panel { grid-template-columns: 1fr; gap: 24px; }
  .fancy-panels { min-height: 460px; }
}

@media (max-width: 640px) {
  .fancy-section { padding:0; }
  .fancy-header { margin-bottom: 22px; }

  /* Disable carousel positioning; use a simple horizontal row instead. */
  .fancy-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: auto !important;
    max-width: 100%;
    padding: 10px 0 10px;
    gap: 6px;
  }
  .fancy-connectors { display: none; }

  .fancy-tab {
    position: static !important;
    transform: none !important;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 8px;
  }
  .fancy-tab-circle { width: 66px; height: 66px; }
  .fancy-tab-circle img,
  .fancy-tab-circle svg.fancy-tab-icon { width: 32px; height: 32px; }

  .fancy-tab-label {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    font-size: 12.5px;
    line-height: 1.25;
    max-width: 100px;
    white-space: normal;
  }
  .fancy-tab[data-slot="C"] .fancy-tab-label { font-size: 12.5px; }

  .fancy-panels { min-height: 540px; }
  .fancy-card { padding: 10px 0; border-radius: 15px; }
	.fancy-dots{margin-right:15px; margin-bottom:10px;}
}

/* ============================================================
   REDUCED MOTION SUPPORT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fancy-section *, .fancy-section *::before, .fancy-section *::after {
    transition-duration: 40ms !important;
    animation: none !important;
  }
}

/* ============================================================
   PRINT / SEO-friendly fallback — all panels visible.
   ============================================================ */
@media print {
  .fancy-panel {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
    margin-bottom: 24px;
  }
  .fancy-dots, .fancy-connectors { display: none; }
}