/* ============================================================
   SAP BUSINESS ONE PAGE — Clean whites + brand abstracts
   ============================================================ */

/* ---------- Section head ---------- */
.sap-section-head {
  max-width: 780px;
  margin-bottom: 56px;
}
.sap-section-head .eyebrow { margin-bottom: 12px; }
.sap-section-head h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--title);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.sap-section-sub {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 680px;
}

/* ---------- Rhythm ---------- */
.sap-banner { min-height: 380px; }
.sap-intro { padding: 90px 0; background: var(--white); }

.sap-services-links,
.sap-modules,
.sap-key-features,
.sap-benefits,
.sap-addons {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  isolation: isolate;
}
.sap-modules,
.sap-benefits { background: var(--white); }
.sap-section-soft { background: #f6fbf8; }

/* ============================================================
   ABSTRACT SHAPES — reusable wrapper
   ============================================================ */
.sap-abstract {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sap-abstract svg { display: block; width: 100%; height: 100%; }

/* ---------- 1. Floating Triangles (top-right) ---------- */
.sap-abstract--triangles {
  top: 40px;
  right: -40px;
  width: 500px;
  height: 380px;
  opacity: .9;
  animation: sapFloat 9s ease-in-out infinite;
}

/* ---------- 2. Diagonal Glass Block (bottom-left) ---------- */
.sap-abstract--diagonal {
  bottom: -60px;
  left: -80px;
  width: 420px;
  height: 340px;
}
.sap-abstract--diagonal .glass-panel {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  transform: skewX(-24deg) rotate(-10deg);
  transition: transform 1.2s ease;
}
.sap-abstract--diagonal .glass-panel--1 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .16) 0%,
    rgba(22, 114, 68, .04) 100%);
  top: 0; left: 0;
}
.sap-abstract--diagonal .glass-panel--2 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1) 0%,
    rgba(22, 114, 68, .02) 100%);
  top: 24px; left: 24px;
  border: 1px solid rgba(16, 185, 129, .18);
}
.sap-abstract--diagonal .glass-panel--3 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .07) 0%,
    transparent 100%);
  top: 48px; left: 48px;
  border: 1px solid rgba(16, 185, 129, .12);
}

/* ---------- 3. Overlapping Circles (top-right, soft) ---------- */
.sap-abstract--circles {
  top: -60px;
  right: -80px;
  width: 380px;
  height: 380px;
}
.sap-abstract--circles .circle {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.sap-abstract--circles .circle--lg {
  width: 320px; height: 320px;
  top: 0; right: 0;
  background: radial-gradient(circle,
    rgba(16, 185, 129, .12) 0%,
    rgba(16, 185, 129, .04) 50%,
    transparent 75%);
}
.sap-abstract--circles .circle--md {
  width: 220px; height: 220px;
  bottom: 0; left: 0;
  background: rgba(16, 185, 129, .07);
  border: 1.5px solid rgba(16, 185, 129, .18);
  animation: sapFloat 11s ease-in-out infinite reverse;
}
.sap-abstract--circles .circle--sm {
  width: 120px; height: 120px;
  bottom: 60px; right: 90px;
  background: rgba(22, 114, 68, .06);
  border: 1.5px solid rgba(22, 114, 68, .18);
  animation: sapFloat 8s ease-in-out infinite;
}

/* ---------- 4. Perspective Dots (bottom-right) ---------- */
.sap-abstract--dots {
  bottom: 0;
  right: 0;
  width: 55%;
  height: 300px;
  background-image: radial-gradient(circle, rgba(16, 185, 129, .55) 2px, transparent 2.5px);
  background-size: 32px 32px;
  background-position: bottom right;
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at bottom right, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 90% 100% at bottom right, #000 0%, transparent 70%);
  opacity: .75;
}

/* ---------- 5. Layered Glass Panels (bottom-right) ---------- */
.sap-abstract--layered {
  bottom: -80px;
  right: -60px;
  width: 480px;
  height: 320px;
}
.sap-abstract--layered .layer {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  transform: skewX(-20deg) rotate(-8deg);
  transition: transform 1s ease;
}
.sap-abstract--layered .layer--1 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .15) 0%,
    rgba(22, 114, 68, .03) 100%);
}
.sap-abstract--layered .layer--2 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .09) 0%,
    transparent 100%);
  inset: 30px 30px 0 0;
  border: 1px solid rgba(16, 185, 129, .2);
}
.sap-abstract--layered .layer--3 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .05) 0%,
    transparent 100%);
  inset: 60px 60px 0 0;
  border: 1px solid rgba(16, 185, 129, .14);
}

/* ---------- Float animation ---------- */
@keyframes sapFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-14px) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .sap-abstract,
  .sap-abstract--circles .circle { animation: none !important; }
}

/* ============================================================
   1. SERVICE LINK CARDS
   ============================================================ */
.sap-services-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.sap-service-link-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .4s cubic-bezier(.2,.7,.3,1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.sap-service-link-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 70px -30px rgba(16, 185, 129, .4);
  border-color: rgba(16, 185, 129, .4);
}
.sap-service-link-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.sap-service-link-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.sap-service-link-card:hover .sap-service-link-image img { transform: scale(1.08); }
.sap-service-link-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 37, 25, .3));
  pointer-events: none;
}
.sap-service-link-badge {
  position: absolute;
  top: 14px; left: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: var(--g2);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.sap-service-link-body {
  padding: 22px 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--white);
}
.sap-service-link-body h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--title);
  margin: 0;
  transition: color .3s ease;
}
.sap-service-link-card:hover .sap-service-link-body h3 { color: var(--g2); }
.sap-service-link-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(16, 185, 129, .1);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .35s ease;
}
.sap-service-link-card:hover .sap-service-link-arrow {
  background: var(--grad);
  color: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px -6px rgba(16, 185, 129, .6);
}

/* ============================================================
   2. MODULES
   ============================================================ */
.sap-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.sap-module-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform .4s cubic-bezier(.2,.7,.3,1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.sap-module-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.sap-module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.sap-module-card:hover::after { transform: scaleX(1); }

.sap-module-body {
  padding: 28px 24px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sap-module-icon-top {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.sap-module-card:hover .sap-module-icon-top {
  background: var(--grad);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 15px 30px -10px rgba(16, 185, 129, .55);
}
.sap-module-icon-top svg { width: 26px; height: 26px; }

.sap-module-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  margin: 0;
  transition: color .3s ease;
}
.sap-module-card:hover .sap-module-title { color: var(--g2); }

.sap-module-desc {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   3. KEY FEATURES — FLIP CARDS
   Front: dark green panel with heading + bullet list
   Back : full clear image (cropped) + icon + heading strip
   Height LOCKED at 400px on every breakpoint & every state.
   Flip uses inline perspective so overflow: hidden works reliably.
   ============================================================ */

.sap-key-features {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.sap-flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   CARD — plain container that clips reliably (NO perspective)
   ------------------------------------------------------------ */
.sap-flip-card {
  position: relative;
  z-index: 1;

  height: 400px;
  min-height: 400px;
  max-height: 400px;

  overflow: hidden;                   /* works because no 3D on parent */
  border-radius: 22px;

  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .22);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}

/* Raise flipped card above ALL siblings in the grid */
.sap-flip-card:hover,
.sap-flip-card:focus-visible,
.sap-flip-card.is-flipped {
  z-index: 50;
}

/* ------------------------------------------------------------
   INNER — perspective applied INLINE so parent clipping works
   ------------------------------------------------------------ */
.sap-flip-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transform-style: preserve-3d;
  transform: perspective(1600px) rotateY(0deg);
  transition: transform 1s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .sap-flip-card:hover .sap-flip-inner {
    transform: perspective(1600px) rotateY(180deg);
  }
}
.sap-flip-card:focus-visible .sap-flip-inner,
.sap-flip-card.is-flipped .sap-flip-inner {
  transform: perspective(1600px) rotateY(180deg);
}

/* ------------------------------------------------------------
   SHARED FACE — locked to card size
   ------------------------------------------------------------ */
.sap-flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform;
}

/* ------------------------------------------------------------
   FRONT — dark green panel, no image
   ------------------------------------------------------------ */
.sap-flip-front {
  background:
    radial-gradient(circle at 85% 15%,
      rgba(16, 185, 129, .28) 0%,
      rgba(16, 185, 129, .08) 35%,
      transparent 65%),
    linear-gradient(145deg,
      #0f4d37 0%,
      #0b3d2c 55%,
      #072a1f 100%);
  border: 1px solid rgba(16, 185, 129, .22);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
}

/* Faint dot grid bottom-right */
.sap-flip-front::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 55%;
  background-image: radial-gradient(circle, rgba(125, 226, 176, .28) 1.5px, transparent 2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at bottom right, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 100% 100% at bottom right, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Green accent strip on top */
.sap-flip-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad);
  z-index: 4;
  border-radius: 22px 22px 0 0;
}

.sap-flip-front-content {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 36px 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* Tag pill */
.sap-flip-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--g3);
  background: rgba(125, 226, 176, .12);
  border: 1px solid rgba(125, 226, 176, .35);
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1;
}

/* Heading */
.sap-flip-heading {
  font-family: var(--font-head);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0;
  position: relative;
  padding-bottom: 14px;
}
.sap-flip-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--g3);
  border-radius: 2px;
}

/* Bullet list */
.sap-flip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sap-flip-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
  line-height: 1.5;
}
.sap-flip-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g3);
  box-shadow: 0 0 0 3px rgba(125, 226, 176, .22);
  transition: transform .35s ease;
}
.sap-flip-card:hover .sap-flip-list li::before { transform: scale(1.2); }

/* ------------------------------------------------------------
   BACK — full clear image + frosted strip
   ------------------------------------------------------------ */
.sap-flip-back {
  transform: rotateY(180deg);
  background: transparent;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
}

.sap-flip-back > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.sap-flip-back-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 45%,
    rgba(11, 37, 25, .35) 75%,
    rgba(11, 37, 25, .6) 100%);
  pointer-events: none;
}

/* Frosted strip — solid tint (no backdrop-filter: breaks in 3D) */
.sap-flip-back-strip {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(11, 37, 25, .82);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .28);
  z-index: 2;
}

.sap-flip-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, .7);
  transition: transform .4s ease;
}
.sap-flip-icon svg { width: 20px; height: 20px; }
.sap-flip-card:hover .sap-flip-icon { transform: rotate(-6deg) scale(1.05); }

.sap-flip-back-title {
  font-family: var(--font-head);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700;
  color: #fff;
  line-height: 1.28;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================================
   RESPONSIVE — height locked at 400px everywhere
   ============================================================ */

/* --- Large tablet / small desktop --- */
@media (max-width: 1100px) {
  .sap-key-features { padding: 70px 0; }
  .sap-flip-grid { gap: 24px; }

  .sap-flip-card {
    height: 400px;
    min-height: 400px;
    max-height: 400px;
  }

  .sap-flip-front-content { padding: 30px 28px 28px; gap: 12px; }
  .sap-flip-heading { font-size: 20px; padding-bottom: 12px; }
  .sap-flip-list { gap: 8px; }
  .sap-flip-list li { font-size: 13.5px; }

  .sap-flip-back-strip {
    left: 18px; right: 18px; bottom: 18px;
    padding: 13px 15px; gap: 13px;
  }
  .sap-flip-icon { width: 40px; height: 40px; border-radius: 10px; }
  .sap-flip-icon svg { width: 19px; height: 19px; }
  .sap-flip-back-title { font-size: 15.5px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .sap-flip-grid { gap: 22px; }

  .sap-flip-card {
    height: 400px;
    min-height: 400px;
    max-height: 400px;
  }

  .sap-flip-front-content { padding: 28px 26px 26px; }
  .sap-flip-heading { font-size: 19px; }
  .sap-flip-list li { font-size: 13.5px; }
}

/* --- Mobile: single column, still 400px --- */
@media (max-width: 640px) {
  .sap-key-features { padding: 60px 0; }
  .sap-flip-grid { grid-template-columns: 1fr; gap: 20px; }

  .sap-flip-card {
    height: 350px;
    min-height: 350px;
    max-height: 350px;
    border-radius: 18px;
  }

  .sap-flip-face,
  .sap-flip-front,
  .sap-flip-back {
    border-radius: 18px;
  }

  .sap-flip-front::before {
    border-radius: 18px 18px 0 0;
    height: 4px;
  }

  .sap-flip-front-content { padding: 28px 22px 24px; gap: 11px; }

  .sap-flip-tag {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 2px;
  }

  .sap-flip-heading { font-size: 18px; padding-bottom: 12px; }
  .sap-flip-heading::after { width: 36px; height: 3px; }

  .sap-flip-list { gap: 7px; }
  .sap-flip-list li {
    font-size: 14px;
    padding-left: 20px;
    line-height: 1.45;
  }
  .sap-flip-list li::before {
    top: 6px;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2.5px rgba(125, 226, 176, .22);
  }

  .sap-flip-back-strip {
    left: 14px; right: 14px; bottom: 14px;
    padding: 12px 14px; gap: 12px;
    border-radius: 12px;
  }
  .sap-flip-icon { width: 38px; height: 38px; border-radius: 10px; }
  .sap-flip-icon svg { width: 18px; height: 18px; }
  .sap-flip-back-title { font-size: 14.5px; }
}

/* --- Very small phones --- */
@media (max-width: 380px) {
  .sap-flip-card {
    height: 400px;
    min-height: 400px;
    max-height: 400px;
  }
  .sap-flip-front-content { padding: 24px 18px 20px; gap: 10px; }
  .sap-flip-heading { font-size: 17px; }
  .sap-flip-list li { font-size: 12.5px; }
  .sap-flip-back-title { font-size: 14px; }
}

/* --- Reduced motion accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .sap-flip-inner { transition: none; }
  .sap-flip-icon { transition: none; }
  .sap-flip-list li::before { transition: none; }
}

/* ============================================================
   4. BENEFITS
   ============================================================ */
.sap-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.sap-benefit-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.sap-benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.sap-benefit-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.sap-benefit-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.sap-benefit-card:hover .sap-benefit-image img { transform: scale(1.08); }

.sap-benefit-body {
  padding: 22px 22px 26px;
  background: linear-gradient(135deg, var(--g2) 0%, var(--deep) 100%);
  color: #fff;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.sap-benefit-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.sap-benefit-card:hover .sap-benefit-body::before { transform: scaleX(1); }
.sap-benefit-body h4 {
  font-family: var(--font-head);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px 0;
}
.sap-benefit-body ul { list-style: none; padding: 0; margin: 0; }
.sap-benefit-body ul li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
  line-height: 1.6;
}
.sap-benefit-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--g3);
}

/* ============================================================
   5. ADD-ONS
   ============================================================ */
.sap-addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.sap-addon-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform .4s cubic-bezier(.2,.7,.3,1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.sap-addon-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.sap-addon-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.sap-addon-card:hover::after { transform: scaleX(1); }

.sap-addon-body {
  padding: 28px 24px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sap-addon-icon-top {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.sap-addon-card:hover .sap-addon-icon-top {
  background: var(--grad);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 15px 30px -10px rgba(16, 185, 129, .55);
}
.sap-addon-icon-top svg { width: 26px; height: 26px; }

.sap-addon-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  margin: 0;
  transition: color .3s ease;
}
.sap-addon-card:hover .sap-addon-title { color: var(--g2); }

.sap-addon-desc {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}
.sap-addons-cta { text-align: center; margin-top: 54px; }

/* ============================================================
   6. CTA
   ============================================================ */
.glass-card.sap-cta-glass-card {
  background:
    linear-gradient(135deg, rgba(4, 40, 23, 0.88) 0%, rgba(11, 37, 25, 0.78) 100%),
    url('../images/sap/Talk-About-your-Business-Growth-Journey.jpg') center/cover no-repeat;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sap-services-links-grid,
  .sap-modules-grid,
  .sap-benefits-grid,
  .sap-addons-grid { grid-template-columns: repeat(2, 1fr); }

  .sap-abstract--triangles { width: 400px; height: 300px; top: 20px; right: -80px; }
  .sap-abstract--circles   { width: 300px; height: 300px; }
  .sap-abstract--circles .circle--lg { width: 240px; height: 240px; }
  .sap-abstract--circles .circle--md { width: 170px; height: 170px; }
}

@media (max-width: 992px) {
  .sap-services-links,
  .sap-modules,
  .sap-key-features,
  .sap-benefits,
  .sap-addons { padding: 70px 0; }

  .sap-feature-row,
  .sap-feature-row.reverse { grid-template-columns: 1fr; }
  .sap-feature-row.reverse .sap-feature-image,
  .sap-feature-row.reverse .sap-feature-content { order: 0; }
  .sap-feature-image { min-height: 260px; }
  .sap-feature-content { padding: 44px 36px; }

  /* Fade abstracts more on smaller screens so they stay subtle */
  .sap-abstract { opacity: .55; }
  .sap-abstract--dots { opacity: .5; width: 70%; height: 240px; }
}

@media (max-width: 640px) {
  .sap-services-links,
  .sap-modules,
  .sap-key-features,
  .sap-benefits,
  .sap-addons { padding: 60px 0; }

  .sap-services-links-grid,
  .sap-modules-grid,
  .sap-benefits-grid,
  .sap-addons-grid { grid-template-columns: 1fr; gap: 18px; }

  .sap-section-head { margin-bottom: 40px; }
  .sap-section-head h2 { font-size: 22px; }
  .sap-section-sub { font-size: 15px; }

  .sap-feature-content { padding: 34px 24px; }
  .sap-feature-content h3 { font-size: 19px; margin-bottom: 16px; }
  .sap-feature-list li { font-size: 14px; }
  .sap-feature-image { min-height: 200px; }

  .sap-module-body,
  .sap-addon-body { padding: 24px 20px 26px; gap: 14px; }
  .sap-module-title,
  .sap-addon-title { font-size: 16px; }
  .sap-module-desc,
  .sap-addon-desc { font-size: 14px; }

  .sap-service-link-body { padding: 18px 18px 22px; }
  .sap-service-link-body h3 { font-size: 15px; }
  .sap-service-link-arrow { width: 32px; height: 32px; }

  /* Hide heavy abstracts on mobile — keep only the dots */
  .sap-abstract--triangles,
  .sap-abstract--circles,
  .sap-abstract--diagonal,
  .sap-abstract--layered { display: none; }
  .sap-abstract--dots { width: 100%; height: 180px; opacity: .5; }
}

/* ============================================================
   AI-POWERED SAP INNOVATIONS PAGE
   ============================================================ */

/* ---------- Section rhythm ---------- */
.sap-section-soft { background: #f6fbf8; }
.sap-modules,
.sap-key-features,
.sap-benefits,
.sap-addons { padding: 96px 0; position: relative; overflow: hidden; }
.sap-section-head { max-width: 820px; margin-bottom: 56px; }
.sap-section-head .eyebrow { margin-bottom: 12px; }
.sap-section-head h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--title);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.sap-section-sub {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
}

/* ---------- Split head (heading + image side by side) ---------- */
.sap-split-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
}
.sap-split-head-text { max-width: 560px; }
.sap-split-head-text .eyebrow { margin-bottom: 12px; }
.sap-split-head-text h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--title);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.sap-split-head-text p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}
.sap-split-head-image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .22);
  aspect-ratio: 16 / 11;
}
.sap-split-head-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.sap-split-head-image:hover img { transform: scale(1.04); }

/* ---------- InsightOne CTA ---------- */
.sap-insight-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}

/* ---------- YouTube video embed ---------- */
.sap-video-wrap { position: relative; }
.sap-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
  background: #000;
}
.sap-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- 3-col module grid (reuse .sap-modules-grid) ---------- */
.sap-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

/* ============================================================
   WHAT IT DOES — beautiful icon cards
   ============================================================ */
.ai-does-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  position: relative;
  z-index: 2;
  margin-top: 56px;
}
.ai-does-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.ai-does-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 100% 0%,
    rgba(16, 185, 129, .07) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.ai-does-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .4);
  border-color: rgba(16, 185, 129, .3);
}
.ai-does-card:hover::before { opacity: 1; }
.ai-does-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.ai-does-card:hover::after { transform: scaleX(1); }

.ai-does-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
  flex-shrink: 0;
}
.ai-does-icon svg { width: 26px; height: 26px; }
.ai-does-card:hover .ai-does-icon {
  background: var(--grad);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 15px 30px -10px rgba(16, 185, 129, .55);
}
.ai-does-card h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
  transition: color .3s ease;
}
.ai-does-card:hover h4 { color: var(--g2); }
.ai-does-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   CORE CAPABILITIES (InsightOne) — Tagged Cards
   ============================================================ */
.ai-tag-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  position: relative;
  z-index: 2;
}
.ai-tag-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.ai-tag-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .38);
  border-color: rgba(16, 185, 129, .3);
}

/* Faded big number top-right */
.ai-tag-number {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--font-head);
  font-size: 74px;
  font-weight: 800;
  line-height: 1;
  color: rgba(16, 185, 129, .09);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  transition: color .35s ease;
}
.ai-tag-card:hover .ai-tag-number { color: rgba(16, 185, 129, .16); }

.ai-tag-pill {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--g2);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
}
.ai-tag-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.ai-tag-icon svg { width: 28px; height: 28px; }
.ai-tag-card:hover .ai-tag-icon {
  background: var(--grad);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 15px 30px -10px rgba(16, 185, 129, .55);
}
.ai-tag-card h4 {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.32;
  margin: 0;
  letter-spacing: -0.01em;
  transition: color .3s ease;
}
.ai-tag-card:hover h4 { color: var(--g2); }
.ai-tag-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   CORE CAPABILITIES (SAP Joule) — Flip step cards
   ============================================================ */
.ai-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  position: relative;
  z-index: 2;
}

/* Reuse .sap-flip-card framework but scale down to 380px */
.ai-steps-grid .sap-flip-card {
  height: 380px;
  min-height: 380px;
  max-height: 380px;
}

/* Step number (floating faded) */
.ai-step-number {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-head);
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  color: rgba(125, 226, 176, .18);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.ai-step-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(125, 226, 176, .16);
  border: 1px solid rgba(125, 226, 176, .35);
  color: var(--g3);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  transition: all .4s ease;
}
.ai-step-icon svg { width: 28px; height: 28px; }
.sap-flip-card:hover .ai-step-icon {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 15px 30px -10px rgba(16, 185, 129, .55);
}
.ai-step-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   FAQ — mascot left, accordion right
   ============================================================ */
.sap-faq-section {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.sap-faq-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.sap-faq-mascot {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.sap-faq-mascot img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 25px 40px rgba(16, 185, 129, .18));
  animation: sapFloat 6s ease-in-out infinite;
}

.sap-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sap-faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: all .3s ease;
}
.sap-faq-item.active {
  border-color: var(--g1);
  box-shadow: 0 10px 30px -12px rgba(16, 185, 129, .3);
}
.sap-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  background: none;
  border: none;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
  gap: 16px;
}
.sap-faq-question:hover { color: var(--g2); }
.sap-faq-item.active .sap-faq-question { color: var(--g1); }
.sap-faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  color: var(--text-soft);
}
.sap-faq-item.active .sap-faq-icon { transform: rotate(90deg); color: var(--g1); }
.sap-faq-icon svg { width: 16px; height: 16px; }
.sap-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}
.sap-faq-answer p {
  padding: 0 26px 22px 26px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet / small desktop --- */
@media (max-width: 1100px) {
  .sap-modules-grid { grid-template-columns: repeat(3, 1fr); }
  .sap-split-head { gap: 40px; margin-bottom: 44px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .sap-modules,
  .sap-key-features,
  .sap-benefits,
  .sap-addons { padding: 70px 0; }

  .sap-split-head {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
  .sap-split-head-image { max-width: 620px; }

  .ai-does-grid,
  .ai-tag-cards,
  .ai-steps-grid { grid-template-columns: repeat(2, 1fr); }

  .sap-modules-grid { grid-template-columns: repeat(2, 1fr); }

  .sap-faq-layout {
    grid-template-columns: 260px 1fr;
    gap: 40px;
  }
  .sap-faq-mascot { top: 80px; }
  .sap-faq-mascot img { max-width: 220px; }
}

/* --- Mobile: single column --- */
@media (max-width: 640px) {
  .sap-modules,
  .sap-key-features,
  .sap-benefits,
  .sap-addons,
  .sap-faq-section { padding: 60px 0; }

  .sap-modules-grid,
  .ai-does-grid,
  .ai-tag-cards,
  .ai-steps-grid { grid-template-columns: 1fr; gap: 18px; }

  .sap-split-head { gap: 26px; margin-bottom: 34px; }
  .sap-split-head h2 { font-size: 22px; }
  .sap-split-head-text p { font-size: 15px; }
  .sap-split-head-image { aspect-ratio: 16 / 10; border-radius: 16px; }

  .ai-does-card { padding: 26px 22px 26px; gap: 14px; }
  .ai-does-card h4 { font-size: 16.5px; }
  .ai-does-card p { font-size: 14px; }
  .ai-does-icon { width: 50px; height: 50px; border-radius: 14px; }
  .ai-does-icon svg { width: 22px; height: 22px; }

  .ai-tag-card { padding: 32px 24px 28px; border-radius: 18px; }
  .ai-tag-number { font-size: 58px; top: 10px; right: 16px; }
  .ai-tag-icon { width: 52px; height: 52px; border-radius: 14px; }
  .ai-tag-icon svg { width: 24px; height: 24px; }
  .ai-tag-card h4 { font-size: 17px; }
  .ai-tag-card p { font-size: 14px; }

  .ai-steps-grid .sap-flip-card {
    height: 380px;
    min-height: 380px;
    max-height: 380px;
  }
  .ai-step-number { font-size: 54px; top: 18px; right: 20px; }
  .ai-step-icon { width: 52px; height: 52px; border-radius: 14px; }
  .ai-step-icon svg { width: 24px; height: 24px; }
  .ai-step-desc { font-size: 14px; }

  .sap-insight-cta { flex-direction: column; align-items: stretch; }
  .sap-insight-cta .advait-btn { width: 100%; justify-content: center; }

  .sap-video-embed { border-radius: 16px; }

  /* FAQ: mascot above accordion */
  .sap-faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .sap-faq-mascot { position: relative; top: 0; }
  .sap-faq-mascot img { max-width: 200px; margin: 0 auto; }
  .sap-faq-question { font-size: 15px; padding: 18px 20px; }
  .sap-faq-answer p { padding: 0 20px 18px 20px; font-size: 14px; }
}

/* --- Very small phones --- */
@media (max-width: 380px) {
  .ai-does-card { padding: 22px 18px; }
  .ai-tag-card { padding: 28px 20px; }
  .ai-tag-number { font-size: 48px; }
  .ai-step-number { font-size: 46px; }
  .sap-faq-question { font-size: 14px; padding: 16px 16px; }
  .sap-faq-answer p { padding: 0 16px 16px 16px; }
}
/* ============================================================
   INLINE YOUTUBE EMBED (click-to-play, plays in-page)
   ============================================================ */
/* ============================================================
   YOUTUBE VIDEO — responsive 16:9, fills its container
   ============================================================ */

/* Outer wrapper — makes a perfect 16:9 box */
.sap-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
}

/* Fallback for very old browsers (rare) */
@supports not (aspect-ratio: 16 / 9) {
  .sap-video-embed::before {
    content: '';
    display: block;
    padding-top: 56.25%;   /* = 9/16 */
  }
}

/* The iframe — stretched to fill the wrapper */
.sap-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile */
@media (max-width: 640px) {
  .sap-video-embed { border-radius: 16px; }
}

/* ============================================================
   OFFSHORE DEVELOPMENT SERVICES — Page Specific
   ============================================================ */

/* Reuse shared rhythm from AI/SAP B1 pages */
.sap-modules,
.sap-key-features,
.sap-benefits,
.sap-addons { padding: 96px 0; position: relative; overflow: hidden; }
.sap-section-soft { background: #f6fbf8; }

/* ---------- CTA row under any section ---------- */
.odc-cta-row {
  margin-top: 54px;
  text-align: center;
}

/* ---------- "How We Engage" sub-heading inside split ---------- */
.sap-subhead {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--title);
  margin: 36px 0 20px;
  letter-spacing: -0.01em;
}

/* ---------- Engage model cards (4 items) ---------- */
.odc-engage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.odc-engage-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: all .35s cubic-bezier(.2, .7, .3, 1);
  position: relative;
  overflow: hidden;
}
.odc-engage-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%,
    rgba(16, 185, 129, .08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.odc-engage-card:hover {
  transform: translateY(-5px);
  border-color: rgba(16, 185, 129, .35);
  box-shadow: 0 20px 40px -20px rgba(16, 185, 129, .35);
}
.odc-engage-card:hover::before { opacity: 1; }
.odc-engage-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .35s ease;
}
.odc-engage-icon svg { width: 20px; height: 20px; }
.odc-engage-card:hover .odc-engage-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
}
.odc-engage-card span {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  transition: color .3s ease;
}
.odc-engage-card:hover span { color: var(--g2); }

/* ---------- Tech grid – keep 3-col look on desktop ---------- */
.odc-tech-grid { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   DEDICATED STAFF AUGMENTATION — Tech stack columns
   ============================================================ */
.odc-tech-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.odc-tech-col {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 30px 30px;
  transition: all .4s cubic-bezier(.2, .7, .3, 1);
  overflow: hidden;
}
.odc-tech-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.odc-tech-col:hover {
  transform: translateY(-6px);
  border-color: rgba(16, 185, 129, .3);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
}
.odc-tech-col:hover::before { transform: scaleX(1); }

.odc-tech-num {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--g2);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  line-height: 1;
}
.odc-tech-col h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 20px 0;
  position: relative;
  padding-bottom: 14px;
}
.odc-tech-col h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--g1);
  border-radius: 2px;
}
.odc-tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.odc-tech-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
}
.odc-tech-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.odc-tech-list li strong {
  color: var(--title);
  font-weight: 700;
}

/* ============================================================
   IMAGE PLACEHOLDER (for custom timeline/grid images)
   ============================================================ */
.sap-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 40px 24px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(16, 185, 129, .06) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(22, 114, 68, .06) 0%, transparent 60%),
    linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px dashed rgba(16, 185, 129, .35);
  color: var(--g2);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  transition: all .4s ease;
  position: relative;
  overflow: hidden;
}
.sap-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(16, 185, 129, .18) 1.5px, transparent 2px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at center, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 90% 90% at center, #000 10%, transparent 70%);
  pointer-events: none;
  opacity: .5;
}
.sap-img-placeholder svg {
  color: var(--g1);
  position: relative;
  z-index: 1;
  animation: sapFloat 6s ease-in-out infinite;
}
.sap-img-placeholder span {
  position: relative;
  z-index: 1;
}
.sap-img-placeholder--lg { min-height: 420px; }
.sap-img-placeholder:hover {
  border-color: rgba(16, 185, 129, .6);
  transform: translateY(-4px);
  box-shadow: 0 25px 55px -25px rgba(16, 185, 129, .35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet / small desktop --- */
@media (max-width: 1100px) {
  .odc-engage-grid { grid-template-columns: repeat(2, 1fr); }
  .odc-tech-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .sap-modules,
  .sap-key-features,
  .sap-benefits,
  .sap-addons { padding: 70px 0; }

  .odc-tech-stack { grid-template-columns: 1fr; gap: 22px; }
  .odc-tech-col { padding: 26px 24px 24px; }
  .odc-tech-col h3 { font-size: 18px; }

  .sap-img-placeholder { min-height: 280px; }
  .sap-img-placeholder--lg { min-height: 340px; }
}

/* --- Mobile: single column --- */
@media (max-width: 640px) {
  .sap-modules,
  .sap-key-features,
  .sap-benefits,
  .sap-addons { padding: 60px 0; }

  .odc-engage-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .odc-engage-card { padding: 14px 12px; gap: 10px; }
  .odc-engage-icon { width: 36px; height: 36px; border-radius: 10px; }
  .odc-engage-icon svg { width: 18px; height: 18px; }
  .odc-engage-card span { font-size: 13px; }

  .odc-tech-grid { grid-template-columns: 1fr; gap: 18px; }

  .odc-tech-col { padding: 22px 20px 22px; border-radius: 16px; }
  .odc-tech-col h3 { font-size: 17px; padding-bottom: 12px; }
  .odc-tech-list li { font-size: 13.5px; padding-left: 18px; }
  .odc-tech-num { font-size: 11px; padding: 4px 10px; }

  .sap-subhead { font-size: 17px; margin: 28px 0 16px; }

  .odc-cta-row { margin-top: 40px; }

  .sap-img-placeholder {
    min-height: 220px;
    padding: 30px 20px;
    font-size: 13.5px;
    border-radius: 16px;
  }
  .sap-img-placeholder--lg { min-height: 260px; }
  .sap-img-placeholder svg { width: 36px; height: 36px; }
}

/* --- Very small phones --- */
@media (max-width: 380px) {
  .odc-engage-grid { grid-template-columns: 1fr; }
  .odc-tech-list li { font-size: 13px; }
  .sap-img-placeholder { min-height: 200px; font-size: 12.5px; }
}

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */

/* ---------- Banner ---------- */
.cs-banner { min-height: 360px; }

/* ---------- Intro ---------- */
.cs-intro {
  padding: 90px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.cs-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}
.cs-intro-text h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.cs-intro-desc {
  font-size: 16px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 28px;
}

/* Facts grid */
.cs-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
  margin-bottom: 32px;
}
.cs-fact {
  border-left: 3px solid var(--g1);
  padding-left: 14px;
  transition: border-color .3s ease, padding-left .3s ease;
}
.cs-fact:hover {
  border-color: var(--g2);
  padding-left: 18px;
}
.cs-fact span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.cs-fact strong {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
}

/* Intro image */
.cs-intro-image {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
  aspect-ratio: 7 / 6;
  background: linear-gradient(135deg, var(--g2), var(--g1));
}
.cs-intro-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1s cubic-bezier(.2, .7, .3, 1);
}
.cs-intro-image:hover img { transform: scale(1.05); }

/* ---------- Comprehensive Solution (8 cards) ---------- */
.cs-solution {
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.cs-solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.cs-solution-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.cs-solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.cs-solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.cs-solution-card:hover::before { transform: scaleX(1); }
.cs-solution-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  margin: 0 0 16px 0;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(16, 185, 129, .18);
  letter-spacing: -0.01em;
  transition: color .3s ease;
}
.cs-solution-card:hover h4 { color: var(--g2); }

/* Tick list */
.cs-tick {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cs-tick li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}
.cs-tick li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--g1);
  border-bottom: 2px solid var(--g1);
  transform: rotate(-45deg);
}

/* ---------- Add-ons (flip cards) ---------- */
.cs-addons {
  padding: 90px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.cs-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}

/* Compact flip card variant */
.cs-flip-card {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

/* Front — number + heading, dark green panel */
.cs-flip-card .sap-flip-front {
  background:
    radial-gradient(circle at 90% 10%,
      rgba(16, 185, 129, .25) 0%,
      rgba(16, 185, 129, .06) 35%,
      transparent 65%),
    linear-gradient(145deg,
      #0f4d37 0%,
      #0b3d2c 55%,
      #072a1f 100%) !important;
  border: 1px solid rgba(16, 185, 129, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cs-flip-card .sap-flip-front::after { display: none; }
.cs-flip-card .sap-flip-front::before {
  height: 4px;
  border-radius: 22px 22px 0 0;
}
.cs-flip-front-content {
  padding: 26px 22px;
  text-align: left;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.cs-flip-num {
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 800;
  color: var(--g3);
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: .85;
}
.cs-flip-front-content h4 {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Back — process impact, deep green */
.cs-flip-card .sap-flip-back {
  background: linear-gradient(145deg, #167244 0%, #0b2519 100%) !important;
}
.cs-flip-back-content {
  position: absolute;
  inset: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}
.cs-flip-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
  background: rgba(125, 226, 176, .15);
  border: 1px solid rgba(125, 226, 176, .35);
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}
.cs-flip-back-content p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .92);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Problem Solving (6 cards) ---------- */
.cs-problems {
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.cs-problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.cs-problem-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.cs-problem-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.cs-problem-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.cs-problem-card:hover::before { transform: scaleY(1); }

.cs-problem-num {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g2);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  padding: 4px 11px;
  border-radius: 999px;
  line-height: 1;
}
.cs-problem-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.4;
  margin: 0;
  letter-spacing: -0.01em;
}
.cs-solution-tag {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g1);
  padding-top: 12px;
  border-top: 1px dashed rgba(16, 185, 129, .35);
  margin-top: 4px;
}
.cs-problem-card p {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Impact (dark green) ---------- */
.cs-impact {
  padding: 100px 0 90px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #0b2519 0%, #167244 100%);
  color: #ffffff;
}
.cs-impact-abstract {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cs-impact-abstract .circle {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.cs-impact-abstract .circle--lg {
  width: 520px; height: 520px;
  top: -160px; right: -140px;
  background: radial-gradient(circle,
    rgba(125, 226, 176, .18) 0%,
    transparent 65%);
}
.cs-impact-abstract .circle--md {
  width: 380px; height: 380px;
  bottom: -140px; left: -100px;
  border: 1.5px solid rgba(125, 226, 176, .2);
  background: radial-gradient(circle,
    rgba(16, 185, 129, .12) 0%,
    transparent 60%);
  animation: sapFloat 11s ease-in-out infinite reverse;
}
.cs-impact .container { position: relative; z-index: 2; }

.cs-impact-head {
  max-width: 780px;
  margin-bottom: 56px;
}
.eyebrow--light { color: var(--g3); }
.h2-rule--light {
  color: #ffffff !important;
  padding-top: 18px;
  position: relative;
}
.h2-rule--light::before {
  background-color: var(--g3) !important;
}

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 60px;
}
.cs-metric {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(125, 226, 176, .22);
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform .4s ease, background .4s ease, border-color .4s ease;
  backdrop-filter: blur(6px);
}
.cs-metric:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(125, 226, 176, .4);
}
.cs-metric b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--g3);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.cs-metric-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cs-metric span {
  display: block;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .88);
  line-height: 1.5;
}

.cs-impact-sub {
  font-family: var(--font-head);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 24px 0;
  letter-spacing: -0.01em;
}

.cs-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 40px;
  list-style: none;
  padding: 0;
  margin: 0 0 70px 0;
  max-width: 1000px;
}
.cs-benefits li {
  position: relative;
  padding: 12px 0 12px 30px;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cs-benefits li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 18px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--g3);
  border-bottom: 2px solid var(--g3);
  transform: rotate(-45deg);
}

/* Why Advait */
.cs-why {
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  text-align: center;
}
.cs-why h3 {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 34px 0;
  letter-spacing: -0.02em;
}
.cs-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 44px;
  text-align: left;
}
.cs-why-item {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(125, 226, 176, .22);
  border-radius: 16px;
  padding: 24px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
  backdrop-filter: blur(6px);
}
.cs-why-item:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(125, 226, 176, .42);
  transform: translateY(-4px);
}
.cs-why-item b {
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--g3);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(125, 226, 176, .3);
}
.cs-why-item p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .88);
  line-height: 1.6;
  margin: 0;
}

/* Light button on dark bg */
.cs-btn-light {
  background: #ffffff;
  color: var(--g2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 12px 30px -10px rgba(255, 255, 255, .35);
}
.cs-btn-light:hover {
  background: var(--g3);
  color: var(--deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(125, 226, 176, .55);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet / small desktop --- */
@media (max-width: 1100px) {
  .cs-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-intro-image { max-width: 640px; margin: 0 auto; }
  .cs-solution-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-flip-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-problems-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .cs-intro, .cs-solution, .cs-addons,
  .cs-problems, .cs-impact { padding: 70px 0; }

  .cs-solution-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-why-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-facts { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .cs-intro, .cs-solution, .cs-addons,
  .cs-problems, .cs-impact { padding: 60px 0; }

  .cs-intro-grid { gap: 30px; }
  .cs-intro-text h2 { font-size: 22px; }
  .cs-intro-desc { font-size: 15px; }
  .cs-intro-image { aspect-ratio: 4 / 3; border-radius: 18px; }

  .cs-facts { grid-template-columns: 1fr; gap: 14px; }

  .cs-solution-grid,
  .cs-flip-grid,
  .cs-problems-grid,
  .cs-metrics,
  .cs-why-grid { grid-template-columns: 1fr; gap: 18px; }

  .cs-solution-card { padding: 22px 20px; }
  .cs-solution-card h4 { font-size: 15px; margin-bottom: 14px; padding-bottom: 12px; }
  .cs-tick li { font-size: 13px; }

  .cs-flip-card {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }
  .cs-flip-num { font-size: 36px; }
  .cs-flip-front-content { padding: 22px 20px; }
  .cs-flip-front-content h4 { font-size: 14.5px; }
  .cs-flip-back-content { padding: 20px 18px; }
  .cs-flip-back-content p { font-size: 13px; }

  .cs-problem-card { padding: 24px 20px 22px; }
  .cs-problem-card h4 { font-size: 15px; }
  .cs-problem-card p { font-size: 13px; }

  .cs-metric { padding: 22px 20px; }
  .cs-metric b { font-size: 38px; }
  .cs-metric span { font-size: 13.5px; }

  .cs-benefits {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 50px;
  }
  .cs-benefits li { font-size: 14px; padding: 10px 0 10px 26px; }
  .cs-benefits li::before { top: 16px; width: 10px; height: 6px; }

  .cs-why { padding-top: 40px; }
  .cs-why-item { padding: 20px; }
  .cs-why-item b { font-size: 28px; margin-bottom: 10px; padding-bottom: 10px; }
  .cs-why-item p { font-size: 13.5px; }

  .cs-btn-light { width: 100%; justify-content: center; }
}

/* --- Very small phones --- */
@media (max-width: 380px) {
  .cs-flip-card {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
  .cs-flip-num { font-size: 32px; }
}

/* ============================================================
   CASE STUDY LISTING PAGE — Full Styles
   ============================================================ */

.cs-listing-banner { min-height: 340px; }

.cs-listing {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
  position: relative;
  overflow: hidden;
}



/* ============================================================
   HERO HEADER
   ============================================================ */
.cs-listing-hero {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
  position: relative;
}
.cs-listing-hero-text { max-width: 720px; }
.cs-listing-hero-text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.cs-listing-hero-desc {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

/* Abstract orbs */
.cs-listing-hero-abstract {
  position: relative;
  width: 240px;
  height: 200px;
  flex-shrink: 0;
}
.cs-orb {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.cs-orb--lg {
  width: 200px;
  height: 200px;
  top: 0;
  right: 0;
  background: radial-gradient(circle,
    rgba(16, 185, 129, .16) 0%,
    rgba(16, 185, 129, .04) 50%,
    transparent 75%);
}
.cs-orb--md {
  width: 120px;
  height: 120px;
  top: 40px;
  right: 60px;
  border: 1.5px solid rgba(16, 185, 129, .3);
  background: rgba(16, 185, 129, .05);
  animation: csFloat 6s ease-in-out infinite;
}
.cs-orb--sm {
  width: 70px;
  height: 70px;
  bottom: 10px;
  right: 10px;
  background: rgba(22, 114, 68, .08);
  border: 1.5px solid rgba(22, 114, 68, .22);
  animation: csFloat 8s ease-in-out infinite reverse;
}
@keyframes csFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}


/* ============================================================
   CASE STUDY HIGHLIGHTS — top block on listing page
   ============================================================ */
.cs-highlights {
  padding: 60px 0 40px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ---------- Green banner strip ---------- */
.cs-highlights-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  padding: 16px 24px;
  background: var(--grad);
  border-radius: 12px;
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow: 0 15px 35px -18px rgba(16, 185, 129, .65);
  margin-bottom: 26px;
}
.cs-highlights-sep {
  opacity: .55;
  font-weight: 400;
}

/* ---------- Stats row ---------- */
.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 56px;
}

.cs-stat-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 14px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
  overflow: hidden;
}
.cs-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.cs-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .38);
  border-color: rgba(16, 185, 129, .3);
}
.cs-stat-card:hover::before { transform: scaleX(1); }

.cs-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .12) 0%, rgba(22, 114, 68, .06) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .35s ease;
}
.cs-stat-icon svg { width: 22px; height: 22px; }
.cs-stat-card:hover .cs-stat-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, .6);
}

.cs-stat-card b {
  display: block;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--g1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cs-stat-card span {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* ---------- What you'll see ---------- */
.cs-what-you-see {
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.cs-what-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
}

.cs-what-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cs-what-tile {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.cs-what-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%,
    rgba(16, 185, 129, .06) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.cs-what-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.cs-what-tile:hover::before { opacity: 1; }

.cs-what-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, rgba(22, 114, 68, .07) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.cs-what-icon svg { width: 26px; height: 26px; }
.cs-what-tile:hover .cs-what-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .6);
}

.cs-what-tile h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.cs-what-tile:hover h4 { color: var(--g2); }

.cs-what-tile p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large tablet */
@media (max-width: 1100px) {
  .cs-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-what-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait */
@media (max-width: 992px) {
  .cs-highlights { padding: 50px 0 30px; }
  .cs-highlights-strip { font-size: 14px; padding: 14px 20px; }
  .cs-stats-grid { gap: 12px; margin-bottom: 44px; }
  .cs-stat-card { padding: 20px 12px 18px; }
  .cs-stat-card b { font-size: 20px; }
  .cs-stat-card span { font-size: 12px; }
}

/* Mobile */
@media (max-width: 640px) {
  .cs-highlights { padding: 40px 0 24px; }

  .cs-highlights-strip {
    font-size: 12.5px;
    padding: 12px 16px;
    gap: 8px 10px;
    letter-spacing: 0;
    margin-bottom: 20px;
  }
  .cs-highlights-sep { display: none; }
  .cs-highlights-strip span:not(.cs-highlights-sep) {
    display: inline-block;
  }
  /* Turn pipes into pill separators on mobile */
  .cs-highlights-strip {
    flex-direction: column;
    gap: 4px;
  }

  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 36px;
  }
  .cs-stat-card { padding: 18px 10px 16px; gap: 8px; }
  .cs-stat-icon { width: 38px; height: 38px; border-radius: 10px; }
  .cs-stat-icon svg { width: 18px; height: 18px; }
  .cs-stat-card b { font-size: 17px; }
  .cs-stat-card span { font-size: 11.5px; line-height: 1.3; }

  .cs-what-you-see { padding-top: 32px; }
  .cs-what-title { font-size: 18px; margin-bottom: 20px; }

  .cs-what-grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-what-tile { padding: 22px 20px 20px; gap: 12px; border-radius: 14px; }
  .cs-what-icon { width: 46px; height: 46px; border-radius: 12px; }
  .cs-what-icon svg { width: 22px; height: 22px; }
  .cs-what-tile h4 { font-size: 16px; }
  .cs-what-tile p { font-size: 13.5px; }
}

/* Small phones */
@media (max-width: 380px) {
  .cs-stats-grid { gap: 8px; }
  .cs-stat-card { padding: 16px 8px 14px; }
  .cs-stat-card b { font-size: 15px; }
  .cs-stat-card span { font-size: 11px; }
  .cs-stat-icon { width: 34px; height: 34px; }
  .cs-stat-icon svg { width: 16px; height: 16px; }
}

/* ============================================================
   FILTER STRIP — arrows + smooth scroll
   ============================================================ */
.cs-filter-wrap {
  position: relative;
  margin-bottom: 40px;
  padding: 0 56px;
}

.cs-filter-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--g2);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .18);
  transition: all .25s ease;
  z-index: 3;
  opacity: 1;
  visibility: visible;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.cs-filter-nav:hover {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, .55);
}
.cs-filter-nav:active { transform: translateY(-50%) scale(.94); }
.cs-filter-nav--prev { left: 0; }
.cs-filter-nav--next { right: 0; }
.cs-filter-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cs-filter-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.cs-filter-list::-webkit-scrollbar { display: none; }
.cs-filter-list li { flex-shrink: 0; }

.cs-filter-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all .25s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.cs-filter-btn:hover {
  border-color: rgba(16, 185, 129, .5);
  color: var(--g2);
  background: rgba(16, 185, 129, .04);
}
.cs-filter-btn.is-active {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(16, 185, 129, .7);
}
.cs-filter-btn.is-active:hover {
  color: #ffffff;
  background: var(--grad);
}

/* ============================================================
   CARD GRID
   ============================================================ */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cs-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.cs-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .35);
}
.cs-card.is-hidden { display: none; }

.cs-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--g2), var(--deep));
}
.cs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.cs-card:hover .cs-card-image img { transform: scale(1.06); }
.cs-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 50%,
    rgba(11, 37, 25, .55) 100%);
  pointer-events: none;
}

.cs-card-tags {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}

/* Override the old absolute positioning (now relative to .cs-card-tags) */
.cs-card-tag {
  position: static;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--g2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  white-space: nowrap;
}

.cs-card-body {
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.cs-card-title {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-card:hover .cs-card-title { color: var(--g2); }

.cs-card-desc {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-card-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--g2);
  transition: gap .3s ease;
}
.cs-card-read svg { transition: transform .3s ease; }
.cs-card:hover .cs-card-read { gap: 10px; }
.cs-card:hover .cs-card-read svg { transform: translateX(3px); }

/* Empty state */
.cs-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-soft);
}
.cs-empty svg {
  color: var(--g3);
  margin-bottom: 16px;
}
.cs-empty h4 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--title);
  margin: 0 0 8px;
}
.cs-empty p {
  font-size: 15px;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet / small desktop --- */
@media (max-width: 1100px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .cs-listing { padding: 70px 0 80px; }

  .cs-listing-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }
  .cs-listing-hero-abstract {
    width: 160px;
    height: 140px;
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .7;
    pointer-events: none;
  }
  .cs-orb--lg { width: 140px; height: 140px; }
  .cs-orb--md { width: 80px; height: 80px; top: 30px; right: 40px; }
  .cs-orb--sm { width: 50px; height: 50px; bottom: 5px; }
  .cs-listing-hero-text {
    max-width: 100%;
    padding-right: 100px;
  }

  .cs-filter-wrap {
    margin-bottom: 32px;
    padding: 0 52px;
  }
  .cs-filter-nav { width: 36px; height: 36px; }
  .cs-filter-btn { padding: 9px 16px; font-size: 13px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .cs-listing { padding: 60px 0 70px; }

  .cs-listing-hero {
    margin-bottom: 28px;
    gap: 18px;
  }
  .cs-listing-hero-text h2 {
    font-size: 22px;
    margin: 10px 0 12px;
  }
  .cs-listing-hero-desc {
    font-size: 14.5px;
    line-height: 1.65;
  }
  .cs-listing-hero-text { padding-right: 80px; }

  .cs-listing-hero-abstract {
    width: 120px;
    height: 100px;
    top: 0;
    opacity: .55;
  }
  .cs-orb--lg { width: 100px; height: 100px; }
  .cs-orb--md { width: 60px; height: 60px; top: 20px; right: 30px; }
  .cs-orb--sm { width: 36px; height: 36px; }

  /* Filter strip */
  .cs-filter-wrap {
    margin-bottom: 24px;
    padding: 0 48px;
  }
  .cs-filter-nav {
    width: 34px;
    height: 34px;
  }
  .cs-filter-nav svg { width: 16px; height: 16px; }
  .cs-filter-list { gap: 8px; }

  .cs-filter-btn {
    padding: 9px 15px;
    font-size: 12.5px;
    line-height: 1.2;
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--line);
  }
  .cs-filter-btn.is-active,
  .cs-filter-btn.is-active:hover,
  .cs-filter-btn.is-active:focus {
    background: var(--grad) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px -10px rgba(16, 185, 129, .7) !important;
    text-shadow: none;
    -webkit-text-fill-color: #ffffff;
  }

  /* Cards */
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cs-card { border-radius: 16px; }
  .cs-card-image { aspect-ratio: 16 / 10; }
  .cs-card-body {
    padding: 20px 18px;
    gap: 8px;
  }
  .cs-card-title {
    font-size: 15.5px;
    -webkit-line-clamp: 2;
  }
  .cs-card-desc {
    font-size: 13.5px;
    -webkit-line-clamp: 2;
  }
  .cs-card-read {
    font-size: 12px;
    padding-top: 12px;
  }
  .cs-card-tag {
    font-size: 10px;
    padding: 4px 10px;
    top: 12px;
    left: 12px;
  }

  .cs-empty { padding: 60px 16px; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
  .cs-listing-hero-text { padding-right: 60px; }
  .cs-listing-hero-abstract { width: 90px; opacity: .5; }
  .cs-orb--lg { width: 80px; height: 80px; }
  .cs-orb--md { width: 50px; height: 50px; }
  .cs-orb--sm { width: 30px; height: 30px; }

  .cs-filter-wrap { padding: 0 44px; }
  .cs-filter-nav { width: 32px; height: 32px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .cs-orb { animation: none !important; }
  .cs-filter-list { scroll-behavior: auto; }
}

.industry-footer {    font-size: 20px;
    width: 80%;
    padding: 30px 0px;
    color: #000;}
	
	@media (max-width: 640px) {  
	.industry-footer {width: 100%; font-size:15px}
	}
	/* ============================================================
   CASE STUDY OUTCOMES — 12 metrics, 4-col grid
   ============================================================ */
.cs-outcomes {
  padding: 80px 0 90px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
  position: relative;
  overflow: hidden;
}

.cs-outcomes-head {
  max-width: 780px;
  margin-bottom: 48px;
}
.cs-outcomes-head h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.cs-outcomes-lead {
  font-size: 16.5px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 760px;
}

/* ---------- Grid: 4 cols desktop ---------- */
.cs-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 28px;
}

/* ---------- Item ---------- */
.cs-outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 4px;
  position: relative;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.cs-outcome-item:hover { transform: translateY(-3px); }

/* Icon badge */
.cs-outcome-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .06) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .35s cubic-bezier(.2, .7, .3, 1);
}
.cs-outcome-icon svg { width: 22px; height: 22px; }
.cs-outcome-item:hover .cs-outcome-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .6);
}

/* Text */
.cs-outcome-text {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.cs-outcome-text b {
  display: block;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--g1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cs-outcome-text span {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet: still 4 cols but tighter --- */
@media (max-width: 1100px) {
  .cs-outcomes-grid { gap: 20px 22px; }
  .cs-outcome-text b { font-size: 22px; }
  .cs-outcome-text span { font-size: 13px; }
}

/* --- Tablet portrait: 3 cols --- */
@media (max-width: 992px) {
  .cs-outcomes { padding: 70px 0; }
  .cs-outcomes-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* --- Mobile: 2 cols as requested --- */
@media (max-width: 640px) {
  .cs-outcomes { padding: 60px 0; }
  .cs-outcomes-head { margin-bottom: 34px; }
  .cs-outcomes-head h2 { font-size: 21px; }
  .cs-outcomes-lead { font-size: 15px; line-height: 1.65; }

  .cs-outcomes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
  }

  .cs-outcome-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
  }
  .cs-outcome-icon { width: 40px; height: 40px; border-radius: 11px; }
  .cs-outcome-icon svg { width: 20px; height: 20px; }
  .cs-outcome-text b { font-size: 21px; margin-bottom: 3px; }
  .cs-outcome-text span { font-size: 12.5px; line-height: 1.4; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
  .cs-outcomes-grid { gap: 16px 10px; }
  .cs-outcome-icon { width: 36px; height: 36px; }
  .cs-outcome-icon svg { width: 18px; height: 18px; }
  .cs-outcome-text b { font-size: 19px; }
  .cs-outcome-text span { font-size: 12px; }
}
/* ============================================================
   SAP S/4HANA CLOUD PAGE
   ============================================================ */

/* ---------- Shared rhythm ---------- */
.sap-section-soft { background: #f6fbf8; }
.sap-section-head { max-width: 820px; margin-bottom: 56px; }
.sap-section-head .eyebrow { margin-bottom: 12px; }
.sap-section-head h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--title);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.sap-section-sub {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
}

/* ============================================================
   SERVICE OFFERINGS — 4 image cards (like SAP B1)
   ============================================================ */
.sap-services-links {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.sap-services-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.sap-service-link-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.sap-service-link-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 70px -30px rgba(16, 185, 129, .4);
  border-color: rgba(16, 185, 129, .4);
}
.sap-service-link-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--g2), var(--deep));
}
.sap-service-link-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.sap-service-link-card:hover .sap-service-link-image img { transform: scale(1.08); }
.sap-service-link-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 37, 25, .35));
  pointer-events: none;
}
.sap-service-link-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: var(--g2);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.sap-service-link-body {
  padding: 22px 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  flex: 1;
}
.sap-service-link-body h3 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--title);
  margin: 0;
  transition: color .3s ease;
}
.sap-service-link-card:hover .sap-service-link-body h3 { color: var(--g2); }
.sap-service-link-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 185, 129, .1);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .35s ease;
}
.sap-service-link-card:hover .sap-service-link-arrow {
  background: var(--grad);
  color: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px -6px rgba(16, 185, 129, .6);
}

/* ============================================================
   KEY MODULES — 2-column grid with proper spacing
   ============================================================ */
.s4-modules-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.s4-modules-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  position: relative;
  z-index: 2;
}
.s4-modules-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.s4-module-group { display: flex; flex-direction: column; }
.s4-module-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(16, 185, 129, .22);
  position: relative;
}
.s4-module-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 42px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}
.s4-module-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s4-module-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.s4-module-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

/* ============================================================
   KEY FEATURES — clean blocks
   ============================================================ */
.s4-features-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.s4-feature-block {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 38px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
  z-index: 2;
}
.s4-feature-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.s4-feature-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .3);
  border-color: rgba(16, 185, 129, .3);
}
.s4-feature-block:hover::before { transform: scaleY(1); }
.s4-feature-block:last-child { margin-bottom: 0; }

.s4-feature-title {
  font-family: var(--font-head);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.s4-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s4-feature-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}
.s4-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.s4-feature-list li strong {
  color: var(--title);
  font-weight: 700;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.s4-comparison-section {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
}
.s4-compare-wrap {
  position: relative;
  z-index: 2;
}
.s4-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14.5px;
  box-shadow: 0 25px 55px -30px rgba(15, 23, 42, .2);
  table-layout: fixed;
}
.s4-compare-table thead th {
  background: linear-gradient(135deg, #167244 0%, #0b2519 100%);
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 18px 22px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  width: 26%;
}
.s4-compare-table thead th:first-child { width: 22%; }
.s4-compare-table tbody td {
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
  line-height: 1.55;
}
.s4-compare-table tbody tr:nth-child(odd) td { background: #ffffff; }
.s4-compare-table tbody tr:nth-child(even) td { background: #f9fbfa; }
.s4-compare-table tbody td:first-child {
  font-weight: 700;
  color: var(--title);
  font-family: var(--font-head);
  font-size: 14.5px;
}
.s4-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.s4-badge--green {
  background: rgba(16, 185, 129, .14);
  color: #0e7a4d;
  border: 1px solid rgba(16, 185, 129, .28);
}
.s4-badge--blue {
  background: rgba(59, 130, 246, .12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, .25);
}
.s4-badge--orange {
  background: rgba(249, 168, 37, .14);
  color: #b45309;
  border: 1px solid rgba(249, 168, 37, .3);
}
.s4-compare-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 22px 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.s4-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.s4-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.s4-legend-dot--green { background: var(--g1); }
.s4-legend-dot--blue { background: #3b82f6; }
.s4-legend-dot--orange { background: #f9a825; }
.s4-legend-note {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-soft);
  font-style: italic;
}

/* ---------- Benefits ---------- */
.sap-benefits { padding: 96px 0; position: relative; overflow: hidden; }
.sap-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.sap-benefit-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.sap-benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.sap-benefit-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(16, 185, 129, .1), rgba(22, 114, 68, .06));
  position: relative;
}
.sap-benefit-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.sap-benefit-card:hover .sap-benefit-image img { transform: scale(1.08); }
.sap-benefit-image.is-empty::after {
  content: 'Image Placeholder';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--g2);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(22, 114, 68, .05));
  border: 1.5px dashed rgba(16, 185, 129, .35);
}
.sap-benefit-body {
  padding: 22px 22px 26px;
  background: linear-gradient(135deg, var(--g2) 0%, var(--deep) 100%);
  color: #fff;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.sap-benefit-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.sap-benefit-card:hover .sap-benefit-body::before { transform: scaleX(1); }
.sap-benefit-body h4 {
  font-family: var(--font-head);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px 0;
}
.sap-benefit-body ul { list-style: none; padding: 0; margin: 0; }
.sap-benefit-body ul li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
  line-height: 1.6;
}
.sap-benefit-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--g3);
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.sap-faq-section {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.sap-faq-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.sap-faq-mascot {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.sap-faq-mascot img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 25px 40px rgba(16, 185, 129, .18));
  animation: sapFloat 6s ease-in-out infinite;
}
.sap-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sap-faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: all .3s ease;
}
.sap-faq-item.active {
  border-color: var(--g1);
  box-shadow: 0 10px 30px -12px rgba(16, 185, 129, .3);
}
.sap-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  background: none;
  border: none;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
  gap: 16px;
}
.sap-faq-question:hover { color: var(--g2); }
.sap-faq-item.active .sap-faq-question { color: var(--g1); }
.sap-faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  color: var(--text-soft);
}
.sap-faq-item.active .sap-faq-icon { transform: rotate(90deg); color: var(--g1); }
.sap-faq-icon svg { width: 16px; height: 16px; }
.sap-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}
.sap-faq-answer p {
  padding: 0 26px 22px 26px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .sap-services-links,
  .s4-modules-section,
  .s4-features-section,
  .s4-comparison-section,
  .sap-benefits,
  .sap-faq-section { padding: 80px 0; }

  .sap-services-links-grid { grid-template-columns: repeat(2, 1fr); }
  .s4-modules-layout { gap: 44px; }
  .sap-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .sap-faq-layout { grid-template-columns: 260px 1fr; gap: 40px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .sap-services-links,
  .s4-modules-section,
  .s4-features-section,
  .s4-comparison-section,
  .sap-benefits,
  .sap-faq-section { padding: 70px 0; }

  .sap-section-head { margin-bottom: 44px; }

  .s4-modules-layout { gap: 40px; }
  .s4-feature-block { padding: 28px 28px 26px; }

  /* Comparison table scroll */
  .s4-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
  }
  .s4-compare-table { min-width: 700px; }

  .sap-faq-layout { grid-template-columns: 220px 1fr; gap: 30px; }
  .sap-faq-mascot img { max-width: 200px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .sap-services-links,
  .s4-modules-section,
  .s4-features-section,
  .s4-comparison-section,
  .sap-benefits,
  .sap-faq-section { padding: 60px 0; }

  .sap-section-head { margin-bottom: 36px; }
  .sap-section-head h2 { font-size: 22px; }
  .sap-section-sub { font-size: 15px; }

  /* Services */
  .sap-services-links-grid { grid-template-columns: 1fr; gap: 18px; }
  .sap-service-link-body { padding: 18px 18px 20px; }
  .sap-service-link-body h3 { font-size: 15px; }
  .sap-service-link-arrow { width: 34px; height: 34px; }

  /* Key Modules — single column with tight spacing */
  .s4-modules-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .s4-modules-col { gap: 28px; }
  .s4-module-title {
    font-size: 16px;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .s4-module-list { gap: 8px; }
  .s4-module-list li { font-size: 14px; padding-left: 20px; }
  .s4-module-list li::before { top: 8px; width: 6px; height: 6px; }

  /* Features */
  .s4-feature-block {
    padding: 22px 20px 22px;
    border-radius: 16px;
    margin-bottom: 18px;
  }
  .s4-feature-title { font-size: 16.5px; margin-bottom: 16px; }
  .s4-feature-list { gap: 10px; }
  .s4-feature-list li { font-size: 14px; padding-left: 22px; line-height: 1.6; }
  .s4-feature-list li::before { top: 8px; width: 7px; height: 7px; }

  /* Comparison table — scroll */
  .s4-compare-wrap { margin: 0 -20px; padding: 0 20px; }
  .s4-compare-table { min-width: 620px; font-size: 13px; }
  .s4-compare-table thead th { font-size: 12.5px; padding: 12px 14px; }
  .s4-compare-table tbody td { padding: 12px 14px; font-size: 13px; }
  .s4-compare-table tbody td:first-child { font-size: 13px; }
  .s4-badge { font-size: 11.5px; padding: 3px 10px; }
  .s4-compare-legend { gap: 14px; font-size: 12px; padding-top: 18px; }
  .s4-legend-note { width: 100%; margin-left: 0; margin-top: 6px; }

  /* Benefits */
  .sap-benefits-grid { grid-template-columns: 1fr; gap: 18px; }
  .sap-benefit-image { aspect-ratio: 16 / 10; }
  .sap-benefit-body { padding: 20px 20px 22px; }
  .sap-benefit-body h4 { font-size: 15px; }

  /* FAQ */
  .sap-faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .sap-faq-mascot { position: relative; top: 0; }
  .sap-faq-mascot img { max-width: 200px; margin: 0 auto; }
  .sap-faq-question { font-size: 15px; padding: 18px 20px; }
  .sap-faq-answer p { padding: 0 20px 18px 20px; font-size: 14px; }
}

/* --- Very small phones --- */
@media (max-width: 380px) {
  .s4-feature-block { padding: 20px 16px 20px; }
  .s4-module-list li { font-size: 13.5px; }
  .sap-faq-question { font-size: 14px; padding: 16px 16px; }
  .sap-faq-answer p { padding: 0 16px 16px 16px; font-size: 13.5px; }
}

/* ============================================================
   SAP BUSINESS ONE IMPLEMENTATION PAGE
   ============================================================ */

/* Shared rhythm */
.sap-section-soft { background: #f6fbf8; }
.sap-section-head { max-width: 820px; margin-bottom: 56px; }
.sap-section-head .eyebrow { margin-bottom: 12px; }
.sap-section-head h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--title);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.sap-section-sub {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
}

/* ============================================================
   1. 5-PHASE IMPLEMENTATION APPROACH
   ============================================================ */
.b1-phases-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1-phases-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.b1-phase-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1-phase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1-phase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1-phase-card:hover::before { transform: scaleX(1); }
.b1-phase-card--wide {
  grid-column: 1 / -1;
}
.b1-phase-num {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--g2);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
  margin-bottom: 16px;
}
.b1-phase-card h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.b1-phase-card > p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 16px;
}
.b1-phase-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b1-phase-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.55;
}
.b1-phase-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.b1-phase-note {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--text-soft);
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  line-height: 1.55;
}

/* ============================================================
   2. STEP PROCESSES (SQL to HANA + Version Upgrade)
   ============================================================ */
.b1-steps-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1-steps-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.b1-step-card {
  flex: 1 1 200px;
  max-width: 260px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1-step-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1-step-card:hover::after { transform: scaleX(1); }

.b1-step-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.b1-step-icon svg { width: 26px; height: 26px; }
.b1-step-card:hover .b1-step-icon {
  background: var(--grad);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .6);
}
.b1-step-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
  transition: color .3s ease;
}
.b1-step-card:hover h4 { color: var(--g2); }
.b1-step-card p {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.b1-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  color: var(--g3);
  padding: 0 4px;
  opacity: .55;
  transition: opacity .3s ease;
}
.b1-steps-grid:hover .b1-step-arrow { opacity: .85; }

/* ============================================================
   3. LICENSING CONSULTATION
   ============================================================ */
.b1-licensing-section {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.b1-license-callout {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .06) 0%,
    rgba(22, 114, 68, .03) 100%);
  border: 1px solid rgba(16, 185, 129, .22);
  border-left: 4px solid var(--g1);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 44px;
  position: relative;
  overflow: hidden;
}
.b1-license-callout::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .12) 0%, transparent 70%);
  pointer-events: none;
}
.b1-license-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--grad);
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px -8px rgba(16, 185, 129, .55);
}
.b1-license-callout h3 {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.b1-license-callout p {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  position: relative;
  z-index: 2;
}

.b1-license-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.b1-license-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px 26px;
  position: relative;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1-license-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--grad);
  border-radius: 18px 0 0 18px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1-license-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1-license-card:hover::before { transform: scaleY(1); }
.b1-license-card h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(16, 185, 129, .18);
  position: relative;
}
.b1-license-card h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 40px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}
.b1-license-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 12px;
}
.b1-license-card p:last-child { margin-bottom: 0; }
.b1-license-card p strong { color: var(--title); }
.b1-license-label {
  font-weight: 700;
  color: var(--title) !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}
.b1-license-best {
  background: rgba(16, 185, 129, .07);
  border-left: 3px solid var(--g1);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
}
.b1-license-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.b1-license-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.55;
}
.b1-license-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

/* ============================================================
   4. WHY ADVAIT — 6 CARDS
   ============================================================ */
.sap-benefits {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}
.b1-why-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1-why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1-why-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(16, 185, 129, .1), rgba(22, 114, 68, .06));
  position: relative;
}
.b1-why-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.b1-why-card:hover .b1-why-image img { transform: scale(1.08); }
.b1-why-image.is-empty::after {
  content: 'Image';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(22, 114, 68, .05));
  border: 1px dashed rgba(16, 185, 129, .35);
}
.b1-why-body {
  padding: 18px 16px 20px;
  background: linear-gradient(135deg, var(--g2) 0%, var(--deep) 100%);
  color: #ffffff;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.b1-why-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.b1-why-card:hover .b1-why-body::before { transform: scaleX(1); }
.b1-why-body h4 {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 10px;
}
.b1-why-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.b1-why-body ul li {
  position: relative;
  padding-left: 14px;
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  line-height: 1.55;
}
.b1-why-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--g3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .b1-phases-section,
  .b1-steps-section,
  .b1-licensing-section,
  .sap-benefits { padding: 80px 0; }

  .b1-why-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .b1-step-card { max-width: 220px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .b1-phases-section,
  .b1-steps-section,
  .b1-licensing-section,
  .sap-benefits { padding: 70px 0; }

  .sap-section-head { margin-bottom: 44px; }

  .b1-phases-layout { grid-template-columns: 1fr; gap: 20px; }
  .b1-phase-card--wide { grid-column: auto; }
  .b1-phase-card { padding: 26px 26px 24px; }
  .b1-phase-card h3 { font-size: 18px; }

  /* Steps — 2x2 grid without arrows */
  .b1-steps-grid { gap: 18px; }
  .b1-step-arrow { display: none; }
  .b1-step-card { flex: 1 1 calc(50% - 9px); max-width: none; }

  .b1-license-grid { grid-template-columns: 1fr; gap: 18px; }
  .b1-license-callout { padding: 26px 26px; }

  .b1-why-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .b1-phases-section,
  .b1-steps-section,
  .b1-licensing-section,
  .sap-benefits { padding: 60px 0; }

  .sap-section-head { margin-bottom: 36px; }
  .sap-section-head h2 { font-size: 22px; }
  .sap-section-sub { font-size: 15px; }

  /* Phases */
  .b1-phase-card { padding: 22px 20px 22px; border-radius: 16px; }
  .b1-phase-num { font-size: 10.5px; padding: 5px 11px; margin-bottom: 14px; }
  .b1-phase-card h3 { font-size: 17px; margin-bottom: 10px; }
  .b1-phase-card > p { font-size: 14px; margin-bottom: 14px; }
  .b1-phase-list li { font-size: 13.5px; padding-left: 20px; }
  .b1-phase-list li::before { top: 7px; width: 6px; height: 6px; }
  .b1-phase-note { font-size: 12.5px; padding-top: 12px; }

  /* Steps — single column */
  .b1-steps-grid { flex-direction: column; gap: 14px; }
  .b1-step-card {
    flex: 1 1 auto;
    max-width: none;
    padding: 22px 20px 20px;
    border-radius: 14px;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .b1-step-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; }
  .b1-step-icon svg { width: 22px; height: 22px; }
  .b1-step-card h4 { font-size: 15px; margin-bottom: 6px; }
  .b1-step-card p { font-size: 13px; }
  /* Wrap content beside icon */
  .b1-step-card > *:not(.b1-step-icon) { min-width: 0; }
  .b1-step-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
  }
  .b1-step-icon { grid-row: 1 / span 2; }
  .b1-step-card h4 { grid-column: 2; }
  .b1-step-card p { grid-column: 2; }

  /* Licensing */
  .b1-license-callout { padding: 22px 20px; border-radius: 16px; margin-bottom: 32px; }
  .b1-license-callout h3 { font-size: 18px; margin-bottom: 12px; }
  .b1-license-callout p { font-size: 14.5px; }
  .b1-license-pill { font-size: 10px; padding: 5px 11px; margin-bottom: 14px; }

  .b1-license-card { padding: 22px 20px 22px; border-radius: 14px; }
  .b1-license-card h4 { font-size: 16px; padding-bottom: 10px; margin-bottom: 12px; }
  .b1-license-card p { font-size: 14px; }
  .b1-license-best { padding: 10px 14px; font-size: 13px !important; }
  .b1-license-list li { font-size: 13.5px; padding-left: 20px; }

  /* Why Advait — single column */
  .b1-why-grid { grid-template-columns: 1fr; gap: 16px; }
  .b1-why-image { aspect-ratio: 16 / 10; }
  .b1-why-body { padding: 18px 18px 20px; }
  .b1-why-body h4 { font-size: 15px; margin-bottom: 8px; }
  .b1-why-body ul li { font-size: 13px; }
}

/* --- Very small phones --- */
@media (max-width: 380px) {
  .b1-phase-card { padding: 20px 16px; }
  .b1-step-card { padding: 18px 16px; }
  .b1-license-callout { padding: 20px 16px; }
  .b1-license-card { padding: 20px 16px; }
  .b1-license-callout h3 { font-size: 17px; }
  .b1-step-card h4 { font-size: 14.5px; }
}

/* ============================================================
   READ MORE LINK — SQL to HANA Migration
   ============================================================ */
.b1-read-more-wrap {
  text-align: center;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}
.b1-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: var(--grad);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(16, 185, 129, .55);
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.b1-read-more:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(16, 185, 129, .7);
}
.b1-read-more svg {
  transition: transform .3s ease;
}
.b1-read-more:hover svg {
  transform: translateX(4px);
}

/* Mobile */
@media (max-width: 640px) {
  .b1-read-more-wrap { margin-top: 32px; }
  .b1-read-more {
    font-size: 14px;
    padding: 12px 24px;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   SAP BUSINESS ONE HANA, WEB CLIENT, CLOUD & MOBILITY PAGE
   ============================================================ */

/* Shared rhythm */
.sap-section-soft { background: #f6fbf8; }
.sap-section-head { max-width: 820px; margin-bottom: 56px; }
.sap-section-head .eyebrow { margin-bottom: 12px; }
.sap-section-head h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--title);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.sap-section-sub {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 780px;
}

/* ============================================================
   2. KEY CAPABILITIES ON HANA — 3-column grid
   ============================================================ */
.b1hwc-capabilities {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1hwc-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.b1hwc-cap-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1hwc-cap-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1hwc-cap-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1hwc-cap-card:hover::before { transform: scaleX(1); }

.b1hwc-cap-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
  flex-shrink: 0;
}
.b1hwc-cap-icon svg { width: 22px; height: 22px; }
.b1hwc-cap-card:hover .b1hwc-cap-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.b1hwc-cap-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.b1hwc-cap-card:hover h4 { color: var(--g2); }
.b1hwc-cap-card p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   3. SAP B1 WEB CLIENT
   ============================================================ */
.b1hwc-webclient {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.b1hwc-web-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.b1hwc-web-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .1);
}
.b1hwc-web-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 70px -30px rgba(16, 185, 129, .4);
  border-color: rgba(16, 185, 129, .3);
}
.b1hwc-web-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .08),
    rgba(22, 114, 68, .04));
}
.b1hwc-web-image .sap-img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background:
    linear-gradient(135deg,
      rgba(16, 185, 129, .1) 0%,
      rgba(22, 114, 68, .06) 100%);
}
.b1hwc-web-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b1hwc-web-body h4 {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.b1hwc-web-card:hover .b1hwc-web-body h4 { color: var(--g2); }
.b1hwc-web-body p {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* Benefits note strip */
.b1hwc-benefits-note {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 48px;
  padding: 26px 30px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .08) 0%,
    rgba(22, 114, 68, .04) 100%);
  border: 1px solid rgba(16, 185, 129, .22);
  border-left: 4px solid var(--g1);
  border-radius: 18px;
  position: relative;
  z-index: 2;
}
.b1hwc-benefits-note-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--grad);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.b1hwc-benefits-note h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--title);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.b1hwc-benefits-note p {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   4. AI-POWERED WEB CLIENT
   ============================================================ */
.b1hwc-ai {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1hwc-ai-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.b1hwc-ai-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.b1hwc-ai-item:hover {
  transform: translateX(6px);
  box-shadow: 0 20px 45px -25px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1hwc-ai-num {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.b1hwc-ai-text h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.b1hwc-ai-text p {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   5. SAP B1 ON CLOUD
   ============================================================ */
.b1hwc-cloud {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.b1hwc-cloud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.b1hwc-cloud-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1hwc-cloud-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1hwc-cloud-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 70px -30px rgba(16, 185, 129, .4);
  border-color: rgba(16, 185, 129, .3);
}
.b1hwc-cloud-card:hover::before { transform: scaleX(1); }
.b1hwc-cloud-icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.b1hwc-cloud-icon svg { width: 26px; height: 26px; }
.b1hwc-cloud-card:hover .b1hwc-cloud-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.b1hwc-cloud-card h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.b1hwc-cloud-card:hover h4 { color: var(--g2); }
.b1hwc-cloud-card p {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}
.b1hwc-cloud-card p strong {
  color: var(--g2);
  font-weight: 700;
}

/* ============================================================
   6. MOBILITY SOLUTIONS
   ============================================================ */
.b1hwc-mobility {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1hwc-mobility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.b1hwc-mobility-card {
  background: linear-gradient(135deg, #167244 0%, #0b2519 100%);
  border-radius: 20px;
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease;
  color: #ffffff;
}
.b1hwc-mobility-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(125, 226, 176, .18) 0%, transparent 70%);
  pointer-events: none;
}
.b1hwc-mobility-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1hwc-mobility-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 70px -30px rgba(16, 185, 129, .55);
}
.b1hwc-mobility-card:hover::after { transform: scaleX(1); }
.b1hwc-mobility-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(125, 226, 176, .16);
  border: 1px solid rgba(125, 226, 176, .3);
  color: var(--g3);
  display: grid;
  place-items: center;
  transition: all .4s ease;
  position: relative;
  z-index: 2;
}
.b1hwc-mobility-icon svg { width: 24px; height: 24px; }
.b1hwc-mobility-card:hover .b1hwc-mobility-icon {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .7);
}
.b1hwc-mobility-card h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  z-index: 2;
}
.b1hwc-mobility-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g3);
  background: rgba(125, 226, 176, .14);
  border: 1px solid rgba(125, 226, 176, .32);
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.b1hwc-mobility-card p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 2;
}
.b1hwc-mobility-card p strong {
  color: var(--g3);
  font-weight: 700;
}

/* Platform Capabilities strip */
.b1hwc-platform-strip {
  margin-top: 48px;
  padding: 26px 30px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.b1hwc-platform-strip h4 {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.b1hwc-platform-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.b1hwc-platform-tags span {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .08);
  color: var(--g2);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(16, 185, 129, .25);
  transition: all .3s ease;
}
.b1hwc-platform-tags span:hover {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, .55);
}

/* ============================================================
   IMAGE PLACEHOLDER (shared)
   ============================================================ */
.sap-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .08) 0%,
    rgba(22, 114, 68, .05) 100%);
  color: var(--g2);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: all .4s ease;
}
.sap-img-placeholder svg { color: var(--g1); opacity: .8; }

/* ============================================================
   WHY ADVAIT — image fallback safety
   ============================================================ */
.sap-benefit-image.is-empty::after {
  content: 'Image';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
  background:
    linear-gradient(135deg,
      rgba(16, 185, 129, .1),
      rgba(22, 114, 68, .06));
  border: 1px dashed rgba(16, 185, 129, .35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .b1hwc-capabilities,
  .b1hwc-webclient,
  .b1hwc-ai,
  .b1hwc-cloud,
  .b1hwc-mobility,
  .sap-benefits { padding: 80px 0; }

  .b1hwc-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .b1hwc-web-grid { grid-template-columns: repeat(2, 1fr); }
  .b1hwc-cloud-grid { grid-template-columns: repeat(2, 1fr); }
  .b1hwc-mobility-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .b1hwc-capabilities,
  .b1hwc-webclient,
  .b1hwc-ai,
  .b1hwc-cloud,
  .b1hwc-mobility,
  .sap-benefits { padding: 70px 0; }

  .sap-section-head { margin-bottom: 44px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .b1hwc-capabilities,
  .b1hwc-webclient,
  .b1hwc-ai,
  .b1hwc-cloud,
  .b1hwc-mobility,
  .sap-benefits { padding: 60px 0; }

  .sap-section-head { margin-bottom: 36px; }
  .sap-section-head h2 { font-size: 22px; }
  .sap-section-sub { font-size: 15px; }

  /* Capabilities — single column */
  .b1hwc-cap-grid { grid-template-columns: 1fr; gap: 14px; }
  .b1hwc-cap-card { padding: 22px 20px 20px; border-radius: 14px; gap: 12px; }
  .b1hwc-cap-icon { width: 42px; height: 42px; border-radius: 11px; }
  .b1hwc-cap-icon svg { width: 20px; height: 20px; }
  .b1hwc-cap-card h4 { font-size: 15px; }
  .b1hwc-cap-card p { font-size: 13px; }

  /* Web client — single column */
  .b1hwc-web-grid { grid-template-columns: 1fr; gap: 16px; }
  .b1hwc-web-card { border-radius: 14px; }
  .b1hwc-web-image { aspect-ratio: 16 / 9; }
  .b1hwc-web-body { padding: 20px 18px; gap: 8px; }
  .b1hwc-web-body h4 { font-size: 14.5px; }
  .b1hwc-web-body p { font-size: 13px; }

  .b1hwc-benefits-note { padding: 22px 22px; gap: 16px; flex-direction: column; align-items: flex-start; }
  .b1hwc-benefits-note-icon { width: 48px; height: 48px; }
  .b1hwc-benefits-note h4 { font-size: 15.5px; }
  .b1hwc-benefits-note p { font-size: 13.5px; }

  /* AI list — smaller padding */
  .b1hwc-ai-item { padding: 20px 22px; gap: 16px; }
  .b1hwc-ai-num { width: 44px; height: 44px; font-size: 14px; border-radius: 12px; }
  .b1hwc-ai-text h4 { font-size: 15px; }
  .b1hwc-ai-text p { font-size: 13.5px; }

  /* Cloud — single column */
  .b1hwc-cloud-grid { grid-template-columns: 1fr; gap: 16px; }
  .b1hwc-cloud-card { padding: 26px 22px 24px; border-radius: 16px; gap: 14px; }
  .b1hwc-cloud-icon { width: 48px; height: 48px; border-radius: 12px; }
  .b1hwc-cloud-icon svg { width: 22px; height: 22px; }
  .b1hwc-cloud-card h4 { font-size: 16px; }
  .b1hwc-cloud-card p { font-size: 13.5px; }

  /* Mobility — single column */
  .b1hwc-mobility-grid { grid-template-columns: 1fr; gap: 16px; }
  .b1hwc-mobility-card { padding: 26px 22px 26px; border-radius: 16px; gap: 12px; }
  .b1hwc-mobility-icon { width: 46px; height: 46px; border-radius: 12px; }
  .b1hwc-mobility-icon svg { width: 22px; height: 22px; }
  .b1hwc-mobility-card h4 { font-size: 16px; }
  .b1hwc-mobility-card p { font-size: 13px; }

  .b1hwc-platform-strip { padding: 22px 18px; margin-top: 32px; }
  .b1hwc-platform-strip h4 { font-size: 12px; letter-spacing: 1.5px; }
  .b1hwc-platform-tags { gap: 8px; }
  .b1hwc-platform-tags span { padding: 8px 14px; font-size: 12.5px; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
  .b1hwc-cap-card { padding: 20px 16px 18px; }
  .b1hwc-ai-item { padding: 18px 18px; gap: 14px; }
  .b1hwc-ai-num { width: 40px; height: 40px; font-size: 13px; }
  .b1hwc-cloud-card { padding: 22px 18px; }
  .b1hwc-mobility-card { padding: 22px 18px; }
}


/* ============================================================
   HOW WE ENGAGE — 5-STEP CAPSULE TIMELINE
   Every class is prefixed .pf- so nothing collides with the theme.
   ============================================================ */
.pf-flow {
  --adv-green: #00A863;
  --adv-forest: #167244;
  --adv-deep: #0B3D27;
  --adv-mint: #7DE2B0;
  --adv-ink: #15212B;
  --adv-muted: #6B7280;
  --adv-font-display: "Raleway", -apple-system, "Segoe UI", Arial, sans-serif;
  --adv-font-body: "Karla", -apple-system, "Segoe UI", Arial, sans-serif;

  /* the five capsule gradients — deep to light, left to right */
  --c1: linear-gradient(135deg, #0A3722 0%, #15603B 100%);
  --c2: linear-gradient(135deg, #135937 0%, #167244 100%);
  --c3: linear-gradient(135deg, #0C8A52 0%, #00A863 100%);
  --c4: linear-gradient(135deg, #00A863 0%, #52CC97 100%);
  --c5: linear-gradient(135deg, #7DE2B0 0%, #B8EFD4 100%);

  position: relative;
  padding: 40px 0 56px;
  font-family: var(--adv-font-body);
  color: var(--adv-muted);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- the timeline grid ---------- */
.pf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 56px auto;
  column-gap: 0;
}

/* staggered: 2 and 4 above the line, 1 / 3 / 5 below */
.pf-step { position: relative; min-width: 0; }
.pf-step.s1 { grid-column: 1 / span 4; grid-row: 3; }
.pf-step.s2 { grid-column: 4 / span 4; grid-row: 1; }
.pf-step.s3 { grid-column: 5 / span 4; grid-row: 3; }
.pf-step.s4 { grid-column: 8 / span 4; grid-row: 1; }
.pf-step.s5 { grid-column: 9 / span 4; grid-row: 3; }

/* the baseline */
.pf-axis {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(11, 61, 39, .35),
    rgba(0, 168, 99, .5) 45%,
    rgba(125, 226, 176, .45));
}
.pf-axis::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--adv-deep), var(--adv-green) 55%, var(--adv-mint));
  transform: scaleX(0);
  transition: transform 1.5s cubic-bezier(.4, 0, .2, 1);
}
.pf-flow.is-in .pf-axis::after { transform: scaleX(1); }

/* stem + node, drawn from each capsule to the axis */
.pf-stem {
  position: absolute;
  left: 55px;
  width: 2px;
  background: rgba(11, 61, 39, .3);
  z-index: 0;
}
.s1 .pf-stem,
.s3 .pf-stem,
.s5 .pf-stem { bottom: 100%; height: 28px; }
.s2 .pf-stem,
.s4 .pf-stem { top: 100%; height: 28px; }
.pf-stem::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 3px solid var(--adv-green);
  box-shadow: 0 0 0 4px rgba(0, 168, 99, .12);
}
.s1 .pf-stem::after,
.s3 .pf-stem::after,
.s5 .pf-stem::after { top: -7px; }
.s2 .pf-stem::after,
.s4 .pf-stem::after { bottom: -7px; }

/* ---------- capsule ---------- */
.pf-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 999px;
  padding: 9px;
  margin: 0 14px;
  box-shadow:
    0 20px 34px -22px rgba(10, 45, 28, .75),
    0 4px 10px -6px rgba(10, 45, 28, .3);
  transition: transform .28s ease, box-shadow .28s ease;
}
.s1 .pf-pill { background: var(--c1); }
.s2 .pf-pill { background: var(--c2); }
.s3 .pf-pill { background: var(--c3); }
.s4 .pf-pill { background: var(--c4); }
.s5 .pf-pill { background: var(--c5); }
.pf-pill:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 42px -22px rgba(10, 45, 28, .8),
    0 5px 12px -6px rgba(10, 45, 28, .34);
}

.pf-num {
  flex: 0 0 66px;
  height: 66px;
  border-radius: 50%;
  background: transparent;
  border: 3.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--adv-font-display);
  font-weight: 800;
  font-size: 21px;
  color: #fff;
  letter-spacing: .5px;
}
.s5 .pf-num { border-color: #0B3D27; color: #0B3D27; }

.pf-body {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 999px;
  margin-left: -14px;
  padding: 11px 22px 11px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pf-ico {
  flex: 0 0 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-ico svg { width: 38px; height: 38px; display: block; }
.s1 .pf-ico { color: #0A3722; }
.s2 .pf-ico { color: #167244; }
.s3 .pf-ico { color: #0C8A52; }
.s4 .pf-ico { color: #00A863; }
.s5 .pf-ico { color: #167244; }

.pf-txt { min-width: 0; }
.pf-txt h3 {
  font-family: var(--adv-font-display);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--adv-ink);
  margin: 0 0 3px;
  letter-spacing: .2px;
}
.pf-txt p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--adv-muted);
  margin: 0;
}

/* ---------- reveal ---------- */
.pf-flow.anim .pf-step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.pf-flow.anim.is-in .pf-step { opacity: 1; transform: none; }
.pf-flow.anim.is-in .s1 { transition-delay: .06s; }
.pf-flow.anim.is-in .s2 { transition-delay: .18s; }
.pf-flow.anim.is-in .s3 { transition-delay: .30s; }
.pf-flow.anim.is-in .s4 { transition-delay: .42s; }
.pf-flow.anim.is-in .s5 { transition-delay: .54s; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1399px) {
  .pf-txt h3 { font-size: 14.5px; }
  .pf-txt p { font-size: 11px; }
  .pf-num { flex: 0 0 60px; height: 60px; font-size: 19px; }
  .pf-stem { left: 52px; }
  .pf-body { padding: 10px 18px 10px 24px; gap: 11px; }
  .pf-ico { flex: 0 0 34px; height: 34px; }
  .pf-ico svg { width: 34px; height: 34px; }
}

@media (max-width: 1199px) {
  .pf-pill { margin: 0 8px; }
  .pf-stem { left: 44px; }
  .pf-txt p { display: none; }  /* copy returns in the stacked layout */
  .pf-steps { grid-template-rows: auto 48px auto; }
}

/* stacked capsules */
@media (max-width: 1023px) {
  .pf-flow { padding: 28px 0 44px; }
  .pf-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pf-step { grid-column: auto !important; grid-row: auto !important; }
  .pf-axis { display: none; }
  .pf-stem { display: none; }
  .pf-pill { margin: 0; max-width: 620px; }
  .pf-txt p { display: block; font-size: 12.5px; }
  .pf-num { flex: 0 0 62px; height: 62px; font-size: 20px; }
}

@media (max-width: 560px) {
  .pf-flow { padding: 20px 0 36px; }
  .pf-num {
    flex: 0 0 52px;
    height: 52px;
    font-size: 17px;
    border-width: 3px;
  }
  .pf-body { padding: 9px 16px 9px 20px; gap: 10px; margin-left: -12px; }
  .pf-ico { flex: 0 0 28px; height: 28px; }
  .pf-ico svg { width: 28px; height: 28px; }
  .pf-txt h3 { font-size: 14px; }
  .pf-txt p { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-flow.anim .pf-step { opacity: 1; transform: none; transition: none; }
  .pf-axis::after { transition: none; transform: scaleX(1); }
  .pf-pill { transition: none; }
}

/* ============================================================
   PHASE 5 WIDE CARD — 2-column grid (content + abstract SVG)
   ============================================================ */
.b1-phase-card--wide {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 44px !important;      /* ensures it feels roomy */
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #ffffff 55%,
      #f0fdf4 100%) !important;
}

/* LEFT — content column */
.b1-phase-wide-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.b1-phase-wide-content .b1-phase-num { align-self: flex-start; }
.b1-phase-wide-content h3 { margin-top: 12px; }
.b1-phase-wide-content > p { margin-top: 6px; }
.b1-phase-wide-content .b1-phase-list { margin-top: 14px; margin-bottom: 14px; }

/* RIGHT — visual column */
.b1-phase-wide-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.b1-phase-wide-visual svg {
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet portrait — stack */
@media (max-width: 992px) {
  .b1-phase-card--wide {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px !important;
  }
  .b1-phase-wide-visual {
    min-height: 220px;
    order: 2;
  }
  .b1-phase-wide-visual svg { max-width: 340px; }
}

/* Mobile */
@media (max-width: 640px) {
  .b1-phase-card--wide {
    padding: 24px 20px !important;
    gap: 20px;
  }
  .b1-phase-wide-visual { min-height: 170px; }
  .b1-phase-wide-visual svg { max-width: 260px; opacity: .9; }
}

/* Small phones */
@media (max-width: 380px) {
  .b1-phase-wide-visual { min-height: 150px; }
  .b1-phase-wide-visual svg { max-width: 220px; }
}	

/* ============================================================
   SAP BUSINESS ONE ADD-ONS & INTEGRATIONS PAGE
   ============================================================ */

/* ---------- Banner ---------- */
.b1addons-banner { min-height: 400px; }

/* ---------- 1. INTRO ---------- */
.b1addons-intro {
  padding: 90px 0;
  background: #ffffff;
}
.b1addons-intro .about-who-image.is-empty {
  min-height: 320px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1),
    rgba(22, 114, 68, .06));
  border: 1.5px dashed rgba(16, 185, 129, .35);
  position: relative;
}
.b1addons-intro .about-who-image.is-empty::after {
  content: 'Advait Business Suite+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- 2. CUSTOMIZATION ---------- */
.b1addons-customization {
  padding: 96px 0;
  background: #f6fbf8;
  position: relative;
  overflow: hidden;
}
.b1addons-abstract {
  position: absolute;
  top: 30px;
  right: 4%;
  width: 300px;
  height: 240px;
  opacity: .55;
  pointer-events: none;
}

.b1addons-custom-value {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: left;
  padding: 32px 36px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--g1);
  border-radius: 20px;
  position: relative;
  z-index: 2;
}
.b1addons-sub-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.b1addons-custom-lead {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 18px;
}

.b1addons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b1addons-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.65;
}
.b1addons-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

/* Customization grid */
.b1addons-custom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.b1addons-custom-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px 26px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1addons-custom-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1addons-custom-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1addons-custom-card:hover::before { transform: scaleX(1); }

.b1addons-custom-num {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2.2px;
  color: var(--g2);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
  margin-bottom: 16px;
}
.b1addons-custom-card h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(16, 185, 129, .18);
}
.b1addons-custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b1addons-custom-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
}
.b1addons-custom-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g1);
}

/* ---------- 3. ADVAIT BUSINESS SUITE+ TABS ---------- */
.b1addons-suite {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.b1addons-abstract-layered {
  position: absolute;
  top: 40px;
  right: -60px;
  width: 480px;
  height: 320px;
  opacity: .5;
  pointer-events: none;
}
/* ============================================================
   TABS — with scroll arrows
   ============================================================ */
.b1addons-tabs {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
  padding: 0 56px;   /* space for arrows */
}

/* Arrow buttons */
.b1addons-tab-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--g2);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .18);
  transition: all .25s ease;
  z-index: 3;
  opacity: 1;
  visibility: visible;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.b1addons-tab-nav-btn:hover {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, .55);
}
.b1addons-tab-nav-btn:active { transform: translateY(-50%) scale(.94); }
.b1addons-tab-nav-btn--prev { left: 0; }
.b1addons-tab-nav-btn--next { right: 0; }
.b1addons-tab-nav-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Tab nav — scrollable list, no scrollbar */
.b1addons-tab-nav {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding-left: 4px;
}
.b1addons-tab-nav::-webkit-scrollbar { display: none; }
.b1addons-tab-nav li { flex-shrink: 0; }

/* Tab nav — horizontal scroll on all viewports */
.b1addons-tab-nav {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.b1addons-tab-nav::-webkit-scrollbar { display: none; }
.b1addons-tab-nav li { flex-shrink: 0; }

.b1addons-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 14px 22px;
  background: #ffffff;
  border: 1.5px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  transition: all .3s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.b1addons-tab-btn:hover {
  border-color: rgba(16, 185, 129, .5);
  color: var(--g2);
  background: rgba(16, 185, 129, .04);
}
.b1addons-tab-btn.is-active {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 25px -10px rgba(16, 185, 129, .55);
}
.b1addons-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.b1addons-tab-icon svg { width: 100%; height: 100%; }

/* Tab panels */
.b1addons-tab-panel {
  display: none;
  animation: b1addonsFadeIn .5s cubic-bezier(.2, .7, .3, 1);
}
.b1addons-tab-panel.is-active { display: block; }
@keyframes b1addonsFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel head */
.b1addons-panel-head {
  margin-bottom: 40px;
  padding: 28px 32px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .07) 0%,
    rgba(22, 114, 68, .03) 100%);
  border-left: 4px solid var(--g1);
  border-radius: 0 20px 20px 0;
  position: relative;
  overflow: hidden;
}
.b1addons-panel-head::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(16, 185, 129, .15) 0%,
    transparent 70%);
  pointer-events: none;
}
.b1addons-panel-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
  position: relative;
  z-index: 2;
}
.b1addons-panel-sub {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  max-width: 780px;
  position: relative;
  z-index: 2;
}

/* Addon grid */
.b1addons-addon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.b1addons-addon-grid--2 { grid-template-columns: repeat(2, 1fr); }
.b1addons-addon-grid--4 { grid-template-columns: repeat(2, 1fr); }

.b1addons-addon-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.b1addons-addon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1addons-addon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1addons-addon-card:hover::before { transform: scaleY(1); }

.b1addons-addon-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.b1addons-addon-num {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--g2);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  padding: 6px 11px;
  border-radius: 8px;
  line-height: 1;
}
.b1addons-addon-head h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.b1addons-addon-card:hover .b1addons-addon-head h4 { color: var(--g2); }

.b1addons-addon-desc {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.b1addons-addon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b1addons-addon-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}
.b1addons-addon-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--g1);
  border-bottom: 2px solid var(--g1);
  transform: rotate(-45deg);
}

/* ---------- 4. IoT/ML ---------- */
.b1addons-iot {
  padding: 96px 0;
  background: #f6fbf8;
  position: relative;
  overflow: hidden;
}
.b1addons-abstract-dots {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 300px;
  opacity: .5;
  pointer-events: none;
}
.b1addons-iot-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}
.b1addons-iot-block {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1addons-iot-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--grad);
}
.b1addons-iot-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1addons-iot-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.b1addons-list--arrow li::before {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  content: '›';
  color: var(--g1);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  top: 2px;
}

/* Business Impact card */
.b1addons-iot-impact {
  background: linear-gradient(135deg, #167244 0%, #0b2519 100%);
  border-color: transparent;
}
.b1addons-iot-impact::before {
  background: linear-gradient(90deg, var(--g1), var(--g3));
}
.b1addons-iot-impact .b1addons-iot-title {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .15);
}
.b1addons-iot-impact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.b1addons-iot-impact-row:last-child { border-bottom: 0; }
.b1addons-iot-impact-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 44px;
  border-radius: 12px;
  background: rgba(125, 226, 176, .18);
  border: 1px solid rgba(125, 226, 176, .32);
  color: var(--g3);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.b1addons-iot-impact-row p {
  font-size: 15px;
  color: rgba(255, 255, 255, .92);
  line-height: 1.5;
  margin: 0;
}

/* ---------- 5. WHY ADVAIT ---------- */
.b1addons-why {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .b1addons-custom-grid { grid-template-columns: repeat(2, 1fr); }
  .b1addons-addon-grid { grid-template-columns: repeat(2, 1fr); }
  .b1addons-iot-layout { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 992px) {
  .b1addons-intro,
  .b1addons-customization,
  .b1addons-suite,
  .b1addons-iot,
  .b1addons-why { padding: 70px 0; }

  .b1addons-abstract,
  .b1addons-abstract-layered,
  .b1addons-abstract-dots { opacity: .35; }

  .b1addons-custom-value { padding: 26px 26px; }
  .b1addons-panel-head { padding: 24px 26px; }

  .b1addons-tabs { padding: 0 50px; }
  .b1addons-tab-nav-btn { width: 36px; height: 36px; }
  .b1addons-tab-btn { padding: 12px 18px; font-size: 13.5px; }
  .b1addons-tab-icon { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  .b1addons-intro,
  .b1addons-customization,
  .b1addons-suite,
  .b1addons-iot,
  .b1addons-why { padding: 60px 0; }

  .b1addons-intro .about-who-image.is-empty { min-height: 240px; border-radius: 16px; }

  /* Customization */
  .b1addons-custom-value {
    padding: 22px 20px;
    border-radius: 14px;
    margin-bottom: 34px;
  }
  .b1addons-sub-title { font-size: 16px; }
  .b1addons-list li { font-size: 14.5px; padding-left: 20px; }
  .b1addons-list li::before { width: 6px; height: 6px; top: 8px; }

  .b1addons-custom-grid { grid-template-columns: 1fr; gap: 16px; }
  .b1addons-custom-card { padding: 22px 20px; border-radius: 16px; }
  .b1addons-custom-num { font-size: 10.5px; padding: 5px 11px; margin-bottom: 14px; }
  .b1addons-custom-card h4 { font-size: 15.5px; margin-bottom: 14px; padding-bottom: 12px; }
  .b1addons-custom-list li { font-size: 14px; padding-left: 20px; }

 .b1addons-tabs { padding: 0 46px; margin-bottom: 28px; }
  .b1addons-tab-nav-btn {
    width: 34px;
    height: 34px;
  }
  .b1addons-tab-nav-btn svg { width: 16px; height: 16px; }
  .b1addons-tab-btn {
    padding: 11px 16px;
    font-size: 13px;
    gap: 8px;
  }
  .b1addons-tab-icon { width: 18px; height: 18px; }
  .b1addons-panel-head {
    padding: 20px 22px;
    margin-bottom: 28px;
    border-radius: 0 14px 14px 0;
  }
  .b1addons-panel-title { font-size: 18px; margin: 6px 0 8px; }
  .b1addons-panel-sub { font-size: 14px; }

  .b1addons-addon-grid,
  .b1addons-addon-grid--2,
  .b1addons-addon-grid--4 { grid-template-columns: 1fr; gap: 16px; }

  .b1addons-addon-card { padding: 22px 20px; border-radius: 14px; }
  .b1addons-addon-head { gap: 10px; margin-bottom: 12px; }
  .b1addons-addon-num { font-size: 11px; padding: 5px 10px; }
  .b1addons-addon-head h4 { font-size: 15px; }
  .b1addons-addon-desc { font-size: 13px; margin-bottom: 14px; padding-bottom: 14px; }
  .b1addons-addon-list li { font-size: 13px; padding-left: 20px; }
  .b1addons-addon-list li::before { width: 9px; height: 5px; top: 6px; }

  /* IoT */
  .b1addons-iot-block { padding: 26px 22px; border-radius: 16px; }
  .b1addons-iot-title { font-size: 16px; margin-bottom: 16px; padding-bottom: 12px; }
  .b1addons-iot-impact-row { gap: 12px; padding: 14px 0; }
  .b1addons-iot-impact-badge { min-width: 58px; height: 38px; font-size: 15px; border-radius: 10px; }
  .b1addons-iot-impact-row p { font-size: 14px; }
}

@media (max-width: 380px) {
  .b1addons-tab-btn { font-size: 12px; padding: 10px 14px; }
  .b1addons-custom-card { padding: 20px 16px; }
  .b1addons-addon-card { padding: 20px 16px; }
}

/* ============================================================
   DATA & DIGITAL ENGINEERING PAGE
   ============================================================ */

/* ---------- Banner ---------- */
.dde-banner { min-height: 400px; }

/* ---------- 1. INTRO ---------- */
.dde-intro {
  padding: 90px 0;
  background: #ffffff;
}
.dde-intro .about-who-image.is-empty {
  min-height: 320px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1),
    rgba(22, 114, 68, .06));
  border: 1.5px dashed rgba(16, 185, 129, .35);
  position: relative;
}
.dde-intro .about-who-image.is-empty::after {
  content: 'Data & Digital Image';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- SECTIONS ---------- */
.dde-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

/* Abstract decorations */
.dde-abstract {
  position: absolute;
  top: 30px;
  right: 4%;
  width: 300px;
  height: 240px;
  opacity: .55;
  pointer-events: none;
}
.dde-abstract-dots {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 300px;
  opacity: .55;
  pointer-events: none;
}

/* Left-side layered abstract (for AI/Data/Web section) */
.dde-abstract-left {
  position: absolute;
  top: auto;
  bottom: -80px;
  right: auto;
  left: -120px;
  width: 520px;
  height: 380px;
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Split heading (text left, image right) ---------- */
.dde-split-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
}
.dde-split-head-text {
  max-width: 640px;
}
.dde-split-head-text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
}
.dde-split-lead {
  font-size: 16.5px;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}
.dde-split-head-image {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .08),
    rgba(22, 114, 68, .05));
  border: 1.5px dashed rgba(16, 185, 129, .3);
  position: relative;
}
.dde-split-head-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.dde-split-head-image:hover img { transform: scale(1.05); }
.dde-split-head-image.is-empty::after {
  content: 'Image Placeholder';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- Icon Card Grid ---------- */
.dde-icon-grid {
  display: grid;
  gap: 22px;
  position: relative;
  z-index: 2;
  margin-bottom: 56px;
}
.dde-icon-grid--5 { grid-template-columns: repeat(5, 1fr); }
.dde-icon-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dde-icon-grid--3 { grid-template-columns: repeat(3, 1fr); }

.dde-icon-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.dde-icon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.dde-icon-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.dde-icon-card:hover::before { transform: scaleX(1); }

.dde-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.dde-icon svg { width: 24px; height: 24px; }
.dde-icon-card:hover .dde-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}

.dde-icon-card h4 {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.dde-icon-card:hover h4 { color: var(--g2); }
.dde-icon-card p {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Value Block ---------- */
.dde-value-block {
  position: relative;
  z-index: 2;
}
.dde-value-block--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.dde-value-title {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.dde-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dde-value-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--g1);
  border-radius: 0 14px 14px 0;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.5;
  transition: all .35s ease;
}
.dde-value-card:hover {
  transform: translateX(4px);
  border-left-color: var(--g2);
  box-shadow: 0 12px 30px -15px rgba(16, 185, 129, .35);
  color: var(--title);
}
.dde-value-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .16) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
}
.dde-value-icon svg { width: 13px; height: 13px; }

/* ---------- 5. WHY ADVAIT ---------- */
.dde-why {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .dde-icon-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .dde-icon-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dde-value-grid { grid-template-columns: repeat(2, 1fr); }
  .dde-split-head { gap: 44px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .dde-intro,
  .dde-section,
  .dde-why { padding: 70px 0; }

  .dde-split-head {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 44px;
  }
  .dde-split-head-image { max-width: 620px; margin: 0 auto; aspect-ratio: 16 / 10; }

  .dde-icon-grid--5,
  .dde-icon-grid--3 { grid-template-columns: repeat(2, 1fr); }

  .dde-value-block--2col { grid-template-columns: 1fr; gap: 32px; }
  .dde-value-grid { grid-template-columns: repeat(2, 1fr); }

  .dde-abstract { width: 220px; height: 180px; opacity: .4; }
  .dde-abstract-left { width: 380px; height: 280px; opacity: .4; left: -80px; bottom: -60px; }
  .dde-abstract-dots { width: 70%; height: 240px; opacity: .4; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .dde-intro,
  .dde-section,
  .dde-why { padding: 60px 0; }

  .dde-intro .about-who-image.is-empty { min-height: 240px; border-radius: 16px; }

  .dde-split-head-text h2 { font-size: 22px; }
  .dde-split-lead { font-size: 15px; line-height: 1.7; }
  .dde-split-head-image { aspect-ratio: 4 / 3; border-radius: 16px; }
  .dde-split-head { margin-bottom: 34px; }

  .dde-icon-grid { gap: 14px; margin-bottom: 40px; }
  .dde-icon-grid--5,
  .dde-icon-grid--4,
  .dde-icon-grid--3 { grid-template-columns: 1fr; }

  .dde-icon-card { padding: 20px 18px; border-radius: 14px; gap: 12px; }
  .dde-icon { width: 44px; height: 44px; border-radius: 12px; }
  .dde-icon svg { width: 20px; height: 20px; }
  .dde-icon-card h4 { font-size: 15px; }
  .dde-icon-card p { font-size: 13.5px; }

  .dde-value-title { font-size: 15px; margin-bottom: 14px; }
  .dde-value-grid { grid-template-columns: 1fr; gap: 10px; }
  .dde-value-card { padding: 14px 16px; font-size: 14px; }
  .dde-value-icon { width: 22px; height: 22px; }
  .dde-value-icon svg { width: 12px; height: 12px; }

  /* Hide heavy abstracts on mobile */
  .dde-abstract,
  .dde-abstract-left,
  .dde-abstract-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dde-icon-card,
  .dde-icon,
  .dde-value-card,
  .dde-split-head-image img { transition: none !important; }
}

/* ============================================================
   SAP BUSINESS ONE TRAINING & SUPPORT PAGE
   ============================================================ */

/* ---------- Banner ---------- */
.b1ts-banner { min-height: 400px; }

/* ---------- 1. INTRO ---------- */
.b1ts-intro {
  padding: 90px 0;
  background: #ffffff;
}
.b1ts-intro .about-who-image.is-empty {
  min-height: 320px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1),
    rgba(22, 114, 68, .06));
  border: 1.5px dashed rgba(16, 185, 129, .35);
  position: relative;
}
.b1ts-intro .about-who-image.is-empty::after {
  content: 'Training & Support';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- SECTIONS ---------- */
.b1ts-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.b1ts-section.sap-section-soft { background: #f6fbf8; }

/* Abstract decorations */
.b1ts-abstract {
  position: absolute;
  top: 30px;
  right: 4%;
  width: 300px;
  height: 240px;
  opacity: .55;
  pointer-events: none;
}
.b1ts-abstract-layered {
  position: absolute;
  top: 40px;
  right: -60px;
  width: 480px;
  height: 320px;
  opacity: .5;
  pointer-events: none;
}

/* ---------- Split heading (text left, image right) ---------- */
.b1ts-split-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
}
.b1ts-split-head-text { max-width: 640px; }
.b1ts-split-head-text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
}
.b1ts-split-lead {
  font-size: 16.5px;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}
.b1ts-split-head-image {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .08),
    rgba(22, 114, 68, .05));
  border: 1.5px dashed rgba(16, 185, 129, .3);
  position: relative;
}
.b1ts-split-head-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.b1ts-split-head-image:hover img { transform: scale(1.05); }
.b1ts-split-head-image.is-empty::after {
  content: 'Image Placeholder';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- Support Offerings — 4 cards ---------- */
.b1ts-offering-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.b1ts-offering-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1ts-offering-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1ts-offering-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1ts-offering-card:hover::before { transform: scaleX(1); }

.b1ts-offering-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.b1ts-offering-icon svg { width: 24px; height: 24px; }
.b1ts-offering-card:hover .b1ts-offering-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.b1ts-offering-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .3s ease;
}
.b1ts-offering-card:hover h4 { color: var(--g2); }
.b1ts-offering-card p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Engagement Models — 3 cards ---------- */
.b1ts-engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.b1ts-engagement-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.b1ts-engagement-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.b1ts-engagement-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.b1ts-engagement-card:hover::before { transform: scaleY(1); }

.b1ts-engagement-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.b1ts-engagement-icon svg { width: 26px; height: 26px; }
.b1ts-engagement-card:hover .b1ts-engagement-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.b1ts-engagement-card h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  padding-bottom: 14px;
  transition: color .3s ease;
}
.b1ts-engagement-card h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42px;
  height: 3px;
  background: var(--g1);
  border-radius: 2px;
}
.b1ts-engagement-card:hover h4 { color: var(--g2); }
.b1ts-engagement-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

/* ---------- 4. WHY ADVAIT ---------- */
.b1ts-why {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .b1ts-offering-grid { grid-template-columns: repeat(2, 1fr); }
  .b1ts-engagement-grid { grid-template-columns: repeat(2, 1fr); }
  .b1ts-split-head { gap: 44px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .b1ts-intro,
  .b1ts-section,
  .b1ts-why { padding: 70px 0; }

  .b1ts-split-head {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 44px;
  }
  .b1ts-split-head-image {
    max-width: 620px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
  }

  .b1ts-engagement-grid { grid-template-columns: 1fr; }

  .b1ts-abstract { width: 220px; height: 180px; opacity: .4; }
  .b1ts-abstract-layered { width: 340px; height: 240px; opacity: .4; right: -40px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .b1ts-intro,
  .b1ts-section,
  .b1ts-why { padding: 60px 0; }

  .b1ts-intro .about-who-image.is-empty { min-height: 240px; border-radius: 16px; }

  .b1ts-split-head-text h2 { font-size: 22px; }
  .b1ts-split-lead { font-size: 15px; line-height: 1.7; }
  .b1ts-split-head-image { aspect-ratio: 4 / 3; border-radius: 16px; }
  .b1ts-split-head { margin-bottom: 34px; }

  .b1ts-offering-grid { grid-template-columns: 1fr; gap: 14px; }
  .b1ts-offering-card { padding: 22px 20px; border-radius: 14px; gap: 14px; }
  .b1ts-offering-icon { width: 46px; height: 46px; border-radius: 12px; }
  .b1ts-offering-icon svg { width: 20px; height: 20px; }
  .b1ts-offering-card h4 { font-size: 15.5px; }
  .b1ts-offering-card p { font-size: 13.5px; }

  .b1ts-engagement-grid { grid-template-columns: 1fr; gap: 16px; }
  .b1ts-engagement-card { padding: 24px 22px; border-radius: 16px; gap: 16px; }
  .b1ts-engagement-icon { width: 50px; height: 50px; border-radius: 14px; }
  .b1ts-engagement-icon svg { width: 22px; height: 22px; }
  .b1ts-engagement-card h4 { font-size: 16px; padding-bottom: 12px; }
  .b1ts-engagement-card h4::after { width: 36px; height: 3px; }
  .b1ts-engagement-card p { font-size: 14px; }

  /* Hide abstracts on mobile */
  .b1ts-abstract,
  .b1ts-abstract-layered { display: none; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
  .b1ts-offering-card { padding: 20px 16px; }
  .b1ts-engagement-card { padding: 22px 18px; }
  .b1ts-engagement-card h4 { font-size: 15px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .b1ts-offering-card,
  .b1ts-engagement-card,
  .b1ts-offering-icon,
  .b1ts-engagement-icon,
  .b1ts-split-head-image img { transition: none !important; }
}

/* ============================================================
   ECC TO S/4HANA MIGRATION & UPGRADE PAGE
   ============================================================ */

/* ---------- Banner ---------- */
.ecc-banner { min-height: 400px; }

/* ---------- 1. INTRO ---------- */
.ecc-intro {
  padding: 90px 0;
  background: #ffffff;
}
.ecc-intro .about-who-image.is-empty {
  min-height: 320px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1),
    rgba(22, 114, 68, .06));
  border: 1.5px dashed rgba(16, 185, 129, .35);
  position: relative;
}
.ecc-intro .about-who-image.is-empty::after {
  content: 'ECC to S/4HANA';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- SECTIONS ---------- */
.ecc-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.ecc-section.sap-section-soft { background: #f6fbf8; }

/* Abstract decorations */
.ecc-abstract,
.ecc-abstract-2 {
  position: absolute;
  top: 30px;
  right: 4%;
  width: 300px;
  height: 240px;
  opacity: .5;
  pointer-events: none;
}
.ecc-abstract-2 { top: auto; bottom: 30px; opacity: .35; }

.ecc-abstract-layered {
  position: absolute;
  top: 40px;
  right: -60px;
  width: 480px;
  height: 320px;
  opacity: .45;
  pointer-events: none;
}
.ecc-abstract-layered-2 {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 480px;
  height: 320px;
  opacity: .4;
  pointer-events: none;
}
.ecc-abstract-dots {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 300px;
  opacity: .5;
  pointer-events: none;
}

/* ---------- Split heading (text left, image right) ---------- */
.ecc-split-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.ecc-split-head-text { max-width: 640px; }
.ecc-split-head-text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--title);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
}
.ecc-split-lead {
  font-size: 16.5px;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}
.ecc-split-head-image {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .08),
    rgba(22, 114, 68, .05));
  border: 1.5px dashed rgba(16, 185, 129, .3);
  position: relative;
}
.ecc-split-head-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.ecc-split-head-image:hover img { transform: scale(1.05); }
.ecc-split-head-image.is-empty::after {
  content: 'Image Placeholder';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- 2. TRANSFORMATION PATHS — 3 cards ---------- */
.ecc-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.ecc-path-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .15);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.ecc-path-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.ecc-path-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1),
    rgba(22, 114, 68, .06));
  border-bottom: 1px dashed rgba(16, 185, 129, .3);
  position: relative;
}
.ecc-path-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.ecc-path-card:hover .ecc-path-image img { transform: scale(1.05); }
.ecc-path-image.is-empty::after {
  content: 'Image';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

.ecc-path-head {
  background: linear-gradient(135deg, #1a4a5e 0%, #0f3d2a 100%);
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.ecc-path-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 46px;
  height: 4px;
  background: var(--g1);
}
.ecc-path-head h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}
.ecc-path-head h4 span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  opacity: .8;
  margin-top: 3px;
  color: var(--g3);
}

.ecc-path-body {
  padding: 22px 22px 24px;
  flex: 1;
}
.ecc-path-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ecc-path-body ul li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.ecc-path-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

/* ---------- 3. MIGRATION EXPERTISE — 2 columns of 3 groups ---------- */
.ecc-expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  position: relative;
  z-index: 2;
}
.ecc-expertise-col {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.ecc-expertise-item h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(16, 185, 129, .2);
  position: relative;
}
.ecc-expertise-item h4::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--grad);
}
.ecc-expertise-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ecc-expertise-item ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
}
.ecc-expertise-item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

/* ---------- 5. UPGRADE PATHS — 3 cards with bottom band ---------- */
.ecc-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.ecc-upgrade-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.ecc-upgrade-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.ecc-upgrade-body {
  padding: 26px 24px 20px;
  flex: 1;
}
.ecc-upgrade-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ecc-upgrade-body ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.65;
}
.ecc-upgrade-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g1);
}
.ecc-upgrade-head {
  background: linear-gradient(135deg, #1a4a5e 0%, #0f3d2a 100%);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.ecc-upgrade-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 46px;
  height: 3px;
  background: var(--g1);
}
.ecc-upgrade-head h4 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  flex: 1;
  letter-spacing: -0.01em;
}
.ecc-upgrade-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--g3);
  display: grid;
  place-items: center;
  transition: all .35s ease;
}
.ecc-upgrade-icon svg { width: 20px; height: 20px; }
.ecc-upgrade-card:hover .ecc-upgrade-icon {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  transform: rotate(-6deg) scale(1.06);
}

/* ---------- 6. UPGRADE EXPERTISE — 5 steps ---------- */
.ecc-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two columns */
  gap: 20px 24px;
  position: relative;
  z-index: 2;
  max-width: 100%;
}

/* Step card — internal layout stays the same */
.ecc-step {
  display: grid;
  grid-template-columns: 64px 1fr;  /* slightly tighter number column */
  gap: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 24px 22px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}


.ecc-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.ecc-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .3);
  border-color: rgba(16, 185, 129, .3);
}
.ecc-step:hover::before { transform: scaleY(1); }

/* Number badge — slightly smaller to fit tighter column */
.ecc-step-num {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: all .4s ease;
}
.ecc-step:hover .ecc-step-num {
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.ecc-step-body h4 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 6px;
}
.ecc-step-body > p {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 12px;
}
.ecc-step-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ecc-step-body ul li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.ecc-step-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g1);
}

/* ---------- 7. C-SUITES — 4 cards ---------- */
.ecc-csuite-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}
.ecc-csuite-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.ecc-csuite-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.ecc-csuite-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.ecc-csuite-card:hover::before { transform: scaleX(1); }
.ecc-csuite-icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .14) 0%,
    rgba(22, 114, 68, .08) 100%);
  color: var(--g2);
  display: grid;
  place-items: center;
  transition: all .4s ease;
}
.ecc-csuite-icon svg { width: 26px; height: 26px; }
.ecc-csuite-card:hover .ecc-csuite-icon {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .55);
}
.ecc-csuite-card h4 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0;
  transition: color .3s ease;
}
.ecc-csuite-card:hover h4 { color: var(--g2); }
.ecc-csuite-card p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

/* ---------- 8. WHY ADVAIT — 6 cards, 3 per row ---------- */
.ecc-why {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.ecc-benefits-6 {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .ecc-paths-grid,
  .ecc-upgrade-grid { grid-template-columns: repeat(2, 1fr); }
  .ecc-csuite-grid { grid-template-columns: repeat(2, 1fr); }
  .ecc-benefits-6 { grid-template-columns: repeat(2, 1fr); }
  .ecc-split-head { gap: 44px; }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .ecc-intro,
  .ecc-section,
  .ecc-why { padding: 70px 0; }

  .ecc-split-head {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 44px;
  }
  .ecc-split-head-image { max-width: 620px; margin: 0 auto; aspect-ratio: 16 / 10; }

  .ecc-expertise-grid { grid-template-columns: 1fr; gap: 34px; }

 .ecc-steps { grid-template-columns: 1fr; gap: 16px; }

  .ecc-step {
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 22px 22px 22px 18px;
  }
  .ecc-step-num { width: 60px; height: 60px; font-size: 19px; border-radius: 13px; }
  .ecc-abstract,
  .ecc-abstract-2 { width: 220px; height: 180px; opacity: .35; }
  .ecc-abstract-layered,
  .ecc-abstract-layered-2 { width: 340px; height: 240px; opacity: .35; right: -40px; }
  .ecc-abstract-dots { width: 70%; height: 240px; opacity: .4; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .ecc-intro,
  .ecc-section,
  .ecc-why { padding: 60px 0; }

  .ecc-intro .about-who-image.is-empty { min-height: 240px; border-radius: 16px; }

  .ecc-split-head-text h2 { font-size: 22px; }
  .ecc-split-lead { font-size: 15px; line-height: 1.7; }
  .ecc-split-head-image { aspect-ratio: 4 / 3; border-radius: 16px; }
  .ecc-split-head { margin-bottom: 34px; }

  /* Paths */
  .ecc-paths-grid { grid-template-columns: 1fr; gap: 18px; }
  .ecc-path-card { border-radius: 16px; }
  .ecc-path-head h4 { font-size: 15px; }
  .ecc-path-body { padding: 20px 20px 22px; }
  .ecc-path-body ul li { font-size: 13.5px; }

  /* Expertise */
  .ecc-expertise-item h4 { font-size: 15.5px; }
  .ecc-expertise-item ul li { font-size: 13.5px; }

  /* Upgrade paths */
  .ecc-upgrade-grid { grid-template-columns: 1fr; gap: 16px; }
  .ecc-upgrade-card { border-radius: 16px; }
  .ecc-upgrade-body { padding: 22px 20px 18px; }
  .ecc-upgrade-body ul li { font-size: 13.5px; }
  .ecc-upgrade-head { padding: 16px 20px; }
  .ecc-upgrade-head h4 { font-size: 14px; }
  .ecc-upgrade-icon { width: 40px; height: 40px; }

  /* Steps */
 .ecc-step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 20px 22px;
  }
  .ecc-step-num {
    width: 52px;
    height: 52px;
    font-size: 17px;
    border-radius: 12px;
  }
  .ecc-step-body h4 { font-size: 15.5px; }
  .ecc-step-body ul li { font-size: 13.5px; }

  /* C-Suites */
  .ecc-csuite-grid { grid-template-columns: 1fr; gap: 14px; }
  .ecc-csuite-card { padding: 22px 20px; gap: 12px; border-radius: 14px; }
  .ecc-csuite-icon { width: 48px; height: 48px; border-radius: 13px; }
  .ecc-csuite-icon svg { width: 22px; height: 22px; }
  .ecc-csuite-card h4 { font-size: 14.5px; }
  .ecc-csuite-card p { font-size: 13.5px; }

  /* Why Advait 6 grid */
  .ecc-benefits-6 { grid-template-columns: 1fr; }

  /* Hide abstracts on mobile */
  .ecc-abstract,
  .ecc-abstract-2,
  .ecc-abstract-layered,
  .ecc-abstract-layered-2,
  .ecc-abstract-dots { display: none; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
  .ecc-path-body { padding: 18px 16px; }
  .ecc-expertise-item h4 { font-size: 14.5px; }
  .ecc-step { padding: 18px 16px 20px; }
  .ecc-step-num { width: 46px; height: 46px; font-size: 16px; }
  .ecc-csuite-card { padding: 20px 16px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ecc-path-card,
  .ecc-upgrade-card,
  .ecc-step,
  .ecc-csuite-card,
  .ecc-upgrade-icon,
  .ecc-csuite-icon,
  .ecc-step-num,
  .ecc-split-head-image img { transition: none !important; }
}

/* ============================================================
   SAP BTP DEVELOPMENT & INTEGRATION PAGE
   ============================================================ */

/* ---------- Banner ---------- */
.btp-banner { min-height: 400px; }

/* ---------- 1. INTRO ---------- */
.btp-intro {
  padding: 90px 0;
  background: #ffffff;
}
.btp-intro .about-who-image.is-empty {
  min-height: 320px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .1),
    rgba(22, 114, 68, .06));
  border: 1.5px dashed rgba(16, 185, 129, .35);
  position: relative;
}
.btp-intro .about-who-image.is-empty::after {
  content: 'SAP BTP';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- 2. BUILD VS INTEGRATE ---------- */
.btp-build {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.btp-abstract {
  position: absolute;
  top: 30px;
  right: 4%;
  width: 300px;
  height: 240px;
  opacity: .5;
  pointer-events: none;
}

.btp-build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  position: relative;
  z-index: 2;
}
.btp-build-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.btp-build-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.btp-build-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--g2), var(--deep));
}
.btp-build-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.btp-build-card:hover .btp-build-image img { transform: scale(1.05); }
.btp-build-image.is-empty {
  border-bottom: 1px dashed rgba(16, 185, 129, .3);
  background: linear-gradient(135deg,
    rgba(16, 185, 129, .15),
    rgba(22, 114, 68, .1));
}
.btp-build-image.is-empty::after {
  content: 'Image';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g3);
}
.btp-build-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  color: var(--g2);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
  transition: all .4s ease;
  z-index: 3;
}
.btp-build-badge svg { width: 24px; height: 24px; }
.btp-build-card:hover .btp-build-badge {
  background: var(--grad);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
}

.btp-build-body {
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.btp-build-body h3 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(16, 185, 129, .2);
  position: relative;
}
.btp-build-body h3::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--grad);
}
.btp-build-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btp-build-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}
.btp-build-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.btp-build-ideal {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  padding: 14px 18px;
  background: rgba(16, 185, 129, .06);
  border-left: 3px solid var(--g1);
  border-radius: 0 10px 10px 0;
}
.btp-build-ideal strong {
  color: var(--title);
  font-weight: 700;
}

/* ---------- 3. BTP EXPERTISE — 6 CARDS ---------- */
.btp-expertise {
  padding: 96px 0;
  background: #f6fbf8;
  position: relative;
  overflow: hidden;
}
.btp-abstract-layered {
  position: absolute;
  top: 40px;
  right: -60px;
  width: 480px;
  height: 320px;
  opacity: .4;
  pointer-events: none;
}
.btp-expertise-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.btp-expertise-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.btp-expertise-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -25px rgba(16, 185, 129, .35);
  border-color: rgba(16, 185, 129, .3);
}
.btp-expertise-head {
  background: linear-gradient(135deg, #1a4a5e 0%, #0f3d2a 100%);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.btp-expertise-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 42px;
  height: 3px;
  background: var(--g1);
}
.btp-expertise-head h4 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}
.btp-expertise-body {
  padding: 16px 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btp-expertise-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--g2);
  line-height: 1.5;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(16, 185, 129, .25);
}
.btp-expertise-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.btp-expertise-body ul li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.btp-expertise-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g1);
}

/* ---------- 4. C-SUITES FLOW ---------- */
.btp-csuite {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.btp-abstract-dots {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 300px;
  opacity: .5;
  pointer-events: none;
}
.btp-csuite-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.btp-csuite-card {
  background: linear-gradient(135deg, #167244 0%, #0b2519 100%);
  border-radius: 20px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease;
}
.btp-csuite-card::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(125, 226, 176, .18) 0%,
    transparent 70%);
  pointer-events: none;
}
.btp-csuite-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(16, 185, 129, .55);
}
.btp-csuite-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(125, 226, 176, .16);
  border: 1px solid rgba(125, 226, 176, .32);
  color: var(--g3);
  display: grid;
  place-items: center;
  transition: all .4s ease;
  position: relative;
  z-index: 2;
}
.btp-csuite-icon svg { width: 24px; height: 24px; }
.btp-csuite-card:hover .btp-csuite-icon {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 26px -10px rgba(16, 185, 129, .7);
}
.btp-csuite-card h4 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  z-index: 2;
}
.btp-csuite-card p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 2;
}
.btp-csuite-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g3);
  opacity: .55;
  transition: opacity .3s ease;
}
.btp-csuite-flow:hover .btp-csuite-arrow { opacity: .85; }

/* ---------- 5. WHY ADVAIT — 6 CARDS 3×2 ---------- */
.btp-why {
  padding: 96px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.btp-benefits-6 {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Large tablet --- */
@media (max-width: 1100px) {
  .btp-expertise-grid { grid-template-columns: repeat(3, 1fr); }
  .btp-csuite-flow {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .btp-csuite-arrow { display: none; }
  .btp-benefits-6 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet portrait --- */
@media (max-width: 992px) {
  .btp-intro,
  .btp-build,
  .btp-expertise,
  .btp-csuite,
  .btp-why { padding: 70px 0; }

  .btp-build-grid { grid-template-columns: 1fr; gap: 22px; }
  .btp-build-image { aspect-ratio: 16 / 9; }
  .btp-build-body h3 { font-size: 20px; }

  .btp-expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .btp-expertise-head h4 { font-size: 14px; }
  .btp-expertise-body ul li { font-size: 13.5px; }

  .btp-abstract { width: 220px; height: 180px; opacity: .35; }
  .btp-abstract-layered { width: 340px; height: 240px; opacity: .35; right: -40px; }
  .btp-abstract-dots { width: 70%; height: 240px; opacity: .4; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .btp-intro,
  .btp-build,
  .btp-expertise,
  .btp-csuite,
  .btp-why { padding: 60px 0; }

  .btp-intro .about-who-image.is-empty { min-height: 240px; border-radius: 16px; }

  /* Build cards */
  .btp-build-grid { gap: 18px; }
  .btp-build-card { border-radius: 16px; }
  .btp-build-image { aspect-ratio: 4 / 3; }
  .btp-build-badge { width: 44px; height: 44px; border-radius: 12px; }
  .btp-build-badge svg { width: 20px; height: 20px; }
  .btp-build-body { padding: 24px 22px 22px; gap: 14px; }
  .btp-build-body h3 { font-size: 18px; padding-bottom: 12px; }
  .btp-build-list li { font-size: 14px; padding-left: 22px; }
  .btp-build-ideal { font-size: 13.5px; padding: 12px 14px; }

  /* Expertise */
  .btp-expertise-grid { grid-template-columns: 1fr; gap: 14px; }
  .btp-expertise-card { border-radius: 14px; }
  .btp-expertise-head { padding: 14px 16px 12px; }
  .btp-expertise-head h4 { font-size: 14px; }
  .btp-expertise-body { padding: 14px 16px 16px; }
  .btp-expertise-tag { font-size: 12px; }
  .btp-expertise-body ul li { font-size: 13.5px; }

  /* C-Suites */
  .btp-csuite-flow { grid-template-columns: 1fr; gap: 14px; }
  .btp-csuite-card { padding: 24px 22px; border-radius: 16px; gap: 14px; }
  .btp-csuite-icon { width: 48px; height: 48px; border-radius: 13px; }
  .btp-csuite-icon svg { width: 22px; height: 22px; }
  .btp-csuite-card h4 { font-size: 14.5px; }
  .btp-csuite-card p { font-size: 13px; }

  /* Why Advait */
  .btp-benefits-6 { grid-template-columns: 1fr; }

  /* Hide abstracts on mobile */
  .btp-abstract,
  .btp-abstract-layered,
  .btp-abstract-dots { display: none; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
  .btp-build-body { padding: 20px 18px; }
  .btp-csuite-card { padding: 20px 18px; }
  .btp-expertise-head h4 { font-size: 13px; }
  .btp-expertise-body ul li { font-size: 12.5px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .btp-build-card,
  .btp-build-image img,
  .btp-build-badge,
  .btp-expertise-card,
  .btp-csuite-card,
  .btp-csuite-icon { transition: none !important; }
}