/* ==========================================================================
   KloudData — Home Page (all sections, top to bottom)
   Single dedicated stylesheet for the entire front page — hero split
   slider (template-parts/home-hero-split.php) plus every section below it
   in page-templates/tmpl-home.php. Loaded only on the front page (see
   kd_enqueue_home_page_assets() in functions.php). Every rule below is
   used ONLY on the home page — nothing here is shared with any other
   template; shared/sitewide classes (.btn, .btn-primary, .hero, .card,
   .trust-strip, etc.) stay in main.css and are reused here, not
   redefined.
   ========================================================================== */

/* ============================================================
   PAGE BACKGROUND — flat page background color. No hardcoded
   background image at the body level any more.

   Heading/body-text colors are also standardized here, scoped to
   this page only: every .kd-home-* rule that reads var(--text-primary)
   / var(--text-secondary) — the sitewide tokens defined in main.css's
   :root — picks up these overridden values instead, so every heading
   on this page renders #0D1B2E and every body/description paragraph
   renders #6B7A99, without touching the sitewide :root tokens (which
   would ripple onto every other template that also uses them).
============================================================ */
body.home {
  background-color: var(--bg-primary);
  --text-primary: #0D1B2E;
  --text-secondary: #6B7A99;
}
section.kd-home-proof {
    display: none;
}
/* ============================================================
   TOP MERGED BACKGROUND WRAPPER — Hero + Trust Strip + Four
   Capabilities share ONE optional ACF background image
   (home_hero_bg_image) instead of each section having its own,
   so the image reads as one continuous backdrop with no seams
   between sections (same technique as .kd-de-hero-merged etc. on
   the service landing pages).
============================================================ */
.kd-home-top-merged-has-bg {
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
/* ============================================================
   HERO — text-only punchline slider (autoplay, dot pagination)
============================================================ */
.kd-home-hero {
  height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  text-align: center;
}
.kd-home-hero > .container { width: 100%; }

.kd-home-hero-track { position: relative; width: 100%; overflow: hidden; }
.kd-home-hero-row {
  display: flex;
  width: 100%;
  /* Slower, smoother glide than a typical UI transition — this is a
     slow-reading punchline slider, not a snappy tab switch. */
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.kd-home-hero-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .kd-home-hero-row { transition: none; }
}

.kd-home-hero-heading {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 auto;
}
.kd-home-hero-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-home-hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.kd-home-hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.kd-home-hero-dot.active {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-teal));
  transform: scale(1.25);
}

/* Below desktop, a near-full-viewport hero just leaves a large empty
   gap before the Trust strip — content is short there, so drop the
   fixed height and size the section to its content with padding
   instead (the height:calc()+flex-centering above is a desktop-only
   treatment). */
@media (max-width: 1024px) {
  .kd-home-hero { height: auto; padding: 120px 0 56px; }
  .kd-home-hero-heading { font-size: 40px; }
  /* Any manual <br> typed into a slide's heading (ACF-editable) is
     desktop layout polish only — hidden here so tablet/mobile wrap
     naturally instead of repeating a break chosen for a wider column. */
  .kd-home-hero-heading br { display: none; }
}

@media (max-width: 640px) {
  .kd-home-hero { padding: 104px 0 40px; }
  .kd-home-hero-dots { margin-top: 24px; }
  .kd-home-hero-heading { font-size: 40px; }
}

/* ============================================================
   HERO SPLIT SLIDER (legacy — unused by the current front-page
   design, left in place in case the split-slider layout returns)
============================================================ */
.kd-home-split-hero {
  position: relative;
  padding: 120px 0 64px;
}

.kd-home-split-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Card frame around the slider, matching the supplied Figma reference
   exactly: white base + two soft radial glows, 2px solid light-gray
   border, 40px rounded corners, dashed vertical divider between the
   content and image columns. Not full-bleed — sits inside the same
   container width as the rest of the site (.container, max-width:1280px).
   Fixed min-height so the card stays the same size slide-to-slide,
   whether a future slide's content is short or long — content is
   vertically centered within it rather than the card shrinking to fit. */
.kd-home-split-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  border: 2px solid #DEDEDE;
  border-radius: 40px;
  /* Order matters: in a multi-layer CSS background, the first-listed layer
     paints on TOP. The opaque white layer must be listed LAST (the base),
     with the two colored radial glows listed first so they actually show
     through instead of being hidden underneath solid white. */
  background:
    radial-gradient(73.22% 71.56% at 94% 8%, #DFF3EF 0%, rgba(223, 243, 239, 0) 55%),
    radial-gradient(33.52% 96.71% at 1.46% 3.29%, #E3E6FB 0%, rgba(227, 230, 251, 0) 60%),
    linear-gradient(0deg, #FFFFFF, #FFFFFF);
  padding: 48px 56px;
  overflow: hidden;
}
.kd-home-split-divider {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 0;
  pointer-events: none;
}

/* Plain left-right slide: .kd-home-split-row holds every slide side by
   side at 100% width each; sliding is done by translating the whole row
   left/right, not by fading or toggling display — the track just clips
   whatever isn't the active slide. */
.kd-home-split-track { position: relative; width: 100%; overflow: hidden; }

.kd-home-split-row {
  display: flex;
  width: 100%;
  transition: transform .35s ease;
}

.kd-home-split-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
/* Grid items default to min-width:auto, which lets long unbroken content
   force the track wider than its column instead of wrapping — this pins
   both columns to their track size so text wraps normally at any width. */
.kd-home-split-content,
.kd-home-split-visual { min-width: 0; }
/* Reserve no space for an image slot when a slide has none — the slide
   drops to a single column and its text is free to use the full width
   instead of staying pinned to the left half with an empty gap on the
   right. */
.kd-home-split-visual--empty { display: none; }
.kd-home-split-slide--no-image {
  grid-template-columns: 1fr;
  text-align: center;
}
.kd-home-split-slide--no-image .kd-home-split-content {
  max-width: 640px;
  margin: 0 auto;
}
.kd-home-split-slide--no-image .kd-home-split-desc { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  .kd-home-split-row { transition: none; }
}

/* ── Left: content ─────────────────────────────────────────────────── */
.kd-home-split-content { max-width: 560px; }

.kd-home-split-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  margin-bottom: 24px;
}

.kd-home-split-heading {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
}
.kd-home-split-heading .accent {
background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-home-split-desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 480px;
}

/* Standalone button styles (not the shared sitewide .btn/.btn-primary) so
   this hero's CTA doesn't pull any rule from main.css — visually identical
   to .btn.btn-primary, just declared independently here. */
.kd-home-split-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-main);
  color: #fff;
  background: #004195;
  cursor: pointer;
  transition: all var(--transition);
}
.kd-home-split-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-blue-glow);
  text-decoration: none;
  color: #fff;
}

/* ── Right: image ─────────────────────────────────────────────────────
   Fixed (not min-) height, so a large photo never grows the card taller
   than its fixed size — height matches the card's content area (420px
   min-height minus its 48px top/bottom padding). object-fit:contain (not
   cover) so the full image always shows uncropped on any device; any
   letterboxing this leaves is filled with a soft neutral tone instead of
   a jarring gap. ── */
.kd-home-split-visual {
  position: relative;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
}
.kd-home-split-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-lg, 20px);
}

/* ── Nav: dots only (hidden entirely when there's only one slide) ──── */
.kd-home-split-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.kd-home-split-dots { display: flex; align-items: center; gap: 10px; }
.kd-home-split-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.kd-home-split-dot.active {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-teal));
  transform: scale(1.25);
}

@media (max-width: 1024px) {
  .kd-home-split-hero { padding: 100px 0 56px; }
  .kd-home-split-card { padding: 40px 40px; min-height: 380px; }
  .kd-home-split-heading { font-size: 36px; }
  .kd-home-split-slide { gap: 36px; }
  .kd-home-split-visual { height: 260px; }
  .kd-home-split-visual img { height: 100%; }
}

@media (max-width: 860px) {
  .kd-home-split-card { min-height: 0; }
  .kd-home-split-slide {
    grid-template-columns: 1fr;
  }
  .kd-home-split-content { max-width: 100%; }
  .kd-home-split-desc { max-width: 100%; }
  /* Content first, image after — natural DOM order (no reordering) on
     mobile/tablet, where the two columns stack into a single column. */
  .kd-home-split-visual { min-height: 220px; }
  .kd-home-split-visual img { min-height: 220px; }
  .kd-home-split-divider { display: none; }
}

@media (max-width: 640px) {
  .kd-home-split-wrap { padding: 0 20px; }
  .kd-home-split-hero { padding: 90px 0 44px; }
  .kd-home-split-card { padding: 28px 22px; border-radius: 24px; }
  .kd-home-split-heading { font-size: 28px; }
  .kd-home-split-desc { font-size: 15.5px; }
  .kd-home-split-badge { font-size: 11px; padding: 8px 16px; }
  .kd-home-split-visual, .kd-home-split-visual img { min-height: 180px; }
  .kd-home-split-nav { margin-top: 28px; }

  /* Mobile only: center the slide content (badge, heading, desc, button) —
     desktop/tablet keep the left-aligned split-hero layout. */
  .kd-home-split-content {
    max-width: 100%;
    text-align: center;
  }
  .kd-home-split-desc { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   TRUST STRIP — SAP/AWS/Google Cloud/Workato/Snowflake badges
   (directly under the hero slider; same as the SAP pages)
============================================================ */
.kd-home-trust { padding: 64px 0 64px; }
/* Just above the 1024px breakpoint, .kd-home-hero switches from
   fixed-padding (auto height) to the viewport-height flow, which
   jumps the gap before this strip almost 2x in one pixel of width
   (120px -> 224px at 768px tall). Scale the boost back for this
   "normal desktop" range specifically so it doesn't suddenly look
   like a big-screen amount of space right after the breakpoint;
   wider screens (which already had comfortable room) keep the fuller
   padding above. */
@media (min-width: 1025px) and (max-width: 1440px) {
  .kd-home-trust { padding-top: 32px; }
}
.kd-home-trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.kd-home-trust-label {
  color: var(--text-muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.kd-home-trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.kd-home-trust-logos .lg { display: inline-flex; align-items: center; }
.kd-home-trust-logos .lg svg,
.kd-home-trust-logos .lg img { width: auto; object-fit: contain; }

@media (max-width: 640px) {
  .kd-home-trust { padding: 4px 0 40px; }
  .kd-home-trust-logos { gap: 24px; }
}

/* ============================================================
   ENTERPRISE PROOF — heading + badge + 4-stat strip
   (directly under the hero)
============================================================ */
.kd-home-proof {
  position: relative;
  padding: 56px 0;
  background-color: #F7F8FA;
  background-image: radial-gradient(rgba(11,18,36,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kd-home-proof-top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 40px;
}

.kd-home-proof-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0D1B2E;
  margin: 0;
}
.kd-home-proof-heading .accent {
  background:linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-proof-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
  max-width: 460px;
}

.kd-home-proof-badge {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.kd-home-proof-badge-img {
  width: 140px;
  height: auto;
  flex-shrink: 0;
  display: block;
}
.kd-home-proof-badge-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: #6B7A99;
  margin: 0;
  display:none;
}

.kd-home-proof-stats {
  position: relative;
  z-index: 1;
  display: flex;
}
.kd-home-proof-stat {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 24px;
}
.kd-home-proof-stat + .kd-home-proof-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}
.kd-home-proof-stat-num {
  display: block;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #004195;
  margin-bottom: 12px;
}
.kd-home-proof-stat-label{
    font-size: 16px;
  display: block;
  max-width: 220px;
  margin: 0 auto;
  line-height: 1.5;
  color: #6B7A99;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .kd-home-proof-top { gap: 40px; }
  .kd-home-proof-heading { font-size: 30px; }
}

@media (max-width: 860px) {
  .kd-home-proof-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .kd-home-proof-desc { max-width: 100%; }
  /* 2×2 stat grid from the same breakpoint the columns stack at, so the
     row never sits cramped as a single squeezed line of 4 on tablet. */
  .kd-home-proof-stats {
    flex-wrap: wrap;
    row-gap: 28px;
    padding-top: 32px;
  }
  .kd-home-proof-stat {
    flex: 0 0 50%;
    padding: 0 12px;
  }
  .kd-home-proof-stat:nth-child(2n+1) { clear: left; }
  .kd-home-proof-stat + .kd-home-proof-stat::before { display: none; }
  .kd-home-proof-stat-num { font-size: 38px; }
  .kd-home-proof-stat-label { font-size: 15px; }
}

@media (max-width: 640px) {
  .kd-home-proof { padding: 40px 0; }
  .kd-home-proof-stat-num { font-size: 30px; margin-bottom: 8px; }
  .kd-home-proof-stat-label { font-size: 14px; }
}

/* ============================================================
   FOUR CAPABILITIES — heading + capability card grid
   (directly under Enterprise Proof)
============================================================ */
.kd-home-caps {
    padding: 0 0 96px;
}

.kd-home-caps-header {
  text-align: center;
  margin: 0 auto 48px;
}
.kd-home-caps-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-caps-heading .accent {
background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-caps-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.kd-home-caps-card {
  position: relative;
  background-color: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kd-home-caps-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(11,18,36,.16);
  border-color: var(--border-active);
}

.kd-home-caps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #F2F5FA;
  border: 1px solid #E2E8F0;
  color: var(--accent-blue);
  margin-bottom: 20px;
}
.kd-home-caps-badge svg,
.kd-home-caps-badge img {
  width: 22px;
  height: 22px;
}

.kd-home-caps-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.kd-home-caps-card-desc{
    font-size: 16px;
  line-height: 1.65;
  color: #6B7A99;
  margin: 0 0 20px;
}

.kd-home-caps-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.kd-home-caps-tag {
  font-size: 12.5px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 20px;
  background: #E6ECF4;
  border: 1px solid #E2E8F0;
  color: #004195;
  font-weight: 500;
}

.kd-home-caps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-blue);
}
.kd-home-caps-link:hover { text-decoration: none; }
.kd-home-caps-link svg {
  width: 15px;
  height: 15px;
  transition: transform .18s ease;
}
.kd-home-caps-link:hover svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .kd-home-caps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .kd-home-caps { padding: 0 0 72px; }
  .kd-home-caps-heading { font-size: 30px; }
  .kd-home-caps-grid { gap: 20px; }
  .kd-home-caps-card { padding: 24px; }
  .kd-home-caps-card-desc { font-size: 14.5px; }
}

@media (max-width: 640px) {
  .kd-home-caps { padding: 0 0 64px; }
  .kd-home-caps-header { margin-bottom: 32px; }
  .kd-home-caps-heading { font-size: 30px; }
  .kd-home-caps-grid { grid-template-columns: 1fr; }
  .kd-home-caps-card { padding: 24px; }
  .kd-home-caps-card-desc { font-size: 14px; }
}

/* ============================================================
   BUSINESS PRIORITY — heading + 3-column priority card grid
   (directly under Four Capabilities)
============================================================ */
.kd-home-priority {
  background: #F8FAFC;
  border-top: 1px solid #DDDDDD;
  padding: 96px 0;
}

.kd-home-priority-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.kd-home-priority-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-priority-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-priority-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kd-home-priority-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
}
.kd-home-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F2F5FA;
  border: 1px solid #E2E8F0;
  color: var(--accent-blue);
  margin-bottom: 16px;
}
.kd-home-priority-badge svg,
.kd-home-priority-badge img {
  width: 18px;
  height: 18px;
}
.kd-home-priority-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.kd-home-priority-card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: #6B7A99;
  margin: 0;
}

@media (max-width: 1024px) {
  .kd-home-priority-heading { font-size: 30px; }
  .kd-home-priority-grid { gap: 20px; }
  .kd-home-priority-card { padding: 24px; }
}

@media (max-width: 768px) {
  .kd-home-priority-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .kd-home-priority { padding: 64px 0; }
  .kd-home-priority-header { margin-bottom: 32px; }
  .kd-home-priority-heading { font-size: 30px; }
  .kd-home-priority-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   CUSTOMER SUCCESS STORIES — heading + testimonial carousel
   (directly under Business Priority)
============================================================ */
.kd-home-testi { padding: 96px 0; }

.kd-home-testi-header {
  text-align: center;
  margin-bottom: 40px;
}
.kd-home-testi-heading {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-testi-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-home-testi-row {
  position: relative;
  display: flex;
  align-items: center;
}

.kd-home-testi-track {
  display: flex;
  gap: 24px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.kd-home-testi-track::-webkit-scrollbar { display: none; }

.kd-home-testi-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  position: relative;
  background: #fff;
  border: 1px solid #E4E8EF;
  border-radius: 16px;
  padding: 28px;
}
.kd-home-testi-text {
  font-size: 14px;
  line-height: 1.7;
  color: #6B7A99;
  margin: 0 0 20px;
}
.kd-home-testi-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kd-home-testi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #004195;
}
.kd-home-testi-icon svg,
.kd-home-testi-icon img {
  width: 18px;
  height: 18px;
}
.kd-home-testi-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.kd-home-testi-role {
  font-size: 12px;
  color: #6B7A99;
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .kd-home-testi-heading { font-size: 30px; }
  .kd-home-testi-card { padding: 24px; }
}

@media (max-width: 768px) {
  .kd-home-testi-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 640px) {
  .kd-home-testi { padding: 64px 0; }
  .kd-home-testi-header { margin-bottom: 28px; }
  .kd-home-testi-heading { font-size: 30px; }
  .kd-home-testi-track { gap: 16px; }
  .kd-home-testi-card { flex-basis: 88%; padding: 22px; }
}

/* ============================================================
   DIGITAL CORE — 3 boxes left / center circle / 3 boxes right
   (directly under Customer Success Stories)
============================================================ */
.kd-home-core { padding: 96px 0; }

.kd-home-core-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}
.kd-home-core-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-core-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-core-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-core-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}

.kd-home-core-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.kd-home-core-box {
  background: #fff;
  border: 1px solid #01BFE74D;
  border-radius: 16px;
  padding: 24px;
}
.kd-home-core-icon {
 display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F2F5FA;
    color: #004195;
    margin-bottom: 14px;
}
.kd-home-core-icon svg,
.kd-home-core-icon img {
  width: 18px;
  height: 18px;
}
.kd-home-core-box-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.kd-home-core-box-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #6B7A99;
  margin: 0;
}

.kd-home-core-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-home-core-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.kd-home-core-ring--outer {
  width: auto;
  height: auto;
  border: 1px solid rgba(1, 191, 231, 0.25);
}
.kd-home-core-ring--inner {
  width: 300px;
  height: auto;
}
.kd-home-core-sphere {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1E6FD9 0%, #0B1733 75%);
  box-shadow: 0 0 40px rgba(1, 191, 231, 0.35);
}
.kd-home-core-sphere--image {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  overflow: hidden;
}
.kd-home-core-sphere--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.kd-home-core-sphere span {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 0 12px;
}

@media (max-width: 1024px) {
  .kd-home-core-heading { font-size: 30px; }
  .kd-home-core-body { gap: 24px; }
  .kd-home-core-ring--outer { width: 220px; height: 220px; }
  .kd-home-core-ring--inner { width: 150px; height: 150px; }
  .kd-home-core-sphere { width: 96px; height: 96px; }
  .kd-home-core-sphere--image { width: 136px; height: 136px; }
  .kd-home-core-sphere span { font-size: 13px; }
}

@media (max-width: 860px) {
  .kd-home-core-body { grid-template-columns: 1fr; }
  .kd-home-core-visual { padding: 24px 0; }
}

@media (max-width: 640px) {
  .kd-home-core { padding: 64px 0; }
  .kd-home-core-header { margin-bottom: 40px; }
  .kd-home-core-heading { font-size: 30px; }
  .kd-home-core-box { padding: 20px; }
  .kd-home-core-ring--outer { width: 180px; height: 180px; }
  .kd-home-core-ring--inner { width: 122px; height: 122px; }
  .kd-home-core-sphere { width: 80px; height: 80px; }
  .kd-home-core-sphere--image { width: 110px; height: 110px; }
  .kd-home-core-sphere span { font-size: 11px; }
}

/* ============================================================
   AI WORKFLOWS — heading + workflow card grid
   (directly under Digital Core)
============================================================ */
.kd-home-aiwf { padding: 96px 0; }

.kd-home-aiwf-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.kd-home-aiwf-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-aiwf-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-aiwf-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-aiwf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.kd-home-aiwf-card {
  background: #fff;
  border: 1px solid #EEF1F6;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(11, 23, 51, 0.06);
}
.kd-home-aiwf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #004195;
  color: #fff;
  margin-bottom: 16px;
}
.kd-home-aiwf-icon svg,
.kd-home-aiwf-icon img {
  width: 20px;
  height: 20px;
}
.kd-home-aiwf-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.kd-home-aiwf-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #6B7A99;
  margin: 0;
}

@media (max-width: 1200px) {
  .kd-home-aiwf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .kd-home-aiwf-heading { font-size: 30px; }
}

@media (max-width: 640px) {
  .kd-home-aiwf { padding: 64px 0; }
  .kd-home-aiwf-header { margin-bottom: 32px; }
  .kd-home-aiwf-heading { font-size: 30px; }
  .kd-home-aiwf-grid { grid-template-columns: 1fr; }
  .kd-home-aiwf-card { padding: 20px; }
}

/* ============================================================
   CTA BAND — dark rounded container (not full-bleed)
   (directly under AI Workflows)
============================================================ */
.kd-home-ctaband { padding: 0 0 96px; }

.kd-home-ctaband-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 64px 48px;
  text-align: center;
  /* Radial glow listed first (top layer) over the opaque navy fill
     listed last (base) — the first background layer paints on top, so
     an opaque layer listed first would hide the glow underneath it. */
  background:
    radial-gradient(65.89% 73.5% at 85% 15%, rgba(1, 174, 240, 0.3) 0%, rgba(1, 174, 240, 0) 60%),
    linear-gradient(0deg, #0B1733, #0B1733);
}

.kd-home-ctaband-heading{
font-size: 48px;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 auto 32px;
}
/* Used only by the final CTA band, which has a description; the
   original mid-page CTA band has none, so the heading's own bottom
   margin is all the spacing it needs before its buttons. */
.kd-home-ctaband-desc{
    font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin: -16px auto 32px;
}

.kd-home-ctaband-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.kd-home-ctaband-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  transition: opacity .2s ease, background .2s ease;
}
.kd-home-ctaband-btn--light {
  background: #fff;
  color: #101C46;
}
.kd-home-ctaband-btn--light:hover { opacity: 0.9; text-decoration: none; color: #101C46; }
.kd-home-ctaband-btn--light .kd-home-ctaband-btn-icon { background: #101C46; color: #fff; }

.kd-home-ctaband-btn--ghost {
  background: #FFFFFF1A;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.kd-home-ctaband-btn--ghost:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; color: #fff; }
.kd-home-ctaband-btn--ghost .kd-home-ctaband-btn-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }

.kd-home-ctaband-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kd-home-ctaband-btn-icon svg,
.kd-home-ctaband-btn-icon img {
  width: 12px;
  height: 12px;
}

@media (max-width: 1024px) {
  .kd-home-ctaband-card { padding: 56px 40px; }
  .kd-home-ctaband-heading { font-size: 30px; }
  .kd-home-ctaband-desc { font-size: 16px; }
}

@media (max-width: 640px) {
  .kd-home-ctaband { padding: 0 0 64px; }
  .kd-home-ctaband-card { padding: 40px 24px; border-radius: 24px; }
  .kd-home-ctaband-heading { font-size: 30px; margin-bottom: 24px; }
  .kd-home-ctaband-desc { font-size: 15px; }
  .kd-home-ctaband-btns { flex-direction: column; align-items: stretch; }
  .kd-home-ctaband-btn { justify-content: center; }
}

/* ============================================================
   PROVEN ACCELERATORS — dark-banner card grid
   (directly under Industry Context)
============================================================ */
.kd-home-accel { padding: 0 0 96px; }

.kd-home-accel-header {
  text-align: center;
  margin: 0 auto 48px;
}
.kd-home-accel-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-accel-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-accel-desc{
    font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-accel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.kd-home-accel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kd-home-accel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(11,18,36,.16);
  border-color: var(--border-active);
}
.kd-home-accel-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: #0B1224;
  background-image: linear-gradient(135deg, #101c46 0%, #0a1230 100%);
}
.kd-home-accel-banner img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity .4s ease;
}
.kd-home-accel-banner svg {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  color: #ffffffb3;
  stroke: #ffffffb3;
  transition: color .4s ease, stroke .4s ease;
}
/* Qubit's logo only — sized smaller than the shared 64px cap. */
.kd-home-accel-banner--qubit img { max-height: 40px; }
/* ── Hover fx: diagonal colour sweep + fine grid, always animating
      underneath but hidden (opacity 0) until the card is hovered — same
      technique as the "Bucket 02 · Tech Tools" cards on indianic.com. ── */
.kd-home-accel-fx {
  position: absolute;
  inset: -25%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  will-change: background-position;
  transition: opacity .7s cubic-bezier(.4,0,.2,1);
  background:
    linear-gradient(115deg, transparent 34%, hsla(205, 95%, 62%, .5) 50%, transparent 66%),
    repeating-linear-gradient(0deg, hsla(205, 85%, 62%, .12) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, hsla(205, 85%, 62%, .12) 0 1px, transparent 1px 13px);
  background-size: 260% 100%, 13px 13px, 13px 13px;
  animation: kd-home-accel-scan 3.4s linear infinite;
}
.kd-home-accel-card:hover .kd-home-accel-fx { opacity: 1; }
.kd-home-accel-card:hover .kd-home-accel-banner svg { color: #fff; stroke: #fff; }
.kd-home-accel-card:hover .kd-home-accel-banner img { opacity: .9; }
@keyframes kd-home-accel-scan {
  0%   { background-position: 210% 0, 0 0, 0 0; }
  100% { background-position: -60% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-home-accel-fx { animation: none; }
}
.kd-home-accel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.kd-home-accel-card-title {
  font-size: 22px;
  color: #0D1B2E;
  font-weight: 700;
  margin: 0 0 8px;
}
.kd-home-accel-card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #6B7A99;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kd-home-accel-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-blue);
  margin-top: auto;
}
.kd-home-accel-read svg { width: 14px; height: 14px; transition: transform .2s ease; }
.kd-home-accel-card:hover .kd-home-accel-read svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .kd-home-accel-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .kd-home-accel-heading { font-size: 30px; }
  .kd-home-accel-desc { font-size: 16px; }
}

@media (max-width: 768px) {
  .kd-home-accel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .kd-home-accel { padding: 0 0 64px; }
  .kd-home-accel-header { margin-bottom: 32px; }
  .kd-home-accel-heading { font-size: 30px; }
  .kd-home-accel-grid { grid-template-columns: 1fr; }
  .kd-home-accel-desc { font-size: 15px; }
}

/* ============================================================
   INDUSTRY CONTEXT — image grid, description reveals on hover
   (directly under Proven Accelerators)
============================================================ */
.kd-home-indctx { padding: 0 0 96px; }

.kd-home-indctx-header {
  text-align: center;
  margin: 0 auto 48px;
}
.kd-home-indctx-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
	padding-top:50px;
}
.kd-home-indctx-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-indctx-desc{
font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-indctx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kd-home-indctx-card {
  position: relative;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #0B1733;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.kd-home-indctx-card:hover,
.kd-home-indctx-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(11,18,36,.35);
}
.kd-home-indctx-overlay {
  position: absolute;
  inset: 0;
  /* Darkens sooner and reaches near-opaque at the bottom (not just the
     last 30%) so the title stays readable over any photo. */
  background: linear-gradient(180deg, rgba(11, 23, 51, 0) 0%, rgba(11, 23, 51, .45) 45%, rgba(11, 23, 51, .96) 100%);
  transition: background .3s ease;
}
.kd-home-indctx-card:hover .kd-home-indctx-overlay,
.kd-home-indctx-card:focus-visible .kd-home-indctx-overlay {
  background: linear-gradient(180deg, rgba(11, 23, 51, .3) 0%, rgba(11, 23, 51, .6) 35%, rgba(11, 23, 51, .97) 100%);
}
.kd-home-indctx-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px 22px;
}
.kd-home-indctx-title {
  display: inline-block;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-blue);
}
/* Description is collapsed by default and only reveals on hover/focus —
   a plain CSS max-height + opacity transition, no JS needed. */
.kd-home-indctx-card-desc{
font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}
.kd-home-indctx-card:hover .kd-home-indctx-card-desc,
.kd-home-indctx-card:focus .kd-home-indctx-card-desc,
.kd-home-indctx-card:focus-visible .kd-home-indctx-card-desc,
.kd-home-indctx-card:focus-within .kd-home-indctx-card-desc {
  max-height: 160px;
  opacity: 1;
  margin-top: 10px;
}

@media (max-width: 1024px) {
  .kd-home-indctx-heading { font-size: 30px; }
  .kd-home-indctx-grid { grid-template-columns: repeat(2, 1fr); }
  .kd-home-indctx-desc { font-size: 14.5px; }
}

@media (max-width: 640px) {
  .kd-home-indctx { padding: 0 0 64px; }
  .kd-home-indctx-header { margin-bottom: 32px; }
  .kd-home-indctx-heading { font-size: 30px; }
  .kd-home-indctx-grid { grid-template-columns: 1fr; }
  .kd-home-indctx-card { min-height: 200px; }
  .kd-home-indctx-desc { font-size: 14px; }
  .kd-home-indctx-card-desc { font-size: 13.5px; }
}

/* ============================================================
   GOVERNANCE — image + accordion (first item open by default)
   (directly under Industry Context)
============================================================ */
.kd-home-gov { padding: 96px 0; }

.kd-home-gov-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.kd-home-gov-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-gov-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-gov-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
  max-width: 480px;
}
.kd-home-gov-visual {
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
}
.kd-home-gov-visual img {
  width: 100%;
  display: block;
}

.kd-home-gov-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.kd-home-gov-item:first-child { padding-top: 0; }
.kd-home-gov-item:last-child { border-bottom: none; }
.kd-home-gov-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}
.kd-home-gov-item > summary::-webkit-details-marker { display: none; }
.kd-home-gov-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-home-gov-icon svg { transition: transform .2s ease; }
.kd-home-gov-item[open] .kd-home-gov-icon { color: var(--accent-blue); }
.kd-home-gov-item[open] .kd-home-gov-icon svg { transform: rotate(180deg); }
.kd-home-gov-a {
  padding-top: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #6B7A99;
}

@media (max-width: 1024px) {
  .kd-home-gov-heading { font-size: 30px; }
  .kd-home-gov-body { gap: 36px; }
}

@media (max-width: 860px) {
  .kd-home-gov-body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kd-home-gov { padding: 64px 0; }
  .kd-home-gov-heading { font-size: 30px; }
  .kd-home-gov-q { font-size: 15.5px; }
}

/* ============================================================
   TECHNOLOGY BOUNDARIES — bordered panel, 2-col grid
   (directly under Governance)
============================================================ */
.kd-home-bound { padding: 96px 0; display: none; }

.kd-home-bound-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.kd-home-bound-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-bound-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-bound-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-bound-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ── Boundaries: each item is its own bordered card with a short inset
   accent pill (3px × 90px) next to the title. ── */
.kd-home-bound-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
}
.kd-home-bound-item-line {
  position: relative;
  padding-left: 20px;
}
.kd-home-bound-item-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 90px;
  border-radius: 4px;
  background: #004195;
}

/* ── Assessments: same bordered-card treatment as the numbered cards on
   the AI Application Engineering page (.kd-aae-bordercard) — full
   border on every side plus a thicker accent-colored left edge running
   the full height of the card, not an inset pill. ── */
.kd-home-assess-item {
  background: #fff;
  border: 1px solid #E4E8EF;
  border-left: 3px solid #004195;
  border-radius: 12px;
  padding: 24px 28px;
}
.kd-home-assess-item-line {
  padding-left: 0;
}
.kd-home-bound-item-title,
.kd-home-assess-item-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.kd-home-bound-item-desc,
.kd-home-assess-item-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #6B7A99;
  margin: 0;
}

@media (max-width: 1024px) {
  .kd-home-bound-heading { font-size: 30px; }
  .kd-home-bound-grid { gap: 20px; }
}

@media (max-width: 768px) {
  .kd-home-bound-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kd-home-bound { padding: 64px 0; }
  .kd-home-bound-heading { font-size: 30px; }
  .kd-home-bound-item { padding: 20px 22px; }
}

/* ============================================================
   ASSESSMENTS — heading + line-item grid
   (directly under Technology Boundaries)
============================================================ */
.kd-home-assess { padding: 96px 0; }

.kd-home-assess-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.kd-home-assess-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-assess-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-assess-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-assess-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

@media (max-width: 1024px) {
  .kd-home-assess-heading { font-size: 30px; }
  .kd-home-assess-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .kd-home-assess { padding: 64px 0; }
  .kd-home-assess-heading { font-size: 30px; }
  .kd-home-assess-grid { grid-template-columns: 1fr; gap: 28px; }
  .kd-home-assess-item { padding: 20px 22px; }
}

/* ============================================================
   INSIGHTS / PERSPECTIVES — 1 image-overlay featured card beside
   3 stacked plain text cards (directly under Assessments)
============================================================ */
.kd-home-insights { padding: 96px 0; }

.kd-home-insights-header {
  text-align: center;
  margin: 0 auto 48px;
}
.kd-home-insights-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-insights-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-insights-desc-lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-insights-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.kd-home-insights-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Featured card — full-bleed image, dark scrim, overlay text ── */
.kd-home-insights-featured {
  position: relative;
  display: block;
  min-height: 460px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #0B1224;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.kd-home-insights-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Darkens sooner and reaches near-opaque at the bottom (not just the
     last 30%) so the title stays readable over any photo. */
  background: linear-gradient(180deg, rgba(10,17,40,0) 0%, rgba(10,17,40,.45) 45%, rgba(8,14,32,.97) 100%);
}
.kd-home-insights-featured-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 36px;
}
.kd-home-insights-featured-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7FCBFF;
  margin-bottom: 14px;
}
.kd-home-insights-featured-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 14px;
  max-width: 560px;
}
.kd-home-insights-featured-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 500px;
}

/* ── List cards — plain white boxes, no image ── */
.kd-home-insights-item {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kd-home-insights-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(10, 17, 40, .18);
  border-color: var(--accent-blue);
}
.kd-home-insights-item-tag {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 10px;
}
.kd-home-insights-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.kd-home-insights-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.kd-home-insights-item-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-blue);
}
.kd-home-insights-item-read svg { width: 14px; height: 14px; transition: transform .2s ease; }
.kd-home-insights-item:hover .kd-home-insights-item-read svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .kd-home-insights-heading { font-size: 30px; }
  .kd-home-insights-grid { grid-template-columns: 1fr; }
  .kd-home-insights-featured { min-height: 320px; }
}

@media (max-width: 640px) {
  .kd-home-insights { padding: 64px 0; }
  .kd-home-insights-header { margin-bottom: 32px; }
  .kd-home-insights-heading { font-size: 30px; }
  .kd-home-insights-featured-body { padding: 24px; }
  .kd-home-insights-featured-title { font-size: 22px; }
}

/* ============================================================
   SUCCESS STORIES — case-study CPT grid, dark image cards
   (directly under Proven Accelerators)
============================================================ */
.kd-home-cs {
    padding: 0;
}
.kd-home-cs-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.kd-home-cs-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-cs-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-home-cs-sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 16px 0 0;
}

.kd-home-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Card styling matched to the Salesforce Revenue Cloud Services page's
   Success Stories cards (salesforce-revenue-cloud.css, .rc2-stories*):
   same navy background, scrim, tag/title/stat sizing, and bordered
   "Read More" pill with a solid white circular arrow — including that
   page's static (no hover lift/zoom) card behavior. */
.kd-home-cs-card {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #1a2a4a;
  text-decoration: none;
}
.kd-home-cs-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.kd-home-cs-card::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Darkens sooner and reaches near-opaque at the bottom so longer,
     multi-line titles (which push higher up the card) still sit over
     enough contrast to stay readable, not just the last 30%. A non-zero
     starting opacity (not fully transparent at the very top) also gives
     the industry badge pinned up there some contrast against bright
     photos, on top of the badge's own darker fill below. */
  background: linear-gradient(180deg, rgba(11,23,51,.25) 0%, rgba(11,23,51,.55) 40%, rgba(11,23,51,.98) 100%);
}
.kd-home-cs-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kd-home-cs-desc { display: none; }
/* Industry sits pinned at the top of the card, independent of the
   bottom-anchored title/category group below. */
.kd-home-cs-industry-badge {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  padding: 5px 12px;
  border-radius: 999px;
  /* Solid-ish dark fill (not just a translucent border) so the badge
     reads clearly even against a bright part of the photo. */
  background: rgba(11,23,51,.55);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Category sits directly above the title, in the normal bottom-anchored flow. */
.kd-home-cs-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: -8px;
}
.kd-home-cs-title {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  color: #fff;
}
.kd-home-cs-stats { display: flex; gap: 16px; }
.kd-home-cs-stat { display: flex; flex-direction: column; gap: 4px; }
.kd-home-cs-stat-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.25); }
.kd-home-cs-stat-value { font-size: 24px; font-weight: 800; color: #fff; }
.kd-home-cs-stat-label { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.7); }
.kd-home-cs-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 10px 10px 10px 18px;
  border: 1.5px solid rgba(255,255,255,.8);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.kd-home-cs-read-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #0B1733;
}
.kd-home-cs-read-icon svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .kd-home-cs { padding: 0; }
  .kd-home-cs-heading { font-size: 30px; }
  .kd-home-cs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kd-home-cs { padding: 0; }
  .kd-home-cs-header { margin-bottom: 32px; }
  .kd-home-cs-heading { font-size: 30px; }
  .kd-home-cs-body { padding: 18px; }
  .kd-home-cs-industry-badge { top: 18px; left: 18px; padding: 4px 10px; }
}

/* ============================================================
   FAQ — single-open accordion (native <details name="...">)
   Same pattern/markup shape as tmpl-sf-revenue-cloud.php's FAQ.
   (directly under Insights)
============================================================ */
.kd-home-faq { padding: 0 0 96px; }

.kd-home-faq-header {
  text-align: center;
  margin-bottom: 40px;
}
.kd-home-faq-heading {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.kd-home-faq-heading .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-home-faq-wrap {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kd-home-faq-item {
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.kd-home-faq-q{
font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-primary);
  background: #fff;
}
.kd-home-faq-q:hover { background: var(--bg-secondary); }
.kd-home-faq-item[open] .kd-home-faq-q {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
}
.kd-home-faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-home-faq-icon svg { transition: transform .2s ease; }
.kd-home-faq-item[open] .kd-home-faq-icon { color: var(--text-primary); }
.kd-home-faq-item[open] .kd-home-faq-icon svg { transform: rotate(180deg); }
.kd-home-faq-a{
    font-size: 16px;
  padding: 0 34px 24px 20px;
  line-height: 1.7;
  color: #6B7A99;
  background: #fff;
  margin-top: 20px;
}
.kd-home-faq-item > summary { list-style: none; }
.kd-home-faq-item > summary::-webkit-details-marker { display: none; }

@media (max-width: 860px) {
  .kd-home-faq-wrap { flex-direction: column; }
}

@media (max-width: 1024px) {
  .kd-home-faq-heading { font-size: 30px; }
  .kd-home-faq-q { font-size: 16.5px; }
  .kd-home-faq-a { font-size: 15px; }
}

@media (max-width: 640px) {
  .kd-home-faq { padding: 0 0 64px; }
  .kd-home-faq-heading { font-size: 30px; }
  .kd-home-faq-q { font-size: 15px; padding: 18px 16px; }
  .kd-home-faq-a { font-size: 14px; padding: 0 24px 20px 16px; }
}

/* ============================================================
   THREE PRACTICE CARDS — stat badges
============================================================ */
.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.stat-badge {
  padding: 4px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.tag-teal { background: var(--accent-teal-glow); color: var(--accent-teal); border: 1px solid rgba(0,168,136,0.2); }

/* ── Generic button row (bottom CTA) ─────────────────────────────────── */
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   TRUST STRIP — scrolling marquee of partner/certification badges
============================================================ */
.trust-strip-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: kd-home-marquee 28s linear infinite;
}
@keyframes kd-home-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   WHY KLOUDDATA — comparison table
============================================================ */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
}
.comparison-table th {
  padding: 16px 24px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.comparison-table th:last-child {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}
.comparison-table td {
  padding: 16px 24px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.comparison-table td:first-child {
  font-weight: 600;
  color: var(--text-primary);
  width: 20%;
}
.comparison-table td:nth-child(2) {
  color: var(--text-muted);
  width: 40%;
}
.comparison-table td:last-child {
  color: var(--text-primary);
  width: 40%;
}
.comparison-table tr:hover td { background: var(--bg-secondary); }

/* ============================================================
   INDUSTRIES SECTION grid gap
   (.industry-pill / .industry-pill-icon themselves are shared with the
   SAP page, so those stay in main.css — only the plural container's
   gap is exclusive to this page.)
============================================================ */
.industry-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 40px;
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.testimonial-quote-mark {
  font-size: 64px;
  line-height: 1;
  color: var(--accent-blue);
  opacity: 0.15;
  font-family: Georgia, serif;
  position: absolute;
  top: 16px;
  left: 24px;
}
.testimonial-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-top: 16px;
  font-style: italic;
}
.testimonial-author {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.testimonial-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   BOTTOM CTA (dark band)
============================================================ */
.cta-section-dark {
  background: linear-gradient(135deg, #0A1128 0%, #0F2050 100%);
  padding: 96px 0;
  text-align: center;
}
body.dark-theme .cta-section-dark {
  background: linear-gradient(135deg, #060A12 0%, #0B1535 100%);
}
.cta-section-dark h2 { color: #EEF2FF; }
.cta-section-dark p { color: #8B9CC8; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE (below-hero sections)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .comparison-table { font-size: 13px; }
  .comparison-table th, .comparison-table td { padding: 12px; }
  .industry-pills { gap: 8px; }
}
@media (max-width: 480px) {
  .industry-pills { gap: 6px; }
}