/* ============================================================
   Intel × IBM — brand override
   Loaded AFTER main.css to retheme AIForge for Intel/IBM
   ============================================================ */

/* ── IntelOne Display ───────────────────────────────────────── */
@font-face {
  font-family: 'IntelOne Display';
  src: url('../../shared/IntelOne Display Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IntelOne Display';
  src: url('../../shared/IntelOne Display Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IntelOne Display';
  src: url('../../shared/IntelOne Display Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IntelOne Display';
  src: url('../../shared/IntelOne Display Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Brand tokens (override AIForge :root) ──────────────────── */
:root {
  /* Intel + IBM core palette */
  --intel-blue:        #0068B5;   /* Intel Classic Blue (logo) */
  --intel-energy:      #00C7FD;   /* Intel Energy Blue */
  --intel-blue-deep:   #003C71;
  --ibm-blue:          #0F62FE;   /* IBM Carbon Blue 60 */
  --ibm-blue-dark:     #002D9C;   /* IBM Carbon Blue 80 */
  --carbon-100:        #161616;   /* Body text */
  --carbon-70:         #525252;   /* Muted text */
  --carbon-50:         #8D8D8D;
  --carbon-30:         #C6C6C6;
  --carbon-20:         #E0E0E0;   /* Borders */
  --carbon-10:         #F4F4F4;   /* Surface alt */
  --carbon-05:         #FAFAFA;
  --white:             #FFFFFF;

  /* Remap AIForge tokens → Intel/IBM */
  --body:    #FFFFFF;
  --black:   #161616;
  --theme:   #0068B5;   /* primary -> Intel Classic Blue */
  --theme2:  #0F62FE;   /* secondary -> IBM Blue */
  --theme3:  #00C7FD;   /* tertiary -> Intel Energy Blue */
  --theme5:  #0F62FE;
  --theme6:  #00C7FD;
  --header:  #FFFFFF;   /* was dark; now light */
  --header2: #F4F4F4;
  --text:    #525252;
  --border:  #E0E0E0;
  --bg:      #F4F4F4;
}

/* ── Typography ─────────────────────────────────────────────── */
body {
  font-family: 'IntelOne Display', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--white) !important;
  color: var(--carbon-100) !important;
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.hero-content h1,
.section-title h2,
.section-title h6 {
  font-family: 'IntelOne Display', sans-serif !important;
  color: var(--carbon-100) !important;
  letter-spacing: -0.01em;
  font-weight: 500;
  text-transform: none !important;
  text-wrap: balance;
}

/* Balance / orphan-prevention on long display copy too */
blockquote,
.hero-content p,
.testimonail-content p {
  text-wrap: pretty;
}

h1 { font-weight: 300; letter-spacing: -0.02em; }
h2 { font-weight: 400; }
h3, h4 { font-weight: 500; }

p, li, span, a, button, input, textarea, label {
  font-family: 'IntelOne Display', 'IBM Plex Sans', sans-serif !important;
}

/* Eyebrow / kicker */
.section-title h6,
h6.text-white {
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--intel-blue) !important;
  font-size: 12px !important;
}

/* Highlight span color (IA → AI gradient feel) — also applies to <em> emphasis
   inside headings, so word-level accents on light backgrounds get the same
   colorful bold-medium gradient treatment as <span> highlights */
.hero-content h1 span,
.section-title h2 span,
h2 span, h1 span, h3 span,
h1 em, h2 em, h3 em {
  color: var(--intel-blue) !important;
  background: linear-gradient(135deg, var(--intel-blue) 0%, var(--ibm-blue) 60%, var(--intel-energy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  font-style: normal;
}

/* ── Header — light by default, transparent-dark over hero ──── */
#header-sticky,
header.header-2 {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--carbon-20);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.04);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

#header-sticky .main-menu nav ul li a,
header .main-menu nav ul li a,
.join-text {
  color: var(--carbon-100) !important;
  font-weight: 500 !important;
  font-family: 'IntelOne Display', sans-serif !important;
  transition: color .35s ease;
}
#header-sticky .main-menu nav ul li a:hover,
header .main-menu nav ul li a:hover {
  color: var(--intel-blue) !important;
}

.sidebar__toggle i,
.header__hamburger i {
  color: var(--carbon-100) !important;
  transition: color .35s ease;
}

/* ── Demo phone frame (reusable on home + experience) ──────── */
.demo-phone {
  position: relative;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 390 / 844;
  background: #000;
  border-radius: 46px;
  padding: 10px;
  box-shadow:
    0 0 0 2px #1a1d28,
    0 0 0 4px #0a0c14,
    0 60px 120px -40px rgba(0, 199, 253, 0.45),
    0 40px 80px -20px rgba(0, 0, 0, 0.7);
  margin: 0 auto;
}
.demo-phone::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #000;
  border-radius: 0 0 18px 18px;
  z-index: 3;
}
.demo-phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--carbon-100);
}
.demo-phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.demo-phone-slides img {
  opacity: 0;
  transition: opacity 1s ease;
}
.demo-phone-slides img.active { opacity: 1; }

/* Home-page mobile-app section: bigger phone, cropped + faded at bottom
   so the visible phone height balances against the text column,
   and the device feels like it continues off the canvas */
.mobile-app .demo-phone {
  width: 480px;
  max-width: 100%;
  margin-bottom: 0;
}
.mobile-app .mobile-thumb {
  max-height: 480px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* ── "Live" pill in nav (Experience entry) ─────────────────── */
.nav-pill {
  font-size: 9px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--intel-blue) !important;
  background: rgba(0, 104, 181, 0.08);
  border: 1px solid rgba(0, 104, 181, 0.22);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 8px;
  font-weight: 600 !important;
  vertical-align: middle;
  display: inline-block;
}
.nav-transparent .nav-pill {
  color: var(--intel-energy) !important;
  background: rgba(0, 199, 253, 0.12);
  border-color: rgba(0, 199, 253, 0.35);
}

/* ── Header transparent-glass state (over the hero video) ───── */
#header-sticky.nav-transparent,
header.header-2.nav-transparent {
  background: rgba(11, 16, 32, 0.28) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

#header-sticky.nav-transparent .main-menu nav ul li a,
header.nav-transparent .main-menu nav ul li a,
.nav-transparent .join-text {
  color: rgba(255, 255, 255, 0.92) !important;
}
#header-sticky.nav-transparent .main-menu nav ul li a:hover,
header.nav-transparent .main-menu nav ul li a:hover {
  color: var(--intel-energy) !important;
}

#header-sticky.nav-transparent .sidebar__toggle i,
#header-sticky.nav-transparent .header__hamburger i {
  color: white !important;
}

/* Swap the blue Intel × IBM logo for the white variant when transparent */
#header-sticky.nav-transparent .header-logo img {
  content: url('../../shared/intel-ibm-logo-white.svg');
}

/* "Talk to IBM Consulting" CTA flips to ghost when over the hero */
#header-sticky.nav-transparent .theme-btn,
header.nav-transparent .theme-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#header-sticky.nav-transparent .theme-btn:hover,
header.nav-transparent .theme-btn:hover {
  background: var(--intel-energy) !important;
  color: var(--carbon-100) !important;
  border-color: var(--intel-energy) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 199, 253, 0.5);
}

/* Submenu/dropdown — keep readable on the transparent state */
#header-sticky.nav-transparent .main-menu nav ul li ul.submenu {
  background: rgba(11, 16, 32, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#header-sticky.nav-transparent .main-menu nav ul li ul.submenu li a {
  color: rgba(255, 255, 255, 0.85) !important;
}
#header-sticky.nav-transparent .main-menu nav ul li ul.submenu li a:hover {
  color: var(--intel-energy) !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.theme-btn,
.theme-btn-2,
a.theme-btn,
button.theme-btn {
  background: var(--intel-blue) !important;
  color: var(--white) !important;
  font-family: 'IntelOne Display', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  border-radius: 4px !important;
  text-transform: uppercase;
  font-size: 13px !important;
  padding: 14px 26px !important;
  border: none !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.theme-btn:hover,
.theme-btn-2:hover,
a.theme-btn:hover {
  background: var(--ibm-blue) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(15, 98, 254, 0.5);
}

.theme-btn::before,
.theme-btn::after { display: none !important; }

/* Ghost button variant — for links beside primary CTA */
.theme-btn.ghost {
  background: transparent !important;
  color: var(--carbon-100) !important;
  border: 1px solid var(--carbon-20) !important;
}
.theme-btn.ghost:hover {
  background: var(--carbon-10) !important;
  color: var(--intel-blue) !important;
  border-color: var(--intel-blue) !important;
}

/* Link arrow buttons */
.link-btn {
  color: var(--intel-blue) !important;
  font-weight: 500 !important;
  font-family: 'IntelOne Display', sans-serif !important;
}
.link-btn:hover { color: var(--ibm-blue) !important; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero-secton,
section.hero-secton.hero-2 {
  background-image: none !important;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(0, 199, 253, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(15, 98, 254, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--white) 0%, var(--carbon-05) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Wafer/grid motif behind hero */
.hero-secton::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 104, 181, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 104, 181, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.hero-content h1 {
  color: var(--carbon-100) !important;
  font-size: clamp(46px, 6vw, 86px) !important;
  line-height: 1.02 !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 24px;
}
.hero-content p {
  color: var(--carbon-70) !important;
  font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.55 !important;
  max-width: 560px;
  font-weight: 300 !important;
  margin-bottom: 36px;
}

/* ── Section padding / surfaces ─────────────────────────────── */
section.section-bg,
.how-to-work-section,
.team-section.bg-cover,
.benefit-section.section-bg,
section.bg-cover {
  background-image: none !important;
  background-color: var(--carbon-10) !important;
}

section.bg-cover[style*="background-image"] {
  background-image: none !important;
}

.about-wrapper-2.bg-cover,
.about-section .about-wrapper-2 {
  background-image: none !important;
  background: linear-gradient(135deg, var(--carbon-10) 0%, #EAF3FB 100%) !important;
  border-radius: 24px;
  padding: 60px !important;
}

/* ── Service / capability cards ─────────────────────────────── */
.service-box-items-2,
.popular-service-items,
.how-too-work-items {
  background: var(--white) !important;
  border: 1px solid var(--carbon-20) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.service-box-items-2:hover,
.popular-service-items:hover,
.how-too-work-items:hover {
  border-color: var(--intel-blue) !important;
  box-shadow: 0 12px 32px -16px rgba(0, 104, 181, 0.30);
  transform: translateY(-2px);
}

/* IBM duotone icons — render at native size, no fill container, no filter */
.service-box-items-2 .icon,
.popular-service-items .icon,
.popular-service-items.style-2 .icon,
.popular-service-items.style-3 .icon,
.how-too-work-items .icon {
  background: none !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
  display: block !important;
  text-align: left !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  position: static !important;
}
/* Kill the template's decorative circle pseudo-element behind icons */
.popular-service-items .icon::before,
.popular-service-items.style-2 .icon::before,
.popular-service-items.style-3 .icon::before,
.service-box-items-2 .icon::before,
.how-too-work-items .icon::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
.service-box-items-2 .icon img,
.popular-service-items .icon img,
.popular-service-items.style-2 .icon img,
.popular-service-items.style-3 .icon img,
.how-too-work-items .icon img {
  filter: none !important;
  width: 64px !important;
  height: 64px !important;
  display: block !important;
  margin: 0 !important;
}

.service-box-items-2 h3,
.popular-service-items h3,
.how-too-work-items h3 {
  color: var(--carbon-100) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 12px;
}
.service-box-items-2 p,
.popular-service-items p,
.how-too-work-items p {
  color: var(--carbon-70) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* ── Engine pinwheel — full-bleed brand pinwheel that blooms petal-by-
   petal as the matching capability card is hovered. Brand-aligned radial
   gradient (Intel Blue Deep → IBM Blue → Intel Energy) shared by all four
   petals; IBM duotone icons bloom in at the centroid of each petal. ── */

/* Wrapper frees the engine from any container padding so it can dominate
   the column visually. Pure relative positioning anchor for the icons. */
.engine-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
}

/* Section clips any oversized watermark bleed and provides positioning context */
.popular-service-section {
  position: relative;
  overflow: hidden;
}

/* Vertically center the engine in its column so the four cards
   (two stacked on each side) frame it evenly */
.popular-service-section .row > [class*="col-"]:has(.engine-wrapper) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left-side capability cards have right-aligned text — push their
   icons to the right too, so icon and text share the same alignment */
.popular-service-items.card-finance .icon img,
.popular-service-items.card-supply .icon img {
  margin-left: auto !important;
  margin-right: 0 !important;
}
.engine-wrapper .engine-svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  z-index: 1;
  /* Ambient halo (moved here from wrapper so siblings at z-index 0 layer behind) */
  filter: drop-shadow(0 24px 60px rgba(15, 98, 254, 0.25));
}

/* Jet-engine watermark — full-width background filling the entire section.
   Lives as a direct child of .popular-service-section so it can span the
   container, with the section's overflow:hidden clipping any vertical bleed.
   Vertical mask feathers both edges so it fades smoothly into the white
   sections above and below. */
.popular-service-section > .engine-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 8%,
    black 22%,
    black 78%,
    rgba(0, 0, 0, 0.5) 92%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 8%,
    black 22%,
    black 78%,
    rgba(0, 0, 0, 0.5) 92%,
    transparent 100%);
}

/* Container content sits above the watermark */
.popular-service-section > .container {
  position: relative;
  z-index: 1;
}

/* Petals: dim, desaturated by default — read as one unified low-key engine */
.engine-svg .petal {
  opacity: 0.40;
  filter: saturate(0.65);
  transition: opacity .35s ease, filter .35s ease;
}

/* Engine snaps to one of 4 steps (0/90/180/270°). Each step shifts which
   petal class lives at which visual position. data-step on the SVG tells us
   the snap state — we then light the petal currently at the icon's position.
   Step 0: top=petal-top    | right=petal-right  | bottom=petal-bottom | left=petal-left
   Step 1: top=petal-left   | right=petal-top    | bottom=petal-right  | left=petal-bottom
   Step 2: top=petal-bottom | right=petal-left   | bottom=petal-top    | left=petal-right
   Step 3: top=petal-right  | right=petal-bottom | bottom=petal-left   | left=petal-top */

/* Finance (top icon) → light the petal currently at top */
.popular-service-section:has(.card-finance:hover) .engine-svg[data-step="0"] .petal-top,
.popular-service-section:has(.card-finance:hover) .engine-svg[data-step="1"] .petal-left,
.popular-service-section:has(.card-finance:hover) .engine-svg[data-step="2"] .petal-bottom,
.popular-service-section:has(.card-finance:hover) .engine-svg[data-step="3"] .petal-right,

/* Talent (right icon) → light the petal currently at right */
.popular-service-section:has(.card-talent:hover) .engine-svg[data-step="0"] .petal-right,
.popular-service-section:has(.card-talent:hover) .engine-svg[data-step="1"] .petal-top,
.popular-service-section:has(.card-talent:hover) .engine-svg[data-step="2"] .petal-left,
.popular-service-section:has(.card-talent:hover) .engine-svg[data-step="3"] .petal-bottom,

/* AI (bottom icon) → light the petal currently at bottom */
.popular-service-section:has(.card-ai:hover) .engine-svg[data-step="0"] .petal-bottom,
.popular-service-section:has(.card-ai:hover) .engine-svg[data-step="1"] .petal-right,
.popular-service-section:has(.card-ai:hover) .engine-svg[data-step="2"] .petal-top,
.popular-service-section:has(.card-ai:hover) .engine-svg[data-step="3"] .petal-left,

/* Supply (left icon) → light the petal currently at left */
.popular-service-section:has(.card-supply:hover) .engine-svg[data-step="0"] .petal-left,
.popular-service-section:has(.card-supply:hover) .engine-svg[data-step="1"] .petal-bottom,
.popular-service-section:has(.card-supply:hover) .engine-svg[data-step="2"] .petal-right,
.popular-service-section:has(.card-supply:hover) .engine-svg[data-step="3"] .petal-top {
  opacity: 1;
  fill: url(#engine-grad-deep);
  filter: saturate(1.2) brightness(0.85);
}

/* When a petal itself is hovered, also light it directly */
.engine-svg .petal:hover {
  opacity: 1;
  fill: url(#engine-grad-deep);
  filter: saturate(1.2) brightness(0.85);
  cursor: default;
}

/* IBM icons positioned at petal tips — hidden by default,
   fade in when the matching card or petal is active */
.engine-wrapper .petal-icon {
  position: absolute;
  width: 16%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
  /* Above the engine SVG (which is z-index: 1) so icons bloom in front */
  z-index: 3;
}
/* Pushed out toward each petal's outer tip — far enough that the icon
   sits comfortably inside the brightest part of its petal, not in the
   dark central convergence zone */
.engine-wrapper .icon-finance { top: 14%; left: 50%; }
.engine-wrapper .icon-talent  { top: 50%; left: 86%; }
.engine-wrapper .icon-ai      { top: 86%; left: 50%; }
.engine-wrapper .icon-supply  { top: 50%; left: 14%; }

/* Card hover → corresponding icon fades in */
.popular-service-section:has(.card-finance:hover) .icon-finance,
.popular-service-section:has(.card-talent:hover)  .icon-talent,
.popular-service-section:has(.card-ai:hover)      .icon-ai,
.popular-service-section:has(.card-supply:hover)  .icon-supply {
  opacity: 1;
}

/* ── About list checkmarks → blue ───────────────────────────── */
.about-list li svg path {
  fill: var(--intel-blue) !important;
}
.about-list li span {
  color: var(--carbon-100) !important;
  font-weight: 500 !important;
}
.about-list li {
  color: var(--carbon-70) !important;
}

/* ── Mobile App section (now a "watsonx + Gaudi 3" feature) ── */
.mobile-app.bg-cover,
section.mobile-app {
  background-image: none !important;
  background: linear-gradient(135deg, var(--intel-blue-deep) 0%, var(--ibm-blue-dark) 100%) !important;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.mobile-app::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0, 199, 253, 0.18) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(15, 98, 254, 0.30) 0, transparent 40%);
  pointer-events: none;
}
.mobile-app .mobile-app-content h6,
.mobile-app .mobile-app-content h6.text-white {
  color: var(--intel-energy) !important;
}
.mobile-app .mobile-app-content h2,
.mobile-app .mobile-app-content h2.text-white {
  color: var(--white) !important;
}
.mobile-app .mobile-app-content h2 span {
  background: linear-gradient(135deg, var(--intel-energy) 0%, var(--white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mobile-app .mobile-app-content p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonial-section .testimonial-wrapper {
  background-image: none !important;
  background: linear-gradient(180deg, var(--carbon-05) 0%, var(--white) 100%) !important;
  border: 1px solid var(--carbon-20);
  border-radius: 24px;
  padding: 80px 60px !important;
}
.testimonail-content p {
  color: var(--carbon-100) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-style: normal !important;
}
.testimonail-content .client-info h3 {
  color: var(--carbon-100) !important;
}
.testimonail-content .client-info span {
  color: var(--intel-blue) !important;
}

/* Floating client images: hide template chrome (we'll repurpose later) */
.client-1, .client-2, .client-3, .client-4, .client-5, .client-6 {
  display: none !important;
}

/* ── Platform / "Compatible with" ───────────────────────────── */
.platform-section.bg-cover,
section.platform-section {
  background-image: none !important;
  background: var(--carbon-10) !important;
}
.platform-icon {
  background: var(--white) !important;
  border: 1px solid var(--carbon-20) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px -8px rgba(22, 22, 22, 0.10);
}
.platform-icon img {
  filter: none;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-section .accordion-item {
  background: var(--white) !important;
  border: 1px solid var(--carbon-20) !important;
  border-radius: 8px !important;
  margin-bottom: 12px;
}
.faq-section .accordion-button {
  color: var(--carbon-100) !important;
  font-weight: 500 !important;
  font-family: 'IntelOne Display', sans-serif !important;
  background: transparent !important;
  font-size: 17px !important;
}
.faq-section .accordion-button:not(.collapsed) {
  color: var(--intel-blue) !important;
  background: var(--carbon-05) !important;
  box-shadow: none !important;
}
.faq-section .accordion-body {
  color: var(--carbon-70) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* ── Brand strip ────────────────────────────────────────────── */
.brand-section {
  background: var(--white) !important;
}
.brand-title-2 {
  color: var(--carbon-70) !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  margin-bottom: 32px;
}
.brand-image img {
  filter: grayscale(100%) brightness(0.55);
  opacity: 0.7;
  transition: filter .25s ease, opacity .25s ease;
  max-height: 40px;
  width: auto;
}
.brand-image img:hover {
  filter: none;
  opacity: 1;
}

/* ── How-to-work (process timeline) — now a dark band on the home page ── */
.how-to-work-section {
  background-image: none !important;
  background: linear-gradient(135deg, var(--intel-blue-deep) 0%, var(--ibm-blue-dark) 100%) !important;
}
/* Headings render via the section-dark utility (white H2, energy-blue eyebrow) */
/* Cards stay white tiles — text inside reverts to dark carbon so it's
   readable against the white card background (overrides section-dark's
   global text-inversion which would otherwise paint card text white-on-white) */
.how-to-work-section.section-dark .how-too-work-items {
  background: var(--white) !important;
}
.how-to-work-section.section-dark .how-too-work-items h3,
.how-to-work-section.section-dark .how-too-work-items .content h3 {
  color: var(--carbon-100) !important;
}
.how-to-work-section.section-dark .how-too-work-items p,
.how-to-work-section.section-dark .how-too-work-items .content p {
  color: var(--carbon-70) !important;
}
.arrow-shape img {
  filter: hue-rotate(200deg) saturate(2);
  opacity: 0.5;
}

/* Tighten the wrapper — drop the wide template gap and hide the arrow
   decorations so the four cards expand to fill the row evenly with a
   modest gap that matches the vertical space below them */
.how-to-work-section .how-to-work-wrapper {
  gap: 24px !important;
  justify-content: stretch !important;
}
.how-to-work-section .how-to-work-wrapper .arrow-shape {
  display: none !important;
}

/* Cards fill the row width evenly + are clickable links */
.how-to-work-wrapper a.how-too-work-items {
  flex: 1 1 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* When ANY card in the section is hovered, light up the bottom CTA too —
   makes the whole section feel like one connected affordance */
.how-to-work-section:has(.how-too-work-items:hover) .theme-btn {
  background: var(--ibm-blue) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(15, 98, 254, 0.5);
}

/* ── News cards ─────────────────────────────────────────────── */
.news-box-items {
  background: var(--white) !important;
  border: 1px solid var(--carbon-20) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.news-box-items:hover {
  border-color: var(--intel-blue) !important;
  box-shadow: 0 16px 40px -16px rgba(0, 104, 181, 0.25);
  transform: translateY(-3px);
}
.news-box-items .post-date {
  background: var(--intel-blue) !important;
  color: var(--white) !important;
  border-radius: 8px;
}
.news-box-items .post-date h4,
.news-box-items .post-date span {
  color: var(--white) !important;
}
.news-box-items .post-cat li {
  color: var(--intel-blue) !important;
  font-weight: 500;
}
.news-box-items h3 a {
  color: var(--carbon-100) !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  line-height: 1.4;
}
.news-box-items h3 a:hover {
  color: var(--intel-blue) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer-section.bg-cover,
footer.footer-section {
  background-image: none !important;
  background: var(--carbon-100) !important;
  color: rgba(255, 255, 255, 0.7);
}
.footer-section h3, .footer-section h4, .footer-section h5,
.footer-section .widget-head h3, .footer-section .widget-head h4 {
  color: var(--white) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em;
}
.footer-section p, .footer-section li, .footer-section a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'IntelOne Display', sans-serif !important;
}
.footer-section a:hover {
  color: var(--intel-energy) !important;
}
.footer-section .social-icon a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-section .social-icon a:hover {
  background: var(--intel-blue) !important;
  border-color: var(--intel-blue) !important;
}

/* ── Preloader (Intel × IBM logo, no letter animation) ──────── */
.preloader { background: var(--white) !important; }
.preloader .loader .bg { background: var(--carbon-10) !important; }

/* Horizontal blinds — stack strips vertically and animate HEIGHT instead
   of width on `.loaded`, so the reveal sweeps top↔bottom rather than left↔right.
   Alternating strips collapse up/down for a venetian-blinds feel. */
.preloader .loader .row {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
  margin: 0 !important;
}
.preloader .loader .loader-section {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 25% !important;
  height: 25% !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.preloader .loader .loader-section .bg {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transition: height 800ms cubic-bezier(0.77, 0, 0.175, 1) !important;
}
/* Alternating anchor — odd strips collapse downward, even strips upward */
.preloader .loader .loader-section:nth-child(odd) .bg  { top: 0 !important; bottom: auto !important; }
.preloader .loader .loader-section:nth-child(even) .bg { top: auto !important; bottom: 0 !important; }

/* When the page is loaded, collapse height to 0 (instead of the template's
   width to 0) so blinds sweep open vertically */
.preloader.loaded .loader-section .bg {
  width: 100% !important;
  height: 0 !important;
}

/* Hide the template's old animation chrome in case any legacy markup lingers */
.preloader .spinner,
.preloader .txt-loading,
.preloader > .animation-preloader > p {
  display: none !important;
}

/* The logo treatment that replaces the letter-by-letter animation */
.preloader .animation-preloader {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.preloader .preloader-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.preloader .preloader-logo img {
  width: clamp(220px, 28vw, 380px);
  height: auto;
  display: block;
  animation: preloader-pulse 1.6s ease-in-out infinite;
}
@keyframes preloader-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* ── Offcanvas (mobile drawer) ──────────────────────────────── */
.offcanvas__info { background: var(--white) !important; color: var(--carbon-100) !important; }
.offcanvas__info p, .offcanvas__contact a, .offcanvas__contact h4 { color: var(--carbon-100) !important; }
.offcanvas__close button { color: var(--carbon-100) !important; }

/* ── Mouse cursor (kept, recolored) ─────────────────────────── */
.mouse-cursor.cursor-outer { border-color: var(--intel-blue) !important; }
.mouse-cursor.cursor-inner { background: var(--intel-blue) !important; }

/* ── Back to top ────────────────────────────────────────────── */
.back-to-top {
  background: var(--intel-blue) !important;
  color: var(--white) !important;
  border: none !important;
}

/* ── Section title image accent (replace with intel mark) ──── */
.section-title.style-2 img {
  display: none !important;
}

/* ============================================================
   .section-dark — universal dark-section inverter
   Apply to any <section class="section-dark"> for white text on
   dark backgrounds. Defeats the global h1-h6 carbon color and
   matches the home page's "open alternative" treatment.

   Also: layers a blurred cosmic-particle texture behind the
   inline gradient, via ::before. Add .sand-2/3/4 for variety.
   ============================================================ */
.section-dark {
  position: relative;
  overflow: hidden;
}

/* Sharp sand at the perimeter — full detail visible at the edges */
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../shared/sand1.jpg') center/cover no-repeat;
  opacity: 0.75;
  mix-blend-mode: screen;
  pointer-events: none;
  /* Mask: transparent in center, opaque at edges */
  mask-image: radial-gradient(ellipse 75% 60% at center, transparent 22%, rgba(0,0,0,0.55) 55%, black 92%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at center, transparent 22%, rgba(0,0,0,0.55) 55%, black 92%);
}

/* Blurred sand smear under the center — atmospheric, doesn't compete with text */
.section-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../shared/sand1.jpg') center/cover no-repeat;
  filter: blur(20px);
  opacity: 0.42;
  mix-blend-mode: screen;
  pointer-events: none;
  /* Mask: opaque in center, transparent at edges (overlap with ::before mask creates the feather) */
  mask-image: radial-gradient(ellipse 78% 62% at center, black 12%, rgba(0,0,0,0.6) 50%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at center, black 12%, rgba(0,0,0,0.6) 50%, transparent 85%);
}

/* Sand variant cycling — applies to both layers */
.section-dark.sand-2::before,
.section-dark.sand-2::after { background-image: url('../../shared/sand2.jpg'); }
.section-dark.sand-3::before,
.section-dark.sand-3::after { background-image: url('../../shared/sand3.jpg'); }
.section-dark.sand-4::before,
.section-dark.sand-4::after { background-image: url('../../shared/sand4.jpg'); }

.section-dark,
.section-dark * {
  color: white;
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark .section-title h2,
.section-dark .section-title h6,
.section-dark blockquote {
  color: white !important;
  font-family: 'IntelOne Display', sans-serif !important;
}
/* Drop white headings to Light weight on dark sections so the gradient
   span/em accents (medium weight) read as the visual focal point */
.section-dark h1,
.section-dark h2,
.section-dark .section-title h2 {
  font-weight: 300 !important;
}
.section-dark p,
.section-dark li,
.section-dark span:not([class*="energy"]):not([class*="accent"]) {
  color: rgba(255, 255, 255, 0.78) !important;
}
.section-dark .eyebrow,
.section-dark .section-eyebrow,
.section-dark h6.eyebrow,
.section-dark .section-title h6 {
  color: var(--intel-energy) !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}
/* Highlight spans inside dark sections — energy-blue accent, medium weight
   so they read clearly bolder than the surrounding light-300 white headline.
   Same weight as <em> accents for consistency across spans and ems. */
.section-dark h1 span,
.section-dark h2 span,
.section-dark h3 span,
.section-dark blockquote span,
.section-dark .accent {
  background: linear-gradient(135deg, var(--intel-energy) 0%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 500 !important;
}
/* Em used as accent inside dark sections — medium weight + energy→white
   gradient (same treatment as <span> accents) so word-level emphasis reads
   as a softer counterpart to the heavier bold stat numerals */
.section-dark em {
  font-style: normal !important;
  font-weight: 500 !important;
  background: linear-gradient(135deg, var(--intel-energy) 0%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Stat numerals + small captions */
.section-dark .stat-num {
  color: var(--intel-energy) !important;
  font-weight: 300 !important;
}
.section-dark .stat-cap {
  color: rgba(255, 255, 255, 0.6) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Strong inside attribution lines */
.section-dark strong {
  color: white !important;
}
/* Cite lines under blockquotes */
.section-dark .cite,
.section-dark .cite * {
  color: rgba(255, 255, 255, 0.6) !important;
}
.section-dark .cite strong {
  color: white !important;
}
/* Ghost button on dark surfaces */
.section-dark .theme-btn.ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}
.section-dark .theme-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: var(--intel-energy) !important;
}
/* Inverted (white-on-dark) primary button uses white background */
.section-dark .theme-btn.invert {
  background: white !important;
  color: var(--carbon-100) !important;
}
.section-dark .theme-btn.invert:hover {
  background: var(--intel-energy) !important;
  color: var(--carbon-100) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 199, 253, 0.5);
}

/* ============================================================
   .hero-video — full-viewport video hero
   Apply to a section as: <section class="hero-video section-dark">
   Add .flipped to mirror the video horizontally for alternation.
   ============================================================ */
.hero-video {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--intel-blue-deep);
  padding-top: 64px;
  margin-top: 0;
}

.hero-video .hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video.flipped .hero-bg-video {
  transform: scaleX(-1);
}

.hero-video .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(11,16,32,0.78) 0%,
      rgba(0,45,156,0.55) 38%,
      rgba(0,45,156,0.28) 70%,
      rgba(0,45,156,0.15) 100%),
    linear-gradient(180deg, transparent 0%, transparent 70%, rgba(11,16,32,0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-video > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Disable section-dark sand pseudos on video heroes — the video IS the texture */
.hero-video.section-dark::before,
.hero-video.section-dark::after {
  display: none !important;
}

/* Hero typography — large, generous, white */
.hero-video h1 {
  font-family: 'IntelOne Display', sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(48px, 6.4vw, 96px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: white !important;
  margin-bottom: 24px;
}
.hero-video h1 span,
.hero-video h2 span {
  background: linear-gradient(135deg, var(--intel-energy) 0%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 400 !important;
}
.hero-video h6 {
  color: var(--intel-energy) !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin-bottom: 24px;
}
.hero-video p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

/* Big right-side hero number — frosted-glass digit clipped to the actual
   glyph shape. Approach: a wrapper holds the visual stack, an <img> of the
   SVG enforces the layout box (so size/aspect are handled natively), and a
   ::before pseudo carries the backdrop-blur masked to the same SVG shape. */
.hero-video .hero-bignum {
  position: relative;
  display: inline-block;
  width: clamp(180px, 20vw, 280px);
  /* NOTE: do NOT put `filter` here — it creates an isolating stacking
     context that prevents the ::before's backdrop-filter from sampling
     the video behind. Halo lift is on the inner SVG instead. */
}
.hero-video .hero-bignum--45 {
  width: clamp(300px, 32vw, 460px);
}

/* The inline SVG is the visible white outline — uses native stroke,
   plus a CSS mask-image gradient that feathers the entire SVG vertically
   (full at top → transparent at bottom) so the hairline dissolves into
   the video as it descends */
.hero-video .hero-bignum > .bignum-svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  /* Vertical fade — top fully visible, bottom dissolves */
  mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
  /* Outer glow + halo lift — both moved here from the wrapper so that
     the wrapper stays free of `filter` (which would block backdrop-filter) */
  filter:
    drop-shadow(0 0 6px rgba(0, 199, 253, 0.30))
    drop-shadow(0 12px 40px rgba(0, 199, 253, 0.30));
}

/* The ::before pseudo carries the actual frosted-glass blur,
   masked to the same digit shape so blur shows only inside the glyph.
   This sits BEHIND the SVG outline, so you see blurred video inside
   the digit silhouette ringed by the white stroke. */
.hero-video .hero-bignum::before {
  content: '';
  position: absolute;
  inset: 0;
  /* No tint — let the blur effect speak for itself */
  background: transparent;
  /* Light blur — subtle frost, video character still readable */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  z-index: 1;
}

/* Per-digit mask source on the ::before */
.hero-video .hero-bignum--3::before { mask-image: url('../../shared/3.svg'); -webkit-mask-image: url('../../shared/3.svg'); }
.hero-video .hero-bignum--4::before { mask-image: url('../../shared/4.svg'); -webkit-mask-image: url('../../shared/4.svg'); }
.hero-video .hero-bignum--6::before { mask-image: url('../../shared/6.svg'); -webkit-mask-image: url('../../shared/6.svg'); }
.hero-video .hero-bignum--9::before { mask-image: url('../../shared/9.svg'); -webkit-mask-image: url('../../shared/9.svg'); }
.hero-video .hero-bignum--45::before { mask-image: url('../../shared/45.svg'); -webkit-mask-image: url('../../shared/45.svg'); }

.hero-video .hero-bigcap {
  font-size: 13px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  margin-top: 16px;
}

/* Hero CTAs — primary stays Intel blue, ghost gets dark-section treatment */
.hero-video .theme-btn {
  background: var(--intel-energy) !important;
  color: var(--carbon-100) !important;
  font-weight: 500 !important;
}
.hero-video .theme-btn:hover {
  background: white !important;
  color: var(--carbon-100) !important;
  box-shadow: 0 12px 32px -12px rgba(0, 199, 253, 0.6);
}
.hero-video .theme-btn.ghost {
  background: rgba(255,255,255,0.08) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}
.hero-video .theme-btn.ghost:hover {
  background: rgba(255,255,255,0.16) !important;
  color: white !important;
  border-color: var(--intel-energy) !important;
}

/* Hero breadcrumb (used on customer-story / milestone) */
.hero-video .hero-breadcrumb {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 36px;
}
.hero-video .hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none;
}
.hero-video .hero-breadcrumb a:hover {
  color: var(--intel-energy) !important;
}
.hero-video .hero-breadcrumb .sep {
  color: rgba(255, 255, 255, 0.30) !important;
  margin: 0 10px;
}
.hero-video .hero-breadcrumb .current {
  color: var(--intel-energy) !important;
}

/* Reduce motion — pause the video for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-video .hero-bg-video {
    animation: none;
  }
}

/* ── Featured intro-video frame (capabilities.html) ─────────── */
.intro-video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* Glassy edge + soft Intel Energy Blue ambient halo */
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 32px 80px -24px rgba(0, 199, 253, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  background: rgba(0, 0, 0, 0.4);
  transition: box-shadow .35s ease, transform .35s ease;
}
.intro-video-frame:hover {
  box-shadow:
    0 40px 100px -20px rgba(0, 199, 253, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  transform: translateY(-2px);
}
.intro-video-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* ── Inner page heroes (carry the same light treatment) ────── */
section[class*="-section"][class*="bg-cover"][style*="background-image"]:not(.mobile-app) {
  background-image: none !important;
  background: linear-gradient(180deg, var(--carbon-05) 0%, var(--white) 100%) !important;
  position: relative;
}

/* Page banners on inner pages */
.news-hero-section, .style-padding {
  background-image: none !important;
  background: linear-gradient(180deg, var(--white) 0%, var(--carbon-10) 100%) !important;
  color: var(--carbon-100);
}
.news-hero-section h1, .style-padding h1, .style-padding h2 {
  color: var(--carbon-100) !important;
}
.news-hero-section p, .style-padding p {
  color: var(--carbon-70) !important;
}

/* CTA discuss section (inner pages) */
.cta-discuss-section.bg-cover {
  background-image: none !important;
  background: linear-gradient(135deg, var(--intel-blue-deep) 0%, var(--ibm-blue-dark) 100%) !important;
  color: var(--white) !important;
}
.cta-discuss-section h2, .cta-discuss-section h3, .cta-discuss-section h2 span {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  background: none !important;
}
.cta-discuss-section p {
  color: rgba(255,255,255,0.78) !important;
}

/* ── Misc cleanups ──────────────────────────────────────────── */
.circle-shape { opacity: 0.5; }
.shape-img, .bar-shape { display: none; }

/* Hide template's hero illustration if we don't have a swap (lets text breathe) */
.hero-image .circle-shape img {
  filter: hue-rotate(200deg) saturate(0.6);
  opacity: 0.4;
}